@charset "utf-8";

/* top (basic)
-------------------------------------------------------------- */

/*
 * clearfix
 */
#topWorks::after,
#topWorks ul::after,
#topWorks ul li::after,
.clearfix::after,
.clear::after {
	clear:both;
	display:block;
	content:"";
	height:0;
	visibility:hidden;
}

/*
 * main visual
 */
#mainvisual {
	margin-top: 20px;
}
#mainvisual .slider {
	visibility:hidden;
	position:relative;
	overflow:hidden;
	height:220px;
}
#mainvisual .slider ul {
	position:relative;
}
#mainvisual .slider ul li {
	float:left;
	margin:0 10px 10px 0;
}
#mainvisual .slider ul li a {
	display:inline-block;
	position:relative;
	border:3px solid #FFFFFF;
	box-shadow:0 0 2px 2px rgba(96,96,96,0.2);
}
#mainvisual .slider ul li a::after {
	position:absolute;
	display:block;
	content:"";
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0.5);
	opacity: 1;
	transition: opacity 0.5s;
}
#mainvisual .slider ul li.highlight a::after {
	opacity: 0;
}
#mainvisual .slider ul li a img {
	display:block;
	max-height:200px;
}
#mainvisual .slider .prev {
	position:absolute;
	top:85px;
	left:5px;
	width:54px;
	height:54px;
	border-radius:50%;
	background-color:#00B9EF;
	cursor:pointer;
}
#mainvisual .slider .prev::after {
	content:'';
	transform:rotate(-45deg);
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:12px;
	height:12px;
	margin:-6px 0 0 -5px;
	border-top:2px solid #FFFFFF;
	border-left:2px solid #FFFFFF;
}
#mainvisual .slider .next {
	position:absolute;
	top:85px;
	right:5px;
	width:54px;
	height:54px;
	border-radius:50%;
	background-color:#00B9EF;
	cursor:pointer;
}
#mainvisual .slider .next::after {
	content:'';
	transform:rotate(45deg);
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:12px;
	height:12px;
	margin:-6px 0 0 -9px;
	border-top:2px solid #FFFFFF;
	border-right:2px solid #FFFFFF;
}


/*
 * service
 */
#topService.layout.panel section {
	padding-bottom:20px;
}
#topService.layout.panel section .title {
	margin:160px 0 10px 0;
	font-size:2.2rem;
}
#topService.layout.panel section p.image {
	top:20px;
}
#topService.layout.panel section p.image img {
	max-height:160px;
}

/*
 * facebook
 */
#facebook {
	margin-top:15px;
}
#facebook a {
	display:block;
	text-align:center;
}

/*
 * works
 */
#topWorks {
	margin:15px 0 0 0;
	padding:0 0 20px 0;
	border-bottom:1px solid #FFFFFF;
	border-radius:0;
	background-image:url(/img/top/bg_works.gif);
	background-repeat:repeat;
	background-position:top left;
	box-shadow:none;
}
#topWorks h1 {
	margin:0;
	background-image:url(/img/top/bg_works_title.gif);
	background-repeat:repeat-x;
	background-position:top left;
	text-align:center;
}
#topWorks .slider {
	visibility:hidden;
	overflow:hidden;
	height:180px;
}
#topWorks ul {
	width:200%;
	height:100%;
	margin-top:10px;
}
#topWorks ul li {
	float:left;
	margin:0 15px 10px 0;
}
#topWorks ul li a {
	text-decoration:none;
}
#topWorks ul li img {
	display:block;
	float:left;
	margin:0 5px;
	border:2px solid #FFFFFF;
	box-shadow:0 0 2px 2px rgba(96,96,96,0.1);
}
#topWorks .prev {
	position:absolute;
	top:130px;
	left:5px;
	width:54px;
	height:54px;
	border-radius:50%;
	background-color:rgba(0,0,0,0.8);
	cursor:pointer;
}
#topWorks .prev::after {
	content:'';
	transform:rotate(-45deg);
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:12px;
	height:12px;
	margin:-6px 0 0 -5px;
	border-top:2px solid #FFFFFF;
	border-left:2px solid #FFFFFF;
}
#topWorks .next {
	position:absolute;
	top:130px;
	right:5px;
	width:54px;
	height:54px;
	border-radius:50%;
	background-color:rgba(0,0,0,0.8);
	cursor:pointer;
}
#topWorks .next::after {
	content:'';
	transform:rotate(45deg);
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:12px;
	height:12px;
	margin:-6px 0 0 -9px;
	border-top:2px solid #FFFFFF;
	border-right:2px solid #FFFFFF;
}