@charset "utf-8";
/* CSS Document */

/*general*/
html,body{
	-webkit-overflow-scrolling: touch;
}
#loading{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -64px;
	margin-left: -64px;
}
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 100000;
}
body {
	font-family: 'Helvetica Neue',Helvetica,Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
	margin:0;
	padding:0;
	font-size:14px;
	color:#171717;
    letter-spacing: 0.1em;
}
a {
    text-decoration:none;
    color:#111;
}
a:hover {
    text-decoration:underline;
    color:#00f;
}
a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

img {border:none;}
h1 {
    font-size:100%;
    margin:0;
    padding:0;
    font-weight:normal;
}
h2 {
    color:#61bcff;
	font-size:300%;
	font-weight:normal;
	padding:1% 0 1% 1%;
	clear:both;
	box-sizing: border-box;
    margin: 0;
}
h3 {
	margin:0;
	padding: 1% 0 1% 2%;
	font-size:180%;
	font-weight:normal;
}
h4{margin: 1% 0 1% 3%;}

/*main wrap*/
#content {
	width:100%;
	max-width: 100%;
	margin:0 auto;
	background-color: #fff;
}
.default_prgrph{margin: 1% 2%;}
.list_none{list-style: none;}

/*header*/
.head_main{
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}
.logo{
	flex-basis:40%;
	height: auto;
}
.head_my_btn_wrap{
	flex-basis: 20%;
}
.head_my_btn{
	width: 50%;
	margin: 0 auto;
	background: #ff6600;
	text-align: center;
}
.head_my_btn a{
	display: block;
	width: 100%;
	padding: 10% 0;
	color: #fff;
	font-size: 120%;
	font-weight: bold;
}
.head_my_btn a:hover{
	text-decoration:none;
	opacity: 0.6;
}
.head_lang_sel{
	flex-basis: 5%;
    align-self: start;
    margin: 0 0 0 35%;
}
.Gnavi ul{
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.Gnavi ul li{
	display: flex;
	flex-basis: 20%;
	justify-content: space-around;
	align-items: center;
	background: #929292;
	border-right: 1px solid #fff;
}
.Gnavi ul li:last-child{border: none;}
.Gnavi ul li a{
	display: block;
	width: 100%;
	padding: 2% 0;
	text-align: center;
	color: #fff;
	font-size: 120%;
	font-weight: bold;
}
.Gnavi ul li a:hover{
	text-decoration:none;
	opacity: 0.6;
}

/*footer*/
.footer ul{
	display: flex;
	margin: 0;
	padding: 0;
	justify-content: space-around;
	list-style: none;
}
.footer ul li{
	display: flex;
	flex-basis: 25%;
	justify-content: space-around;
	align-items: center;
	background: #929292;
}
.footer ul li a{
	display: block;
	padding: 2% 0;
	text-align: center;
	color: #fff;
	font-size: 120%;
	font-weight: bold;
}
.footer ul li a:hover{
	text-decoration:none;
	opacity: 0.6;
}
.copyright{
	display: block;
	padding: 5% 0;
	text-align: center;
	background: #929292;
	color: #fff;
}
@media only screen and (max-width: 1099px){
	h2 {font-size: 6vw;}
	.logo{
		width:55%;
		padding: 0 2%;
	}
	.head_my_btn_wrap{
		width: 43%;
		margin:  2% 0;
	}
	.head_my_btn{width: 90%;}
	.head_my_btn a{font-size: 100%;}
	.head_lang_sel{margin: 0;}
}



/*****************************************************/
/* home */
/*****************************************************/
#home_recent_img{
	width: 96%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.home_recent_imgs{
	width: 17%;
    border: 1px solid;
    border-radius: 3%;
    box-sizing: border-box;
	word-break: break-all;
}
.home_recent_imgs a{
    padding: 3%;
    width: 94%;
    height: 100%;
    display: block;
}
.home_recent_imgs a:hover{
	text-decoration:none;
	color: inherit;
}
.home_recent_imgs img{width: 100%;}
.home_para01{
    display: flex;
    align-items: center;
	margin: 1% 4%;
    padding: 0 3% 3% 3%;
}
.home_para01 img{width: 20%;}
.home_para01 p{
    width: 50%;
    padding: 5%;
    font-size: 120%;
}
.homeViewMore{
    display: block;
    width: 8%;
    border-radius: 5px;
    background: #59baff;
    color: #fff;
    padding: 10px 10px;
    font-size: 120%;
    margin: 3% 0 3% 90%;
    text-align: center;
}
@media only screen and (max-width:1099px){
	.home_recent_imgs{
		width: 94%;
		margin: 3%;
		padding: 4%;
	}
	.home_para01 img{width: 40%;}
    .homeViewMore{
        margin: 5% 0 5% 74%;
        width: 20%;
    }
}



/*****************************************************/
/* usage */
/*****************************************************/

/* introduce */
.usage_para01{
    align-items: center;
    margin: 1% 0;
    padding: 0 3% 1% 3%;
    font-size: 120%;
}

/* tools */
.tools_para01 ul{
    display: flex;
    list-style: none;
    align-items: center;
    padding: 0 3% 1% 3%;
    font-size: 120%;
}
.tools_para01 ul li:first-child{
    width: 10%;
    text-align: center;
    margin: 0 1%;
    word-break: break-word;
}
.tools_para01 ul li:last-child{
    width: 60%;
}
.tools_para01 ul li img{
    display: block;
    width: 96%;
    margin: 2%;
    padding: 2%;
/*    background: #b1ddff;*/
    background: #fff;
    border-radius: 10%;
    box-shadow: 0 3px 2px rgb(0 0 0 / 20%);
    border: 1px solid #4c4b4c;
    box-sizing: border-box;
}
.tools_para01 ul li span{
    display: block;
}

@media only screen and (max-width:1099px){
    .usage_para01 img{
        width: 70%;
        margin: 0 auto;
    }
    .tools_para01 ul{
        padding: 0 3% 1% 0;
    }
    .tools_para01 ul li:first-child {
        width: 25%;
        margin: 0 2% 0 0;
    }
    .tools_para01 ul li img{
        width: 80%;
        margin: 0 9%;
    }
    .tools_para01 ul li:last-child {
        width: 75%;
    }
}



/*****************************************************/
/* gallary */
/*****************************************************/
#gallary_recent_img{
	width: 96%;
}
.gallary_imgs{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 2% 0;
}
.gallary_recent_imgs{
	width: 17%;
    padding: 1%;
    border: 1px solid;
    border-radius: 3%;
    box-sizing: border-box;
	word-break: break-all;
}
.gallary_recent_imgs img{width: 100%;}
.gallary_recent_imgs a:hover{
	text-decoration:none;
	color: inherit;
}
.gallary_recent_imgs_dummy{
	width: 17%;
    padding: 1%;
    box-sizing: border-box;
}
.gallary_para01{
    display: flex;
    align-items: center;
	margin: 1% 4%;
    padding: 0 3% 3% 3%;
}
.gallary_para01 img{width: 20%;}
.gallary_para01 p{
    width: 50%;
    padding: 5%;
    font-size: 120%;
}
#gallary_pnatoin{}
#gallary_next,
#gallary_prev{
    display: inline-block;
    border-radius: 5px;
    background: #59baff;
    padding: 10px 10px;
    font-size: 120%;
    text-align: center;
	box-sizing: border-box;}
