@charset "UTF-8";
/* CSS Document */

header {
	margin: 0;
	padding: 0;
}
img {
	width: 100%;
	vertical-align: top;
}
ul {
	padding-left: 0;
}
li {
	list-style: none;
}
.wrapper {
	width:95%;
	margin: 0 auto;
}
article.work_nav {
	text-align: center;
}
article.work_nav h1 {
	line-height: 1em;
	margin: 1em;
	font-weight: bold;
	border-bottom: 1px solid #0087c3;
	padding-bottom: 10px;
}
article.work_nav h1 span {
	display: block;
	font-size: 0.6em;
	font-weight: normal;
	color: #666;
	line-height: 1.8em;
}
article.work_nav ul {
	margin: 0 2em 2em 2em;
}
article.work_nav ul li {
	display: inline-block;
	width:23%;
	margin: 5px;
}
article.work_nav ul li a {
	display: block;
	border-radius: 10px;
	padding: 1.5em;
	color:#fff;
}
a.sec01 {
	background-color: #0087c3;
}
a.sec02 {
	background-color: #ec6c00;
}
a.sec03 {
	background-color: #009b7c;
}
a.sec04 {
	background-color: #ed86b3;
}
a.sec05 {
	background-color: #006c8f;
}
a.sec06 {
	background-color: #666;
}
a.sec07 {
	background-color: #179342;
}
a.sec08 {
	background-color: #29abe2;
}
a.sec09 {
	background-color: #990000;
}
a.sec10 {
	background-color: #999900;
}
a.sec11 {
	background-color: #8cc63f;
}
article.work {
	background-color: #fff;
	padding: 20px;
	margin: 60px 0 100px 0;
	border-radius: 10px;
	box-shadow: rgba(0, 175, 236, 0.5) 10px 10px;
	font-size: 0;
	text-align: center;
	scroll-margin-top: 50px;
	vertical-align: top;
}
article.work h2 {
	text-align: left;
	margin-bottom: 20px;
	position:relative;
	left: -30px;
}
article.work h2 img {
	width: 40%;
}
article.work li {
	display: inline-block;
	width: 13%;
	margin: 0 1% 0 1% ;
	font-size: 13px;
	vertical-align:middle;
}
article.work li a {
	color: #000;
}
section.work_sec {
	display: inline-block;
	width: 28%;
	font-size: 16px;
	margin: 0 15px 60px 15px;
	vertical-align: top;
	text-align: left;
	background-color: #Fff;
	padding: 10px;
	border:2px #0087c3 solid;
	border-radius: 20px;
	scroll-margin-top: 150px;
}
section.work_sec p.name {
	font-size: 0.8em;
}
section.work_sec p.area {
	font-size: 0.8em;
	margin: 0.5em 0 0.5em 0;
}
section.work_sec p.area span {
	text-align: center;
	color:#fff;
	border-radius: 3px 10px 3px 3px;
	padding: 0.3em 0.5em;
	margin: 0 5px 0 0;
}
section.work_sec p.area span.space {
	background-color: #015ca1;
}
section.work_sec p.area span.reserve {
	background-color: #f00;
}
section.work_sec p.area span.age {
	background-color: #da5d72;
}
section.work_sec p.text {
	margin-top: 1em;
	font-size: 0.8em;
	line-height: 1.5em;
}
section.work_sec p.text span {
	font-size: 0.9em;
	color:#900;
}
section.work_sec p.btn {
	width: 90%;
	margin: 1em auto;
}
section.work_sec p.co_logo {
	width: 55%;
	margin: 1em auto 0em auto;
	text-align: center;
}
section.work_sec h3 {
	clear: both;
	line-height: 1.3em;
	padding: 10px 0;
	font-weight: bold;
}
#sec01 h3 {
	color: #0087c3;
}
#sec02 h3 {
	color: #ec6c00;
}
#sec03 h3 {
	color: #009b7c;
}
#sec04 h3 {
	color: #ed86b3;
}
#sec05 h3 {
	color: #006c8f;
}
#sec06 h3 {
	color: #666;
}
#sec07 h3 {
	color: #179342;
}
#sec08 h3 {
	color: #29abe2;
}
#sec09 h3 {
	color: #990000;
}
#sec10 h3 {
	color: #999900;
}
#sec11 h3 {
	color: #8cc63f;
}
@media screen and (max-width: 1499px) {
	.wrapper {
		width:90%;
	}
	article.work li {
		width: 18%;
	}
	article.work_nav ul li a {
		padding: 1em;
	}
	article.work h2 img {
		width: 40%;
	}
	section.work_sec {
		width: 42%;
	}
}
@media screen and (max-width: 799px) {
	.wrapper {
		width:93%;
	}
	article.work li {
		width: 30%;
	}
	article.work_nav ul {
		margin: 0 1em 1em 1em;
	}
	article.work_nav ul li {
		width: 46%;
		margin: 3px 1px;
	}
	article.work_nav ul li a {
		padding: 0.5em;
		font-size: 0.7em;
	}
	article.work h2 {
		left: -27px;
	}
	article.work h2 img {
		width: 100%;
	}
	section.work_sec {
		width: 100%;
		padding: 10px 20px;
		margin: 0px 0px 60px 0px;
	}
}