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


/* COMMON */

h2{
	font-size: 34px;
	letter-spacing: 0.15em;
}

h2 span{
	font-size: 28px;
	display: block;
	padding: 4px 0 0 4px
}

h3{
	font-size: 22px;
	letter-spacing: 0.15em;
}

p{
	letter-spacing: 0.2em;
	line-height: 30px
}

.more{
	display: block;
	border: 1px solid rgba(255,255,255,0.65);
	padding: 10px 0;
	text-align: center;
	overflow: hidden;
	text-decoration: none;
	letter-spacing: 0.25em;
	transition: .3s;
}

.more:hover{
	background: rgba(255,255,255,0.15);
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - 
　◆ Stracture
　◆ margin padding
- - - - - - - - - - - - - - - - - - - - - - - - - - - */

header{
	background: url(../images/top/headbg.jpg);
	background-position: center;
	background-size:cover;
	letter-spacing: 3px;
	overflow: hidden;
	height: 100vh;
	display: flex;
	/*justify-content: center;*/
	align-items: center;
	-webkit-transition: all 1.3s ease;
	-moz-transition: all 1.3s ease;
	-o-transition: all 1.3s ease;
	transition: all  1.3s ease;
	animation: moveBg 20s infinite ease;
	position: relative
}

@keyframes moveBg{
    0%    { background-position: left; }
    50%  { background-position: right; }
    100%    { background-position: left; }
}

#stc{
	position: absolute;
	left:7%;
	bottom:5.4%;
	font-size: 11px;
	animation: slideInUp 1.8s ease, fadeIn 2.6s ease;
	animation-delay: 2.6s;
	animation-fill-mode:backwards;
}



#stcLine {
	background: rgba(255,255,255,0.75);
	display: block;
	margin:0 0 -6px 7px;
  width: 1px;
  height: 116px;
  animation: squash 3s ease infinite;
	transform-origin:50% 0;
}

@keyframes squash {
  0% {transform: scale(1,0) translate(0, 0);}
  50% {transform: scale(1) translate(0, 0);}
  100% {transform: scale(1) translate(0, 0);}
}


#stcSquare{
	width: 9px;
	height: 9px;
	border: 1px solid rgba(255,255,255,0.75);
	display: block;
	margin: 0 0 8px 3px
}

h1{
	font-size: 17px;
	letter-spacing: 0.3em
}

h1 span{
	font-size: 13px;
	display: block;
}

#gCopy{
	font-size: 10px;
	letter-spacing: 0.25em
}

#headLogo{
	margin: -22px auto 0;
	opacity: 0.9
}

#headLogo {
  animation-name: blur;
  animation-duration: 3.5s;
}

@keyframes blur {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(0);
  }
}


/*　ABOUT US　*/
#about{
	background: url(../images/top/aboutbg.jpg) center -133px;
	height: 792px;
	padding: 68px 0 0 0;
}

#about h2{
	background: url(../images/top/ttl_about.png) no-repeat center left;
	padding: 46px 0 58px 56px;
}

#about h3{
	padding: 0 0 36px 60px;
}

#about section{
	width: 80%;
	margin: 0 auto;
	max-width: 1280px/*max*/
}

#about p{
	width: 76%;
	padding: 0 0 0 60px;
	line-height: 36px
}

#about .more{
	width: 490px;
	margin: 38px 0 0 60px;
}


/*　SERVICES　*/
#service{
	background: url(../images/top/servicebg.jpg) center bottom;
	padding: 110px 0 130px
}

#service h2{
	background: url(../images/top/ttl_service.png) no-repeat center left;
	padding: 70px 0 70px 73px;
	float: left
}

#service h3{
	padding: 0 0 26px 0
}

#service section{
	width: 80%;
	margin: 0 auto;
	max-width: 1280px/*max*/
}

#serviceRead{
	float: right;
	width: calc(100% - 420px);
	padding: 0 40px 0 0; 
}


#serviceRead p{
	line-height: 36px
}

#service .more{
	margin: 32px 0 0 0;
}


#serviceList{
	clear: both;
	width: 830px;
	margin: 0 auto;
	padding: 58px 0 0 0;
	overflow: hidden
}


#serviceList h4{
	font-size: 22px;
	letter-spacing: 0.28em;
	text-align: center
}

#serviceList h4 span{
	margin-top: 5px
}
	
#serviceList li{
	float: left;
	width: 390px;
}

#serviceList li:last-child{
	float: right;
	width: 390px;
}

#serviceList h4 span{
	font-size: 12px;
	letter-spacing: 0.35em;
	display: block
}

#serviceList dt img{
	margin: 24px 0
}

#serviceList li .more{
	margin-top: 24px
}