#gallary_next{margin: 3% 3% 3% 90%;}
#gallary_prev{margin: 3% 0 3% 3%;}
#gallary_next a,
#gallary_prev a{color: #fff;}
@media only screen and (max-width:1099px){
	.gallary_recent_imgs{
		width: 94%;
		margin: 3%;
		padding: 4%;
	}
    .gallary_imgs{
        margin: 0;
    }
	.gallary_para01 img{
        width: 40%;
    }
	#gallary_next{margin: 3% 3% 3% 60%;}
}



/*****************************************************/
/* dl_page */
/*****************************************************/
.dl_wrap{
	width: 60%;
	margin: 2% auto;
}
.dl_msg_en{margin: 2%;}
#ugc_wrap{
	position: relative;
	width: 50%;
}
#ugc_img{width: 100%;}
#dl_tmp_layer,#dl_tmp_layer img{
	position: absolute;
	width: 100%;
}
#toMyPage{background: #ff6600;}
#toMyPage a{color: #fff;}
#toMyPage a:hover{text-decoration: none;}
#edt_btn{
    display: block;
    background: #61bcff;
    color: #fff;
}
#edt_btn,#toMyPage{
    width: 100px;
    margin: 1%;
	padding: 1% 2%;
    text-align: center;
    font-size: 120%;
}
#edt_btn{display: block;}
#edt_btn a:hover{text-decoration: none;}
.dl_btn_ldg{
	width: 100px;
    text-align: center;
    color: #fff;
    margin: 0 1%;
    height: 50px;
    padding: 0 2%;
}
.dl_dl_btn{
    background: #61bcff;
    width: 100px;
    text-align: center;
    color: #fff;
    margin: 1%;
}
@media only screen and (max-width:1099px){
	.dl_wrap{width: 90%;}
	#ugc_wrap{width: 90%;}
	#edt_btn,#toMyPage,.dl_dl_btn{
		margin: 2% auto;
	}
}



