@charset "UTF-8";
#title { background:url("images/title-bg.jpg") center / cover;}

.works { max-width:1000px; margin: 0 auto; padding: 40px 20px 0 20px; text-align: left; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", sans-serif;}

.contenttitle { background: #F3EFE4 url("images/contenttitle-bg.jpg") no-repeat center;}
	.contenttitle h1::before { content:""; margin-right: 10px; background:url("images/contenttitle.svg") center / contain no-repeat ;}


.works .sbs { margin-top:10px;}

.sbs { background:#F1F1F1; padding: 20px; margin-bottom: 10px;}
	.sbs input[type="text"] { width:calc(100% - 70px);}
	.sbs button[type="button"] { background: #68C3C5; color: #FFF; font-weight: bold; border:1px solid #68C3C5; cursor: pointer;}
		.sbs button[type="button"]:hover { background: #EE4973;border:1px solid #EE4973;}
	.sbs p { padding: 15px 0 0 0; font-size: 14px;}
	.sbs ul { display: block;padding:0 0 5px 0;}
	.sbs li { display: inline-block; padding-right: 20px; font-size: 14px; white-space: nowrap;}
		.sbs li a { color:#68C3C5; text-decoration: none;}
		.sbs li a::before { content:"#";}
		.sbs li a:hover { color:#EA583B; text-decoration: underline;}


@media all and (min-width:320px) {
	/* 320px+ settings */
	.contenttitle h1::before { width: 40px; height: 40px;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.contenttitle h1::before { width: 80px; height: 80px;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
}