/*　COMPANY　*/
#company{
	background: url(../images/top/companybg.jpg) center -168px;
	padding: 60px 0 150px 
}

#company h2{
	background: url(../images/top/ttl_company.png) no-repeat center left;
	padding: 44px 0 44px 58px;
}

#company section{
	width: 80%;
	margin: 0 auto;
	max-width: 1280px/*max*/
}

#companyList{
	overflow: hidden;
	margin:44px 0 0 76px;
	
}

#companyList dt, #companyList dd{
	float: left;
	padding-bottom: 16px;
	letter-spacing: 0.2em
}

#companyList dt{
	clear: both;
	width: 88px;
}

#companyLink{
	clear: both;
	margin:46px 0 0 76px;
	overflow: hidden
}

#companyLink li{
	float: left;
	width:326px;
	margin-right: 18px
}


/*　CONTACT　*/
#contact{
	background: url(../images/top/contactbg.jpg) center -160px;
	padding: 78px 0 110px 
}

#contact section{
	width: 600px;
	margin: 0 auto
}

#contact h2{
	background: url(../images/top/ttl_contact.png) no-repeat center center;
	padding: 44px 0;
	text-align: center
}

#contact .contactMail img{
	width: 240px;
}

#contactRead{
	margin: 56px 0 72px
}

#contactList{
	overflow: hidden
}

#contactList dt, #contactList dd{
	float: left;
	padding-bottom: 26px;
	letter-spacing: 0.2em
}

#contactList dt{
	clear: both;
	width: 150px;
}

#contactList dd{
	width: 450px;
}

#contactList input{
	width: 100% !important;
	display: block;
	padding: 7px 10px;
    font-size: 15px;
    letter-spacing: 1.5px;
	box-sizing: border-box;
	background: #17171d;
	border: #36363c 1px solid;
	color: #FFF
}

#contactList textarea{
	width: 100% !important;
	display: block;
	padding: 7px 10px;
    font-size: 15px;
    letter-spacing: 1.5px;
	box-sizing: border-box;
	background: #17171d;
	border: #36363c 1px solid;
	color: #FFF
}

input[type="submit"] {
	width: 450px !important;
	display: block;
	padding: 12px 10px;
    font-size: 12px;
    letter-spacing: 1.5px;
	box-sizing: border-box;
	background: #17171d;
	border: #b8b8b8 1px solid;
	color: #b8b8b8;
	margin: 40px auto 0;
	cursor: pointer
}

input[type="submit"]:hover {
	background: #222;
}



/* /////////////////////////////////////////////////////////////////////// */
/*　画面サイズが1800pxからはここを読み込む　*/
@media screen and (min-width:1800px) {

#about, #company{
		background-size:cover
	}

}


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

	#about section,#service section,#company section{
		width: 980px
	}
	
}




/* /////////////////////////////////////////////////////////////////////// */
/*　　980pxまで　　*/

@media screen and (max-width:980px) {
	/* COMMON */
	
	.pc{
		display: none
	}
	
	.ilpc{
	display: none
	}
	


	p{
		letter-spacing: 0.2em;
		line-height: 26px !important
	}

	#about section,#service section,#company section{
	width: 98%
	}
	
	.more{
		width: 100% !important;
		margin: 24px auto 0 !important
	}
	
	header{
	height: 90vh;
	min-height: 500px;
	background-size: cover;
	background-position: center top 50%	;
	-webkit-transition: all 1.3s ease;
	-moz-transition: all 1.3s ease;
	-o-transition: all 1.3s ease;
	transition: all  1.3s ease;
	}	

	
header{
	background: url(../images/top/headbg.jpg);
	background-position: center;
	background-size:cover;
	-webkit-transition: all 1.3s ease;
	-moz-transition: all 1.3s ease;
	-o-transition: all 1.3s ease;
	transition: all  1.3s ease;
	animation: moveBg 200s infinite ease;
	position: relative
}

