body{
	background: url("../images/commons/bg-footer.png") no-repeat center bottom;
	background-size: 1500px auto;
	color: #191919;
}

@media (max-width: 1500px){
	body{
		background: url("../images/commons/bg-footer.png") no-repeat center bottom;
		background-size: 100% auto;
	}
}

@media (max-width: 767px){
	body{
		background: url("../images/commons/bg-footer-sp.png") no-repeat center bottom;
		background-size: 100% auto;
	}	
}

header{
	
	width: 100%;
	
	background-color: #1f2021;
}


.hbox{
	margin: 0px auto;
	max-width: 1200px;
	display:flex;

}

.hbox h1{
	padding: 16px 0px 0px 0px;
	width: 33.75%;
	max-width: 405px;
	text-align: center;
}

.hbox h1 img{
	max-width: 234px;
}

.hbox div.navBox{
	width: 66.25%;
}

.hbox nav ul{
	display:flex;
}

.hbox nav ul li{
	width: 20%;
	text-align: center;
}

.hbox nav ul li a{
	color: #ffffff;
	text-decoration: none;
	font-size: 16px;
	display:flex;
	justify-content: center;
  	align-items: center;
	height: 76px;	
}

.hbox nav ul li a:hover{
	background-color: #727272;
}



@media (max-width: 767px){
	
	.hbox h1{
		display:none;
	}
	
	.hbox div.navBox {
	  position: fixed;
	  z-index: 1000;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 60px;
	  background:#1f2021 url("../images/commons/f-logo.png") no-repeat 8px 8px;
		background-size: 136px auto;
	  /*box-shadow: 0 2px 6px rgba(0,0,0,.16);*/
	}
	.global-nav {
	  position: fixed;
	  right: -320px; /* これで隠れる */
	  top: 0;
	  width: 300px; /* スマホに収まるくらい */
	  height: 100vh;
	  padding-top: 40px;
	  background-color: #fff;
	  transition: all .6s;
	  z-index: 200;
	  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	}
	.hamburger {
	  position: absolute;
	  right: 0;
	  top: 0;
	  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
	  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
	  cursor: pointer;
	  z-index: 300;
	}
	.global-nav__list {
	  margin: 0;
	  padding: 0;
	  list-style: none;
		
	}
	
	.hbox nav ul{
		display:block;
	}
	
	
	.global-nav__item {
	  text-align: center;
	  padding: 0 14px;
		width: 100%;
	}
	
	.hbox nav ul li{
		margin: 0px 0px 10px 0px;
		width: 100%;
		text-align: left;
	}
	
	.global-nav__item a {
	  display: block;
	  padding: 8px 0;
	  border-bottom: 1px solid #eee;
	  text-decoration: none;
	  color: #111;
	}
	
	.hbox nav ul li a{
		color: #111;
		text-align: left;
		display:block;
		height: auto;
	}
	
	.hbox nav ul li a:before{
		content: "▶ ";
		font-size: 12px;
	}
	
	.global-nav__item a:hover {
	  background-color: #eee;
	}
	.hamburger__line {
	  position: absolute;
	  left: 11px;
	  width: 18px;
	  height: 1px;
	  background-color: #fff;
	  transition: all .6s;
	}
	.hamburger__line--1 {
	  top: 14px;
	}
	.hamburger__line--2 {
	  top: 20px;
	}
	.hamburger__line--3 {
	  top: 26px;
	}
	.black-bg {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100vw;
	  height: 100vh;
	  z-index: 100;
	  background-color: #000;
	  opacity: 0;
	  visibility: hidden;
	  transition: all .6s;
	  cursor: pointer;
	}
	/* 表示された時用のCSS */
	.nav-open .global-nav {
	  right: 0;
	}
	.nav-open .black-bg {
	  opacity: .8;
	  visibility: visible;
	}
	.nav-open .hamburger__line--1 {
	  transform: rotate(45deg);
	  top: 20px;
	}
	.nav-open .hamburger__line--2 {
	  width: 0;
	  left: 50%;
	}
	.nav-open .hamburger__line--3 {
	  transform: rotate(-45deg);
	  top: 20px;
	}
	
	
}




#contents{
	margin: 0px auto;
	width: 100%;
	
}


.topKey{
	margin: 0px 0px 60px 0px;
	width: 100%;
	height: 650px;
	overflow: hidden;
}


