@charset "utf-8";

/* home =============================================================
		
	Flex slider
	Products
	Feature
	Information
	About
  Blog
	
======================================================================== */


/* =====================================================================

	Opening Animation
	
======================================================================== */
	.l-opening {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(255,255,255,1);
		height: 100%;
		width: 100%;
		z-index: 9000;
		}
	.opening-image p {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
		}
@media screen and (max-width: 768px) {
	.opening-image p {
		width: 80%;
		}
}
	.opening-image p:nth-child(1) {
			 -moz-animation: text-fadeIn 2s ease 0s forwards;
		-webkit-animation: text-fadeIn 2s ease 0s forwards;
		animation: text-fadeIn 2s ease 0s forwards;
		}
	.opening-image p:nth-child(2) {
			 -moz-animation: text-fadeIn 2s ease 1.5s forwards;
		-webkit-animation: text-fadeIn 2s ease 1.5s forwards;
		animation: text-fadeIn 2s ease 1.5s forwards;
		}
	.opening-image p:nth-child(3) {
			 -moz-animation: text-fadeIn 2s ease 2.5s forwards;
		-webkit-animation: text-fadeIn 2s ease 2.5s forwards;
		animation: text-fadeIn 2s ease 2.5s forwards;
		}
	.opening-image p:nth-child(4) {
			 -moz-animation: text-fadeIn 3s ease 4s forwards;
		-webkit-animation: text-fadeIn 3s ease 4s forwards;
		animation: text-fadeIn 3s ease 4s forwards;
		}
	@-webkit-keyframes text-fadeIn {
		from {opacity: 0;}		
		to   {opacity: 1;}
	}
	@keyframes text-fadeIn {
		from {opacity: 0;}		
		to   {opacity: 1;}
	}



/* =====================================================================

	Flex slider
	メインビジュアル
	
======================================================================== */
	.l-flex-container {
		height: 100vh;
		width: 100%;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		overflow: hidden;
		position:relative;
		box-shadow: 0px 10px 6px -6px rgba(0,0,0,0.07);
		-webkit-box-shadow: 0px 10px 6px -6px rgba(0,0,0,0.07);
		-moz-box-shadow: 0px 10px 6px -6px rgba(0,0,0,0.07);
		}

	.flex-slide {
		cursor: pointer;
		background-size: cover;
    width: calc(100% / 4);
		transition: width 500ms;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		align-items: center;
		}
	.flex-title {
		color: rgba(0,0,0,0.9);
		margin: auto;
		font-family: 'Noto Serif JP', serif;
		font-weight: 500;
		line-height: 1.5;
		text-shadow: 0 0 5px #fff,
      0 0 5px #fff,
			0 0 5px #fff,
			0 0 10px #fff,
			0 0 10px #fff,
      0 0 20px #fff,
      0 0 30px #fff;
		}
	.flex-title span {
		display: block;
		font-size: 200%;
		}