/*****************************************************/
/* first_page */
/*****************************************************/
.first_wrap{width: 60%;}
.first_printing_wrap ul{
	display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    list-style: none;
}
.first_printing_wrap ul li{
	border: 1px solid #929292;
    width: 15%;
	min-width: 120px;
    border-radius: 50%;
    padding: 10px;
	margin: 10px 0;
    box-sizing: border-box;
	box-shadow: 0 1px 4px 0 rgb(0 0 0 / 65%);
    display: inline-flex;
    align-items: center;
    text-align: center;
	word-break: break-word;
}
.first_printing_wrap ul li a{
	width: 100%;
    cursor: pointer;
    display: flex;
    height: 100%;
    text-align: center;
    align-items: center;
}
.first_printing_wrap ul li:before {
   display: block;
   content: '';
   padding-top: 100%;
}
.first_printing_wrap ul li:last-child{
	border: 1px solid;
    list-style: none;
    width: 30%;
	min-width: 350px;
    border-radius: 0;
    box-sizing: border-box;
    display: block;
    align-items: unset;
    text-align: initial;
}
.first_printing_wrap ul li:last-child:before{
	display: contents;
    content: '';
    padding-top: 0;
}
.first_printing_wrap ul li #firstPrintingRectangle04:before{
   padding-top: 56%;
}
#firstPrintingRectangle01,#firstPrintingRectangle02,#firstPrintingRectangle03,#firstPrintingRectangle04{
	border-radius: 0;
}
.firstPLSD{
	box-shadow: none!important;
	border: none!important;
}
#first_input_p_x_wrap,
#first_input_p_y_wrap,
#first_input_p_r_wrap,
#first_input_x_wrap,
#first_input_y_wrap,
#first_input_r_wrap{
	display: block;
	margin: 1% 1% 0 0;
}
.first_input_ttl{
	display: inline-block;
	width: 60px;
	margin: 0 1% 0 0;
}
#first_input_p_x,
#first_input_p_y,
#first_input_p_r,
#first_input_x,
#first_input_y,
#first_input_r{padding: 3px;}
.first_input_exp{
	display: block;
	margin: 0.5%;
}
#first_input_p_go,
#first_input_go{
    padding: 0.5% 1%;
    box-sizing: border-box;
    display: block;
    width: 80px;
    text-align: center;
    margin: 1% 0;
    border-radius: 5px;
    font-weight: bold;
    border: 1px solid #000;
    cursor: pointer;
    background: #eee;
}
#first_err_modal{
    width: 100vw;
    height: 100vh;
    text-align: center;
    background: rgba(0,0,0,0.65);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10010;
}
.first_err_modal_inner{
	width: 60%;
    margin: 10% auto;
    background: #fff;
    padding: 5%;
}
#first_err_modal_close{
    width: 1em;
    float: right;
    text-align: center;
    font-size: 200%;
    cursor: pointer;
}
#first_err_modal_txt_c,#first_err_modal_txt_s{margin: 12% 0;}
@media only screen and (max-width:1099px){
	.first_wrap{width: 90%;}
	.first_printing_wrap ul li:last-child{
		width: 100%;
		min-width: inherit;
	}
}