.keyIn{
	margin: -615px auto 0px auto;
	max-width: 1200px;
	position: relative;
	top: 0px;
}




.topKey::before {
   content: '';
   display: block;
   width: 100%;
   height: 100%;
   background-image: url("../images/commons/bg.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   -webkit-animation: zoom 30s 1;
   animation: zoom 60s 1;
   animation-fill-mode: forwards;
}




@keyframes zoom {
   0% {
      transform: scale(1);
   }
   100% {
      transform: scale(1.5);
   }
}



.topKey ul{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
	position: absolute;
	top: 177px;	
	display:flex;
	justify-content: center;
  	align-items: center;
	
}

.topKey ul li{
	margin: 0px 20px 0px 0px;
	width: 16.67%;
	max-width: 199px;
}

.topKey ul li.logo{
	margin: 0px 0px 0px 0px;
	width: 26%;
	max-width: 313px;
}


.topKey .lead01{
	position: absolute;
	top: 100px;
	left: 8%;
	width: 357px;
}

.topKey .lead02{
	position: absolute;
	top: 460px;
	left: 8%;
	width: 440px;
}

/*.topKey .logo{
	position: absolute;
	top: 210px;
	right: 10%;
	width: 309px;
}*/



@media (max-width: 767px){
	
	.topKey{
		margin: 0px 0px 60px 0px;
		width: 100%;
		height: 640px;
		overflow: hidden;
	}
	
	.keyIn{
		margin: -600px auto 0px auto;
	}
	
	
	.topKey .lead01{
		position: absolute;
		top: 45px;
		left:17.5%;
		width: 65%;
	}

	.topKey .lead02{
		position: absolute;
		top: 270px;
		left: 7.5%;
		width: 85%;
	}

	
	
	.topKey ul{
		position: absolute;
		top: 100px;
		left: 1%;
		display:flex;
		width: 98%;

	}

	.topKey ul li{
		margin: 0px 1.5% 0px 1.5%;
		width: 31%;
		max-width: 31%;
	}
	
	.topKey ul li.logo{
		position: absolute;
		top: 237px;
		right: 20%;
		width: 60%;
		max-width: 60%;
	}
	
	
}



.boxin h2{
	margin: 0px 0px 40px 0px;
	color: #e9654e;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	line-height: 1em;
	letter-spacing: 2px;
}
.boxin h2 span{
	display:block;
	font-size: 18px;
	font-weight: normal;
}

.topProducts{
	margin: 0px 0px 34px 0px;
	width: 100%;
	background:url("../images/commons/bg-products.png") repeat-x left 100px;
	background-size: 54px auto;
}

.topProducts .productIn{
	margin: 0px auto 35px;
	max-width: 1000px;
	
}



.topProducts ul{
}

.topProducts ul li{
	background-color: red;
}

.pruductsList div p{
	margin: 0px auto;
	max-width: 218px;
}

.topProducts .slick-prev,
.topProducts .slick-next{
	top: 56%;
}


.pruductsList-sp{
	display:none!important;
}

.pruductsList{
	display:block!important;
}



.topProductss{
    margin: 0px 0px 54px 0px;
	width: 100%;
	background:url("../images/commons/bg-products.png") repeat-x left 100px;
	background-size: 54px auto;

}

.topProductss .pruductsList{
    margin: 0px auto;
    max-width: 1000px;
    display:flex!important;
}

.topProductss .pruductsList div{
	margin: 0px auto;
    width: 18%;
}





@media (max-width: 1030px){
	.pruductsList button.slick-arrow{
		display:none!important;
	}
}

@media (max-width: 767px){
	.boxin h2{
		margin: 0px 0px 20px 0px;
		color: #e9654e;
		text-align: center;
		font-size: 25px;
		font-weight: bold;
		line-height: 1em;
		letter-spacing: 2px;
	}
	.boxin h2 span{
		display:block;
		font-size: 18px;
		font-weight: normal;
	}
	
	
	
	.topProducts{
		margin: -150px auto 30px;
		padding: 30px 0px 20px 0px;
		width: 90%;
		background:none;
		background-color: #d9d9d9;
		position: relative;
		z-index: 100;
		
	}
	
	.pruductsList-sp{
		display:block!important;
	}
	
	.pruductsList{
		display:none!important;
	}	
	
	
	.pruductsList-sp{
		margin: 0px auto;
		width: 90%;
		display:flex!important;
		flex-wrap: wrap;
	}
	
	.pruductsList-sp div{
		margin: 0px 0px 10px 0px;
		width: 50%;
	}
	
	.pruductsList-sp div p{
		margin: 0px auto;
		max-width: 90%;
	}
	
	.topProducts .productIn{
		margin: 0px auto 0px;
		max-width: 1000px;

	}
    
    
    .topProductss{
        margin: 0px auto 30px;
		padding: 30px 0px 20px 0px;
		width: 90%;
		background:none;
		background-color: #d9d9d9;
		position: relative;
		z-index: 100;

    }

    .topProductss .pruductsList{
        margin: 0px auto;
        width: 98%;
        max-width: 98%;
        flex-wrap: wrap;
    }

    .topProductss .pruductsList div{
        margin: 0px auto 20px;
        width: 31%;
    }
    
    .topProductss .pruductsList div.item04{
        margin: 0px 10px 0px auto;
        width: 31%;
    }
    
    .topProductss .pruductsList div.item05{
        margin: 0px auto 0px 10px;
        width: 31%;
    }

    
    
	
	
}

.boxin + .btn{
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 2px;
}

.boxin + .btn a{
	margin: 0px auto;
	padding: 20px 0px 20px 0px;
	width: 400px;
	display:block;
	background-color: #e9654e;
	color: #ffffff;
	text-decoration: none;
	border-radius: 15px;
}

.boxin + .btn a:before{
	content: "▶";
}


.topCompany{
	margin: 0px 0px 60px 0px;
	padding: 45px 0px 45px 0px;
	width: 100%;
	background-color: #1e1d1e;
}

.topCompany .companyIn{
	margin: 0px auto 35px;
	max-width: 1000px;
	
}

.topCompany .lead{
	margin: 0px 0px 30px 0px;
	text-align: center;
	color: #ffffff;
	line-height: 2em;
	font-size: 14px;
}

@media (max-width: 767px){
	
	.topCompany .companyIn{
		margin: 0px auto 20px;
		width: 96%;
	}
	
	.topCompany .lead{
		text-align: left;
	}
	
	.topCompany .lead br{
		display:none;
	}
	
	.boxin + .btn{
		
	}

	.boxin + .btn a{
		margin: 0px auto;
		width: 90%;
	}
	
}


.topNews{
	margin: 0px 0px 60px 0px;
	width: 100%;
}


.topNews .newsIn{
	margin: 0px auto 40px;
	max-width: 750px;
}

.topNews .newsIn ul{
	border-top: solid 1px #8c8c8c;
}

.topNews .newsIn ul li{
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	width: 100%;
	border-bottom: solid 1px #8c8c8c;
	display: flex;
	justify-content: center;
  	align-items: center;
	font-size: 16px;
	line-height: 1.4em;
}

.topNews .newsIn ul li p.date{
	padding: 20px 20px 20px 0px;
	width: 17.3%;
	border-right: solid 1px #e9654e;
	color: #e9654e;
}

.topNews .newsIn ul li p.date:before{
	content: "・";
}

.topNews .newsIn ul li .title{
	padding: 0px 0px 0px 20px;
	width: 82%;
}


@media (max-width: 767px){
	
	.topNews .newsIn{
		margin: 0px auto 20px;
		max-width: 96%;
	}
	
	.topNews .newsIn ul li p.date{
		padding: 30px 10px 30px 0px;
		width: 120px;
		font-size: 13px;
	}
	
	.topNews .newsIn ul li p.title{
		padding: 0px 0px 0px 14px;
		font-size: 13px;
	}
	
}




.topOther{
	margin: 0px 0px 90px 0px;
	width: 100%;
}


.topOther .otherIn{
	margin: 0px auto;
	max-width: 1000px;
}

.topOther .otherIn ul{
	display:flex;
}

.topOther .otherIn ul li{
	margin: 0px auto;
	width: 50%;
	max-width: 491px;
}


@media (max-width: 767px){
	.topOther .otherIn{
		margin: 0px auto;
		max-width: 96%;
	}

	.topOther .otherIn ul{
		display:block;
	}
	
	.topOther .otherIn ul li{
		margin: 0px 0px 20px 0px;
		width: 100%;
	}
}





.topService{
    margin: 0px auto 50px;
}

.topService ul{
    margin: 0px auto;
    width: 1000px;
    display:flex;
    flex-wrap: wrap;
}

.topService ul li{
    margin: 0px 1% 20px 1%;
    width: 48%;
    border: solid 1px #d9d9d9;
}

.topService ul li img{
    width: 100%;
}




@media (max-width: 767px){
    
    
    .topService ul{
        margin: 0px auto;
        width: 98%;
        display:block;
    }
    
    .topService ul li{
        margin: 0px auto 20px;
        width: 100%;
    }
    
    
}



.fbox{
	margin: 0px auto 30px;
	padding: 30px 0px 0px 0px;
	max-width: 1000px;
	display:flex;
	justify-content: center;
  	align-items: center;
}

.fbox .flogo{
	width: 29.125%;
	max-width: 233px;
}

.fbox ul{
	margin: 0px auto;
	width: 70%;
	display:flex;
}

.fbox ul li{
	margin: 0px 10px 0px 10px;
	font-size: 14px;
}

.fbox ul li a{
	color: #ffffff;
}

.copyright{
	margin: 0px 0px 0px 0px;
	padding: 20px 0px 20px 0px;
	text-align: center;
	font-size: 12px;
	color: #ffffff;
}

@media (max-width: 767px){
	.fbox{
		margin: 0px auto 10px;
		padding: 30px 0px 0px 0px;
		max-width: 96%;
		display:block;
		
	}
	
	.fbox .flogo{
		margin: 0px auto 20px;
		width: 35%;
	}

	.fbox ul{
		margin: 0px auto;
		width: 100%;
		display:flex;
		flex-wrap: wrap;
	}

	.fbox ul li{
		margin: 0px 0px 14px 0px;
		width: 25%;
		text-align: left;
	}
	
	.fbox ul li:last-child{
		margin: 0px 0px 10px 0px;
		width: 65%;
		text-align: left;
	}
	
	.copyright{
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 15px 0px;
		text-align: center;
		font-size: 10px;
		color: #ffffff;
	}
	
}



/* companyBox */


.companyBox{
	margin: 0px auto;
	padding: 85px 0px 120px 0px;
}

.companyBox .boxin{
	margin: 0px 0px 80px 0px;
}

.companyBox .profile.boxin{
	margin: 0px 0px 20px 0px;
}

.companyBox ul.parts{
	margin: 0px auto 40px;
	max-width: 700px;
	display:flex;
}

.companyBox ul.parts li{
	margin: 0px 2% 0px 2%;
	width: 29%;
}

.companyBox .copy{
	margin: 0px 0px 50px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}

.companyBox .lead{
	margin: 0px auto 50px;
	max-width: 700px;
	text-align: left;
	font-size: 14px;
	line-height: 1.5em;
}

.companyBox .profile .lead{
	margin: 0px auto 30px auto;
	text-align: center;
}


.companyBox .pic.pic01{
	margin: 0px auto 45px;
	max-width: 882px;
}

.companyBox .pic.pic02{
	margin: 0px auto 45px;
	max-width: 550px;
}


.companyBox .txtbox{
	margin: 0px auto;
	max-width: 800px;
}

.companyBox .txtbox p{
	margin: 0px 0px 30px 0px;
	font-size: 14px;
	line-height: 1.6em;
}

.companyBox .tbbox{
	margin: 0px auto 80px;
	max-width: 550px;
}

.companyBox .tbbox .tcell{
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 20px 0px;
	width: 100%;
	display:flex;
  	align-items: center;
	font-size: 14px;
	border-bottom: solid 1px #808080;
	line-height: 1.6em;
	text-align: left;
}

.companyBox .tbbox .tcell .ts{
	width: 26%;
	font-weight: bold;
}

@media (max-width: 767px){
	
	.companyBox .boxin{
		margin: 0px 0px 50px 0px;
	}	
	
	.companyBox .copy{
		margin: 0px 0px 10px 0px;
		font-size: 5.4vw;
	}
	
	.companyBox .lead{
		margin: 0px auto 50px;
		width: 96%;
		font-size: 3vw;
	}
	
	.companyBox .pic.pic01{
		margin: 0px auto 45px;
		width: 96%;
	}

	.companyBox .pic.pic02{
		margin: 0px auto 45px;
		width: 96%;
	}
	
	.companyBox .txtbox{
		margin: 0px auto;
		width: 96%;
	}
	
	.companyBox .tbbox{
		margin: 0px auto;
		width: 96%;
	}
	
	
	
}

.recruitBox{
	margin: 0px 0px 0px 0px;
	padding: 55px 0px 100px 0px;
}

.recruitBox .boxin{
	margin: 0px auto 30px;
	max-width: 900px;
}

.recruitBox .pic{
	margin: 0px auto 40px;
	max-width: 525px;
	
}

.recruitBox .txtBox{
	margin: 0px 0px 50px 0px;
}

.recruitBox .txtBox p{
	margin: 0px 0px 20px 0px;
	font-size: 14px;
	line-height: 1.5em;
}


.recruitBox .detail{
	margin: 0px 0px 60px 0px;
	text-align: right;
	font-size: 14px;
}

.recruitBox .detail a{
	margin: 0px 0px 0px 0px;
	padding: 10px 20px 10px 20px;	
	background-color: #4d4d4d;
	color: #ffffff;
	text-decoration: none;
}

.recruitBox .detail a:before{
	content: "▶︎ ";
}

.recruitBox .memo{
	margin: 0px 0px 0px 0px;
	color: #ed5f5c;
	text-align: center;
	font-size: 14px;
}


@media (max-width: 767px){
	
	.recruitBox .boxin{
		width: 96%;
	}	
	
	.recruitBox .detail a span{
		display:none;
	}
	
}



.contactBox{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 150px 0px;
}

.contactBox .boxin{
	margin: 0px auto;
	padding: 50px 0px 0px 0px;
	max-width: 800px;
}


.contactBox .catch{
	margin: 0px 0px 30px 0px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
}

.contactBox .txtBox{
	margin: 0px auto 50px;
	max-width: 700px;
}

.contactBox .txtBox p{
	font-size: 14px;
	line-height: 1.5em;
}


.contact__box{
	margin: 0px 0px 0px 0px;
	padding: 15px 15px 15px 15px;
	border: solid 1px #bbb8b8;
	background-color: #f1f1f1;
}

.contact__box h3{
	margin: 0px 0px 0px 20px;
	padding: 0px 0px 20px 0px;
	font-size: 14px;
	
}


.contact__box h3:before{
	margin: 0px 4px 0px 0px;
	padding: 2px 5px 2px 5px;
	content: ">";
	color: #ffffff;
	background-color: #434343;
	font-size: 12px;
}

.contact__box .contact__boxin{
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 10px 10px;
	background-color: #ffffff;
	overflow-y:scroll;
	height: 180px;
}

.contact__box_detail{
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
}

.contact__box_detail li{
	margin: 0px 0px 10px 20px;
	padding: 0px 0px 4px 0px;
	list-style: decimal;
	line-height: 1.5em;
	font-size: 12px;
	border-bottom: dotted 1px #191919;
}



@media (max-width: 767px){
	
	.contactBox .boxin{
		margin: 0px auto;
		padding: 80px 0px 0px 0px;
		max-width: 96%;
	}
	
}



/* privacy */

.privacyBox{
	margin: 0px 0px 0px 0px;
	width: 100%;
	font-size: 14px;
}

.privacyBox h2{
	margin: 0px 0px 20px 0px;
	width: 100%;
}

.privacyBox .boxin{
	margin: 0px auto;
	padding: 50px 0px 50px 0px;
	max-width: 800px;
}

.privacyBox .txtbox{
	line-height: 1.6em;
}

.privacyBox .txtbox p{
	margin: 0px 0px 20px 0px;
}

.privacyBox dl{
	margin: 0px 0px 30px 0px;
}

.privacyBox dl dt{
	margin: 0px 0px 10px 0px;
}

.privacyBox dl dd{
	line-height: 1.6em;
}



/* news */

.newsBox{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 100px 0px;
}

.newsBox .boxin{
	
	padding: 50px 0px 0px 0px;
}

/* notfound */

.notfoundBox{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.notfoundBox .boxin{
	margin: 0px auto;
	padding: 200px 0px 200px 0px;
	max-width: 800px;
}

.notfoundBox .boxin p{
	text-align: center;
	font-size: 20px;
}


/*topicpath*/

.topicpath{
	margin: 0px auto;
	max-width: 1000px;
}

.topicpath ul{
	display:flex;
}