.contents{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.app-content {
    -moz-transition: padding-left 263ms cubic-bezier(.4,0,.2,1);
    -o-transition: padding-left 263ms cubic-bezier(.4,0,.2,1);
    -webkit-transition: padding-left 263ms cubic-bezier(.4,0,.2,1);
    transition: padding-left 263ms cubic-bezier(.4,0,.2,1);
    padding-right: 20px!important;
    padding-top: 95px!important;
}
.inli_bc{
    display: inline-block;
}
.po_re{
    position: relative;
}
.p_left300{
    padding-left: 300px;
}
/*スライダー装飾*/
input[type=range],
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    background:#bdbdbd;
    height:1.8px;
    width:266px;
    border-radius:8px;
    margin: 0px;
/*    opacity: 0;*/
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    background:#00bcd4;
    height:12px;
    width:12px;
    border-radius:50%;
}
input[type=range]::-ms-tooltip{
    display:none;
}

input[type=range]::-moz-range-track{
    height:0;
}

input[type=range]::-moz-range-thumb{
    background:#fff;
    height:5px;
    width:5px;
    border:none;
    border-radius:50%;
}
input[type=range]:focus {
    outline: 0;
    border-color: orange;
}
/*
.back_bar {
    background:#bdbdbd;
    height:1.8px;
    width:266px;
    border-radius:8px;
    position: absolute;
    top: 15px;
    margin: 0px;
}
.yen {
    -webkit-appearance: none;
    background: #00bcd4;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    float: right;
    margin-top: -5px;
    margin-right: -5px;
}*/
/*  .range span{
    background:#00bcd4;
    height:12px;
    width:12px;
    border-radius:50%;
    position: absolute;
    top: -5px;
    margin: 0px;
  }*/
.slide_new_ber1{
    background: rgb(0, 188, 212);
    height: 1.8px;
    position: absolute;
    top: 15px;
    width: 0;
}

.slide_new_ber2{
    background: rgb(0, 188, 212);
    height: 1.8px;
    position: absolute;
    top: 15px;
    width: 0;
}

.slide_new_ber3{
    background: rgb(0, 188, 212);
    height: 1.8px;
    position: absolute;
    top: 15px;
    width: 0;
}

select {
    -webkit-appearance: none;
    border-radius: 0;
    background-color: #fff;
    background-image: url(./../img/select_icon_03.png);
    background-repeat: no-repeat;
    background-size: 25px 20px;
    background-position: right 5px center;
}

/*編集メニュー用ヘッダー*/
.edit_menu{
    color: rgba(0, 0, 0, 0.87);
    background-color: rgb(255, 255, 255);
    transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px, rgba(0, 0, 0, 0.23) 0px 3px 10px;
    border-radius: 0px;
    height: 100%;
    width: 300px;
    position: fixed;
    z-index: 1300;
    left: 0px;
    top: 0px;
    transform: translate(0px, 0px);
    overflow: auto;
}

.edit_top_ber{
    background-color: rgb(0, 188, 212);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    z-index: 1100;
    width: 100%;
    display: flex;
    /*padding-right: 24px;*/
}

.edit_ber{
    margin: 0px;
    padding-top: 0px;
    font-size: 24px;
    color: rgb(255, 255, 255);
    height: 50px;
}

/*編集メニュー＿テキスト頭文字アイコン*/
.edit_text_name_column{
    height: auto;
    min-height: 50px;
    max-height: 116px;
    overflow: auto;
    padding: 5px 0px;
    white-space: nowrap;
}

.text_initial{
    margin: 2px 3px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    border-radius: 100px;
    border: 1px solid rgb(0, 188, 212);
    vertical-align: top;
    z-index: 100;
    background: rgb(255, 255, 255);
    color: rgb(0, 188, 212);
    overflow: hidden;
}


/*編集メニュー＿背景色変更欄*/

.bac_color_edit{
    border: 10px;
    padding: 0px;
    position: relative;
    height: 36px;
    line-height: 36px;
    width: 100%;
    border-radius: 2px;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    background-color: rgb(255, 64, 129);
}
.edit_bac_color_column div span{
    position: relative;
    opacity: 1;
    font-size: 14px;
    letter-spacing: 0px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0px;
    user-select: none;
    padding-left: 8px;
    padding-right: 16px;
    color: rgb(255, 255, 255);
}

.edit_bac_color_column div img{
    position: absolute;
    left: 80px;
    top: 3px;
}


/*編集メニュー＿要素名表示欄*/
.edit_element_column{
    background-color: rgb(0, 188, 212);
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    z-index: 1100;
    width: 84%;
    padding-left: 24px;
    padding-right: 24px;
}

