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

/* active　*/

.navbar-default .navbar-nav > #nav04 > a {
	background: url(../../common/img/gNavi04-on.png) no-repeat;
}

/*　main-contents　*/

#main-contents.seisan {
	background: url(../img/seisan-bg.jpg) top center no-repeat;
	width: 100%;
}

.seisan .contents-box {
	padding: 56px 62px;
}

#seisan {
	width: 100%;
	position: relative;
}

#seisan h1 {
	margin: 0;
}

#seisan img {
	z-index: 998;
}

#textile-process {
	width: 100%;
	height:1251px;
	position: relative;
}

#textile-process:before {
	content: "";
	background: url(../img/textile-process-bg.png) no-repeat;
	width: 640px;
	height: 480px;
	position: absolute;
	top: 418px;
	right: -36px;
}


#textile-process h2 , #yuuzen-process h2 {
-webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
	color: #0e0909;
	font-size: 80px;
	font-weight: 500;
	margin: 0;
	z-index: 999;
	position: absolute;
}

.textile-process01 h2 {
	position: absolute;
	top: 76px;
	right: 41px;
}
.textile-process01 img {
	position: absolute;
	top: 156px;
	right: 29px;
}


.textile-process02 h2 {
	position: absolute;
	top: 384px;
	left: 43px;
}
.textile-process02 img {
	position: absolute;
	top: 524px;
	left: 28px;
}


.textile-process03 h2 {
	position: absolute;
	top: 800px;
	right: 53px;
}
.textile-process03 img {
	position: absolute;
	top: 899px;
	right: 34px;
}



#yuuzen-process {
	position: relative;
	width: 100%;
	height: 1993px;
	margin-top: 44px;
}

#yuuzen-process:before {
	content: "";
	background: url(../img/yuuzen-process-bg01.png) no-repeat;
	width: 640px;
	height: 480px;
	position: absolute;
	top: 439px;
	left: 124px;
}

#yuuzen-process:after {
	content: "";
	background: url(../img/yuuzen-process-bg02.png) no-repeat;
	width: 640px;
	height: 480px;
	position: absolute;
	top: 1257px;
	left: -8px;
}

.yuuzen-process01 h2 {
	position: absolute;
	top: 97px;
	right: 39px;
}
.yuuzen-process01 img {
	position: absolute;
	top: 156px;
	right: 31px;
}


.yuuzen-process02 h2 {
	position: absolute;
	top: 464px;
	left: 31px;
}
.yuuzen-process02 img {
	position: absolute;
	top: 527px;
	left: 28px;
}


.yuuzen-process03 h2 {
	position: absolute;
	top: 843px;
	right: 53px;
}
.yuuzen-process03 img {
	position: absolute;
	top: 919px;
	right: 34px;
}


.yuuzen-process04 h2 {
	position: absolute;
	top: 1167px;
	left: 62px;
}
.yuuzen-process04 img {
	position: absolute;
	top: 1282px;
	left: 31px;
}


.yuuzen-process05 h2 {
	position: absolute;
	top: 1436px;
	right: 52px;
}
.yuuzen-process05 img {
	position: absolute;
	top: 1630px;
	right: 9px;
}


#youtube {
	margin-top: 50px;
	width: 100%;
}

#youtube iframe {
	display: block;
	margin: 0 auto;
}







@media screen and ( max-width:767px ) {
	
	#seisan div {
		margin-bottom: 30px;
		z-index: 0;
	}
	
	#seisan h1 {
		margin: 20px 0;
	}
	
	#seisan h2 , #seisan img {
		position: static;
	}
	
	#seisan h2 {
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
		font-size: 180%;
	}
	
	/*　織物の工程　*/
	
	#textile-process {
		background: url(../img/textile-process-bg.png) 50% 60% no-repeat;
		width: 100%;
		height: auto;
	}
	
	#textile-process:before {
		content: "";
		background: none;
	}
	
	
	/*　友禅の工程　*/
	
	#yuuzen-process {
		/*background: url(../img/textile-process-bg.png) 50% 60% no-repeat;
		width: 100%; */
		height: auto;
	}
	
	#yuuzen-process:before {
		content: "";
		background: url(../img/yuuzen-process-bg01.png) no-repeat;
		width: 100%;
		height: 480px;
		position: absolute;
		top: 20%;
		left: 0;
		z-index: -1;
	}


	#yuuzen-process:after {
		content: "";
		background: url(../img/yuuzen-process-bg02.png) no-repeat;
		width: 100%;
		height: 480px;
		position: absolute;
		top: 60%;
		left: 0;
		z-index: -1;
	}
	
	
	/*　YouTube　*/
	
	#youtube iframe {
		width: 100%;
	}
	
}