body {
    background: #f5f5f5;
}
.hidden_components {
    width: 0;
    height: 0;
}

.hidden_components>* {
    display: none;
}

.edit_parts {
    padding: 10px;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: #ffffff;
}

.edit_parts>form>div {
    float: left;
    margin-right: 5px;
}

.edit_parts>form>div:last-child {
    margin-right: 0;
}

.edit_parts input,
.edit_parts textarea,
.edit_parts select {
    height: 26px;
    color: #000;
}
.edit_parts select {
    max-width: 160px;
}

.edit_parts input[data-ce-role="text"] {
    width: 300px;
}

.color_palet {
    position: relative;
}

.color_palet ul {
    position: absolute;
    display: none;
    list-style: none;
    width: 300px;
    left: 0;
    margin: 0;
    top: 30px;
    background: #fff;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 6px #666;
    z-index: 1000;
}

.color_palet span,
.color_palet li {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 1px solid #333;
    cursor: pointer;
    text-indent: -9999999px;
    margin: 0 2px 0 0;
}

.color_palet li {
    margin: 0 2px 4px 0;
}

div.viewBtnBoxObj {
    bottom: 340px !important;
}

div.viewBtnBoxObj div {
    cursor: pointer;
    text-align: center;
    float: left;
    margin-right: 20px;
}

div.viewBtnBoxObj div::before {
    content: attr(title);
    font-size: 16px;
    margin-bottom: 7px;
    display: block;
}

div.viewBtnBoxObj div span {
    /*
    display: block;
    background-color: #666666;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 4px;
    */
}

div.viewBtnBoxObj div.selected span {
    /*
    background-color: #23527c;
    */
}

div.viewBtnBoxObj div img {
    background: #fff;
    border: 1px solid #ddd;
    max-width: 150px;
    max-height: 150px;
    box-shadow: 0px 0px 2px #4848485c;
}

div.viewBtnBoxObj div.selected img {
    border-color: #23527c;
}

.modal .tile {
    width: 130px;
    height: 155px;
    padding: 10px;
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
    float: left;
    border: 1px solid #ccc;
    position: relative;
}

.modal .tile .tile-image {
    text-align: center;
}

.modal .tile .tile-image img {
    max-width: 120px;
    max-height: 120px;
    padding: 5px;
    text-align: center;
}

.modal .tile .tile-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    text-align: center;
}
.modal-header .close {
  font-size: 30px;
    padding: 8px;
}
.modal .modal-left {
  width:240px;
  float: left;
}
.modal .modal-right {
  width: calc(100% - 270px);
  float: right;
}
.cardImage {
    position: fixed;
    z-index: 100;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    background: #fff;
    border: 1px solid #ccc;
    padding: 50px;
    text-align: center;
}
.cardImage .Preview_box img {
    background: #fff;
    margin: 10px;
    max-width: 600px;
    max-height: 600px;
}

.pickr {
    float: right;
    margin: 0 5px 5px 0;
}

/*--------------------------
--------------------------
大越追記
--------------------------
--------------------------*/

/*--------共通-----------*/
.No-list {
    list-style: none;
}

/*------デザイン画面-----*/

.header {
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  min-width: 1176px;
}

.header .header-wrap.clearfix {
    margin: 0 auto;
    padding: 10px;
  width: 1200px;
}

.header p.Logo {
    display: inline-block;
    width: 270px;
    margin: 0;
}

.header .Utility-menu {
    float: right;
    font-size: 14px;
}
.header .Utility-menu ul {
display: inline-block;
margin-right: 12px;
}
.header .Utility-menu li {
    display: inline-block;
    padding: 0 5px;
    text-decoration: underline;
}

.header .Utility-menu li a {
    color: #f99700;
}

.container {
    width: 1200px;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}

.CardEditor-top {
    font-size: 16px;
    margin-top: 65px;
  width: 1200px;
}
  

.CardEditor-top>div {
    display: inline-block;
    float: left;
}

.CardEditor-top .card-type {
    width: 255px;
    font-size: 16px;
    margin: 18px 0 0;
}

.CardEditor-top .card-type p {
  margin: 0 6px 0 0;
    float: left;
}

.CardEditor-top .btn-group-end {
    float: right;
}