@keyframes moveBg{
    0%    { background-position: left; }
    50%  { background-position: right; }
    100%    { background-position: left; }
}
	
	#gNavi {
		position: fixed;
		z-index: 200;
		top: 0;
		left: 0;
		/*background: #fff;*/
		color: #000;
		text-align: center;
		transform: translateY(-100%);
		transition: all 0.6s;
		width: 100%;
	}

	#gNavi ul {
		background: rgba(0,0,0,0.96);
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}

	#gNavi ul li {
		font-size: 1.1em;
		list-style-type: none;
		padding: 0;
		width: 100%;
		border-bottom: 1px solid #222;
	}

	#gNavi ul li:first-child, #gNavi ul li:last-child{
		display: none
	}

	/* 最後はラインを描かない */
	#gNavi ul li:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}

	
	#gNavi ul li a {
		display: block;
		color: #d9d9d9;
		padding: 1em 0;
		text-decoration: none
	}

	/* このクラスを、jQueryで付与・削除する */
	#gNavi.active {
		transform: translateY(0%);
	}


	.navToggle {
		display: block;
		position: fixed;    /* bodyに対しての絶対位置指定 */
		right: 13px;
		top: 12px;
		width: 42px;
		height: 38px;
		cursor: pointer;
		z-index: 300;
		background: rgba(0,0,0,0.3);
		text-align: center;
		border-radius: 3px;
	}

	.navToggle span {
		display: block;
		position: absolute;    /* .navToggleに対して */
		width: 30px;
		border-bottom: solid 2px #eee;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
		left: 6px;
	}

	.navToggle span:nth-child(1) {
		top: 9px;
	}

	.navToggle span:nth-child(2) {
		top: 18px;
	}

	.navToggle span:nth-child(3) {
		top: 27px;
	}

	.navToggle span:nth-child(4) {
		border: none;
		color: #eee;
		font-size: 9px;
		font-weight: bold;
		top: 34px;
	}


	/* 最初のspanをマイナス45度に */
	.navToggle.active span:nth-child(1) {
		top: 18px;
		left: 6px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	/* 2番目と3番目のspanを45度に */
	.navToggle.active span:nth-child(2),
	.navToggle.active span:nth-child(3) {
		top: 18px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#gNavi li span{
		letter-spacing: 0.3em;
		font-size: 12px;
		display: block
	}
	
	#gNavi h1{
		color: #FFF;
		padding: 15px 0
	}
	
	#gNavi ul li:last-child {
		padding: 12px 0;
		color: #FFF;
		font-size: 10px
	}
	
	/* ++++++++++++   ABOUT    ++++++++++++ */
	
	#about {
	background: url(../images/top/aboutbg.jpg) 69% 29%;
    height: auto;
    padding: 12px 0 300px 0;
	}
	
	#about .more{
	width: 90% !important;
	}

	#about h2 {
    background: url(../images/top/ttl_about.png) no-repeat center center;
    padding: 22px 0 26px;
	background-size: 120px
	}
	
	#about h3 {
    padding: 0 0 20px 0;		
	}
	
	#about p {
    width: 90%;
    padding: 0 0 0 0;
    line-height: 36px;
	margin: 0 auto
	}
	
	#about .more {
    width: 490px;
    margin: 38px auto 0;
	}
	
	/* ++++++++++++   SERVICE    ++++++++++++ */
	#service {
		background: url(../images/top/servicebg.jpg) center bottom;
		padding: 28px 0 70px;
	}
	
	#service h2 {
    background: url(../images/top/ttl_service.png) no-repeat center center;
    padding: 28px 0 36px;
	background-size: 110px;
	float: none
	}
	
	#serviceRead {
    float: none;
    width: 90%;
    padding: 0 0 0 0;
	margin: 10px auto 0
	}
	
	#serviceList {
    width: 90%;
    padding: 38px 0 0 0;
	}

	#serviceList li:last-child {
    float: none;
    width: 390px;
		margin: 34px auto 0
	}
	
	#serviceList li:first-child {
    float: none;
    width: 390px;
		margin: 0 auto 0
	}
	
	/* ++++++++++++   COMPANY    ++++++++++++ */
	#company {
	background: url(../images/top/companybg.jpg) 65.5% 45%;
	padding: 25px 0 70px;
	background-size: 900px;
	}
	
	#company h2 {
    background: url(../images/top/ttl_company.png) no-repeat center center;
    padding: 28px 0 36px;
	background-size: 110px;
	float: none
	}
	
	#companyList {
	width: 90%;
    overflow: hidden;
    margin: 20px auto 0;
	}
	
	#companyList dt, #companyList dd {
    float: none;
    padding-bottom: 10px;
	}
	
	#companyList dt {
	/*padding-left: 7px;*/
    padding-bottom: 0;
	/*border-left: 5px solid rgba(255,255,255,0.7);*/
	margin-bottom: 4px;
	line-height: 14px;
		font-weight: bold
	}	
	
	#companyLink {
    margin: 10px auto 0;
	width: 90%
	}
	
	#companyLink li {
    float: none;
    width: 100%;
    margin-right: 0;
	}
	
	#companyLink .more {
		margin-top: 15px !important
	}
	
	/* ++++++++++++   CONTACT    ++++++++++++ */
	#contact {
	background: url(../images/top/contactbg.jpg) 65.5% 45%;
	padding: 25px 0 70px;
	background-size: 900px;
	}
	
	#contact h2 {
    background: url(../images/top/ttl_contact.png) no-repeat center center;
    padding: 28px 0 36px;
	background-size: 120px;
	float: none
	}
	
	#contact p{
		padding: 0 10%;
		box-sizing: border-box;
	}
	
	#contact .contactMail{
		padding: 2vw;
		text-align: center;
	}
	
	#contact .contactMail img{
		width: 220px
	}
	
	#contactRead {
	width:90%;
    margin: 26px auto 30px;
	}
	
	#contactList {
	width: 90%;
	margin: 0 auto
	}
	
	#contactList dt, #contactList dd {
    float: none;
    padding-bottom: 26px;
    letter-spacing: 0.2em;
	}
	
	#contactList dt {
    clear: both;
    width: 100%;
	text-align: center;
	padding-bottom: 10px
	}
		
	#contactList dd {
    clear: both;
    width: 100%;
	padding-bottom: 20px
	}

	input[type="submit"] {
	-webkit-appearance: none;
  	border-radius: 0;
    width: 90% !important;
    margin: 16px auto 0;
	}
	
	footer {
    background: #000;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.25em;
    padding: 55px 0;
	}

	#fNavi span {
    font-size: 11px;
	}
	
}



