/* Familiar Trading : top.css */


/*======================================================================*
 *  [ Main Image  ]
 *======================================================================*/

.mainimg {
	position: relative;
	padding-top: 45.45454545%;
	background: url(../img/main.jpg) center center no-repeat;
	background-size: cover;
}

.mainimg h2 {
	position: absolute;
	top: 8.923076923%;
	width: 100%;
}
.mainimg h2 img {
	width: 21.32867133%;
	max-width: 305px;
}
/* Max */
@media screen and (min-width: 1341px) {
	.mainimg {
		padding-top: 650px;
	}
} /* */
/* Tablet */
@media screen and (max-width: 768px) {
	.mainimg {
		padding-top: 56.25%;
	}
	.mainimg h2 img {
		width: 30%;
	}
}
/* Smartphone */
@media screen and (max-width: 480px) {
	.mainimg {
		padding-top: 75%;
	}
	.mainimg h2 img {
		width: 40%;
	}
} /* */


/*======================================================================*
 *  [ About ]
 *======================================================================*/

#about {
	padding-top: 60px;
	padding-bottom: 60px;
	color: #666;
}
#about .inner {
	max-width: 1030px;
}
#about figure {
	width: 270px;
	padding: 10px 50px 10px 0;
	border-right: 1px solid #c4c4c4;
}
#about figcaption {
	margin-top: 15px;
}
#about p {
	-webkit-flex: 1;
	flex: 1;
	margin: 0;
	padding-left: 50px;
}
/* Tablet */
@media screen and (max-width: 768px) {
	#about figure, 
	#about p {
		width: 100%;
		padding: 0;
	}
	#about figure {
		margin-bottom: 30px;
		border-right: none;
	}
} /* */


/*======================================================================*
 *  [ Rough ]
 *======================================================================*/

#rough {
	padding-top: 50px;
	padding-bottom: 50px;
}
#rough .inner {
	max-width: 1170px;
}
#rough section {
	width: 28%;
	padding: 1px 0;
	background: url(../shared/img/bg_circle.svg) center center no-repeat;
	background-size: contain;
}
#rough section + section {
	margin-left: 8%;
}
#rough h3 {
	margin: 15% 0 30px 0;
	color: #0c3c6c;
	line-height: 1;
}
#rough h3 em,
#rough h3 span {
	display: block;
}
#rough h3 em {
	font-size: 2.6rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-style: normal;
}
#rough h3 span {
	margin-top: 10px;
	font-size: 1.6rem;
	font-weight: normal;
}
#rough p {
	margin: 0 0 15% 0;
}
/* Tablet */
@media screen and (max-width: 768px) {
	#rough .inner {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	#rough section {
		width: 46%;
	}
	#rough section:nth-child(odd) {
		margin-left: 0;
	}
} /* */
/* Smartphone */
@media screen and (max-width: 480px) {
	#rough .inner {
		display: block;
	}
	#rough section {
		width: 100%;
		max-width: 320px;
		height: 250px;
		margin: 0 auto !important;
	}
	#rough section + section {
		margin-top: 30px !important;
	}
	#rough p {
		0;
	}
} /* */


/*======================================================================*
 *  [ Business ]
 *======================================================================*/

