@charset "utf-8";
#mainPanel {
	background-image:url(../img/top/main.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-color:#040819;
}
#mainPanel ul {
	width:1085px;
	height:660px;
	margin:0 auto;
	position:relative;
}
#mainPanel li {
	position:absolute;
	background-color:#dcdcdc;
	text-align:center;
	font-size:1.6rem;
	list-style:none;
	position:absolute;
	width:330px;
	box-sizing:border-box;
	padding:0.75em 0;
}
#mainPanel li b {
	font-size:4rem;
	color:#14345b;
	font-weight:600;
	letter-spacing:-0.05em;
	margin-right:0.1em;
	vertical-align:-0.8rem;
}
#mainPanel li:nth-child(1) {
	top:135px;
	left:50%;
	margin-left:-505px;
}
#mainPanel li:nth-child(2) {
	top:135px;
	right:50%;
	margin-right:-550px;
}
#mainPanel li:nth-child(3) {
	left:50%;
	bottom:90px;
	margin-left:-505px;
}
#mainPanel li:nth-child(4) {
	right:50%;
	bottom:90px;
	margin-right:-550px;
}
#mainPanel ul + p {
	text-align:center;
	color:#fff;
	font-weight:200;
	font-size:2rem;
	padding:1em;
}

#service {
	padding:5em 0;
}
#service ul {
	width:67.5%;
	max-width:945px;
	margin:0 auto;
	display:flex;
}
#service ul li {
	list-style:none;
	width:44%;
	line-height:1.6;
	position:relative;
}
#service ul li:first-child {
	margin-right:12%;
}
#service ul li:first-child:after {
	content:"+";
	position:absolute;
	right:-17%;
	top:-0.2em;
	font-size:5rem;
	font-weight:600;
}
#service ul li h3 {
	background-color:#b0810e;
	color:#fff;
	font-size:2.4rem;
	padding:0.5em 0 0.7em;
	text-align:center;
	margin-bottom:1.6em;
	line-height:1;
}
#service ul li h3 b:before {
	content:" ";
	background-image:url(../img/top/service_icon1.svg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:auto 100%;
	width:42px;
	height:36px;
	display:inline-block;
	vertical-align:-0.2em;
	margin-right:0.2em
}
#service ul li:nth-child(2) h3 {
	background-color:#a84a00;
}
#service ul li:nth-child(2) h3 b:before {
	background-image:url(../img/top/service_icon2.svg);
	vertical-align:-0.25em;
}
#service ul li h3 b,
#service ul li p {
	font-weight:400;
}
#service ul li p:last-child {
	margin-top:2.8em;
}
#service ul li p:last-child a {
	background-color:#333333;
	color:#fff;
	text-align:center;
	margin:0 auto;
	width:50%;
	box-sizing:border-box;
	display:block;
	padding:0.9em 0;
	text-decoration:none;
	line-height:1;
}
#project {
	background-color:#535353;
	color:#fff;
	padding:5em 0;
}
#project h2 + p{
	text-align:center;
	line-height:1.6;
	margin-bottom:5em;
}
#project ul {
	width:81%;
	max-width:1130px;
	margin:0 auto;
	display:flex;
	padding-bottom:5em;
}
#project li {
	list-style:none;
	margin-right:5.3%;
}
#project li a:link,
#project li a:visited {
	color:#fff;
}
#project li:nth-child(3) {
	margin-right:0;
}
#project li figure {
	margin-bottom:0.75em;
}
#project li h3 {
	font-weight:500;
	margin-bottom:0.5em;
	line-height:1.6;
	font-size:1.8rem;
}
#project li h3 + p {
	font-size:1.6rem;
	margin-bottom:2em;
	color:#cccccc;
}
#project li figure img {
	width:100%;
}
#project li h3 + p span {
	display:inline-block;
	background-color:#000;
	font-size:1.2rem;
	padding:0.2em 0.8em;
}
#project li p:last-child {
	line-height:1.6;
}
#project p.more a {
	background-color:#fff;
	max-width:720px;
	width:51%;
	margin:0 auto;
	display:block;
	text-align:center;
	text-decoration:none;
	padding:1em;
	box-sizing:border-box;
}