.panel,
.btn,
.alert,
.modal-content,
.nav-tabs>li>a,
.tooltip>.tooltip-inner {
    border-radius: 0;
    padding: 10px 20px;
}

.btn-group {
    margin-right: 4px;
}

.CardEditor-top.btn-group-config {
    margin-top: 17px;
}

.CardEditor-top .undo-btn-wrap button {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    color: #484848;
    border-radius: 0;
    width: 58px;
    height: 35px;
    padding: 0;
}

.CardEditor-top .undo-btn-wrap button:hover,
.CardEditor-top .atten-btn-wrap button:hover {
    opacity: 0.5;
}

.Utility-menu .btn-group-end {
    display: inline-block;
}
button.btn-designatten {
    background-color: #ffffff;
    border-color: #999999;
    /* background-image: url(../img/icon_atten.svg); */
    background-size: 21px;
    background-repeat: no-repeat;
    background-position: center 8px;
    width:208px;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 6px;
    /* height: 50px; */
    /* padding-top: 29px; */
    color: #484848;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.18) 1px 1px 3.5px 1px;
    height: 45px;
}

button.btn-success {
  color: #fff;
    background-color: #F15E0E;
    border-color: #F15E0E;
    width: 270px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.18) 1px 1px 3.5px 1px;
    padding: 6px;
    height: 45px;
}

.btn-group-end button.btn-success:active,
.btn-group-end button.btn-success:hover {
    background-color: #ffffff;
    border-color: #F15E0E;
    color: #F15E0E;
}

button:not(.btn-xs)>.fa:before,
button:not(.btn-xs)>.fas:before,
button:not(.btn-xs)>.far:before,
button:not(.btn-xs)>.fal:before,
button:not(.btn-xs)>.fab:before,
button:not(.btn-xs)>[class*="icon-"]:before {
    font-size: 2.1em;
}

.Contents {
    min-height: 620px;
   /*height: 620px;*/
    max-height: 880px;
}

.Contents .Side {
  width: 130px;
    min-width: 130px;
    margin: 17px 17px 0 0px;
  padding: 0;
}

.Contents .Side .navbar-nav>li {
    /* float: left;*/
    background-color: #ffffff;
    border: 1px solid #cccccc;
    height: 82px;
    color: #f99700;
    text-align: center;
    display: block;
    margin-bottom: 4px;
    margin-right: 4px;
    position: relative;
      width: 130px;
}

.Contents .Side .navbar-nav>li:hover,
.Contents .Side .navbar-nav>li.selected {
    border: 1px solid #f99700;
}

.Contents .Side .navbar-nav>li>a:hover,
.Contents .Side .navbar-nav>li.selected a {
    background-color: #f99700;
    color: #ffffff;
}

.navbar-nav>li>a {
    color: #f99700;
    font-weight: bold;
    letter-spacing: 0;
    padding-top: 55px;
    font-size: 11px;
  padding-bottom: 5px;
}

.navbar-nav>li>a:hover {
    color: #ffffff;
    background-color: #f99700 !;
}

.fa-font:before {
    content: "";
    width: 130px;
    height: 82px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/fa-font.svg);
    background-repeat: no-repeat;
    background-position: center 17px;
}

.selected .fa-font:before,
.fa-font:hover:before {
    background-image: url(../img/fa-font2.svg);
}

.fa-camera:before {
    content: "";
    width: 130px;
    height: 82px;
    position: absolute;
    top: 0px;
    left: 0;
    background-image: url(../img/fa-camera.svg);
    background-repeat: no-repeat;
    background-position: center 16px;
}

.selected .fa-camera:before,
.fa-camera:hover:before {
    background-image: url(../img/fa-camera2.svg);
}

.fa-stamp:before {
    content: "";
    width: 130px;
    height: 82px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/fa-stamp.svg);
    background-repeat: no-repeat;
    background-position: center 16px;
}

.selected .fa-stamp:before,
.fa-stamp:hover:before {
    background-image: url(../img/fa-stamp2.svg);
}

.fa-shape:before {
    content: "";
    width: 130px;
    height: 82px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/fa-shape.svg);
    background-repeat: no-repeat;
    background-position: center 16px;
}

.selected .fa-shape:before,
.fa-shape:hover:before {
    background-image: url(../img/fa-shape2.svg);
}