/*****************************************************/
/* art_page */
/*****************************************************/
#art_main{
    height:100vh;
    z-index: 10000;
    background-color:#fff;
    background-position: center;
    overflow: auto;
}
#art_main h3{
    font-size: 120%;
    font-weight: bold;
    padding: 15% 0 0 0;
}
.art_wrap{
	width: 900px;
	margin: 0 auto;
}
#fab_canvas{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.canvas_wrap{
	width: 100%;
    height: 0;
	max-width: none;
    padding-bottom: 100%;
	position: relative;
	margin: 0 auto;
}
#over_canvas{
	z-index: 1;
	right: 0;
	bottom: 0;
	top: 0;
	left: 0;
	overflow: hidden;
}
.canvas-container{
	margin:0 auto;
}
.ctrl_bar_l{
    width:calc((100% - 900px)/2 - 15px);
    position: fixed;
    top: 0;
    left: 0;
    background: #61bbff;
    height: 100%;
}
.c_btn_wrap_l{
	overflow-y: scroll;
	backface-visibility: hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-backface-visibility: hidden;
	height: 100%;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.c_btn_wrap_l::-webkit-scrollbar{display:none;}
.ctrl_bar_r{
    background-color: #61bbff;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: calc((100% - 900px)/2);
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.c_btn_wrap_r::-webkit-scrollbar{display:none;}
.c_btn_wrap_r{
    height: 100%;
	box-sizing: border-box;
	background-color: #61bbff;
    overflow-y: scroll;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
}
.c_btn_wrap_r ul li{box-shadow:none;}
.c_btns_wrap_l,
.c_btns_wrap_r{width: 70%;}
.c_btns_wrap_l{
	margin:0 0 0 30%;
	text-align: right;
}
.c_btns_wrap_r{margin:0 30% 0 0;}
.c_btns{
	display: inline-block;
	width: 17%;
	min-width: 55px;
    margin: 2%;
    padding: 2%;
/*    background: #b1ddff;*/
    background: #fff;
    border-radius: 10%;
    box-shadow:0 3px 2px rgba(0,0,0,0.2);
    cursor: pointer;
    border: 1px solid #4c4b4c;
}
#crt_usg_btn{
    position: fixed;
    top: 0;
    right: 0;
    background: #eee;
    border: 1px solid;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin: 10px;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    box-shadow: 0 3px 2px rgba(0,0,0,0.2);
    cursor: pointer;
    display: block;
}
#crt_stg_btn{
    position: fixed;
    top: 0;
    right: 50px;
    width: 35px;
    height: 35px;
    margin: 10px;
    cursor: pointer;
    display: block;
}
#c_bg_wrap{
	width: calc((100% - 900px)/2);
	position: fixed;
	bottom: 0;
	right: 0;
	text-align: center;
}
.c_bg_ttl{margin: 10px;}
#c_bg_inner{
	background: #fff;
    border: 1px solid;
}
#c_bg_close{
    width: 1em;
    float: right;
    text-align: center;
    font-size: 200%;
    cursor: pointer;
}
#c_brush_wrap label{
    cursor: pointer;
    padding:5px;
    background: #fff;
    border: 1px solid #434343;
}
#c_brush_wrap{
    width: calc((100% - 900px)/2);
    padding: 1%;
    border: 1px solid;
	background: #fff;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
}
.c_brush_ttl{margin: 10px;}
#c_brush_inner{
    width: 100%;
	padding: 1%;
}
#c_brshadow{display: none;}
#c_brshadow:checked + .c_bshdw_label{background-color: orange;}
.c_bshdw_label{
    margin-left: 10px;
    font-size: 140%;
    vertical-align: middle;
}
#c_brsize{
    font-size: 140%;
    vertical-align: middle;
    padding: 4px;
    box-shadow: 0px 0px 5px #CCC inset;
    border: 1px solid #ccc;
    cursor: pointer;
}
#c_brush_close{
    width: 1em;
    float: right;
    text-align: center;
    font-size: 200%;
    cursor: pointer;
}
#c_fonts_wrap{
	padding: 1%;
    border: 1px solid;
    background: #fff;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
}
.c_fonts_ttl{margin: 10px;}
#c_text,#c_fonts{
    display: block;
    font-size: 140%;
    margin: 2%;
    padding: 4px;
    vertical-align: middle;
    text-align: left;
    box-shadow: 0px 0px 5px #CCC inset;
    border: 1px solid #ccc;
    cursor: pointer;
}
.c_fonts_color{
    display: inline-block;
    margin-left: 10px;
    font-size: 140%;
    vertical-align: middle;
}
.c_fonts_color_picker{
    display: inline-block;
    font-size: 140%;
    vertical-align: middle;
    box-sizing: border-box;
}
#c_ftweight,#c_ftshadow{display: none;}
#c_ftshadow:checked + .c_fshdw_label,
#c_ftweight:checked + .c_fwght_label{background-color: orange;}
.c_fshdw_label,
.c_fwght_label{
    margin: 2%;
    padding: 1%;
    font-size: 140%;
    vertical-align: middle;
	border: 1px solid;
    display: inline-block;
    text-align: center;
    width: 38%;
}
.c_fonts_ttl{
    font-size: 140%;
    vertical-align: middle;
}
.c_ftsize_ttl{
    font-size: 140%;
    vertical-align: middle;
    margin-left: 10px;
}
#c_ftsize{
    font-size: 140%;
    vertical-align: middle;
    padding: 4px;
    box-shadow: 0px 0px 5px #CCC inset;
    border: 1px solid #ccc;
    cursor: pointer;
}
#c_write{
    display: inline-block;
    width: 10%;
    min-width: 50px;
    margin: 1%;
    padding: 1%;
    font-size: 120%;
    text-align: center;
    color: #fff;
    background: linear-gradient(#5faee3, #217dbb);
    border-radius: 5px;
    cursor: pointer;
}
#c_fonts_close{
	width: 1em;
    float: right;
    text-align: center;
    font-size: 200%;
    cursor: pointer;
}
#c_edge_text_wrap{
	padding: 1%;
    border: 1px solid;
    background: #fff;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
}
#c_scale_wrap,#c_angle_wrap{
	position: fixed;
    width: 16%;
    height: auto;
    padding: 1%;
	right: 0;
	bottom: 0;
	text-align: center;
    background: #fff;
	border: 1px solid;
}
#c_scale_close,#c_angle_close{
    text-align: right;
    font-size: 200%;
    cursor: pointer;	
}
#scale-control,#angle-control{
	width:90%;
	margin: 0 auto;
}
#c_stamp_wrap{
    width: calc(100% - 900px);
    position: fixed;
	bottom: 0;
    right: 0;
    border: 1px solid;
    background: #fff;
}
.c_stamp_ttl{
	display: inline-block;
	margin: 10px;
}
.c_stamp_bar{
	width: calc(100% - 20px);
    padding: 10px;
    background: #d0d0d0;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.c_stamp{
    display: inline-block;
    width: 50px;
    height: 0;
    margin: 5px;
    padding-bottom: 50px;
    background-size: 50px;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.c_stamp_bar ul{
    display: inline-block;
    margin: 0;
    padding: 0;
}
.c_stamp_bar ul li{list-style: none;}
#c_stamp1{background-image:url('img/stamp/stamp1.png');}
#c_stamp2{background-image:url('img/stamp/stamp2.png');}
#c_stamp3{background-image:url('img/stamp/stamp3.png');}
#c_stamp4{background-image:url('img/stamp/stamp4.png');}
#c_stamp5{background-image:url('img/stamp/stamp5.png');}
#c_stamp6{background-image:url('img/stamp/stamp6.png');}
#c_stamp7{background-image:url('img/stamp/stamp7.png');}
#c_stamp8{background-image:url('img/stamp/stamp8.png');}
#c_stamp9{background-image:url('img/stamp/stamp9.png');}
#c_stamp10{background-image:url('img/stamp/stamp10.png');}
#c_stamp11{background-image:url('img/stamp/stamp11.png');}
#c_stamp12{background-image:url('img/stamp/stamp12.png');}
#c_stamp13{background-image:url('img/stamp/stamp13.png');}
#c_stamp14{background-image:url('img/stamp/stamp14.png');}
#c_stamp15{background-image:url('img/stamp/stamp15.png');}
#c_stamp16{background-image:url('img/stamp/stamp16.png');}
#c_stamp17{background-image:url('img/stamp/stamp17.png');}
#c_stamp_close{
	margin: 0 2%;
    float: right;
    text-align: center;
    cursor: pointer;
    font-size: 200%;
}
#c_erase_wrap{
    width: 100%;
    height: 100vh;
    background: #fff;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}
