@charset "utf-8";

/*全体
---------------------------------------------------------------------------*/
body {
	color:#00489d;
}


/*リンク
---------------------------------------------------------------------------*/
a {
	color:#006699;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}


/*コンテンツ
---------------------------------------------------------------------------*/
#container {
	width:390px;
	margin:0 auto;
}


/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
	padding:0 15px;
}


/*ヘッダ
---------------------------------------------------------------------------*/
header {
	margin:0px 15px !important;
	padding:10px 15px;
	border-bottom:solid 1px #00489d;
}
#page_name {
	position:relative;
}
#help_button {
	position:absolute;
	top:5px;
	right:15px;
	text-align:right;
}
#help {
	padding:30px 20px;
	font-size:17px;
	line-height:2;
}
.ui-dialog .ui-dialog-titlebar {
	display:none;
}
.ui-widget.ui-widget-content {
	border-width:2px;
	border-image: linear-gradient(to right, #00489d 0%, #64ccef 100%);
	border-image-slice: 1;
}


/*その他
---------------------------------------------------------------------------*/
h2 {
	padding:15px;
	font-size:22px;
}

p.description {
	padding:15px 0;
	font-size:18px;
	color:#000;
	text-align:center;
	line-height:1.8;
}
p.description2 {
	padding:5px 0;
	font-size:13px;
	font-weight:bold;
	text-align:center;
}

.ui-resizable-se {
	background-image:url(../images/resize.png);
	width:60px;
	height:60px;
	background-position:0px 0px;
	right:-30px;
	bottom:-30px;
	cursor:nwse-resize;
}

.ui-rotatable-handle {
	position:absolute;
	left:-30px;
	bottom:-30px;
	width:60px;
	height:60px;
	background-image:url(../images/rotate.png);
}

.button_area {
	text-align:center;
}


#base {
	width:100%;
	margin:0 auto;
}
#base img {
	width:100%;
}

#edit_menu {
	margin-top:10px;
}
#edit_menu li {
	float:left;
	width:70px;
	max-width:25%;
	margin:5px;
	text-align:center;
}
#edit_menu li img {
	display:block;
	width:90%;
	margin:0 auto;
	margin-bottom:5px;
}

.redo {
	margin-top:20px;
	margin-bottom:10px;
}
.redo a {
	text-decoration:underline;
}

body#top #base {
	position:relative;
	width:285px;
}
body#top #base strong {
	display:block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width:100%;
	height: 5rem;
  	font-size:60px;
	color:#fff;
	text-align:center;
}

#uploadArea {
	height:380px;
	margin-bottom:20px;
	color:#000;
	line-height:2;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 2px solid #00489d;
	border-image: linear-gradient(to right, #00489d 0%, #64ccef 100%);
	border-image-slice: 1;
}
.dropzone .dz-message .dz-button {
	line-height:2;
}


body#edit #canvas {
	overflow:hidden;
}
body#edit #canvas2 {
/*	display:none;*/
}
body#edit #base {
	position:relative;
	width:100%;
	height:100%;
	z-index:2;
}
body#edit #base2 {
	position:absolute;
	width:100%;
	z-index:2;
}
body#edit #target {
	position:absolute;
	width:60%;
	z-index:1;
}
body#edit #target2 {
	position:absolute;
	width:100%;
	z-index:1;
}
body#edit #base:hover {
	overflow:visible;
}
body#edit #base:hover #target {
	z-index:3;
	opacity:0.5;
}

body#edit p.description {
	letter-spacing:-2px;
}