.fa-image:before {
    content: "";
    width: 130px;
    height: 82px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/fa-image.svg);
    background-repeat: no-repeat;
    background-position: center 16px;
}

.fa-image:hover:before,
.selected .fa-image:before {
    background-image: url(../img/fa-image2.svg);
}


.Contents .Side2 {
    min-width: 113px;
    margin-bottom: 30px;
    padding-left: 20px;
    margin: 20px 0 20px;
}

.element-edit {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    width: 153px;
    position: absolute !important;
    right: 0;
    left: 860px!important;
    top: 15px !important;
}

.element-edit-title {
    text-align: center;
    color: #f99700;
    font-size: 16px;
    font-weight: bold;
    padding: 5px 0px;
    border-bottom: 1px solid #DDDDDD;
}

.element-edit-list {
    padding: 13px 8px 8px;
    height: 550px;
    overflow-y: auto;
    position: relative;
}

.element-edit-list-item .img-box {
    position: relative;
    margin-bottom: 5px;
}
.element-edit-list-item .img-box.selected svg {
    border: 1px solid #f99700;
    background-color: rgba(249, 151, 0, 0.15);
}

.element-edit-list-item img {
    max-width: 73px;
    max-height: 73px;
}

.element-edit-list-item svg {
    border: 1px solid #ccc;
    padding: 6px;
    width: 73px;
    height: 73px;
    cursor:pointer;
    background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
                linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
    background-color: #eee;
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.element-edit-list-item div {
    position: absolute;
    font-size: 15px;
    cursor:pointer;
    color: #aaa;
}
.element-edit-list-item div:hover {
    color: #666;
}
.element-edit-list-item div.element-edit-lock {
    color: #d4be23;
}
.element-edit-list-item div:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.element-edit-next {
    display:none;
    top: 10px;
    left: 78px;
}

.element-edit-prev {
    display:none;
    top: 35px;
    left: 78px;
}

.element-edit-dust {
    top: 50px;
    left: 105px;
}
.element-edit-dust:before {
    content:"\f1f8";
}

.element-edit-copy {
    top: 28px;
    left: 105px;
}
.element-edit-copy:before {
    content:"\f0c5";
}

.element-edit-lock {
    top: 6px;
    left: 105px;
}
.element-edit-lock:before {
    content:"\f023";
}

.element-edit-unlock {
    top: 6px;
    left: 105px;
}
.element-edit-unlock:before {
    content:"\f09c";
}

.element-edit-list-item .img-box:hover .element-edit-next,
.element-edit-list-item .img-box:hover .element-edit-prev {
  display:block;
}

.container-bottom {
    width: 1200px;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
    font-size: 14px;
}

.container-bottom .change-side-botton {
  width: 340px;
    /* float: left; */
    display: table-cell;
    text-align: left;
}

.container-bottom ul {
    list-style: none;
}

.container-bottom .side-image {
    width: 149px;
    height: 92px;
    background: #ffffff;
}

.container-bottom .change-side img {
    box-shadow: 0px 0px 2px #4848485c;
}

.container-bottom .change-side-botton>ul>li {
    display: inline-block;
    float: left;
    text-align: center;
    margin: 0 20px 0 0;
}

.container-bottom .editor-line-wrap {
    /* float: right; */
    /* margin-top: 20px; */
    display: table-cell;
    vertical-align: bottom;
}

.container-bottom .editor-line-wrap li {
    height: 32px;
}

.container-bottom .editor-line-wrap ul>li>div {
    position: relative;
}

.container-bottom .change-side span {
    font-size: 16px;
    margin-bottom: 7px;
    display: block;
}

div.line-discript+span {
    background: #ffffff;
    width: 71px;
    height: 31px;
    display: inline-block;
}

.container-bottom .editor-line-wrap .line-discript:before {
    content: "";
    width: 52px;
    height: 25px;
    position: absolute;
    top: 0;
    background-color: #ffffff;
    border: 1px dotted #FF0000;
}

.container-bottom .editor-line-wrap .line02:before {
    border: 1px solid #4A4A4A;
}

.container-bottom .editor-line-wrap .line03:before {
    border: 1px solid #9E9E9E;
}

.container-bottom .line-discript span {
    margin-left: 60px;
}


/*--------------------------
素材カテゴリメニュー
--------------------------*/
.category-menu-wrap {
    background-color: #7F7F7F;
    clear: both;
    margin-right: 4px;
    padding: 15px;
    font-size: 14px;
}

.word-search input[type="text"] {
    width: -webkit-fill-available;
    padding: 4px 3px 4px 26px;
    background-image: url(../img/search.svg);
    background-color: #ffffff;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 4px center;
  width: 100%;
}

.category-menu-wrap ul {
    list-style: none;
    padding: 0;
    color: #ffffff;
    margin-top: 5px;
}

.category-menu {
    margin-top: 5px;
}

.category-sub-menu li,
.category-menu {
    border-bottom: 1px solid;
    padding: 7px 0 7px 6px;
    position: relative;
}

.category-menu-list>li .category-menu:after {
    content: "";
    position: absolute;
    display: block;
    margin: auto 0;
    top: 0;
    bottom: 8px;
    right: 8px;
    width: 12px;
    height: 12px;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.category-menu-list>li.category-menu-open .category-menu:after {
    top: 8px;
    bottom: 0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-bottom: none;
    border-right: none;
}

.category-menu-list .category-menu :last-child {
    border-bottom: none;
}

.category-menu:hover,
.category-sub-menu li:hover {
    background-color: #F8960C;
}

.category-menu-wrap ul li a {
    color: #ffffff;
}

.category-menu-wrap ul li a:hover {
    text-decoration: none;
}

ul.category-sub-menu {
    margin-left: 21px;
    display: none;
}

/*
.category-menu-list>li:hover .category-sub-menu {
    display: block;
}
*/
.category-menu-list>li>.category-menu {
    cursor:pointer;
}
.category-menu-list>li.category-menu-open .category-sub-menu {
    display: block;
}
.category-menu-list>li .category-sub-menu li {
    position:relative;
}
.category-menu-list>li .category-sub-menu li .preview-image {
    display: none;
}
.category-menu-list>li .category-sub-menu li:hover .preview-image {
    position: absolute;
    display: block;
    left: 210px;
    top: 0;
    z-index: 100;
    background: rgba(0,0,0,0.3);
    padding: 20px;
    text-align: center;
}
.category-menu-list>li .category-sub-menu li:hover .preview-image img {
  max-width: 130px;
  max-height: 130px;
}

/*--------------------------
モーダルタイトル
--------------------------*/
h2.modal-title {
    color: #484848;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-size: 25px;
    border-bottom: 1px solid;
    text-shadow: none;
    margin-bottom: 10px;
}
.Title02 {
    padding: 4px 10px 4px 10px;
    margin-bottom: 15px;
    background-color: #ffefc7;
    font-size: 18px;
    clear: both;
    margin-top: 5px;
    font-weight: bold;
  text-shadow:none;
  color:#333;
}
.Title07 {
    padding-left: 13px;
    position: relative;
    margin-bottom: 10px;
    font-size:16px;
    font-weight: bold;
  text-shadow:none;
  color::#333;
}
.Title07:before {
    content: "";
    position: absolute;
    border: 8px solid transparent;
    border-left: 8px solid #f99700;
    top: 5px;
    left: 0;
    width: 0;
    height: 0;

}
h4 {
    font-size: 100%;
    font-weight: bold;
    text-shadow: none;
    color: #333;
    padding: 4px 0;
}
/*--------------------------
クリップアート選択モーダル
--------------------------*/
.modal-lg {
    width: 1050px;
}

.modal-header {
    border-bottom: none;
    padding: 0;
}

.modal-content .categorypath {
    padding: 15px 20px 0px;
}

ul.categorypath-list {
    padding: 0;
    margin: 0;
}

ul.categorypath-list li {
    display: inline-block;
    padding: 0;
    font-size: 14px;
    position: relative;
    margin-right: 25px;
}

ul.categorypath-list li:after {
    content: "";
    position: absolute;
    display: block;
    margin: auto 0;
    top: 2px;
    bottom: 0;
    right: -14px;
    width: 10px;
    height: 10px;
    border-top: 1px solid;
    border-right: 1px solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

ul.categorypath-list li:last-child:after {
    display: none;
}

.modal .tile {
    width: 134px;
    height: 140px;
    margin-top: 8px;
    margin-right: 8px;
}

.modal .tile .tile-name {
    display: none;
}

.modal-body {
    padding: 0 0 15px;
}

.modal .popbox-pager {
    padding: 10px 20px 15px;
}

.modal .page-prev {
    float: left;
    margin: 10px 0;
    position: relative;
    left: 300px;
}

.modal .page-next {
    float: right;
    margin: 0;
    position: relative;
    right: 300px;
    top: -21px;
}

.modal .page-prev a {
    display: block;
    text-indent: -9999px;
    background-image: url(../img/page_arrow.svg);
    background-repeat: no-repeat;
    background-position: left center;
    height: 16px;
    width: 15px;
}

.modal .page-next a {
    display: block;
    text-indent: -9999px;
    background-image: url(../img/page_arrow.svg);
    background-repeat: no-repeat;
    background-position: right center;
    height: 16px;
    width: 15px;
}

.modal .page-prev a:hover,
.modal .page-next a:hover {
    background-image: url(../img/page_arrow2.svg);
}

.modal .page-nums {
    text-align: center;
}

.page-nums>div {
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    margin: 0 15px;
}

.page-nums>div>a {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    margin: 0 15px;
    color: #484848;
}

.page-nums>div>a:hover {
    color: #f99700;
    text-decoration: underline;
}

.page-nums>div.selected {
    text-decoration: underline;
    color: #f99700;
}
/*--------------------------
解像度・色・サイズ・の注意
--------------------------*/
.Bg_gray {
    padding: 10px;
    background: #F2F2F2;
}
.Bg_gray .Btn-wrap {
    margin-bottom: 10px;
}
.modal-body.modal_designaten.size_atten .Btn-wrap.Center {
    text-align: center;
}
/*--------------------------
プレビュー画面
--------------------------*/
.cardPreview{
    text-align:left;
    padding: 100px 10% 15px;
    border: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    overflow-y: scroll;

}

.cardImage .Fr {
    float: right;
    width: 49%;
}


.cardPreview_wrap {
    background-color: #eeeeee;
    float: left;
    width: 49%;
    padding: 30px 10px;
}

.cardImage .Preview_box img {
    background: #fff;
    margin: 10px;
    max-width: 100%;
    max-height: 540px;
    display: block;
    margin: 20px auto;
}



.title_side {
    font-size: 27px;
    font-weight: bold;
}

.cardPreview_img_wrap img{
    border: none;
    box-shadow: 1px 1px 3.5px 1px rgba(0,0,0,0.1);
    max-width: 544px;
    max-height: 544px;
    display: block;
}

.cardPreview_img_wrap img + img{
    margin-top:20px;
}

.cardPreview_atten_wrap {
    background-color: #FFECEC;
    padding: 15px;
    margin-bottom: 10px;
}

ul.preview_atten_ul {
    margin: 0;
    padding: 0;
}

.cardPreview .title_atten {
    color: #FF2B2B;
    font-weight: bold;
    text-align: center;
    font-size: 22px;
    margin-bottom: 6px;
}

li.preview_atten_list {
    background-image: url(/new_editor/img/atten_icon.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 6px 8px;
    margin-bottom: 7px;
    background-color: #ffffff;
    padding: 5px;
}

.cardPreview .attention {
    position: relative;
    font-weight: bold;
    font-size: 17px;
}

.preview_atten_cont {
    float: left;
    width: 78%;
    padding-left: 24px;
}

.atten_list_button {
    float: right;
}

.cardPreview button.atten_button {
    display: inline-block;
    color: #ffffff;
    background-color: #FF2B2B;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid;
    margin-top: 5px;
}

.cardPreview button.atten_button:hover {
    color: #FF2B2B;
    background-color: #ffffff;
    border: 1px solid #FF2B2B;
}

.cardPreview_atten02_wrap {
    font-size: 14px;
    border: 1px solid #CCCCCC;
    padding: 10px 15px;
    margin-bottom: 15px;
}

.atten02_list {
    margin-bottom: 15px;
}

.title_atten02 {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 2px;
}

.title_atten02:before {
    content:  "";
    width:  10px;
    height:  10px;
    display:  inline-block;
    background-color: #333;
    border-radius:50%;
    margin-bottom: 3px;
    margin-right: 5px;
}

.cardPreview_zure {
    background-color: #eeeeee;
    padding: 10px 15px;
}

.cardPreview_zure ul{
    margin: 0;
    padding: 0;
}

.Image_zure img {
    background: #fff;
    margin: 10px;
    max-width: 45%;
    max-height: 45%;
    box-shadow: 1px 1px 3.5px 1px rgba(0,0,0,0.1);
    margin: 0px 2px;
}

.cardPreview_zure .Image_zure img:hover {
    opacity:0.5;
  cursor:pointer;
}

.cardPreview_zure-pop {
  position:fixed;
  top:20%;
  left:20%;
  right:20%;
  border:1px solid #ccc;
  box-shadow: 1px 1px 3.5px 1px rgba(0,0,0,0.1);
  background:#FFFFFF;
  padding: 10px 15px;
  z-index: -1;
}
.cardPreview_zure-pop.front {
  z-index:1010;
}

.cardPreview_zure-pop.front p {
    font-size: 23px;
    font-weight: bold;
    color: #484848;
}

.cardPreview_zure-pop .pop-close{
  text-align:right;
  margin-bottom: 10px;
}
.cardPreview_zure-pop > p{
  text-align:center;
  color:#666;
  font-size: 14px;
}
.cardPreview_zure-pop ul {
  background-color: #eeeeee;
  padding: 20px 0;
}
.cardPreview_zure-pop ul li{
    text-align: center;
    margin-bottom: 10px;
}
.cardPreview_zure-pop .Image_zure{
    display: inline-block;
}
.cardPreview_zure-pop .Image_zure + .Image_zure{
    margin-left:10px;
}
.cardPreview_zure-pop .Image_zure img {
    max-width: 464px;
    max-height: 464px;
    display:inline-block;
}
.cardPreview_zure-pop .bx-wrapper {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow:none;
    border:none;
}
.cardPreview_zure-pop .bx-viewport {
    height:auto !important;
}
.cardPreview_zure-pop .bx-wrapper .bx-pager.bx-default-pager a {
  background: #aaa;
  margin: 0px 8px;
}
.cardPreview_zure-pop .bx-wrapper .bx-prev {
  background: url(../img/pre_prev.svg) 0 0 no-repeat;
  height: 40px;
}
.cardPreview_zure-pop .bx-wrapper .bx-next {
  background: url(../img/pre_next.svg) 0 0 no-repeat;
  height: 40px;
}
.cardPreview_zure-pop .bx-wrapper .bx-pager.bx-default-pager a.active,
.cardPreview_zure-pop .bx-wrapper .bx-pager.bx-default-pager a:focus,
.cardPreview_zure-pop .bx-wrapper .bx-pager.bx-default-pager a:hover {
  background:#f99700;
}
.cardPreview_zure li {
    float: left;
    width: 50%;
    text-align: center;
    margin-bottom: 10px;
}

span.zure_title {
    display: block;
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 10px;
}

.cardPreview_check_wrap,
.cardPreview_order_buton_wrap {
    margin: 0 auto;
    text-align: center;
}

.cardPreview_check_wrap{
    font-size: 16px;
    margin-bottom: 10px;
}

.cardPreview_check_wrap label {
    position: relative;
    cursor: pointer;
}

.cardPreview_check_wrap .confirm:before {
    position: absolute;
    z-index: 1;
    top: 1px;
    left: 2px;
    width: 11px;
    height: 7px;
    content: '';
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -webkit-transform: rotate(-45deg) scale(0, 0);
    transform: rotate(-45deg) scale(0, 0);
    border: 2px solid #f15e0e;
    border-top-style: none;
    border-right-style: none;
}

.cardPreview_check_wrap .confirm:checked:before {
    -webkit-transform: rotate(-45deg) scale(1, 1);
            transform: rotate(-45deg) scale(1, 1);
}
.cardPreview_check_wrap .confirm:after {
    position: absolute;
    top: -2px;
    left: 0;
    width: 15px;
    height: 15px;
    content: '';
    cursor: pointer;
    border: 1px solid #7d7d7d;
    background: #ffffff;
}

.cardPreview_check_wrap input[type=checkbox] {
    position: inherit;
    left: auto;
    height: auto;
    width: auto;
}

.cardPreview_order_buton_wrap button{
    display:inline-block;
    width:57%;
}

button.order_Main_buton{
    background-color: #F15E0E;
    color: #FFFFFF;
    margin: 0 0 20px;
    padding: 7px;
    font-size: 24px;
    font-weight: bold;
    border: 1px solid #F15E0E;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.1);
    transition: all 0.5s ease;
  width: 572px;
    max-width: 100%;
    background-image: url(/new_editor/img/icon_prev.svg);
    background-repeat: no-repeat;
    background-position: 420px center;
    padding-right: 50px;
    border-radius: 90px;
  display: block;
    margin: 0 auto 20px;
}
button.order_Main_buton:focus {
  outline:0;
}
button.order_Main_buton:hover {
    background-color: #ffffff;
    border-color: #F15E0E;
    color: #F15E0E;
  opacity:1!important;
}


button.order_Main_buton[disabled] {
    cursor: not-allowed;
    background-color: #ccc;
    border: 1px solid #ccc;
}

button.order_Main_buton[disabled]:hover {
    cursor: not-allowed;
    background-color: #ccc;
    border: 1px solid #ccc;
    color: #FFFFFF;
}

button.order_Sub_buton {
    background-color: #FFFFFF;
    color: #484848;
    margin: 0 0 11px;
    padding: 7px;
    font-size: 18px;
    border: 1px solid #484848;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.1);
    border-radius: 5px;
    display: inline-block;
    width: 280px;
    margin-right: 10px;
    background-image: url(/new_editor/img/save_star.svg);
    background-repeat: no-repeat;
    background-position: 27px center;
    border-radius: 30px;
    padding-left: 7px;
}


button.order_Sub_buton.back_btn{
  background-image: url(/new_editor/img/icon_back.svg);
    background-repeat: no-repeat;
    background-position: 23px center;
    padding-right: 0px;
    padding-left: 19px;
}

button.order_Sub_buton:last-child{
    margin-right: 0px;
}

.cardPreview_order_buton_wrap button:hover{
    opacity: 0.5;
}
.cardPreview_order_buton_wrap button.order_Main_buton[disabled]:hover{
    opacity: 1.0;
}
.tooltip {
/*
  margin-top:30px !important;
*/
}
div.layer {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.3);
  z-index:1000;
}

input[type=number] {
  width:50px;
}
input[type=number][step] {
  width:70px;
}

/*--------------------------
デザインの注意点
--------------------------*/
.modal_designaten {
  font-size:16px;
}

.designaten_top_linelist {
    background-image: url(/new_editor/img/modal_designaten/atten_design_line.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 513px;
    position: relative;
    overflow: visible;
  letter-spacing: 0;
}

.modal_designaten .line_name {
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    left: 215px;
    top: 108px;
}

.modal_designaten p.line_discript {
    position: absolute;
    font-size: 18px;
    left: 215px;
    top: 143px;
  width: 577px;
}

.modal_designaten .line_name:nth-of-type(2){
    top: 200px;
}

.modal_designaten p.line_discript:nth-of-type(2){
    top: 238px;
}

.modal_designaten .line_name:nth-of-type(3){
    top: 330px;
}

.modal_designaten p.line_discript:nth-of-type(3){
    top: 366px;
}

.modal_designaten .attenicon_btn {
    width: 22px;
}

.modal_designaten .line_title {
    background-color: #e6e6e6;
    font-size: 20px;
    font-weight: bold;
    padding: 5px 10px;
  margin-bottom: 10px;
}

.attenpoint01,
.attenpoint02,
.checkpoint01,
.checkpoint02 {
    margin: 30px auto;
    font-size: 26px;
    font-weight: bold;
}

.attenpoint01 {
    background-image: url(/new_editor/img/modal_designaten/atten_mark_color.svg);
    background-repeat: no-repeat;
    background-position: 1px 6px;
    background-size: 59px;
    padding-left: 71px;
    width: 636px;
}

.attenpoint02 {
    background-image: url(/new_editor/img/modal_designaten/atten_mark_color.svg);
    background-repeat: no-repeat;
    background-position: 1px 6px;
    background-size: 59px;
    padding-left: 71px;
    width: 545px;
}

.modal_designaten .checkpoint01 {
    background-image: url(/new_editor/img/modal_designaten/check_point.svg);
    background-repeat: no-repeat;
    background-position: 1px 6px;
    background-size: 91px;
    padding-left: 96px;
    width: 850px;
    height: 67px;
}

.modal_designaten .checkpoint02{
    background-image: url(/new_editor/img/modal_designaten/check_point.svg);
    background-repeat: no-repeat;
    background-position: 1px 6px;
    background-size: 91px;
    padding-left: 96px;
    width: 850px;
    height: 67px;
}

.modal_designaten .data_print {
    background-image: url(/new_editor/img/modal_designaten/down_yajirushi.svg);
    height: 92px;
    background-repeat: no-repeat;
    background-position: center;
}

.attenpoint01 p.small_point,
.attenpoint02 p.small_point,
.checkpoint01 p.small_point,
.checkpoint02 p.small_point {
    margin: 0;
    font-size: 19px;
}

.modal_designaten .Center img {
    display: block;
    margin: 0 auto 20px;
}

/*--------------------------
デザインタイトル
--------------------------*/
div#modal_designname {
    width: 537px;
    margin: 30px auto;
    color: #484848;
    font-size: 16px;
}

div#modal_designname .modal-body {
    overflow-y: hidden;
}

.designname_content {
    width: 470px;
    margin: 0px auto 20px;
}

.modal_designname_tiele {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.designname_content table {
  width: 100%;
}

.designname_content table td{
  padding:0px 0px 10px;
}

.designname_content table td.list_title {
    width: 20%;
}

.designname_content table td input[type="text"] {
    width: 100%;
  /*-  background: #F2F2F2; -*/
  padding: 5px;
}

.text_End {
    text-align: end;
    font-size: 12px;
    text-decoration: underline;
}

#modal_designname .order_btn_wrap {
    text-align: center;
  margin: 25px 0
}

#modal_designname .order_btn_wrap_login_pass {
    text-align: center;
  margin: 0 0 16px 0;
}


#modal_designname .order_btn_wrap a.order_Btn_check {
    background-image: url(/img/common/btn_check.svg);
    background-repeat: no-repeat;
    background-position: 17px 11px;
    padding-left: 18px;
}
.modal-body .select-body-Btn-wrap.Btn-wrap {
    margin: 10px auto 24px;
}
.select-body-Btn-wrap.Btn-wrap + p {
    text-align: left;
}
.modal a.order_Btn {
    background-color: #F05B12;
    border: 2px solid #F05B12;
    color: #ffffff;
    border-radius: 30px;
    width: 218px;
    display: inline-block;
    padding: 6px 10px 6px 10px;
  font-size: 18px;
    font-weight: bold;
  box-shadow: rgba(0, 0, 0, 0.18) 1px 1px 3.5px 1px;
  cursor:pointer;
}
a.uploadatten {
    background-color: #ffffff;
    border: 1px solid #999999;
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center 8px;
    font-size: 14px;
    font-weight: bold;
    color: #484848;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.18) 1px 1px 3.5px 1px;
    display: inline-block;
    padding: 10px 40px;
}
.modal a.order_Btn2 {
    background-color: #FFFFFF;
    border: 2px solid #F05B12;
    color: #F05B12;
    border-radius: 30px;
    width: 218px;
    display: inline-block;
    padding: 6px 10px 6px 10px;
  font-size: 18px;
    font-weight: bold;
  box-shadow: rgba(0, 0, 0, 0.18) 1px 1px 3.5px 1px;
  cursor:pointer
}

.order_btn_wrap a#login {
    background-image: url(/img/common/btn_login.svg);
    background-repeat: no-repeat;
    background-position: 15px 5px;
  padding-left: 17px;
}

.order_btn_wrap a#new_account {
    background-image: url(/img/common/btn_newaccount.svg);
    background-repeat: no-repeat;
    background-position: 21px 6px;
  padding-left: 17px;
}

.modal a:hover{
  opacity:0.5;
  text-decoration:none;
  cursor : pointer;
}

.Utility-menu ul li:first-child {
    display: none;
}

.swal-overlay--show-modal .swal-modal {
  width: 80%;
}
.swal-overlay--show-modal .swal-modal.swal-modal-narrow {
  max-width: 380px;
}