/* /////////////////////////////////////////////////////////////////////// */
/* 500px以下  */	
@media screen and (max-width:500px) {
	/* COMMON */
	.sp{
		display: block
	}
	
	#headLogo {
	margin: -38px auto 0;
	}
	
	#headLogo img{
	width: 104px
	}
	
	#stc {
    font-size: 9px;
	}
	
	h2{
		font-size: 21px;
		letter-spacing: 0.15em;
		text-align: center
	}

	h2 span{
		font-size: 18px;
		display: block;
		padding: 2px 0 0 0;
	}

	h3{
		font-size: 17px;
		letter-spacing: 0.15em;
		text-align: center
	}	
	
	#serviceList h4 {
    font-size:17px
	}
	
	#serviceList h4 span{
    font-size:11px
	}	
	
	#serviceList li:first-child {
    width: 96%;
	}
	
	#serviceList li:last-child {
    width: 96%;
	}	
}

/* /////////////////////////////////////////////////////////////////////// */
/* 501px以上  */	
@media screen and (min-width:501px) {
	/* COMMON */
	.sp{
		display: none
	}
}

/* /////////////////////////////////////////////////////////////////////// */
/* 501px以上980以下  */	
@media screen and (min-width:501px) and (max-width:980px) {
	
	#about {
	background: url(../images/top/aboutbg.jpg) 69% 79%;
	}
	
	h2{
		font-size: 31px;
		letter-spacing: 0.25em;
		text-align: center
	}

	h2 span{
		font-size: 24px;
		display: block;
		padding: 2px 0 0 0;
	}

	h3{
		font-size: 20px;
		letter-spacing: 0.25em;
		text-align: center
	}	
	
	#serviceList h4 {
    font-size:20px
	}
	
	#serviceList img{
	width: 100%
	}
		
	#serviceList h4 span{
    font-size:13px
	}
	
	#serviceList li:first-child {
    width: 86%;
	}
	
	#serviceList li:last-child {
    width: 86%;
	}
	
}
	
	


/* /////////////////////////////////////////////////////////////////////// */
/* 981px以上  */	
@media screen and ( min-width:981px) {
	
	.navToggle {
		display: none
	}
	
	#gNavi{
		position: absolute;
		right:3.3%;
		top:5.3%;
		letter-spacing: 0.15em;
		font-size: 15px;
		overflow: hidden;
		text-align: right;
		transition: .5s
	}

	#gNavi li:first-child{
		margin-bottom: 15px
	}

	#gNavi li:last-child{
		margin-top: 18px
	}

	#gNavi li span{
		letter-spacing: 0.3em;
		font-size: 12px;
		display: block
	}

	#gNavi li a{
		padding: 10px 0;
		display: block;
		cursor: pointer;
		text-decoration: none;
		transition: .3s;
		position: relative;
		display: inline-block;
	}

	#gNavi li a:hover {
		color: #CCC;
		padding: 20px 0 20px 0;
		}

	#gNavi li a {
		overflow: hidden;
		display: block
		}


	#gNavi{
		animation: slideInDown 1.8s ease, fadeIn 2.6s ease;
		animation-delay: 2s;
		animation-fill-mode:backwards;
		position: absolute
	}
	
	#contact p{
		text-align: center;
	}
	
	#contact .contactMail img{
		width: 280px;
	}
	
}


/* /////////////////////////////////////////////////////////////////////// */
/* 1281px以上  */	
@media screen and ( min-width:1281px) {
	
	.navToggle {
		display: none
	}
	
	#gNavi{
		position: absolute;
		right:7.3%;
		top:5.3%;
		letter-spacing: 0.15em;
		font-size: 15px;
		overflow: hidden;
		text-align: right;
		transition: .5s
	}
}