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

section#main {
	width: 100%;
	height: 600px;
	background: url(../img/slide01.jpg) bottom center no-repeat;
	background-size: cover;
	position: relative;
}
#main-green {
	width: 60%;
	height: 600px;
	background: url(../img/slide-green.png) right 0 no-repeat;
	background-size: cover;
}

p.main01 {
	position: absolute;
	top: 165px;
	left: 15%;
	width: 358px;
}
section#main h2 {
	position: absolute;
	top: 200px;
	left: 15%;
	width: 397px;
}
p.main02 {
	position: absolute;
	top: 260px;
	left: 15%;
	width: 543px;
}
p.main03 {
	position: absolute;
	top: 320px;
	left: 15%;
	width: 557px;
}

section#second {
	width: 100%;
	background: url(../img/green01-2.jpg) 0 0 no-repeat;
	background-size: contain;
}
section#second p {
	text-align: center;
	font-size: 17px;
	line-height: 2em;
	letter-spacing: 0.2em;
	padding: 100px 0;
}

section#works {
	width: 100%;
	background: url(../img/top02.jpg) left bottom no-repeat;
	background-size: cover;
	height: 450px;
}
#worksbox {
	background: url(../img/slice-right.png) left bottom;
	background-size: cover;
	width: 50%;
	margin: 0 0 0 50%;
	height: 450px;
}
h3 {
	width: 350px;
	padding: 80px 0 20px 30%;
}
#worksbox p {
	padding: 0 0 0 30%;
	font-size: 15px;
}

section#product {
	width: 100%;
	background: url(../img/top03.jpg) right bottom no-repeat;
	background-size: cover;
	height: 450px;
}
#productbox {
	background: url(../img/slice-left.png) right top;
	background-size: cover;
	width: 50%;
	margin: 0 50% 0 0;
	height: 450px;
}
h3 {
	width: 350px;
	padding: 80px 0 20px 30%;
}
#productbox p {
	padding: 0 0 0 30%;
	font-size: 15px;
}

section#cont {
	width: 100%;
	overflow: hidden;
}
#company {
	float: left;
	width: 50%;
	height: 450px;
	background: url(../img/top-company.jpg) 0 0 no-repeat;
	background-size: cover;
}
#message {
	float: left;
	width: 50%;
	height: 450px;
	background: url(../img/top-ceo.jpg) 0 0 no-repeat;
	background-size: cover;
}

section#cont h3 {
	width: 300px;
	padding: 50px 0 20px 10%;
}
section#cont p {
	padding: 0 0 0 10%;
	font-size: 15px;
}


section#recruit {
	width: 100%;
	padding: 0 0 0 0;
	height: 400px;
	background: url(../img/top-recruit.jpg) bottom center no-repeat;
	background-size: contain;
	margin: 100px 0 0 0;
}





