@charset "UTF-8";


/*--- OVERRIDE ------------------*/


/* ------------------------------------
 * WORKS
 * ------------------------------------ */

/* LOCAL NAV */

.localNav ul {
	margin: 60px 0;
	text-align: center;
	font-size: 0;
}

.localNav li {
	display: inline-block;
	width: 20%;
	font-size: 12px;
}

.localNav li a {
	display: block;
	margin: 0 10px;
	padding: 8px 0;
	border: solid 1px #d9d9d9;
}
.localNav li a:hover {
	border-color: #898989;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

@media (max-width: 999px) {
	.localNav li {
		width: 32%;
	}
}

@media (max-width: 639px) {
	.localNav ul {
		margin: 40px -5px;
	}
	.localNav li {
		width: 50%;
		font-size: 13px;
	}
	.localNav li a {
		margin: 0 5px;
		font-size: 85%;
	}
}

section h3 {
	line-height: 1;
	text-align: center;
	font-size: 142%;
}
section h3::before,
section h3::after {
	content: "";
    display: block;
	width: 26px;
    height: 1px;
	margin: 0 auto;
	background-color: #d9d9d9;
}
section h3::before {
	margin-bottom: 30px;
}
section h3::after {
	margin-top: 30px;
	margin-bottom: 30px;
}

#work_1 {
	margin-bottom: 120px;
}

.workBox dt {
	margin: 20px 0;
	padding: 3px 20px;
	border-left: solid 1px #d9d9d9;
	font-size: 117%;
	color: #888888;
}

.brand {
	width: 28%;
	margin: 0 auto;
}

.brand img {
	width: 100%;
}

.thumList {
	margin: 20px -2% 60px -1%;
}

.thumList li {
	float: left;
	width: 33%;
	text-align: center;
}

.thumList li a,
.thumList li div {
	display: block;
	margin: 0 3%;
}
.thumList li a:hover {
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	opacity: 0.6;
	filter: alpha(opacity=60);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
	-moz-opacity: 0.6;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6;   
}

.thumList li .thum {
	margin-bottom: 10px;
}

.thumList li img {
	display: block;
	width: 100%;
}

.thumList li strong,
.thumList li span {
	display: block;
	line-height: 1;
}
.thumList li strong {
	margin-bottom: 5px;
	font-size: 92%;
}
.thumList li span {
	font-size: 84%;
}


.note {
	text-align: center;
}

#flow {
	margin: 15px -15px 60px;
}

.flowBox {
	float: left;
	width: 20%;
}

.flowImg {
	display: block;
	position: relative;
	padding: 15px;
}
.flowImg::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
	height: 1px;
	background: #cbcbcb;
	z-index: -1;
}
#flow_1 .flowImg::before {
	left: auto;
	right: 0;
    width: 50%;
}
#flow_5 .flowImg::before {
    width: 50%;
}

.flowImg img {
	display: block;
	width: 100%;
}

.flowBox .caption {
	display: block;
	padding: 0 15px 10px 20px;
	font-size: 92%;
	letter-spacing: 0.03em;
}

.cs {
	display: block;
	padding-bottom: 10px;
	text-align: center;
	font-size: 250%;
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	color: #bebebe;
}

@media (max-width: 999px) {
	.note {
		text-align: left;
	}
}

@media (max-width: 767px) {
	.brand {
		width: 38%;
	}
	#flow {
		position: relative;
		margin: 20px 8% 60px;
	}
	#flow::before {
		content: "";
		position: absolute;
		top: 0;
		left: 13%;
		width: 1px;
		height: 100%;
		background: #cbcbcb;
		z-index: -1;
	}
	.flowBox {
		float: none;
		width: auto;
	}
	.flowImg {
		display: block;
		position: relative;
		float: left;
		width: 26%;
		padding: 0 0 15px;
	}
	#flow_5 .flowImg {
		padding-bottom: 0;
	}
	.flowBox .caption {
		padding: 10% 0 15px 30%;
	}
}


@media (max-width: 639px) {
	#work_1 {
		margin-bottom: 80px;
	}
	section h3 {
		font-size: 131%;
	}
	.workBox dt {
		margin-bottom: 15px;
		font-size: 108%;
	}
	.thumList {
		margin: 20px 0 50px;
	}
	.thumList li {
		width: 100%;
		margin-bottom: 10px;
		border-bottom: solid 1px #f0f0f0;
	}
	.thumList li:last-child {
		border-bottom: none;
	}
	.thumList li a,
	.thumList li div {
		display: table;
		margin: 0;
	}
	.thumList li .thum {
		display: table-cell;
		width: 45%;
		margin-bottom: 0;
		padding-bottom: 10px;
	}
	.thumList li .text {
		display: table-cell;
		padding: 0 0 5px 5%;
		vertical-align: middle;
	}
	.thumList li strong {
		margin-top: 0;
	}
	#flow {
		margin: 20px 5% 60px;
	}
	#flow::before {
		left: 16%;
	}
	.flowImg {
		width: 32%;
	}
	.flowBox .caption {
		padding: 10% 0 15px 42%;
		font-size: 85%;
		letter-spacing: 0;
	}
	.cs {
		font-size: 200%;
	}
}

@media (max-width: 539px) {
	.brand {
		width: 48%;
	}
	#flow {
		margin: 20px 3% 60px;
	}
	#flow::before {
		left: 18%;
	}
	.flowImg {
		width: 36%;
	}
}

@media (max-width: 413px) {
	#flow {
		margin: 20px 0 60px;
	}
	.flowBox .caption {
		padding: 7% 0 15px 42%;
	}
}


/* ------------------------------------
 * clearfix
 * ------------------------------------ */

.thumList:after,
#flow:after,
.flowBox:after {
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    font-size: 0.1em;
    content: ".";
    visibility: hidden;
}