.edit_element_column h1{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0px;
    padding-top: 0px;
    letter-spacing: 0px;
    font-size: 24px;
    font-weight: 400;
    color: rgb(255, 255, 255);
    height: 50px;
    line-height: 50px;
    flex: 1 1 0%;
}

div.color {
    display: inline-block;
    margin: 11px 4px 3px;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    vertical-align: top;
    text-align: center;
}
.color_dis {
    display: inline-block;
    margin: 11px 4px 3px;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    vertical-align: top;
    text-align: center;
}
.color span{
    font-size: 11px;
    color: rgb(0, 0, 0);
}
.color_dis span{
    font-size: 11px;
    color: rgb(0, 0, 0);
}

/*編集メニュ_テキスト入力項目*/
.edit_input_box{
    font-size: 16px;
    line-height: 24px;
    width: 256px;
    height: 48px;
    display: inline-block;
    position: relative;
    background-color: transparent; font-family: Roboto, sans-serif;
    transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.edit_input_box input {
    padding: 0px;
    position: relative;
    width: 100%;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0.87);
    cursor: inherit;
    font: inherit;
    height: 100%;
}
.edit_input_box hr {
    border-top: none rgb(224, 224, 224);
    bottom: 8px;
    margin: 0px;
    position: absolute;
    width: 100%;
}

.edit_text{
    position: absolute;
    opacity: 0;
    color: rgba(0, 0, 0, 0.3);
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    bottom: 12px;
}
/*編集メニュー_フォント選択*/
.edit_font_select{
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    border-radius: 2px;
    display: inline-block;
    min-width: 88px;
}

.edit_font_select button {
    border: 10px;
    box-sizing: border-box;
    display: inline-block;
    font-family: Roboto, sans-serif;
    padding: 0px;
    height: 36px;
    line-height: 36px;
    width: 100%;
    border-radius: 2px;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    background-color: rgb(164, 198, 57);
    text-align: center;
}

.edit_font_select span {
    font-size: 14px;
    text-transform: uppercase;
    margin: 0px;
    user-select: none;
    padding-left: 16px;
    padding-right: 16px;
    color: rgba(0, 0, 0, 0.87);
}
/*編集メニュー__チェックボックス*/
.edit_checkbox{
    cursor: pointer;
    position: relative;
    overflow: visible;
    display: table;
    height: auto;
    width: 10%;
}