.button {
  display: inline-block;
  width: 200px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	margin: 20px 0 0 30%;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button {
  position: relative;
  z-index: 2;
  border: 2px solid #fff;
  color: #fff;
  line-height: 50px;
  overflow: hidden;
}
.button:hover {
  color: #fff;letter-spacing: 0.3em;
}
.button::after {
  top: -100%;
  left: -100%;
  width: 100%;
  height: 100%;
}
.button:hover::after {
  top: 0;
  left: 0;
  background-color: #00978F;
}






.button2 {
  display: inline-block;
  width: 200px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	margin: 20px 0 0 10%;
}
.button2::before,
.button2::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button2,
.button2::before,
.button2::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button2 {
  position: relative;
  z-index: 2;
  border: 2px solid #00978F;
  color: #00978F;
  line-height: 50px;
  overflow: hidden;
}
.button2:hover {
  color: #fff;letter-spacing: 0.3em;
}
.button2::after {
  top: -100%;
  left: -100%;
  width: 100%;
  height: 100%;
}
.button2:hover::after {
  top: 0;
  left: 0;
  background-color: #00978F;
}



.button3 {
  display: inline-block;
  width: 20%;
  height: 60px;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
	margin: 250px 40% 0 40%;
	box-sizing: border-box;;
}
.button3::before,
.button3::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button3,
.button3::before,
.button3::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button3 {
  position: relative;
  z-index: 2;
  border: 2px solid #00978F;
  color: #00978F;
  line-height: 60px;
  overflow: hidden;
	font-size: 26px;
	letter-spacing: 0.2em;
}
.button3:hover {
  color: #fff;letter-spacing: 0.4em;
}
.button3::after {
  top: -100%;
  left: -100%;
  width: 100%;
  height: 100%;
}
.button3:hover::after {
  top: 0;
  left: 0;
  background-color: #00978F;
}
section#information {
	width: 100%;
	background: url(../img/green02-1.jpg) bottom right no-repeat;
	padding: 0 0 80px 0;
}
#info {
	width: 900px;
	margin: 80px auto 0;
}
#info h3 {
	width: 270px;
	padding: 0 0 0 0;
	display: inline-block;
	vertical-align: top;
}
#infobox {
	display: inline-block;
	width: 600px;
	margin: 0 0 0 20px;
	vertical-align: top;
}
#infobox dl {
	margin: 0;
	padding: 15px 10px 0 20px;
	font-size: 15px;
	overflow: hidden;
}
#infobox dt {
	clear: left;
	float: left;
	width: 7em;
	padding: 5px 0 5px 10px;
	background-color: #eee;
	color: #555;
}
#infobox dd {
	margin-left: 9em;
	margin: 0 0 10px 0;
	float: left;
	padding: 3px 0 5px 15px;
	line-height: 1.8em;
}
#infobox dd a {
	text-decoration: none;
	color: #555;
}
#infobox dd a:hover {
	text-decoration: underline;
	color: #d90000;
}
/*ポートレート==========================================================================================================*/
@media screen and (max-width: 840px) {


section#recruit {
	width: 100%;
	padding: 0 0 0 0;
	height: 400px;
	background: url(../img/top-recruit.jpg) bottom center no-repeat;
	background-size: contain;
	margin: 0 0 0 0;
}
}



/*スマホ==========================================================================================================*/
@media screen and (max-width: 480px) {

	
	
	section#main {
	width: 100%;
	height: 350px;
	background: url(../img/slide01.jpg) bottom center no-repeat;
	background-size: cover;
	position: relative;
}
#main-green {
	width: 90%;
	height: 350px;
	background: url(../img/slide-green.png) right 0 no-repeat;
	background-size: cover;
}

p.main01 {
	position: absolute;
	top: 80px;
	left: 5%;
	width: 70%;
}
section#main h2 {
	position: absolute;
	top: 115px;
	left: 5%;
	width: 85%;
}
p.main02 {
	position: absolute;
	top: 160px;
	left: 5%;
	width: 80%;
}
p.main03 {
	position: absolute;
	top: 200px;
	left: 5%;
	width: 70%;
}

section#second {
	width: 100%;
	background: url(../img/green01-3.jpg) 0 0 no-repeat;
	background-size: contain;
}
section#second p {
	text-align: justify;
	font-size: 14px;
	line-height: 1.7em;
	letter-spacing: 0.2em;
	padding: 50px 5%;
}

section#works {
	width: 100%;
	background: url(../img/top02.jpg) left bottom no-repeat;
	background-size: cover;
	height: 400px;
}
#worksbox {
	background: url(../img/slice-right.png) left bottom;
	background-size: cover;
	width: 100%;
	margin: 0 0 0 0;
	height: 400px;
}
h3 {
	width: 60%;
	padding: 50px 0 20px 10%;
}
#worksbox p {
	padding: 0 10%;
	font-size: 15px;
	color: #fff;
	text-shadow:2px 2px 3px #666;
}

section#product {
	width: 100%;
	background: url(../img/top03.jpg) right bottom no-repeat;
	background-size: cover;
	height: 400px;
}
#productbox {
	background: url(../img/slice-left.png) right top;
	background-size: cover;
	width: 100%;
	margin: 0 0 0 0;
	height: 400px;
}