#access {
	padding:5em 0 10em;
}
#map {
	width:74.6%;
	padding-top:27.7em;
	position:relative;
	margin:0 auto 2em;
	max-width:1045px;
}
#map iframe {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}
#access dl {
	display:flex;
	max-width:820px;
	width:58.5%;
	margin:0 auto 2em;
	line-height:1.6;
}
#access dt {
	font-weight:600;
	padding-right:1em;
}
#access dd span {
	display:inline-block;
	margin-left:-0.5em;
}
#access dl + p {
	max-width:820px;
	width:58.5%;
	margin:0 auto;
	line-height:1.6;
}
@media screen and (min-width:768px) and (max-width: 1085px) {
#mainPanel ul {
	width:100%;
}
#mainPanel li:nth-child(1),
#mainPanel li:nth-child(3) {
	margin-left:-45%;
}
#mainPanel li:nth-child(2),
#mainPanel li:nth-child(4) {
	margin-right:-45%;
}
}
@media screen and (min-width:737px) and (max-width: 768px) {
#mainPanel ul + p {
	font-size:1.5rem;
}
#service ul {
	width:90%;
}


}
@media screen and (max-width: 736px) {
#mainPanel {
	background-image:url(../img/top/main_sp.jpg);
	background-size:100% auto;
	padding-top:17.5em;
}
#mainPanel ul {
    width: 75%;
	height:auto;
	margin:0 auto;
}
#mainPanel li,
#mainPanel li:nth-child(1),
#mainPanel li:nth-child(2),
#mainPanel li:nth-child(3),
#mainPanel li:nth-child(4){
	position:inherit;
	left:inherit;
	top:inherit;
	right:inherit;
	bottom:inherit;
	width:100%;
	margin:0;
	margin-bottom:1em;
	font-size:1.2rem;
}
#mainPanel li b {
	font-size:2.5rem;
	vertical-align: -0.5rem;
}
#mainPanel ul + p {
	font-size:1.2rem;
	line-height:1.6;
	padding-bottom:2em;
}
#service,
#project{
    padding: 3em 0;
}

#service ul {
	width:82.8%;
	display:block;
	margin:0 auto;
}
#service ul li {
	width:100%;
	margin-right:0;
	margin-bottom:1em;
}
#service ul li h3 {
	margin-bottom:1em;
}
#service ul li p:last-child {
	margin:1.5em 0 1em;
}
#service ul li:first-child:after {
	position:inherit;
	right:inherit;
	top:inherit;
	margin-left:47%;
	font-size:2.5rem;
}
#service ul li h3 {
	font-size:1.5rem;
}
#service ul li h3 b:before {
	height:0;
	padding-top:1.6em;
	margin-right:0;
}
}
@media screen and (max-width: 768px) {
#project h2 + p{
	width:82.8%;
	text-align:left;
	margin:0 auto 3.3em;
}

#project li figure {
	width:63.2%;
	margin:0 auto 1em;
}
#project li figure img {
	width:100%;
}

#project ul {
	display:block;
	padding-bottom:0;
}
#project li h3 {
	font-size:1.8rem;
}
#project li h3 + p {
	font-size:1.2rem;
	margin-bottom:1.5em;
}

#project li {
	margin-bottom:4em;
}
#project p.more a {
	margin-bottom:3em;
}
}
@media screen and (max-width: 736px) {
#map {
	padding-top:19.2em;
	width:79.68%;
}
#access dl,
#access dl + p {
	width:79.68%;
	display:block;
}
#access {
	padding-bottom:5em;
}
#project li h3 {
	font-size:1.2rem;
}
#project li h3 + p {
	font-size:1rem;
}
}