#c_erase_inner{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow-x: hidden;
}
#c_erase_sizer{
    display: inline-block;
	margin: 0;
}
#erase_canvas_wrap{margin: 0 auto;}
#c_erase_close{
	margin: 0 5%;
    float: right;
    text-align: center;
    cursor: pointer;
}
#c_erase_cancel{
    float: right;
    text-align: center;
    cursor: pointer;
}
#erase_canvas{
	display: block;
	margin: 0 auto;
	max-width: 100%;
}
#c_canvasC_wrap{
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.65);
	position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#c_canvasC_inner{
    width: 70%;
	margin: 10vh auto 0;
	padding: 2%;
    background: #fff;
}
#c_canvasC_close{
    margin: 0 5%;
    text-align: right;
    cursor: pointer;
    font-size: 200%;
}
.c_canvasC_current{
    width: 100%;
    max-width: 320px;
	margin: 5px 0;
    padding: 3px 5px;
    border: 1px solid;
    border-radius: 5px;
	background: #ffd0d0;
}
#continue_modal{
	display: block;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background: rgba(0,0,0,0.65);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10002;
    overflow-y: scroll;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
}
#continue_modal_inner{
	width: 50%;
	margin: 10vh auto 0;
	padding: 2%;
	background: #fff;
    position: relative;
}
#continue_modal_close{
    display: block;
    margin: 0 5%;
    text-align: right;
    cursor: pointer;
    font-size: 200%;
    position: absolute;
    right: 0;
}
#continue_modal_yes{
    width: 20%;
    background: #ff6600;
    display: inline-block;
    margin: 5% 10%;
    padding: 2%;
    font-size: 120%;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 65%);
	cursor: pointer;
}
#continue_modal_no{
    width: 20%;
    background: #929292;
    display: inline-block;
    margin: 5% 10%;
    padding: 2%;
    font-size: 120%;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 65%);
	cursor: pointer;
}
.continue_modal_go{
	background: #61bcff;
}
#continue_modal_no2{
    width: 20%;
    background: #929292;
    display: inline-block;
    margin: 5% 10%;
    padding: 2%;
    font-size: 120%;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 65%);
	cursor: pointer;
}
#create_usage_modal{
	display: block;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background: rgba(0,0,0,0.65);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10002;
    overflow-y: scroll;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
}
#create_usage_modal_inner{
	width: 50%;
	margin: 10vh auto 0;
	padding: 2%;
	background: #fff;
    position: relative;
}
#create_usage_modal_close{
    display: block;
    margin: 0 5%;
    text-align: right;
    cursor: pointer;
    font-size: 200%;
    position: absolute;
    right: 0;
}
#create_usage_modal_never{
	display: block;
    margin: 2em 0 0 0;
    text-align: right;
    cursor: pointer;
    font-size: 150%;
    right: 0;
}
#create_usage_modal_never input{
    transform: scale(2);
    margin: 0 2%;
}
#create_setting_modal{
	display: block;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background: rgba(0,0,0,0.65);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
    overflow-y: scroll;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
}
#create_setting_modal_inner{
	width: 50%;
    margin: 10vh auto 0;
    padding: 2%;
    background: #fff;
    position: relative;
}
#create_setting_modal_close{
    display: block;
    margin: 0 5%;
    text-align: right;
    cursor: pointer;
    font-size: 200%;
    position: absolute;
    right: 0;
}
#create_setting_modal_never{
	display: block;
    margin: 2em 0 0 0;
    text-align: right;
    cursor: pointer;
    font-size: 150%;
    right: 0;
}
#create_setting_modal_never input{
    transform: scale(2);
    margin: 0 2%;
}
#create_setting_modal_inner ul{
	display: flex;
    list-style: none;
    align-items: center;
    border-bottom: 1px solid #4c4b4c;
    padding: 2% 0;
}
#create_setting_modal_inner ul:last-child{
	border: none;
}
#create_setting_modal_inner li{
	width: 50%;
}
#create_setting_modal_inner li input[type="number"]{
	font-size: 120%;
}
#create_setting_modal_inner li input[type="checkbox"]{
	display: none;
}
#create_setting_modal_inner li input[type="checkbox"]+label{
    cursor: pointer;
    display: inline-block;
    box-sizing: content-box;
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #FFF;
    border: 2px solid #61bbff;
    border-radius: 30px;
}
#create_setting_modal_inner li input[type="checkbox"]:checked+label{
    background-color: #b1ddff;
}
#create_setting_modal_inner li input[type="checkbox"]+label:before{
    content: "";
    position: absolute;
    display: block;
    width: 28px;
    height: 28px;
    left: 2px;
    top: 1px;
	border-radius: 50%;
    background-color: #61bbff;
}
#create_setting_modal_inner li input[type="checkbox"]:checked+label:before{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    box-shadow: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#load_modal,
#load_modal2{
	display: block;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background: rgba(0,0,0,0.65);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10004;
}
#load_modal2{
    z-index: 10010;
}

