.scroll-list{
	max-height:220px;
	overflow-y:auto;
	margin-bottom:30px;
	list-style-type:none;
	background:#FFF;
		margin:0 20px 20px;
		box-shadow:0px 0px 4px #000000;

}


.scroll-list .scroll-item a{
	display:block;
	padding:10px 15px;
	color:#333;
	font-size:0;
	transition:background-color 0.1s;
}

.scroll-list .scroll-item:nth-of-type(even) a{
	background:url(../images/bg-slash.gif);
}

.scroll-list .scroll-item a:hover{
	background-color:#fafaf8;
}


.scroll-list .date{
	display:inline-block;
	width:150px;
	letter-spacing:1px;
	font-weight:bold;
	font-size:0.9rem;
}

.scroll-list .category{
	display:inline-block;
	width:70px;
	border-radius:5px;
	background-color:#d03c56;
	color:#fff;
	text-align:center;
	letter-spacing:1px;
	font-size:0.8rem;
	line-height:16px;
}

.scroll-list .title{
	display:inline-block;
	width:100%;
	padding-left:15px;
	font-size:0.8rem;
}

.scroll-list .category.news{
	background-color:#2c3c53;
}

/*入りきらない表示を「・・・」にする*/

.scroll-list .title{
	display:inline-block;
	width:100%;
	padding-left:15px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:0.8rem;
}