#product p {
	padding: 0 10%;
	font-size: 15px;
	color: #fff;
	text-shadow:2px 2px 3px #666;
}

section#cont {
	width: 100%;
	overflow: hidden;
}
#company {
	float: none;
	width: 100%;
	height: 500px;
	background: url(../img/top-company.jpg) right bottom no-repeat;
	background-size: contain;
}
#message {
	float: none;
	width: 100%;
	height: 500px;
	background: url(../img/top-ceo.jpg) right bottom no-repeat;
	background-size: contain;
}

section#cont h3 {
	width: 60%;
	padding: 50px 0 20px 10%;
}
section#cont p {
	padding: 0 10%;
	font-size: 15px;
}


section#recruit {
	width: 100%;
	padding: 0 0 0 0;
	height: 280px;
	background: url(../img/top-recruit_sp.jpg) bottom center no-repeat;
	background-size: contain;
	margin: 0 0 0 0;
}

	
	
section#information {
	width: 100%;
	background: url(../img/green02-1.jpg) bottom right no-repeat;
	padding: 0 0 80px 0;
}
#info {
	width: 100%;
	margin: 50px auto 0;
}
#info h3 {
	width: 50%;
	margin: 0 auto;
	padding: 0 0 0 0;
	display: block;
	vertical-align: top;
}
#infobox {
	display: block;
	width: 90%;
	margin: 0 auto;
	vertical-align: top;
}
#infobox dl {
	margin: 0;
	padding: 15px 0 0 0;
	font-size: 15px;
	overflow: hidden;
}
#infobox dt {
	clear: left;
	float: left;
	width: 7em;
	padding: 5px 0 5px 10px;
	background-color: #eee;
	color: #555;
}
#infobox dd {
	margin-left: 9em;
	margin: 0 0 10px 0;
	float: left;
	padding: 3px 0 5px 15px;
	line-height: 1.8em;
}
#infobox dd a {
	text-decoration: none;
	color: #555;
}
#infobox dd a:hover {
	text-decoration: underline;
	color: #d90000;
}	
.button {
  display: inline-block;
  width: 50%;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	margin: 50px 0 0 25%;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button {
  position: relative;
  z-index: 2;
  border: 2px solid #fff;
  color: #fff;
  line-height: 50px;
  overflow: hidden;
}
.button:hover {
  color: #fff;letter-spacing: 0.3em;
}
.button::after {
  top: -100%;
  left: -100%;
  width: 100%;
  height: 100%;
}
.button:hover::after {
  top: 0;
  left: 0;
  background-color: #00978F;
}






.button2 {
  display: inline-block;
  width: 50%;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	margin: 30px 0 0 25%;
}
.button2::before,
.button2::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button2,
.button2::before,
.button2::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button2 {
  position: relative;
  z-index: 2;
  border: 2px solid #00978F;
  color: #00978F;
  line-height: 50px;
  overflow: hidden;
}
.button2:hover {
  color: #fff;letter-spacing: 0.3em;
}
.button2::after {
  top: -100%;
  left: -100%;
  width: 100%;
  height: 100%;
}
.button2:hover::after {
  top: 0;
  left: 0;
  background-color: #00978F;
}



.button3 {
  display: inline-block;
  width: 50%;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
	margin: 50px 0 0 25%;
}
.button3::before,
.button3::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button3,
.button3::before,
.button3::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button3 {
  position: relative;
  z-index: 2;
  border: 2px solid #00978F;
  color: #00978F;
  line-height: 60px;
  overflow: hidden;
	font-size: 26px;
	letter-spacing: 0.2em;
}
.button3:hover {
  color: #fff;letter-spacing: 0.4em;
}
.button3::after {
  top: -100%;
  left: -100%;
  width: 100%;
  height: 100%;
}
.button3:hover::after {
  top: 0;
  left: 0;
  background-color: #00978F;
}	
}