#load_modal2 p,
#load_modal p{
    margin-top: calc(50vh - 25px);
    font-size: 30px;
}
.load_icon{
    background: url(img/common/ldg.svg) no-repeat;
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
}
#ad_modal,
#duplicate_tab_modal,
#saved_modal,
#dl_modal{
	display: block;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background: rgba(0,0,0,0.65);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10010;
    overflow-y: scroll;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
}
.dupricate_tab_text,
#saved_modal_inner,
#dl_modal_inner{
	width: 50%;
	margin: 30vh auto 0;
	padding: 2%;
	background: #fff;
}
#saved_close_btn{
	position: fixed;
    top: 0;
    right: 0;
    background: #ddd;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    font-size: 200%;
    cursor: pointer;
    text-align: center;
}
#dl_ttl_wrap,#dl_desc_wrap,#dl_tags_wrap,#dl_resume_wrap,#dl_public_wrap{
	width: 50%;
	margin: 0 auto 2%;
	text-align: left;
}
#dl_ttl,#dl_desc{
	display: block;
	width: 100%;
	box-sizing: border-box;
}
#dl_tags{line-height: 1em;}
#dl_ttl,#dl_desc,#dl_tags{
	padding: 1%;
	border: 1px solid;
}
#dl_ttl_msg,#dl_desc_msg,#dl_tags_msg{color: #f00;}
#dl_resume_alert{color: #f00;}
.tags{
    display:inline-block;
	margin: 0.5% 2%;
    padding:1%;
	background:#59baff;
	color:#fff;
	border:1px solid #59baff;
    border-radius:5px;
}
#dl_btn{
	padding: 1% 2%;
	font-size: 120%;
	cursor: pointer;
}
@media only screen and (max-width: 1099px){
    #art_main{
        width: 100%;
        height: 100%;
		margin-bottom: 30%;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .art_wrap{
		width: auto;
		margin: 0;
		-webkit-overflow-scrolling: touch;
	}
	#clipcanvas3{
		width: 100%;
		max-width: 100%;
		right: 0;
		bottom: 0;
		top: 0;
		left: 0;
		background-size: 100%;
    }
	.ctrl_bar_l{
		width: 100%;
		top: auto;
		bottom: 0;
		height: auto;
		-webkit-backface-visibility: hidden;
	}
	.c_btn_wrap_l{
		width: calc(((100% / 9) * 7) - 1px);
		overflow-y:unset;
	}
    .ctrl_bar_r{
		top:auto;
		bottom: 0;
		width: calc(((100% / 9) * 2) - 1px);
		height: auto;
	}
	.c_btns_wrap_l{
		text-align: left;
		margin: 0;
	}
	.c_btns_wrap_l,.c_btns_wrap_r{
		display: flex;
		width: 100%;
	}
	.c_btns_para_l{width: 18%;}
	.c_btns_para_l{width: 50%;}
	.c_btn_wrap_r{overflow-y: unset;}
	.c_btns{
		width:94%;
		min-width:auto;
		margin: 3%;
		box-sizing: border-box;
	}
	#crt_stg_btn{
		position: fixed;
		bottom: 0;
		right: 0;
		width: 32px;
		height: 32px;
		margin: 0;
		top: inherit;
		cursor: pointer;
		display: block;
	}
	#c_bg_wrap{width: auto;}
    #c_brush_wrap{width: 100%;}
	#c_scale_wrap,#c_angle_wrap{
		width: 100%;
		margin: 0;
		padding: 1% 1% 2% 1%;
		opacity: 0.9;
	}
	#c_scale_close,c_angle_close{
		font-size: 200%;
		cursor: pointer;
	}
	#c_stamp_wrap{width: 100%;}
	#c_canvasC_inner{
		width: 85%;
		margin: 5vh auto;
	}
	#create_usage_modal_inner{
		width: 90%;
		margin: 10vh auto;
	}
	#create_setting_modal_inner{
		width: 90%;
		margin: 10vh auto;
	}
	#create_usage_modal_never{text-align: inherit;}
	#create_setting_modal_never{text-align: inherit;}
	#create_setting_modal_inner li input[type="number"]{max-width: 80%;}
	#dl_modal_inner{
		width: 90%;
		margin: 10vh auto 0;
	}
}
@supports (-webkit-touch-callout: none) {
	#create_setting_modal,
	#create_usage_modal,
	#c_canvasC_wrap{
		height: -webkit-fill-available;
	}
	#create_inner_modal_inner,
	#create_usage_modal_inner,
	#c_canvasC_inner{
		min-height: 100vh;
		min-height: -webkit-fill-available;
	}
}



