@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Courier+Prime:400,400i,700,700i);
@import url(https://fonts.googleapis.com/css?family=Bebas+Neue:400);
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

/*  <<< Typo >>>
----------------------------------------------- */

a:link, a:visited {
	text-decoration: underline;
	text-decoration: none;
	color:#555;
	color:#000;
	color:#333;
}

a:hover, a:active {
	text-decoration: none;
	color:#555;
	color:#000;
	color:#fff;
	background-color:#555;
}


h1 { font:bold 24px/140% "Trebuchet MS", Verdana, sans-serif; }
h2 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }
h5 { font:bold 25px/100% Verdana, Geneva, Arial, Helvetica, sans-serif; color:#e7e7e7; }
h6 { font:bold 21px/100% Verdana, Geneva, Arial, Helvetica, sans-serif; color:#e7e7e7; }
p { margin:0; padding:5px; }
p.aaa { color:#000000; font-size:14px; padding:0 0 30px 0px; text-align:center; }





/*  <<< Layout >>>
----------------------------------------------- */

body {
	-webkit-text-size-adjust: 100%;
	width: 100%;
	width: calc(100% - 0px);
	background: #fff;
	background: #fcfaf8;
	background: #fefcfa;
	background: #fafafa;
	padding:0;
	margin:0;
	font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
/*	font-family: 'Lato', Noto Sans JP, sans-serif;
	font-weight: 300; */
	font-family: 'Courier Prime', monospace , 'Noto Sans JP', sans-serif;
	font-weight:normal;
	font-size:13px;
	line-height: 150%;
	color:#555555;
	color:#000;
	color:#333;
}

#fadein{
	display: none;
}

#container{
	top: 0;
	margin:0 auto ;
	padding:0 50px;
	width: 1000px;
	text-align: center;
}

#topin3{
	background: transparent;
	color: #fff;
	font-size: 12px;
	width: 120px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px -60px;
	transition: 0.5s;
}

#topin2{
	background: transparent;
	color: #fff;
	font-size: 10px;
	width: 150px;
	height: 50px;
	position: absolute;
	top: 70%;
	left: 50%;
	margin: 0px -75px;
	transition: 0.5s;
}

#topin{
	background-size: contain;
	background-image: url(../img/top_1.png);
	background-repeat: no-repeat;
	width: 150px;
	height: 150px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -75px;
	transition: 0.5s;
}
#topin a{
	width: 100%;
	height: 100%;
	display: block;
}
#topin:hover{
	background-image: url(../img/top_3.png);
/*	width: 166px;
	height: 166px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -83px;*/
}


/* <<< Profile >>>
--------------------------------------------------- */

.prf{
	background: transparent;
	width: 1000px;
	margin: 0px auto;
	padding: 0;
	text-align: left;
}

.prf .img{
	background: transparent;
	width: 240px;
	height: 300px;
	margin: 30px 0 15px;
	padding: 0;
	text-align: center;
	display: block;
	float: left
}
.prf .img img{
	width: 100%;
	height: 100%;
}

.prf .texttop{
	font-family: 'Courier Prime', monospace;
	color: #555;
	font-size: 11px;
	line-height: 30px;
	text-align: left;
	display: inline;
}
.prf .text{
	background: transparent;
	width: 600px;
	margin: 0px 15px 15px 80px;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif , 'Courier Prime', monospace;
	font-size: 11px;
	line-height: 180%;
	text-align: left;
	display: block;
	float: left
}



/* <<< Address >>>
--------------------------------------------------- */

.prf .adr{
	background: transparent;
	width: 498px;
	padding:30px 0 0 0;
	font-family: 'Courier Prime', monospace;
	font-weight:normal;
	font-size:13px;
	line-height: 150%;
	text-align:left;
	display: block;
}
.prf .adr-l{
	background: transparent;
	width: 499px;
	margin: 0;
	padding:0;
	display: block;
	float: left;
}
.prf .adr-r{
	background: transparent;
	width: 499px;
	margin: 0;
	padding:0;
	display: block;
	float: right;
}



/* <<< Contact >>>
--------------------------------------------------- */

.prf .contact{
	background: transparent;
	width: 900px;
	margin: 50px auto 50px;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif , 'Courier Prime', monospace;
	font-size: 12px;
	line-height: 180%;
	text-align: center;
	display: block;
}

.prf .contact2{
	background: transparent;
	width: 900px;
	margin: 120px auto 50px;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif , 'Courier Prime', monospace;
	font-size: 12px;
	line-height: 180%;
	text-align: center;
	display: block;
}

.prf .contact2 .sent1{
	font-size: 26px;
}
.prf .contact2 .sent2{
	font-size: 12px;
	line-height: 300%;
	color: #888;
}
.prf .contact2 .sent3{
	font-size: 10px;
	color: #888;
}



/* <<< Foot >>>
--------------------------------------------------- */

.foot {
	background: #fff;
	background: transparent;
	width: 100%;
	margin: 100px auto 0 auto;
	padding: 15px 0 15px;
	font-size: 10px;
	line-height: 140%;
	font-weight: 100;
	color: #000;
	text-align: center;
	font-weight: 300;
	border: 0px;
	border-top: 1px dashed #555;
}
.foot .copy{
	color: #333;
}
.footline{
	height:1px;
	border:none;
	border-top:solid 1px #000;
	width:100%;
	margin: 0 0 20px 0;
}


/* <<< Clear >>>
--------------------------------------------------- */
.f-left { float: left; }
.f-right { float: right; }

.clear {
	clear: both;
}
.clear-50 {
	clear: both;
	height: 50px;
}
.clear-80 {
	clear: both;
	height: 80px;
}
.clear-100 {
	clear: both;
	height: 100px;
}
.clear-150 {
	clear: both;
	height: 150px;
}


/* <<< clearfix >>>
--------------------------------------------------- */
.clearfix:after {
	content: "."; /* 新しい要素を作る */
	display: block; /* ブロックレベル要素に */
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
*html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/*/
}


/* <<< micro clearfix >>>
--------------------------------------------------- */
.mcf:before,
.mcf:after {
	content: " ";
	display: table;
}

.mcf:after {
	clear: both;
}

.mcf {
	*zoom: 1;
}