.edit_checkbox input{
    position: absolute;
    cursor: inherit;
    pointer-events: all;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    left: 0px;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

.edit_checkbox div{
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    float: left;
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 24px;
    margin-right: 16px;
    margin-left: 0px;
    height: 24px;
}
.edit_checkbox div.verdical_off {
    display:none;
}

.edit_checkbox label {
    float: left;
    position: relative;
    display: block;
    width: calc(100% - 60px);
    line-height: 24px;
    color: rgba(0, 0, 0, 0.87);
    font-family: Roboto, sans-serif;
}

/*スライド入力1*/
.slide_reset{
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    display: inline-block;
    min-width: 88px;
    margin: 10px;
}

.slide_reset button {
    border: 10px;
    padding: 0px;
    height: 36px;
    line-height: 36px;
    width: 100%;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    background-color: rgb(0, 188, 212);
}

.slide_reset button div{
    height: 36px;
    border-radius: 2px;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    top: 0px;
}

.slide_reset button div span{
    position: relative;
    opacity: 1;
    font-size: 14px;
    letter-spacing: 0px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0px;
    user-select: none;
    padding-left: 16px;
    padding-right: 16px;
    color: rgb(255, 255, 255);
}

.edit_border_thin{
    width: 50px;
    display: inline-block;
    font-size: 10px;
}

.edit_border_thick{
    width: 50px;
    display: inline-block;
    font-size: 10px;
    float: right;
}

.slide_input_1{
    width: 100%;
    display: inline-block;
    margin-top: -10px;
    vertical-align: top;
}

/*スライド入力２*/
.slide_input_2{
    width: 100%;
    display: inline-block;
    margin-top: -10px;
    vertical-align: top;
}


/*スライド入力3*/
.slide_input_3{
    width: 100%;
    display: inline-block;
    margin-top: -10px;
    vertical-align: top;
}

/*各アイコン*/
.inli_bc span {
    font-size: 10px;
    position: absolute;
    bottom: -7px;
    left: 5px;
    width: 40px;
    font-weight: bold;
}

/*テンプレート選択*/
.select_template{
    margin-left: 5px;
}

.tem_select_box select{
    height: 30px;
    width: 63%;
    padding-left: 5px;
}

.tem_select_box button{
    margin-left: 5px;
    border: 10px;
    padding: 0px;
    height: 30px;
    line-height: 30px;
    width: 30%;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    background-color: rgb(0, 188, 212);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
}

.tem_select_box button span{
    position: relative;
    opacity: 1;
    font-size: 14px;
    letter-spacing: 0px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0px;
    user-select: none;
    padding-left: 16px;
    padding-right: 16px;
    color: rgb(255, 255, 255);
}



/*メインコンテンツここから*/

.app-bar {
    -moz-transition: left 263ms cubic-bezier(.4,0,.2,1);
    -o-transition: left 263ms cubic-bezier(.4,0,.2,1);
    -webkit-transition: left 263ms cubic-bezier(.4,0,.2,1);
    transition: left 263ms cubic-bezier(.4,0,.2,1);
    left: 0;
    width: auto!important;
    right: 0!important;
    position: fixed!important;
}

.app-bar.main_contents_head{
    background-color: rgb(0, 188, 212);
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    z-index: 1100;
    display: flex;
    padding-left: 24px;
    padding-right: 24px;
    left: 300px;
}

/*メニューアイコン*/
.menu_icon{
    margin-top: 1px;
    margin-right: 8px;
    margin-left: -16px;
}
.menu_icon button {
    border: 10px;
    padding: 12px;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    height: 48px;
    background: none;
}
.menu_icon button:focus {
    outline: 0;
    border-color: orange;
}

/*ファイルタイトル*/
.file_title{
    margin: 0px;
    padding-top: 0px;
    font-size: 24px;
    color: rgb(255, 255, 255);
    height: 50px;
    line-height: 50px;
    font-weight: 400;
}

/*メイン用保存ボタン*/
.save_button_box{
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    display: inline-block;
    min-width: 88px;
    z-index: 100;
}

.save_button_box button {
    border: 10px;
    display: inline-block;
    font-size: inherit;
    height: 36px;
    line-height: 36px;
    width: 100%;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    background-color: rgb(255, 64, 129);
}

.save_button_box button span{
    font-size: 14px;
    padding-left: 16px;
    padding-right: 16px;
    color: rgb(255, 255, 255);
}

.help_button{
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    color: rgb(255, 255, 255);
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}


.main_icon_box div button{
    border: 10px;
    padding: 24px;
    position: relative;
    width: 96px;
    height: 96px;
    background: none;
}

.main_icon_box div button span{
    color: rgb(0, 188, 212);
    font-size: 10px;
    position: absolute;
    bottom: 15px;
    left: 27px;
    font-weight: bold;
}

.main_icon_box div button span.sp_size{
    width: 50px;
}

.main_icon_box div button span.po2{
    bottom: 12px;
    left: 28px;
    line-height: 1;
}


/*デザインボックス*/
.design_box{
    margin-top: 20px;
    width: 830px;
    height: 600px;
    border: 1px solid #999;
    transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    transform: translate(265px, 0px);
}

.design_text_box{
    /*	width:27px;
        height: 390px;*/
    /* margin: 43px 0px 0px 50px;*/
    position: relative;
}
.design_text_box.active {
    border: 3px solid red;
}
.design_text_box .edit_img {
	display: none;
}
.design_text_box.active  .edit_img{
	display: block;
}
.design_text_box img.i1{
    position: absolute;
    top: -30px;
    left: -18px;
}
.design_text_box img.i2{
    position: absolute;
    top: -32px;
    right: -16px;

}
.design_text_box img.i3{
    position: absolute;
    bottom: -36px;
    left: -16px;
}
.design_text_box img.i4{
    position: absolute;
    bottom: -33px;
    right: -16px;
}
.design_text_box img.i5{
    position: absolute;
    bottom: -33px;
    right: -16px;
}

.design_text_box h1{
    font-family: "Hiragino Kaku Gothic Pro W6", sans-serif;
    font-size: 26px;
    line-height: 1.1;
}

/*イラスト追加のデフォルト*/
.design_box #illustbox{
	width: 128px;
    height: auto;
}

.design_box #illustbox img{
	width:100%;
	height:auto;
}

.text_initial.choice{
    background: rgb(0, 188, 212);
    color: rgb(255, 255, 255);
}
.sum_test {
    display: none;
}
.sum_test.s_active {
    display: block;
}
.design_p_box {
    font-size: 43.4444px;
    white-space: nowrap;
    width: auto;
    display: inline-block;
}
.design_img_box img{
    width: 128px;
}