@charset "utf-8";

/*
 *  Wideglo Website
 *  Copyright 2018 Wideglo
 *  https://www.wideglo.jp/
 */
 
/* --------------------------------------------------------------
	about.css
-------------------------------------------------------------- */

/* #titleimg
============================================================== */

#titleimg{
	height:350px;
	background-image:url("https://www.wideglo.jp/common/img/about/pageimage.jpg");
	background-size:cover;
}

#titleimg h1{
	margin:170px auto 30px;
}

/* #toptext
============================================================== */

#toptext{
	width:780px;
}

#toptext h2{
	line-height:130%;
}

/* #info
============================================================== */

#info{
	position:relative;
	padding:150px 0;
	margin:50px auto 0;
}

#info .lefttriangle,
#info .righttriangle{
	position:absolute;
	width:25%;
}

#info .lefttriangle{
	margin:50px 0 0;
	bottom:0;
	left:0;
}

#info .righttriangle{
	margin:0 0 50px;
	top:0;
	right:0;
}

#info table{
	margin:0 auto;
	width:780px;
}

#info table tr{
	border-top:1px #444444 solid;
}

#info table tr:last-child{
	border-bottom:1px #444444 solid;
}

#info table tr th,
#info table tr td{
	padding:30px 0;
}

#info table tr th{
	width:30%;
}

#info table tr td{
	width:70%;
}

#info table tr th p,
#info table tr td p{
	line-height:150%;
}

/* #staff
============================================================== */

#staff{
	text-align:center;
}

#staff h2{
	margin:30px auto 20px;
	font-size:28px;
}

#staff h3{
	font-size:18px;
}

#staff ul{
	margin:60px auto 150px;
	width:960px;
	font-size:0;
}

#staff ul li{
	margin:0 30px;
	width:400px;
	text-align:left;
	vertical-align:top;
	display:inline-block;
	/display:inline;
	/zoom:1;
}

#staff ul li img{
	margin:0 auto 20px;
}

#staff ul li h4,
#staff ul li p{
	font-size:14px;
	display:inline-block;
	/display:inline;
	/zoom:1;
}

#staff ul li h4{
	font-size:16px;
	font-weight:bold;
}

/* --------------------------------------------------------------
	Responsive
-------------------------------------------------------------- */

@media only screen and (max-width:768px){

/* #toptext
============================================================== */

#toptext{
	margin:40px 10% 0;
	width:80%;
}

/* #info
============================================================== */

#info{
	padding:90px 0;
	margin:40px auto 0;
}

#info .lefttriangle,
#info .righttriangle{
	width:30%;
}

#info .lefttriangle{
	margin:40px 0 0;
}

#info .righttriangle{
	margin:0 0 40px;
}

#info table{
	margin:0 10%;
	width:80%;
}

#info table tr th{
	width:40%;
}

#info table tr td{
	width:60%;
}

/* #staff
============================================================== */

#staff ul{
	margin:30px 10% 70px;
	width:80%;
}

#staff ul li{
	margin:0 auto 30px;
	width:100%;
	display:block;
}

#staff ul li img{
	margin:0 auto 20px;
	width:100%;
}

}