body{
	background: #F0F0F0;
}

body.active{
	overflow:hidden;
}

*{
	line-height: 1.2;
}

/*
################################################
  ---------- フォントはfont.cssに統合 -----------
################################################
*/

/*container
------------------------------------------*/
#container{
	/*background: #F0F0F0;*/
}


#cheadline span.prev{
	color:#858288;
	text-align:center;
	display:none;
	cursor:pointer;
}

#cheadline.active span.prev{
	display:block;
}



/*main
------------------------------------------*/
main.zoom{
    transform-origin:top center;	
/*    overflow:scroll;*/
}

main.active{
	height:100vh;
}

main #hagaki{
    margin:0 auto;
    /*background:url(./../img/transparent.png) center center;*/
    background:#FFF;
    position:relative;
}

#contents.h #hagaki{
    width:154mm;
	height:106mm;
}

#contents.v #hagaki{
	width:106mm;
    height:154mm;
}

#hagaki:hover:after{
	border:3mm solid rgba(255,255,255,.5);
}

#hagaki > div{
	box-sizing:content-box;	
}

#hagaki.fuchi #background{
	outline: 3mm solid #FFF5;
}


/* #about
---------------------------------------------*/
#about{
	margin: 0 auto;
	width:calc(100% - 112px);
	z-index: 1;
	position:relative;
	padding-right: 56px;
	width: 200px;
}

#about p{
	margin: 15px auto;
	padding: 5px 10px;
	display: block;
	border-radius: 7px;
	width: 150px;
	cursor: pointer;
	font-size: 14px;
}

#about p.q{
	text-align: center;
	border: 1px solid #CCC;
}

#about p.a{
	position:absolute;
	top: -20px;
	left: -75px;
	background: #FFF;
	padding: 20px 15px 10px;
	text-align: left;
	display: none;
	box-shadow: 3px 3px 7px #0003;
	width: 300px;
}

#about br{
	margin-bottom: .5em;
	display: block;
}

#about p.a span{
	margin-top: -15px;
	margin-right: -10px;
	display: block;
	float: right;
	font-size: 20px;
}

/*#background
------------------------------------------*/
#background{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:100% 100%;
    background-repeat:no-repeat;
    user-select:none;
    pointer-events:none;
    overflow:hidden;
}

#background #bgimage{
	width:100%;
	height:100%;
}

/*.photoArea
------------------------------------------*/
#hagaki .photoArea{
    position:absolute;
    top:0;
    left:0;
    padding:0;
    margin:0;
    width:100px;
    height:100px;
    outline:3px dashed #F00;
    background:rgba(255,255,255,.2);
    background:url(/common/img/camera.png) center center / 40px auto no-repeat;
    cursor:pointer;
    min-width:100px;
    min-height:100px;
    max-width:100%;
    max-height:100%;
    box-sizing:content-box;
    /*border-radius: 50%;*/
}

#hagaki label{
	width:100%;
	height:100%;
	display:block;
    cursor:pointer;	
}

#hagaki label  input[type="file"]{
	display:none;
}

#hagaki .bphotoArea label{
	pointer-events:none;
}

.bphotoArea figure{
	pointer-events: none;
}

.bphotoArea.active figure{
	pointer-events: auto;
}

/*txtArea
------------------------------------------*/
#hagaki .txtArea{
	position:absolute;
	cursor:pointer;
	transform-origin:center;
	pointer-events: none;
	padding: 0;
	margin: 0;
}

#hagaki .txtArea p{
	padding: 0;
	margin: 0;
}

/*テキストエリアの文字組*/
#hagaki .txtArea p.left{
	text-align:left;
}

#hagaki .txtArea p.center{
	text-align:center;
}

#hagaki .txtArea p.right{
	text-align:right;
}

#hagaki .txtArea.horizontal{
	display:flex;
    flex-flow:row-reverse;
	transform-origin:top;
}

#hagaki .txtArea p.horizontal{
    display:flex;
    flex-direction:column;
    margin-left:0.2em;
    margin-right:0.2em;
}

#hagaki .txtArea p.horizontal.ho-left{
    justify-content:flex-start;
}

#hagaki .txtArea p.horizontal.ho-center{
    justify-content:center;
}

#hagaki .txtArea p.horizontal.ho-end{
    justify-content:flex-end;
}

.txtArea.h{
	writing-mode: vertical-rl;
}

.txtArea.l{
	text-align:left;
}

.txtArea.r{
	text-align:right;
}

.txtArea.c{
	text-align:center;
}

.txtArea{
	width: max-content;
	height: max-content;
	max-width: 100%;
	max-height: 100%;
}

/*imageArea
------------------------------------------*/
.imageArea{
	cursor:pointer;
    position:absolute;
	top:231px;
	left:131px; 
    padding:0;
    margin:0;
    display:inline-block;
    font-size:0;
    border:2px solid rgba(255,255,255,0);
    z-index:1;
}

.imageArea:hover img,
.imageArea.active img{
/*    border:2px dashed #f00;*/
    outline: 2px dashed #f00;
    cursor:move;    
}

.imageArea img.circle{
	border-radius:50%;
}

.imageArea img.photoFrame{
	box-sizing:content-box;
	outline:7px solid #FFF;
	margin-top:-7px;
	margin-left:-7px;
}

.imageArea img.shadow{
	box-shadow:3px 3px 5px rgba(0,0,0,.3);
}

/* stampArea
-------------------------------------------------------------*/
.stampArea{
	padding: 0;
	margin: 0;
	position: absolute;
	width: 150px;
	height: auto;
}

#hagaki .stampArea img{
	width: 100%;
	height: auto;
}