#business {
	padding-bottom: 0;
}
#business .list {
	margin: 0 -50px;
	list-style: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1.2;
}
#business .list li {
	width: 25%;
	height: auto;
	border: 1px solid #fff;
	background-position: center center;
	background-repeat: none;
	background-size: 100%;
	-webkit-transition: background ease 1.5s; /* Safari */
	transition: background ease 1.5s;
}
#business .list li:hover      { background-size: 110%; }
#business .list li.re         { background-image: url(../../img/re.jpg); }
#business .list li.cosme      { background-image: url(../../img/cosme.jpg); }
#business .list li.travel     { background-image: url(../../img/travel.jpg); }
#business .list li.web        { background-image: url(../../img/web.jpg); }
#business .list li.photo      { background-image: url(../../img/photo.jpg); }
#business .list li.ad         { background-image: url(../../img/ad.jpg); }
#business .list li.trade      { background-image: url(../../img/trade.jpg); }
#business .list li.curio      { background-image: url(../../img/curio.jpg); }
#business .list li.restaurant { background-image: url(../../img/restaurant.jpg); }
#business .list li.cleaning   { background-image: url(../../img/cleaning.jpg); }
#business .list li.staffing   { background-image: url(../../img/staffing.jpg); }
#business .list li.all        { background: #d8d8d8; }
#business .list li div {
	position: relative;
	padding-top: 100%;
}
#business .list figure {
	position: absolute;
	bottom: 42%;
	width: 100%;
}
#business .list figure img {
	width: 40%;
	max-width: 155px;
}
#business .list {
	overflow: hidden;
}
#business .list p {
	position: absolute;
	top: 58%;
	width: 100%;
	margin: 5% 0 0 0;
	padding: 0 10px;
}
#business .list li.all p {
	top: 50%;
	left: 50%;
	margin: 0;
	color: #000;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}
/* Max */
@media screen and (min-width: 1341px) {
	#business .list li div {
		padding-top: 330px;
	}
} /* */
/* Tablet */
@media screen and (max-width: 1024px) {
	#business .list {
		font-size: 2rem;
	}
	#business .list li.web {
		font-size: 1.9rem;
	}
	#business .list li.web p span {
		display: inline;
	}
	#business .list figure {
		bottom: 45%;
	}
	#business .list p {
		top: 55%;
	}
} /* */
@media screen and (max-width: 768px) {
	#business .list {
		margin: 0 -30px;
		font-size: 1.8rem;
	}
	#business .list li {
		width: 33.33333333%;
	}
	#business .list li.web {
		font-size: 1.7rem;
	}
} /* */
/* Tablet - Smartphone */
@media screen and (max-width: 568px) {
	#business .list, 
	#business .list li.web {
		font-size: 1.6rem;
	}
} /* */
/* Smartphone */
@media screen and (max-width: 480px) {
	#business .list {
		margin: 0 -20px;
	}
	#business .list li {
		width: 50%;
	}
} /* */


/*======================================================================*
 *  [ Outline ]
 *======================================================================*/

#outline .table {
	max-width: 720px;
	margin: 0 auto;
}
#outline .table p {
	margin: 0;
}
#outline .table p + p {
	margin-top: 20px;
}
#outline .table p b {
	color: #666;
}


/*======================================================================*
 *  [ Profile ]
 *======================================================================*/

#profile {
	color: #666;
}
#profile .flex {
	max-width: 950px;
	margin: 0 auto;
	-webkit-align-items: center;
	align-items: center;
}
#profile figure,
#profile section {
	width: 50%;
}
#profile figure {
	padding-right: 50px;
}
#profile h3 {
	margin-bottom: 50px;
	line-height: 1;
}
#profile h3 em,
#profile h3 span {
	display: block;
}
#profile h3 em {
	color: #000;
	font-size: 3.5rem;
	font-style: normal;
	font-weight: normal;
}
#profile h3 span {
	margin-top: 10px;
	font-size: 1.3rem;
	font-weight: normal;
}
#profile p {
	margin-bottom: 0;
}
/* Tablet */
@media screen and (max-width: 768px) {
	#profile figure,
	#profile section {
		width: 100%;
	}
	#profile figure {
		margin-bottom: 50px;
		padding: 0;
	}
	#profile figure img {
		width: 100%;
		max-width: 400px;
	}
	#profile h3, 
	#profile h3 + p {
		margin-bottom: 30px;
		text-align: center;
	}
} /* */


/*======================================================================*
 *  [ Contact ]
 *======================================================================*/

#contact {
	color: #666;
}