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


#modal-content {
	width: 100% ;
	background: #fff ;
	position: fixed ;
	display: none;
	z-index: 600 ;
	top: 0!important;
	left: 0!important;
	right: 0!important;
	bottom: 0!important;
	
}
#page{
	width: 100%;
	height: 100%;
	display: block;
	background: white;
	min-height: 0;
}

#contact_memo{
	position: fixed;
	top: 120px;
	left: 130px;
	bottom: auto;
}
#contact_cafe{
	position: fixed;
	left: -120px;
	top: 400px;
}
#contact_pen{
	position: absolute;
	right: 22%;
	top: 800px;
}
#contact_letter{
	position: absolute;
	left: 1130px;
	top: 440px;
}
#contact_letter_after{
	position: absolute;
	left: 1130px;
	top: 440px;
}
#contact_letter img{
	width: 500px;
	transform: rotateZ(4deg);
	-webkit-transform: rotateZ(4deg); 
    -moz-transform: rotateZ(4deg);
	left: 20px;
	position: absolute;
	top: -9px;
}
#contact_letter_after img{
	width: 500px;
	transform: rotate3d(180,6,6,0deg);
	-webkit-transform: rotate3d(180,6,6,0deg); 
    -moz-transform: rotate3d(180,6,6,0deg);
	left: 20px;
	position: absolute;
	top: -9px;
	transition: 0.3s;
	opacity: 0;
}

#contact_letter_top{
	position: absolute;
	left: 1130px;
	top: 440px;
	z-index: 2;
}
#contact_letter_top img{
	width: 500px;
	transform: rotateZ(4deg);
	-webkit-transform: rotateZ(4deg); 
    -moz-transform: rotateZ(4deg);
	left: 20px;
	position: absolute;
	top: -11px;
	transition: 0.15s;
}
#contact_letter_sub{
	position: absolute;
	left: 1130px;
	top: 440px;
}
#contact_letter_sub img{
	width: 500px;
	transform: rotateZ(4deg);
	-webkit-transform: rotateZ(4deg);
	-moz-transform: rotateZ(4deg);
	left: 20px;
	position: absolute;
	top: -14px;
	display: none;
}

/*アニメーション*/
#contact_letter_top .is_active{
	transform: rotate3d(180,6,6,90deg);
	-webkit-transform: rotate3d(180,6,6,90deg);
    -moz-transform: rotate3d(180,6,6,90deg);
/*	transition: 0.15s*/
/*	transform-origin: 50% 0%;*/
/*
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
*/
}
#contact_letter_after .is_active{
	transform: rotate3d(180,6,6,180deg);
	-webkit-transform: rotate3d(180,6,6,180deg);
    -moz-transform: rotate3d(180,6,6,180deg);
	opacity: 1;
/*	transition: 0.15s;*/
}


/*フォーム*/
#contactPage input{
	font-size: 15px!important;
	height: 25px;
	padding: 10px 5px!important;
	background-color: rgba(53, 53, 53, 0)!important;
	z-index: 4;
	width: 18%!important;
	border: none!important;
}
#contactPage textarea{
	padding-left: 5px;
	padding-right: 5px;
	background-color: rgba(0, 0, 0, 0);
	width: 27%;
	height: 18%;
	border: none;
}

#contactName{
	position: absolute;
	top: 216px;
	left: 720px;
}
#contactKana{
	position: absolute;
	background-color: #E53F41;
	top: 265px;
	left: 720px;
}
#contactCompany{
	position: absolute;
	background-color: #E53F41;
	top: 314px;
	left: 720px;
}
#contactPhone{
	position: absolute;
	background-color: #E53F41;
	top: 363px;
	left: 720px;
}
#contactEmail{
	position: absolute;
	background-color: #E53F41;
	top: 412px;
	left: 720px;
}
#contactMessage{
	position: absolute;
	background-color: rgba(255, 255, 255, 0);
	top: 521px;
	left: 569px;
	width: 27%;
	height: 31%;
	z-index: 4;
}
#contactSend{
	position: absolute;
	top: 655px;
	right: 592px;
	background-color: rgba(0, 0, 0, 0);
	z-index: 4;
}
/*
.hoverImage{
	transform: scale(1.08);
	margin: -2px 2px;
}
*/

/*お問い合わせ*/
#contact_paper{
	position: absolute;
	left: 534px;
	top: 102px;
	z-index: 2;
}
#contact_pin{
	position: absolute;
	left: 688px;
	top: 79px;
	z-index: 3;
}
#contact_sent{
	position: absolute;
	left: 512px;
	top: 79px;
}

.error{
	position: absolute;
	z-index: 3;
	color: red;
	font-size: 10px;
}
#errorName{
	top: 246px;
	left: 46%;
}
#errorMessage{
	top: 479px;
	left: 52%;
}
#errorEmail{
	top: 442px;
	left: 46%;
}
#footer_group2{
	position: absolute;
	bottom: 0;
	width: 100%;
	display: none;
}