/*****************************************************/
/* pre_regist_page */
/*****************************************************/
.pre_regist_main{padding: 2%;}
#regist_email{
	box-sizing: border-box;
    border: 1px solid #000;
    padding: 5px 8px;
    border-radius: 5px;
}
#regist_btn{
	padding: 5px 8px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #000;
}
#regist_mrgn,
#regist_email,
#regist_btn{margin: 1% 0;}
@media only screen and (max-width: 1099px) {
	#regist_mrgn{margin: 2% 0 1% 0;}
	#regist_email,
	#regist_btn{margin: 8% 0;}
}



/*****************************************************/
/* regist_form */
/*****************************************************/
.regist_form{margin: 0 5%;}
.regist_form_ttl{
	font-size: 110%;
    font-weight: bold;
}
.regist_form_input{
	display: block;
    margin: 5px 10px 10px;
}
.regist_form_btn{
	display: block;
    margin: 20px 0;
}
#regist_name_msg,
#regist_name_msg2,
#regist_name_msg3,
#regist_name_msg4,
#regist_password_msg,
#regist_password_msg2,
#regist_password_msg3,
#regist_password_msg4,
#regist_password2_msg{
	display: block;
	color: #f00;
	margin: 5px 10px 15px;
}


/*****************************************************/
/* login_page */
/*****************************************************/
.login_main{display: flex;}
.login_main_form{
	width: 38%;
	padding: 2% 5%;
}
.login_main_regist{padding: 2% 1%;}
@media only screen and (max-width: 1099px) {
	.login_main{display: block;}
	.login_main_form{
		width: 90%;
		padding: 2% 5%;
	}
	.login_main_regist{padding: 2% 5%;}
}



/*****************************************************/
/* logout_page */
/*****************************************************/
.logout_main{display: flex;}
.logout_main_form{
	width: 38%;
	padding: 2% 5%;
}
.logout_main_regist{padding: 2% 1%;}
.logout_sign_in_btn{
	width: 30%;
	background: #f60;
}
.logout_sign_in_btn a{
    width: 100%;
    display: block;
    text-align: center;
    color: #fff;
    padding: 5% 0;
}
.logout_sign_in_btn a:hover{
	text-decoration: none;
	opacity: 0.6;
}
@media only screen and (max-width: 1099px) {
	.logout_main{display: block;}
	.logout_main_form{
		width: 90%;
		padding: 2% 5%;
	}
	.logout_main_regist{padding: 2% 5%;}
}