@media screen and (max-width: 768px) {
	.l-flex-container {
		flex-direction: column;
		height: calc(100vh - 60px);
		}
	.flex-slide {
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow: auto;
		overflow-x: hidden;
		width: inherit;
		background-position: bottom right;
		}
	.tb .flex-slide {
		background-position: center bottom;
		}
	.slide01 {background-image: url(../img/home/sp_slide_image01.jpg);}
	.slide02 {background-image: url(../img/home/sp_slide_image02.jpg);}
	.slide03 {background-image: url(../img/home/sp_slide_image03.jpg);}
	.slide04 {background-image: url(../img/home/sp_slide_image04.jpg);}
	.slide05 {background-image: url(../img/home/sp_slide_image05.jpg);}
	.flex-title {
		margin-left: 2.4rem;
		font-size: 102%;
		}
	.tb .flex-title {
		font-size: 120%;
		}
}
@media print, screen and (min-width: 769px) {
	.l-flex-container {
		height: calc(100vh - 80px);
		}
	.flex-slide {
		cursor: pointer;
		background-position: center right;
		}
	.slide01 {background-image: url(../img/home/slide_image01.jpg);}
	.slide02 {background-image: url(../img/home/slide_image02.jpg);}
	.slide03 {background-image: url(../img/home/slide_image03.jpg);}
	.slide04 {background-image: url(../img/home/slide_image04.jpg);}
	.slide05 {background-image: url(../img/home/slide_image05.jpg);}
	.flex-slide:hover {
		-webkit-flex-grow: 2;
		-ms-flex-grow: 2;
		flex-grow: 2;
		width: 30%;
		}
	.flex-title {
		text-align: center;
		font-size: 120%;
		-webkit-transition: all .7s ease-in-out;
			 -moz-transition: all .7s ease-in-out;
				 -o-transition: all .7s ease-in-out;
				-ms-transition: all .7s ease-in-out;
						transition: all .7s ease-in-out;
		}
	.slide01:hover .flex-title {color: #B17010;}
	.slide02:hover .flex-title {color: #7B5361;}
	.slide03:hover .flex-title {color: #666666;}
	.slide04:hover .flex-title {color: #007AC5;}
	.slide05:hover .flex-title {color: #663300;}
}



/* =====================================================================

	l-products
	取扱商品一覧
	
======================================================================== */
	.c-products-catchphrase {
		color: #000;
		}
	.c-products-item .c-morelink a {
		position: relative;
		display: inline-block;
		line-height: 40px;
		color: #000;
		}
	.c-products-item .c-morelink a::before {
		display: inline-block;
		content: '';
		width: 40px;
		height: 40px;
		background-color: rgba(1,123,198,1);
		position: absolute;
		}
	.c-products-item .c-morelink a::after {
		content: '';
		width: 6px;
		height: 6px;
		border: 0px;
		border-top: solid 2px #FFF;
		border-right: solid 2px #FFF;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		position: absolute;
		top: 40%;
		left: 7%;
		}
	.c-products-item .c-morelink a,
	.c-products-item .c-morelink a::before,
	.c-products-item .c-morelink a::after {
		-webkit-transition: all .3s ease-in-out;
			 -moz-transition: all .3s ease-in-out;
				 -o-transition: all .3s ease-in-out;
				-ms-transition: all .3s ease-in-out;
						transition: all .3s ease-in-out;
		}
@media screen and (max-width: 320px) {
	.c-products-catchphrase {
		font-size: 2.4rem !important;
		}
}
@media screen and (max-width: 768px) {
	.l-products {
		background-image: url(../img/home/bg_products.png);
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: 250%;
		}
	.tb .l-products {
		background-position: left center;
		background-size: 200%;
		}
	.l-products .p-wrap {
		padding-top: 6rem;
		padding-bottom: 4rem;
		}
	.c-products-catchphrase {
		font-size: 2.7rem;
		margin-bottom: 3.2rem;
		}
	.c-products-catchphrase .u-db-sp2 {
		text-indent: 1em;
		}
		
	.c-products-item--text {
		line-height: 2;
		}
	.c-products-item--image {
		text-align: center;
		margin-top: 2.4rem;
		position: relative;
		z-index: 2;
		}
		
	.c-products-item .c-morelink {
		margin-top: 2.4rem;
		font-size: 2rem;
		}
	.c-products-item .c-morelink span {
		padding-left: 5rem;
		}
	.c-products-item .c-morelink a::after {
		left: 9%;
		}
}
@media print, screen and (min-width: 769px) {
	.l-products {
		background-image: url(../img/home/bg_products.png);
		background-repeat: no-repeat;
		background-position: right bottom;
		min-height: 900px;
		position: relative;
		z-index: 2;
		}
	.l-products .p-wrap {
		padding-top: 14rem;
		padding-bottom: 14rem;
		}
	.c-products-catchphrase {
		font-size: 4.2rem;
		line-height: 1.6;
		margin-bottom: 2.4rem;
		}
	.c-products-catchphrase .c-indent {
		display: inline-block;
		text-indent: 1em;
		}
	
	.c-products-item {
		display: -webkit-flex;
		display: -ms-flexbox;	
		display: flex;
		justify-content: center;
		align-content: center;
		}
	.c-products-item--text {
		width: 45%;
		margin-top: 2rem;
		padding: 0 2rem 0 2.6rem;
		line-height: 2.4;
		}
	.c-products-item--image {
		margin-top: 1.6rem;
		}
	.pc .c-products-item--image img {
		margin-right: -3.2rem;
		position: relative;
		}
		
	.c-products-item .c-morelink {
		margin-top: 4rem;
		font-size: 2.8rem;
		}
	.c-products-item .c-morelink span {
		padding-left: 5.5rem;
		}
	.c-products-item .c-morelink a:hover {
		color: rgba(1,123,198,1);
		}
	.c-products-item .c-morelink a:hover::after {
		left: 8.5%;
		}
}



/* =====================================================================

	l-feature
	
======================================================================== */
	.l-feature {
		background-image: url(../img/home/bg_feature02.jpg);
		background-repeat: no-repeat;	
		position: relative;
    color: #FFF;
		}
  .c-feature-title {
    font-weight: 400;
    font-size: 3.2rem;
    letter-spacing: .05em;
    text-shadow: 0 0 10px #FFFFFF;
    margin-bottom: 3rem;
    }
	.c-feature-item--title {
		color: #F9E192;
		font-weight: 400;
		letter-spacing: .05em;
		position: relative;
		}
		.c-feature-item--title::before {
			content: '';
			display: inline-block;
			background-color: #FFFFFF;
			width: 20px;
			height: 5px;
			position: absolute;
			left: 0;
			top: 50%;
			}
	.c-feature-item--title,
	.c-feature-item--text {
		text-shadow: 0 0 10px #241C12,
			0 0 10px #241C12,
			0 0 10px #241C12,
      0 0 20px #241C12,
      0 0 30px #241C12;
		}
	.c-feature-item--btn a {
		border: solid 1px #FAE292;
		background-color: rgba(0,0,0,0.65);
		color: #FFF !important;
		}
@media screen and (max-width: 768px) {
	.l-feature {
		z-index: 1;
		background-position: center top;
		background-size: cover;
		margin-top: -4rem;
		padding-top: 18rem;
		padding-bottom: 8rem;
		}
	.c-feature-item + .c-feature-item {
		padding-top: 4rem;
		}
	.c-feature-item--title {
		font-size: 2.4rem;
		padding-left: 3.2rem;
		}
		.c-feature-item--title::before {
			height: 4px;
			}
	.c-feature-item--text {
		line-height: 2;
		margin: .8rem 0 1.6rem;
		}
	.c-feature-item--btn {
		width: 80%;
		}
}
@media (min-width: 769px) {
	.l-feature {
		z-index: 1;
		background-position: left top;
		background-size: cover;
		margin-top: -8.8%;
    padding-top: 6.8%;
		height: 1043px;
		}
  .p-feature {
    height: 500px;
    display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    } 
  .c-feature-title {
    font-size: 5rem;
    }
	.c-feature-item {
    width: calc(33.3333% - 50px / 3);
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: column;
		}
	.tb .c-feature-item {
		margin-top: -4rem;
		}
	.c-feature-item--title {
		font-size: 3rem;
		padding-left: 3.2rem;
		}
	.c-feature-item--text {
		line-height: 2.4;
		margin-bottom: 4.8rem;
		}
	.c-feature-item--btn {
		margin-top: auto;
		}
	.c-feature-item--btn a:hover {
		background-color: rgba(0,0,0,0.80);
		color: #FAE292;
		}
}

/*	一貫生産工場
===================================================== */
  .p-business {
    margin-top: 7rem;
    }
  .c-business-row--text {
		text-shadow: 0 0 10px #241C12,
			0 0 10px #241C12,
			0 0 10px #241C12,
      0 0 20px #241C12,
      0 0 30px #241C12;
    line-height: 2;
		margin: .8rem 0 1.6rem;
		}
  .c-business-row--btn a {
		border: solid 1px #FAE292;
		background-color: rgba(121,39,45,0.8);
		color: #FFF !important;
    width: 80%;
		}
@media (min-width: 769px) {
  .p-business {
    margin-top: 7rem;
    height: 366px;
    display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    }
  .c-business-row--text {
    width: calc(100% - 303px);
    margin-bottom: 0 !important;
		}
  .c-business-row--btn {
    width: 303px;
    }
  .c-business-row--btn a {
    width: 100%;
    }
  .c-business-row--btn a:hover {
    background-color: rgba(121,39,45,1);
    }
}



/* =====================================================================

	p-information
	
======================================================================== */
	.c-information--title {
		color: #007AC5;
		font-weight: 400;
		letter-spacing: .05em;
		position: relative;
		}
		.c-information--title::before {
			content: '';
			display: inline-block;
			background-color: #000000;
			width: 20px;
			height: 5px;
			position: absolute;
			left: 0;
			top: 50%;
			}

@media screen and (max-width: 768px) {
	.p-information {
		margin-bottom: 6rem;
    margin-top: 6rem;
		}
	.c-information--title {
		font-size: 2.8rem;
		line-height: 100%;
		padding-left: 3.2rem;
		}
		.c-information--title::before {
			height: 4px;
			}
	.c-information-item--list {
		padding: .8rem 0 3.2rem;
		}
}
@media print, screen and (min-width: 769px) {
	.p-information {
		margin-bottom: 8rem;
    margin-top: 8rem;
		}
	.c-information--title {
		font-size: 3.8rem;
		padding-left: 4rem;
		}
	.c-information-item {
		display: -webkit-flex;
		display: -ms-flexbox;		
		display: flex;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		}
	.c-information-item--list {
		width: 57%;
		min-height: 280px;
		}
	.c-information-item--list .c-news {
		margin-top: 3rem;
		}
	.c-information-item--list .c-news dd a:hover {
		color: #C47200;
		}
	.c-information-item .c-button-gradation-blue {
		width: 40%;
		}
}



/* =====================================================================

	l-about
	会社案内・採用情報
	
======================================================================== */
	.c-about-item--title {
		color: #000000;
		font-weight: 400;
		letter-spacing: .05em;
		position: relative;
		}
		.c-about-item--title::before {
			content: '';
			display: inline-block;
			background-color: #017BC6;
			width: 20px;
			height: 5px;
			position: absolute;
			left: 0;
			top: 50%;
			}
@media screen and (max-width: 768px) {
	.l-about {
		background-color: #EDF1F3;
		padding-top: 71.135%;
		background-image: url(../img/home/sp_bg_about.png);
		background-repeat: no-repeat;
		background-position: right top;
		background-size: contain;
		}
	.tb .l-about .p-wrap {
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		}
	.tb .c-about-item {
		width: 48%;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		}
	.c-about-item {
		padding-bottom: 4.8rem;
		}
	.c-about-item--title {
		font-size: 2.8rem;
		line-height: 100%;
		padding-left: 3.2rem;
		margin-bottom: 1.6rem;
		}
		.c-about-item--title::before {
			height: 4px;
			}
	.c-about-item--text {
		margin: 1.6rem 0 2rem;
		line-height: 2;
		}
}
@media print, screen and (min-width: 769px) {
	.l-about {
		height: 1030px;
		background-image: url(../img/home/bg_about.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		-webkit-background-size: cover;
		background-size: cover;
		display: -webkit-flex;
		display: flex;
		align-items: center;
		}
	.l-about .p-wrap {
		display:-ms-flexbox;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		padding-top: 5%;
		}
	.c-about-item {
		width: 48%;
		display:-ms-flexbox;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		}
	.c-about-item--title {
		font-size: 3.8rem;
		padding-left: 4rem;
		margin-bottom: 2.4rem;
		}
	.c-about-item figure {
		min-height: 0%;
		}
	.c-about-item--text {
		margin: 2rem 0 2.4rem;
		line-height: 2.4;
		}
	.c-about-item .c-button-gradation-blue {
		width: 360px;
		margin-left: auto;
		margin-right: auto;
		}
}



/* =====================================================================

	l-blog
	
======================================================================== */
  .l-blog {
    background-image: url("../img/common/bg_pattern01.gif");
    background-repeat: repeat;
    background-position: left top;
    }
	.c-blog--title {
		color: #007AC5;
		font-weight: 400;
		letter-spacing: .05em;
		position: relative;
		}
		.c-blog--title::before {
			content: '';
			display: inline-block;
			background-color: #000000;
			width: 20px;
			height: 5px;
			position: absolute;
			left: 0;
			top: 50%;
			}
@media screen and (max-width: 768px) {
	.l-blog {
    padding-top: 4.8rem;
		padding-bottom: 4.8rem;
		}
	.c-blog--title {
		font-size: 2.4rem;
		padding-left: 3.2rem;
    margin-bottom: 1.6rem;
		}
		.c-blog--title::before {
			height: 4px;
			}
	.c-blog-item--text {
		margin: 1.6rem 0 2rem;
		line-height: 2;
		}
}
@media print, screen and (min-width: 769px) {
	.l-blog {
    padding-top: 8rem;
		padding-bottom: 8rem;
		}
	.c-blog--title {
		font-size: 3.8rem;
		padding-left: 4rem;
    margin-bottom: 2.4rem;
		}
	.c-blog-item {
		width: 48%;
		display:-ms-flexbox;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		}
	.c-blog-item--text {
    margin-bottom: 3rem;
		line-height: 2.4;
		}
	.c-blog-item .c-button-gradation-blue {
		width: 360px;
		margin-left: auto;
		margin-right: auto;
		}
}



/* =====================================================================

	l-sample
  資料請求
	
======================================================================== */
	.l-sample {
    background-image: url("../img/home/bg_sample.png");
		background-repeat: no-repeat;
    background-position: left top;
    }
	.l-sample .p-wrap {
		padding-top: 6rem;
		padding-bottom: 6rem;
		}
@media screen and (max-width: 768px) {
	.c-samples-item--text {
		line-height: 2;
		}
	.c-sample-item--image {
		text-align: center;
		margin-top: 2.4rem;
		}
}
@media print, screen and (min-width: 769px) {
	.l-sample {
		z-index: 1;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		}
	.l-sample .p-wrap {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		justify-content: space-between;
    padding-top: 14rem;
    padding-bottom: 14rem;
		}
	.c-sample-item {
		display: -webkit-flex;
		display: -ms-flexbox;	
		display: flex;
		justify-content: center;
		align-content: center;
    width: 100%;
		}
	.c-sample-item--text {
		width: 50%;
		line-height: 2.4;
    order: 2;
		}
  .c-sample-item--image {
    width: 50%;
		order: 1;
		}
}


/* =====================================================================

	common
	
======================================================================== */
@media screen and (max-width: 768px) {
	.c-button-gradation-blue {
		width: 80%;
		}
}

	.c-morelink a {
		position: relative;
		display: inline-block;
		line-height: 40px;
		color: #000;
		}
	.c-morelink a::before {
		display: inline-block;
		content: '';
		width: 40px;
		height: 40px;
		background-color: rgba(1,123,198,1);
		position: absolute;
		}
	.c-morelink a::after {
		content: '';
		width: 6px;
		height: 6px;
		border: 0px;
		border-top: solid 2px #FFF;
		border-right: solid 2px #FFF;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		position: absolute;
		top: 40%;
		left: 6%;
		}
	.c-morelink a,
	.c-morelink a::before,
	.c-morelink a::after {
		-webkit-transition: all .3s ease-in-out;
			 -moz-transition: all .3s ease-in-out;
				 -o-transition: all .3s ease-in-out;
				-ms-transition: all .3s ease-in-out;
						transition: all .3s ease-in-out;
		}
@media screen and (max-width: 768px) {
	.c-morelink {
		margin-top: 2.4rem;
		font-size: 2rem;
		}
  .c-morelink+.c-morelink {
    margin-top: 1.6rem;
    }
	.c-morelink span {
		padding-left: 5rem;
		}
	.c-morelink a::after {
		left: 8%;
		}
}
@media print, screen and (min-width: 769px) {
	.c-morelink {
		margin-top: 4rem;
		font-size: 2.8rem;
		}
  .c-morelink+.c-morelink {
    margin-top: 0;
    }
	.c-morelink span {
		padding-left: 5.5rem;
		}
	.c-morelink a:hover {
		color: rgba(1,123,198,1);
		}
	.c-morelink a:hover::after {
		left: 6.5%;
		}  
}