@charset "utf-8";



html {
	overflow-y: scroll;
}

body, div, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, hgroup, header, address,
figure, figcaption {
	margin: 0;
	padding: 0;
	line-height: 1.8;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
}
q:before ,q:after {
	content: '';
}
object, embed {
	vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
img, abbr, acronym, fieldset {
	border: 0;
}
img {
	vertical-align: top;
	-ms-interpolation-mode: bicubic;
}
ul li {
	list-style-type: none;
}

/* ------ font ------ */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

 
body {
     font-family: 'Noto Sans JP', serif;
     font-size: 100%;
}

body {
	font-family: "Noto Sans JP", sans-serif;
	font-weight:500;
	color: #222;
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
	letter-spacing: -0.001em;	
	-webkit-text-size-adjust: 100%;	
}

a, a:link, a:visited {
	color: #fff;
	text-decoration: none;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}
a:hover, a:focus, a:link:hover, a:link:focus, a:visited:hover, a:visited:focus {
	color: #333;
}

.works img:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

img {
	max-width: 100%;
	height: auto;
}
.ie8 img {
	width: auto;
}

p {
	font-size: 100%;
}

.container {
	position: relative;
	width: 90%;
	padding-top: 40px;
	margin: 0 auto;
}

h2 {
	font-family: 'Abel', sans-serif;
	font-size: 24px;
	line-height: 1.2;
}
.top_text{
	line-height:3em;
}


a.btn {
	display: block;
	text-align: center;
	margin: 0 auto;
	width: 160px;
	height: 35px;
	line-height: 35px;
	border: 1px solid #222;
	background: #fff;
}

a.btn:hover {
	background: #363636;
	color: #fff;
}


.foot {
	max-width: 980px;
	margin: 0 auto;
	position: relative;
}
.foot:after {
	content: "";
	display: block;
	clear: both;
}






.top {

	text-align: center;
	display: none;
	margin-bottom: 90px;
}

.top .fview {
	font-weight: bold;
	font-size: 71px;
	line-height: 1.2;
	padding-top: 0px;
	letter-spacing:0.03em;
}
.top .fview img{
	max-width:750px;
}

.top .subTtl {
	font-size: 20px;
	letter-spacing:0.04em
}

.color img{
	width:750px;
}

.hello {
	text-align: center;
	margin-bottom: 80px;
}

.hello p {
	margin-bottom: 10px;
}
.hello span {
	font-size: 25px;
	font-weight:bold;
	color:#7ec9c6;
}
.rogoimage{
	text-align: center;
	margin-bottom:60px;
}
.rogoimage img{
	width:50%;
}

/* ------ works ------ */
.works {
	text-align: center;

}
.works h3{
	font-size:20px;
	padding-bottom:5px;
}


.works li {
	display: inline-block;
	position: relative;
	overflow: hidden;
	width: 31%;
	margin: 0 1% 0% 1%;
}

.thum {
	overflow: hidden;
}

.works li img {
  -webkit-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

.works li img:hover {
	transform: scale(1.10,1.10);
  -webkit-transform:scale(1.10,1.10);
  -moz-transform:scale(1.10,1.10);
  -ms-transform:scale(1.10,1.10);
  -o-transform:scale(1.10,1.10);
}

.cap {
	height:250px;
	padding-top: 10px;
}

/* ------ about ------ */
.about {
	width:100vw;
	text-align: center;
	margin-bottom: 60px;
	padding:40px 0;
	background:#7ec9c6;
	color:#ffffff;
}

.about table {
	width: 70%;
	margin: 0 auto 60px;
	border: none;
}

.about th {
	width: 20%;
	text-align: left;
	vertical-align: top;
	padding: 10px;
}

.about td {
	width: 80%;
	text-align: left;
	padding: 10px;
}

/* ------ contact ------ */
.contact {
	text-align: center;
	margin-bottom: 100px;
}

.form {
	width: 60%;
	margin: 0 auto;
}

.form label {
	display: block;
	text-align: left;
}

.form input {
	width: 96%;
	margin-bottom: 20px;
	padding: 2%;
	border: 1px solid #cccccc;
}

.form textarea {
	width: 96%;
	margin-bottom: 40px;
	padding: 2%;
	height: 120px;
	border: 1px solid #cccccc;
}

.btnSubmit {
	display: inline-block;
	text-align: center;
	margin: 0 auto;
	width: 160px;
	height: 40px;
	line-height: 30px;
	font-size: 12px;
	border: 1px solid #222;
	background: #fff;
	cursor: pointer;
	padding: 0;
}

.btnSubmit:hover {
	background: #222;
	color: #fff;
}


/* ------ footer ------ */

footer {
	padding: 10px;
	text-align: center;
}

footer p {
	font-size: 12px;
}


/* ------ pagetop ------ */

#page-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
}
#page-top:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

/* ------ SP ----- */
@media screen and (max-width: 767px) {
	.top{
		margin-bottom: 40px;
	}
	.top_text{
		text-align:left;
		line-height:2.5em;
	}
	.top .fview img{
		width:100%;
	}
	.color img{
		width:100%;
	}
	.works li {

		margin:0 auto;
	}
	.rogoimage img{
		width:90%;
	}
}


/*-----------------------------------------------------	*/
/*	下層共通						*/
/*-----------------------------------------------------	*/


/*-----------------------------------------------------	*/
/*	about.html						*/
/*-----------------------------------------------------	*/

.aboutCon {
	text-align: center;
	margin-bottom: 160px;
}


/*-----------------------------------------------------	*/
/*	works.html						*/
/*-----------------------------------------------------	*/

.mt100 {
	margin-top: 0px;
}
.works .pager ul {
	text-align: center;
}
.works .pager li {
	display: inline;
	margin: 0 10%;
}
.worksDtl {
	margin-bottom: 60px;
}


/*-----------------------------------------------------	*/
/*	確認画面
/*-----------------------------------------------------	*/

#formWrap {
	width:700px;
	margin:0 auto;
}
table.formTable{
	width:100%;
	margin:60px auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	background:#efefef;
	text-align:left;
}
p.error_messe{
	margin:5px 0;
	color:red;
}