/*ボタン素材データ*/
.button {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button {
	position: relative;
	z-index: 2;
	background-color: #333;
	border: 2px solid #333;
	color: #fff;
	line-height: 50px;
}
.button:hover {
	background-color: #fff;
	border-color: #59b1eb;
	color: #59b1eb;
}
.button::before,
.button::after {
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #333;
}
.button::before {
	top: 0;
}
.button::after {
	bottom: 0;
}
.button:hover::before,
.button:hover::after {
	height: 0;
	background-color: #59b1eb;
}



/*事例大ボタン*/
.p-button {
	display: inline-block;
	width: 680px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.p-button::before,
.p-button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.p-button,
.p-button::before,
.p-button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.p-button {
	position: relative;
	z-index: 2;
	background-color: #59b1eb;
	border: 2px solid #59b1eb;
	color: #fff;
	line-height: 50px;
}
.p-button:hover {
	background-color: #fff;
	border-color: #59b1eb;
	color: #59b1eb;
}
.p-button::before,
.p-button::after {
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #59b1eb;
}
.p-button::before {
	top: 0;
}
.p-button::after {
	bottom: 0;
}
.p-button:hover::before,
.p-button:hover::after {
	height: 0;
	background-color: #59b1eb;
}














.pf-button {
	display: inline-block;
	width: 680px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
			box-shadow:0px 0px 8px #FFF;

}
.pf-button::before,
.pf-button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.pf-button,
.pf-button::before,
.pf-button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.pf-button {
	position: relative;
	z-index: 2;
	background-color: #069;
	border: 2px solid #069;
	color: #fff;
	line-height: 50px;
}
.pf-button:hover {
	background-color: #fff;
	border-color: #069;
	color: #069;
}
.pf-button::before,
.pf-button::after {
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #069;
}
.pf-button::before {
	top: 0;
}
.pf-button::after {
	bottom: 0;
}
.pf-button:hover::before,
.pf-button:hover::after {
	height: 0;
	background-color: #069;
}

/*--a--*/

.p-a-button {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.p-a-button::before,
.p-a-button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.p-a-button,
.p-a-button::before,
.p-a-button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.p-a-button {
	position: relative;
	z-index: 2;
	background-color: #F15A24;
	border: 2px solid #F15A24;
	color: #fff;
	line-height: 50px;
}
.p-a-button:hover {
	background-color: #fff;
	border-color: #F15A24;
	color: #F15A24;
}
.p-a-button::before,
.p-a-button::after {
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #F15A24;
}
.p-a-button::before {
	top: 0;
}
.p-a-button::after {
	bottom: 0;
}
.p-a-button:hover::before,
.p-a-button:hover::after {
	height: 0;
	background-color: #F15A24;
}


/*--b--*/



.p-b-button {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.p-b-button::before,
.p-b-button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.p-b-button,
.p-b-button::before,
.p-b-button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.p-b-button {
	position: relative;
	z-index: 2;
	background-color: #29ABE2;
	border: 2px solid #29ABE2;
	color: #fff;
	line-height: 50px;
}
.p-b-button:hover {
	background-color: #fff;
	border-color: #29ABE2;
	color: #29ABE2;
}
.p-b-button::before,
.p-b-button::after {
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #29ABE2;
}
.p-b-button::before {
	top: 0;
}
.p-b-button::after {
	bottom: 0;
}
.p-b-button:hover::before,
.p-b-button:hover::after {
	height: 0;
	background-color: #29ABE2;
}




/*--c--*/

.p-c-button {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.p-c-button::before,
.p-c-button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.p-c-button,
.p-c-button::before,
.p-c-button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.p-c-button {
	position: relative;
	z-index: 2;
	background-color: #00A99D;
	border: 2px solid #00A99D;
	color: #fff;
	line-height: 50px;
}
.p-c-button:hover {
	background-color: #fff;
	border-color:#00A99D;
	color: #00A99D;
}
.p-c-button::before,
.p-c-button::after {
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #00A99D;
}
.p-c-button::before {
	top: 0;
}
.p-c-button::after {
	bottom: 0;
}
.p-c-button:hover::before,
.p-c-button:hover::after {
	height: 0;
	background-color:#00A99D;
}





/*--ｄ--*/

.p-d-button {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.p-d-button::before,
.p-d-button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.p-d-button,
.p-d-button::before,
.p-d-button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.p-d-button {
	position: relative;
	z-index: 2;
	background-color: #F9C;
	border: 2px solid #F9C;
	color: #fff;
	line-height: 50px;
}
.p-d-button:hover {
	background-color: #fff;
	border-color:#F9C;
	color: #F9C;
}
.p-d-button::before,
.p-d-button::after {
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #F9C;
}
.p-d-button::before {
	top: 0;
}
.p-d-button::after {
	bottom: 0;
}
.p-d-button:hover::before,
.p-d-button:hover::after {
	height: 0;
	background-color:#F9C;
}

/*.works-backimage1{
	background-image:url(../images/works-image7_mini.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	width:100%;
	height:250px;
	margin-top:20px;
			box-shadow:0px 0px 4px #666;

}*/

.w-button {
	display: inline-block;
	width:100%;
	height: 250px;
	text-decoration: none;
	outline: none;

}
.w-button::before,
.w-button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.w-button,
.w-button::before,
.w-button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.w-button {
	position: relative;
	z-index: 2;
	background-color: #CCC;
	/*border: 2px solid #06C;*/
	color: #fff;
	text-align:center;
	font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:bold;
	color:#FFF;
	text-shadow:0px 0px 1px #000,1px 1px 3px #000,-1px -1px 3px #000;
	font-size:20px;
	line-height: 250px;
}

.w-button:hover {
	background-image:url(../images/works-image1_h.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	/*border-color: #59b1eb;*/
	color: #FFF;
}
.w-button::before,
.w-button::after {
	left: 0;
	width: 100%;
	height:100%;
	background-image:url(../images/works-image1_mini.jpg);

	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.w-button::before {
	top: 0;
}
.w-button::after {
	bottom: 0;
}
.w-button:hover::before,
.w-button:hover::after {
	height: 0;
	background-color: #59b1eb;
}

/*-------------------------------------------------*/


.w2-button {
	display: inline-block;
	width:100%;
	height: 250px;
	text-decoration: none;
	outline: none;

}
.w2-button::before,
.w2-button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.w2-button,
.w2-button::before,
.w2-button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.w2-button {
	position: relative;
	z-index: 2;
	background-color: #CCC;
/*	border: 2px solid #066;
*/	color: #fff;
	text-align:center;
font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:bold;	color:#FFF;
	text-shadow:0px 0px 1px #000,1px 1px 3px #000,-1px -1px 3px #000;
	font-size:20px;
	line-height: 250px;
}

.w2-button:hover {
	background-image:url(../images/works-image3_h.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
/*	border-color: #099;
*/	color: #FFF;
}
.w2-button::before,
.w2-button::after {
	left: 0;
	width: 100%;
	height:100%;
	background-image:url(../images/works-image3_mini.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.w2-button::before {
	top: 0;
}
.w2-button::after {
	bottom: 0;
}
.w2-button:hover::before,
.w2-button:hover::after {
	height: 0;
	background-color: #59b1eb;
}

/*-------------------------------------------------*/


.w3-button {
	display: inline-block;
	width:100%;
	height: 250px;
	text-decoration: none;
	outline: none;

}
.w3-button::before,
.w3-button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.w3-button,
.w3-button::before,
.w3-button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.w3-button {
	position: relative;
	z-index: 2;
	background-color: #CCC;
/*	border: 2px solid #F93;
*/	color: #fff;
	text-align:center;
font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:bold;	color:#FFF;
	text-shadow:0px 0px 1px #000,1px 1px 3px #000,-1px -1px 3px #000;
	font-size:20px;
	line-height: 250px;
}

.w3-button:hover {
	background-image:url(../images/works-image2_h.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
/*	border-color:#FC6;
*/	color: #FFF;
}
.w3-button::before,
.w3-button::after {
	left: 0;
	width: 100%;
	height:100%;
	background-image:url(../images/works-image2_mini.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.w3-button::before {
	top: 0;
}
.w3-button::after {
	bottom: 0;
}
.w3-button:hover::before,
.w3-button:hover::after {
	height: 0;
	background-color: #59b1eb;
}



@media screen and (max-width: 640px) {
	
/*事例大ボタン*/

.scroll-list{
		margin:0 5px 5px;
}

.p-button {
	width: 100%;
}

.pf-button {
	width:100%;
}