/*****************************************************/
/* my_page */
/*****************************************************/
.my_main{
	margin:0 auto;
	padding: 1%;
}
.my_ctrl{
	display: flex;
	justify-content: space-between;
}
.my_ctrl_btn_wrap{width: 20%;}
.my_ctrl_btns,
.my_ctrl_signout_btn{
    width: 80%;
	margin: 5% 2%;
    background: #f60;
    text-align: center;
	cursor: pointer;
}
.my_ctrl_signout_btn{background: #929292;}
#sign_out_btn,
.my_ctrl_btns a{
	display: block;
    padding: 5%;
    color: #fff;
}
.my_ctrl_btns a:hover{text-decoration:none;}
#img_lists{
	display:inline-flex;
	flex-wrap:wrap;
	width:90%;
	margin:0 4%;
}
.img_list{
	width:20%;
	margin:1%;
	border:1px solid;
	padding:1%;
	border-radius:10px;
}
.img_list_wrap{}
.img_list img{width:100%;}
.img_list_txt{font-size: 110%;}
.img_list_txt_ttl{margin: 1% 0;}
.img_list_txt_desc{margin: 1% 0;}
.img_list_txt_tags{margin: 1% 0;}
.img_list_txt_date{margin: 1% 0;}
.img_list_ttl,.img_list_desc{word-break: break-all;}
.img_list_msg{color: #f00;}
.my_editing{
	border: 1px solid;
    padding: 2px 3px;
    box-shadow: 0 0 3px rgba(0,0,0,0.4) inset;
    border-radius: 4px;
	line-height: 2em;
}
.my_editing_tags{
	border: 1px solid;
    padding: 2px 3px;
    box-shadow: 0 0 3px rgba(0,0,0,0.4) inset;
    border-radius: 4px;
	display: inline-block;
	width: 50%;
	word-break: break-all;
}
.my_change_icon{
	background: url(../img/common/change_icon.svg) no-repeat;
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    margin: 0 1%;
	cursor: pointer;
}
.my_change_cancel_icon{
	background: url(../img/common/change_cancel_icon.svg) no-repeat;
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    margin: 0 1%;
	cursor: pointer;
}
.my_btns_wrapper{
	display:flex;
	width:100%;
	justify-content:space-around;
}
.my_view_btn,
.my_btns{
	width:20%;
    margin:1%;
    padding:1% 2%;
	text-align:center;
    border:1px solid;
    border-radius:5px;
    cursor:pointer;
	word-break:break-all;
}
.my_view_btn a,
.my_btns a{
	display:block;
	width:96%;
	padding:2%;
	text-decoration:none;
}
.my_view_btn a:hover,
.my_btns a:hover{
	text-decoration:none;
	color:initial;
}
.my_view_btn{width: 100%;}
.img_public{background:#61bcff;}
.img_public:after{content:"Public";}
.img_private{background:#aaa;}
.img_private:after{content:"Private";}
.img_public,
.img_private{
	color: #fff;
	border-color: #000;
}
@media only screen and (max-width: 1099px){
	#img_lists{
		width:100%;
		margin:0;
	}
	.img_list{
		width:45%;
		margin:1%;
	}
	.my_btns_wrapper{flex-wrap: wrap;}
	.my_view_btn,
	.my_btns{
		display: block;
		width: 70%;
		margin: 3% 4%;
	}
}



/*****************************************************/
/* artwork */
/*****************************************************/
#img_detail{
	margin: 1% auto;
	max-width: 600px;
	box-sizing: border-box;
}
#artwk_report {
	width: 20px;
	height: 20px;
	margin: 15px 0;
	margin-left: calc(100% - 50px);
	cursor: pointer;
}
.artwk_report.icon {
  color: #000;
  position: absolute;
  margin-left: 9px;
  margin-top: 9px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  border: solid 1px currentColor;
  background-color: currentColor;
}
.artwk_report.icon:before {
  content: '';
  position: absolute;
  left: -1px;
  top: -8px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  border: solid 1px currentColor;
  background-color: currentColor;
}
.artwk_report.icon:after {
  content: '';
  position: absolute;
  left: -1px;
  top: 6px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  border: solid 1px currentColor;
  background-color: currentColor;
}
#report_btn{
	background: #fff;
    border: 1px solid;
    padding: 15px;
    width: 80px;
    text-align: center;
    margin-left: calc(100% - 120px);
    cursor: pointer;
}
#report_done{
	background: #fff;
    border: 1px solid;
    padding: 15px;
    text-align: center;
    cursor: pointer;
}
#report_modal{
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.65);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10010;
    overflow-y: scroll;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
}
#report_modal_inner{
	width: 50%;
    margin: 10% auto;
    background: #fff;
    padding: 5%;
}
#report_modal_close{
    width: 1em;
    float: right;
    text-align: center;
    font-size: 200%;
    cursor: pointer;
}
.report_modal_select_ttl{
	padding: 3%;
    display: inline-block;
}
#report_modal_select{font-size: 120%;}
.report_modal_btn_wrap{
	text-align: right;
	padding: 3% 3% 0 3%;
}
#report_modal_cancel{
	margin: 0 20px;
    display: inline-block;
	cursor: pointer;
}
#report_modal_send{
    display: inline-block;
	margin: 0 20px;
    padding: 12px 20px;
    background: #5faee3;
    border-radius: 5px;
	cursor: pointer;
}
#artwk_tags{
	line-height: 1em;
	word-break: break-all;
}
#artwk_tags .tags{
	margin: 1%;
	padding: 0.5% 1%;
}
#artwk_tags .tags a{color: #fff;}
.sns_container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.sns_facebook,.sns_line,.sns_linkedin,.sns_pinterest,.sns_tumblr,.sns_twitter,.sns_whatsupmb,.sns_whatsuppc{
    background: #1877f2;
    margin: 2% 2%;
    width: 28%;
    text-align: center;
}
.sns_facebook a,.sns_line a,.sns_linkedin a,.sns_pinterest a,.sns_tumblr a,.sns_twitter a,.sns_whatsupmb a,.sns_whatsuppc a{
    color: #fff;
    padding: 5% 0;
    display: block;
    width: 100%;
    font-size: 120%;
    text-shadow: 1px 1px 3px rgb(0 0 0 / 60%);
    text-decoration: none;
}
.sns_line{background: #00b900;}
.sns_linkedin{background: #0077B5;}
.sns_pinterest{background: #bd081c;}
.sns_tumblr{background: #36465d;}.sns_twitter{background: #1DA1F2;}.sns_whatsupmb,.sns_whatsuppc{background: #00e676;}
.sns_whatsupmb{display: none;}
@media only screen and (max-width: 1099px) {
	#img_detail{
		margin: 1% 2%;
		max-width: calc(100vw - 4%);
		min-width: auto;
	}
	#img_detail img{
		display: block;
		width: 100%;
		margin: 0 auto;
	}
    .sns_whatsupmb{display: block;}
    .sns_whatsuppc{display: none;}
}



/*****************************************************/
/* api */
/*****************************************************/
.api_img_view{
	width: 100%;
}
.api_img_view img{
	width: 50%;
	margin: 0 auto;
	pointer-events: none;
}
@media only screen and (max-width: 1099px) {
	.api_img_view img{width: 80%;}
}



/*****************************************************/
/* primary */
/*****************************************************/
.pointer{cursor: pointer;}
.nopoint{pointer-events: none;}
.gHide{display: none!important;visibility: hidden!important;}
.gShow{animation-duration: 0.2s;animation-name: fade-in;}
@keyframes fade-in {
    0% {
    display: none;
    opacity: 0;
    }
    20% {
    display: block;
    opacity: 0.2;
    }
    100% {
    display: block;
    opacity: 1;
    }
}
/*add body at modal*/
#ovrly_stop{overflow: hidden;height: 100%; width: 100%!important; position: fixed;}