#formWrap input {
	margin: 0 10px;
}

.mb160 {
	margin-bottom: 160px;
}





/*-----------------------------------------------------	*/
/*	for - 639px					*/
/*-----------------------------------------------------	*/

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

	body {
		font-size: 14px;
	}

	/* ------ Column ------ */

	.row {
		padding: 0 25px;
	}

	#gNav {
		display: none;
	}

	a.btn {
		width: 50%;
		height: 50px;
		line-height: 50px;
		font-size: 16px;
	}

	/* ------ hello ------ */
	.hello {
		margin-bottom: 80px;
	}

	.hello p br{
		display: none;
	}

	/* ------ works ------ */

	.works .row{
		padding: 0;
	}
	.works ul {
		overflow: hidden;
		zoom: 1;
	}
	.works li {
		float: left;
		width: 45%;
		margin: 0 0 50px 0;
		padding:0 5px;
	}
	.cap {
		padding-top: 10px;
	}

	.worksThum  {
		padding: 10px 0 0 10px;
		text-align: left;
	}

	.worksThum h3 {
		font-size:16px;
		margin: 0 0;
		line-height: 1.2em;
	}

	/* ------ about ------ */
	.about {
		margin-bottom: 40px;
		font-size: 17px;
	}

	.about .row {
		padding: 0 20px;
	}

	.about table {
		width: 100%;
		margin-bottom: 20px;
	}

	.about th {
		width: 35%;
	}

	.about td {
		width: 65%;
	}

	/* ------ contact ------ */
	.contact {
		text-align: center;
		margin-bottom: 80px;
	}
	
	.form {
		width: 90%;
	}

	.btnSubmit {
		width: 60%;
		height: 50px;
		line-height: 50px;
		font-size: 16px;
	}

	/* ------ pagetop ------ */

	#page-top {
	  position: fixed;
	  bottom: 0px;
	  right: 0px;
	}


	/* ------ footer ------ */
	#copyright p {
		text-align: center;
	}

	/*-----------------------------------------------------	*/
	/*	works.html						*/
	/*-----------------------------------------------------	*/

	.works .pager li {
		margin: 0;
	}


	/*-----------------------------------------------------	*/
	/*	inquiry.html						*/
	/*-----------------------------------------------------	*/

	.contactTxt {
		margin-bottom: 40px;
	}

	/*-----------------------------------------------------	*/
	/*	確認画面						*/
	/*-----------------------------------------------------	*/

	#formWrap {
		width:100%;
	}
	table.formTable{
		margin:40px auto;
	}

	p.error_messe{
		margin:5px 0;
		color:red;
	}

	#formWrap .btnSubmit {
		display: block;
		margin-bottom: 30px;
	}



}