/**************************************************
		SP
**************************************************/
@media screen and (max-width:767px){
body {
	min-height:auto !important;
}

#productsMain {
	padding:50px 0 30px;
}
#productsDetail {
	padding:50px 0 30px;
}

#productsTips {
	position:relative;
}
#productsTips .textArea {
	position:absolute;
	width:50%;
	top:50%;
	right:0;
	padding:0 15px;
	box-sizing:border-box;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#productsTips .textArea h1 {
	margin-bottom:10px;
	max-width:130px;
}
#productsTips .textArea p {
	font-size:12px;
	line-height:18px;
}
.lightWeightBox #productsTips .textArea {
	position:absolute;
	width:100%;
	top:auto;
	bottom:0;
	left:0;
	padding:15px;
	box-sizing:border-box;
	-webkit-transform:none;
	transform:none;
}
.selvageBox #productsTips .textArea p {
	color:#fff;
}
.lightWeightBox #productsTips .textArea h1 {
	max-width:290px;
}
.lightWeightBox #productsTips .textArea p {
	color:#fff;
	text-shadow:2px 2px 3px #000000;
}
.specialsBox #productsTips .textArea {
	position:absolute;
	width:100%;
	top:0;
	left:0;
	padding:40px 15px 15px;
	box-sizing:border-box;
	-webkit-transform:none;
	transform:none;
}
.specialsBox #productsTips .textArea h1 {
	max-width:290px;
}
.specialsBox #productsTips .textArea p {
	color:#000;
}
#productsListBox {
	padding:15px 15px 20px;
}
#productsListBox li {
	position:relative;
	margin-bottom:10px;
	float:left;
	width:50%;
	box-sizing:border-box;
}
#productsListBox li:nth-child(odd) {
	padding-right:5px;
}
#productsListBox li:nth-child(even) {
	padding-left:5px;
}
#productsListBox li figcaption {
	position:absolute;
	top:50%;
	left:50%;
	color:#fff;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	box-sizing:border-box;
}

/* ========== Detail ========== */
#productsDetail .flexslider {
	padding-top:30px;
}
#productsDetail .subMenu {
	margin-bottom:30px;
}
#productsDetail .subMenu dt {
	border-top:1px solid #e6e6e6;
	border-bottom:1px solid #e6e6e6;
	text-align:center;
	font-weight:bold;
}
#productsDetail .subMenu dt a {
	padding:15px;
	display:block;
	background-color:#fff;
	opacity:1 !important;
	box-sizing:border-box;
}
#productsDetail .subMenu dt a span {
	display:block;
	background:transparent url("../../images/common/ico_arrow01.png") 100% 50% no-repeat;
	background-size:6px auto;
}
#productsDetail .subMenu ul li {
	border-bottom:1px solid #e6e6e6;
}
#productsDetail .subMenu ul li a {
	padding:15px;
	display:block;
	background-color:#fff;
	opacity:1 !important;
	box-sizing:border-box;
}
#productsDetail .subMenu ul li a span {
	display:block;
	background:transparent url("../../images/common/ico_arrow01.png") 100% 50% no-repeat;
	background-size:6px auto;
}
#productsDetail .acBox {
	position:absolute;
	top:0:
	left:0;
	width:100%;
	z-index:100;
}
#productsDetail .acBox .subMenu {
	margin-bottom:0;
	display:none;
}
#productsDetail .acBox .subMenuButton a {
	display:block;
	width:100%;
	height:30px;
	text-indent:-9999px;
	background:#666 url("../../images/common/ico_down02.png") 50% 50% no-repeat;
	background-size:18px auto;
}
#productsDetail .acBox .subMenuButton.active a {
	background:#666 url("../../images/common/ico_up02.png") 50% 50% no-repeat;
	background-size:18px auto;
}

#detailBox {
	margin-bottom:30px;
	padding:15px;
	display:block !important;
	opacity:1 !important;
	background-color:rgba(0,0,0,0.5);
}
#detailBox h2 {
	font-size:14px;
	color:#fff;
}
#detailBox .name {
	margin-bottom:10px;
	font-size:14px;
	color:#fff;
}
#detailBox .cf {
	margin-bottom:15px;
	font-size:14px;
	color:#fff;
}
#detailBox .cf li {
	width:33%;
	font-size:10px;
	line-height:12px;
	float:left;
	text-align:center;
}
#detailBox .cf li:last-child {
	width:34%;
}
#detailBox .cf li a {
	position:relative;
	width:100%;
	height:30px;
	display:table;
	color:#fff;
	transition:0s;
	background-color:#666;
}
#detailBox .cf li a span {
	display:table-cell;
	vertical-align:middle;
	height:30px;
}
#detailBox .cf li.ui-state-active a {
	color:#666;
	background-color:#fff;
}
#detailBox .cf li.ui-state-active a:after {
	position:absolute;
	top:30px;
	left:50%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	border-color: #fff transparent transparent transparent;
}
#tabs-explanation,
#tabs-character,
#tabs-spec {
	padding:15px;
	background-color:#fff;
}
#tabs-explanation h3 {
	margin-bottom:10px;
	font-size:14px;
	color:#666;
	line-height:18px;
}
#tabs-explanation p.subTtl {
	margin-bottom:10px;
	font-size:12px;
	font-weight:bold;
	color:#666;
	line-height:18px;
}
#tabs-explanation p {
	font-size:12px;
	color:#666;
	line-height:18px;
}
#tabs-explanation table {
	position:relative;
	width:100%;
	margin-top:15px;
}
#tabs-explanation table th {
	width:70%;
	padding:10px;
	font-size:12px;
	font-weight:bold;
	color:#000;
	line-height:18px;
	border:1px solid #afafaf;
	background-color:#dcdddd;
	box-sizing:border-box;
}
#tabs-explanation table td {
	width:30%;
	padding:10px;
	font-size:12px;
	color:#000;
	line-height:18px;
	border:1px solid #afafaf;
	background-color:#f9f9f9;
	box-sizing:border-box;
}
#pointBox {
	padding:0 10px 0 7px;
}
#pointBox .charaName {
	position:relative;
	margin-left:3px;
	font-size:12px;
	font-weight:bold;
	color:#666;
	line-height:18px;
}
#pointBox .charaName:before {
	position:absolute;
	top:-0.2em;
	left:-0.7em;
	content:"-";
}
#pointBox table {
	position:relative;
	width:100%;
	margin-bottom:15px;
}
#pointBox .ddBefore,
#pointBox .ddAfter {
	position:absolute;
	display:block;
	font-size:12px;
	font-weight:normal;
	color:#666;
	line-height:18px;
}
#pointBox .ddBefore {
	padding:0;
	top:0;
	left:3px;
	display:block;
}
#pointBox .ddAfter {
	padding:0;
	top:0;
	right:3px;
	display:block;
}
#pointBox .pointer {
	position:relative;
	margin:20px 0 0;
	display:block;
}
#pointBox .glaypoint {
	float:left;
	padding:0 3px;
	width:20%;
	height:10px;
	box-sizing:border-box;
}
#pointBox .glaypoint:after {
	display:block;
	content:"";
	width:100%;
	height:10px;
	background-color:#dcdddd;
}
#pointBox .colorpoint {
	position:absolute;
	top:0;
	padding:0 3px;
	width:20%;
	height:10px;
	box-sizing:border-box;
}
#pointBox .colorpoint:after {
	display:block;
	content:"";
	width:100%;
	height:10px;
	background-color:#ED1C24;
}
#pointBox .colorpoint2 {
	position:absolute;
	top:0;
	padding:0 3px;
	width:20%;
	height:10px;
	box-sizing:border-box;
}
#pointBox .colorpoint2:after {
	display:block;
	content:"";
	width:100%;
	height:10px;
	background-color:#ED1C24;
}
#pointBox .colorpoint3 {
	position:absolute;
	top:0;
	padding:0 3px;
	width:20%;
	height:10px;
	box-sizing:border-box;
}
#pointBox .colorpoint3:after {
	display:block;
	content:"";
	width:100%;
	height:10px;
	background-color:#ED1C24;
}
#pointBox .level1 {
	left:0 !important;
}
#pointBox .level2 {
	left:20% !important;
}
#pointBox .level3 {
	left:40% !important;
}
#pointBox .level4 {
	left:60% !important;
}
#pointBox .level5 {
	left:80% !important;
}

#tabs-spec table {
	width:100%;
	border:1px solid #afafaf;
	box-sizing:border-box;
}
#tabs-spec table th {
	width:43%;
	padding:10px;
	font-size:12px;
	font-weight:bold;
	color:#000;
	line-height:18px;
	border:1px solid #afafaf;
	background-color:#dcdddd;
	box-sizing:border-box;
}
#tabs-spec table td {
	width:57%;
	padding:10px;
	font-size:12px;
	color:#000;
	line-height:18px;
	border:1px solid #afafaf;
	background-color:#f9f9f9;
	box-sizing:border-box;
}

}


/**************************************************
		PC
**************************************************/
@media screen and (min-width:768px){
#productsMain {
	padding:0;
}
#header {
	height:70px;
	background: rgba(255,255,255,1);
}

h1 {
	background-size:100% !important;
}
@media only screen and (-webkit-min-device-pixel-ratio : 2),only screen and (min-device-pixel-ratio : 2){
	 h1 {
	background-size:100% !important;
	 }
}

	#full-menu li {
		position:relative;
	}
	.triangle {
		position:absolute;
		top:45px;
		left:34px;
		width: 0;
		height: 0;
		border: 8px solid transparent;
		border-top: 8px solid #fff;
		z-index: 1;
	}
	#childNav ul li {
		position:relative;
	}
	
	#childNav ul li {
		background-position: center;
		background-repeat: no-repeat;
	}
	#childNav ul li#soft:hover {
		background-image: url(../../images/common/child_soft_now.png);
	}
	#childNav ul li#stretch:hover {
		background-image: url(../../images/common/child_stretch_now.png);
	}
	#childNav ul li#vintage:hover {
		background-image: url(../../images/common/child_vintage_now.png);
	}
	#childNav ul li#selvage:hover {
		background-image: url(../../images/common/child_selvage_now.png);
	}
	#childNav ul li#light_weight:hover {
		background-image: url(../../images/common/child_light_weight_now.png);
	}
	#childNav ul li#specials:hover {
		background-image: url(../../images/common/child_specials_now.png);
	}
	#childNav ul li img {
		opacity: 1;
		-webkit-transition: 0.3s ease-in-out;  
		-moz-transition: 0.3s ease-in-out;  
		-o-transition: 0.3s ease-in-out;  
		transition: 0.3s ease-in-out;  
	}
	#childNav ul li:hover img {
		opacity: 0;
	}
	.childTriangle {
		position:absolute;
		top: 40px;
		left: 8px;
		width: 0;
		height: 0;
		border: 7px solid transparent;
		border-top: 6px solid #000;
		z-index: 1;
	}

#centerBox {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	width:90%;
	max-width:980px;
	height:400px;
	padding-top:110px;
}
#productsTips {
	position:relative;
}
#productsTips .textArea {
	position:relative;
	width:auto;
	top:0;
	right:0;
	padding:0;
	box-sizing:border-box;
	-webkit-transform:none;
	transform:none;
}
#productsTips .textArea p {
	font-size:1em;
	line-height: 160%;
}
#productsTips {
	float:left;
	width:50%;
	max-width:500px;
}
	#productsTips h2 {
		text-align:center;
		margin-top:30px;
		margin-bottom:50px;
	}
	#productsTips p {
		color:#fff;
		letter-spacing: 0.5px;
	}
.lightWeightBox #productsTips .textArea {
	position:relative;
	width:auto;
	top:0;
	left:0;
	padding:0;
	box-sizing:border-box;
	-webkit-transform:none;
	transform:none;
}
.lightWeightBox #productsTips .textArea p {
	color:#fff;
	text-shadow:none;
}
.specialsBox #productsTips .textArea {
	position:relative;
	width:auto;
	top:0;
	left:0;
	padding:0;
	box-sizing:border-box;
	-webkit-transform:none;
	transform:none;
}
.specialsBox #productsTips .textArea p {
	color:#000;
	text-shadow:none;
}


/*productsTips p txt color --------------*/

#productsTips p.dark { color: #000; }
#productsTips p.mid { color: #fff; }

/* --------------*/

#productsDetail {
	padding:0 0 63px;
}

#productsListBox {
	float:right;
	width:47%;
	max-width:460px;
	padding:0;
}
	#productsListBox ul li {
		float:left;
		width:47.9%;
		max-width:220px;
		height:120px;
		margin-bottom:20px;
		-webkit-transition: 0s ease-in-out;  
		-moz-transition: 0s ease-in-out;  
		-o-transition: 0s ease-in-out;  
		transition: 0s ease-in-out;  
	}
	#productsListBox ul li:hover {  
		opacity:.8;  
		filter: alpha(opacity=80);  
	}  
	#productsListBox li:nth-child(odd) {
		padding-right:0;
	}
	#productsListBox ul li:nth-child(even) {
		padding-left:0;
		margin-left:4.2%;
	}
	#productsListBox ul li a {
		display:block;
		width:100%;
		height:100%;
	}
	#productsListBox ul li a:hover {
		opacity:1;
	}
	#productsListBox li figcaption {
		position:relative;
		top:0;
		left:0;
		color:#fff;
		-webkit-transform:translate(0,0);
		transform:translate(0,0);
		box-sizing:border-box;
	}
	
	figcaption {
		color:#fff;
		text-align:center;
		line-height:120px;
	}
	
#footer {
	z-index:998;
}
#childNav {
	z-index:500;
	height:40px;
}
.grandChildNav {
	z-index:400;
}

/*product page common --------------*/

.flex-control-paging li:nth-child(1) {
	position:fixed;
	/*top:150px;*/
	left:100px;
	border: 3px solid #fff;
}
.flex-control-paging li:nth-child(2) {
	position:fixed;
	/*top:230px;*/
	left:100px;
	border: 3px solid #fff;
}
.flex-control-paging li:nth-child(3) {
	position:fixed;
	/*top:310px;*/
	left:100px;
	border: 3px solid #fff;
}
.flex-control-paging li:nth-child(4) {
	position:fixed;
	/*top:390px;*/
	left:100px;
	border: 3px solid #fff;
}

.flex-control-paging li:nth-child(1) {
	top:230px;
}
.flex-control-paging li:nth-child(2) {
	top:310px;
}
.flex-control-paging li:nth-child(3) {
	top:390px ;
}
.flex-control-paging li:nth-child(4) {
	top:150px ;
}

.displayBlock {
	display:block;
}
.displayNone {
	display:none;
}

#detailBox {
	position:fixed;
	top:150px;
	right:120px;
	width:511px;
	padding:20px;
	background:rgba(0,0,0,.5);
	z-index: 3;
}
#detailBox h2 {
	color:#fff;
	margin: 0 0 5px 0;
}
#detailBox p.name {
	font-size: 160%;
	letter-spacing: 1.5px;
	line-height: 1.5; 
	color:#fff;
}

#tabs {
	margin-top:20px;
}
	.ui-tabs-nav li {
		width:33.333%;
		float:left;
		background:#666666;
		margin-bottom:20px;
	}
	.ui-tabs-nav li a {
		display:block;
		padding-top:15px;
		padding-bottom:15px;
		font-family: 'Lato', sans-serif;
		font-weight:700;
		color:#fff;
		text-align:center;
		line-height:130%;
	}
	.ui-tabs-nav li a:hover {
		color:#fff;
		background:#ED1C24;
		opacity:1;
	}
	.ui-tabs-nav li:nth-child(2) a {
		padding-top:6px;
		padding-bottom:6px;
	}
	
	.ui-tabs-active {
		position:relative;
		background:#ED1C24 !important;
	}
	.ui-tabs-active a {
		color:#fff !important;
	}
	
	.tabTriangle {
		position:absolute;
		top: 48px;
		left: 44%;
		width: 0;
		height: 0;
		border: 8px solid transparent;
		border-top: 8px solid #ED1C24;
	}
	
	#tabs-explanation {
		background:#fff;
		padding:20px;
	}
		#tabs-explanation h3 {
			color:#666;
			font-size:172%;
			line-height:1.5;
			font-family: 'Lato', sans-serif;
			font-weight:700;
		}
		#tabs-explanation .subTtl {
			color:#666;
			font-size:108%;
			font-family: 'Lato', sans-serif;
			font-weight:700;
			padding-top: 5px;
			padding-bottom: 10px;
		}
	
	#tabs-character {
		background:#fff;
		padding: 20px 20px 40px 20px;
	}
		.charaName::before {
			content:url(../../images/common/dt_style.gif);
			position: relative;
			top: -3px;
			padding-right: 5px;
		}
		.charaName {
			color:#666;
			font-family: 'Lato', sans-serif;
			font-weight:700;
			margin-top:15px;
			margin-bottom:5px;
		}
		#tabs-character tr + tr th {
			margin-top:20px;
		}
	
		/*tabs-character pointers set--------------*/
		
			.pointer {
				position:relative;
			}
			.ddBefore {
				width:50px;
				float:left;
				margin-right:10px;
				text-align:right;
			}
			.ddAfter {
				width:50px;
				float:left;
				margin-left:10px;
				text-align:left;
			}
			.ddBefore,
			.ddAfter {
				color:#666;
				font-size:86%;
				line-height:15px;
			}
		.glaypoint {
			width:58px;
			height:15px;
			float:left;
			margin-right: 2px;
			background:#dcdddd;
		}
		.colorpoint,
		.colorpoint2,
		.colorpoint3 { /*point is 3*/
			position: absolute;
			top: 0;
			left: 120px;
			width: 58px;
			height: 15px;
			background: #ED1C24;
		}
	
		/*
			1 → left:0px;
			2 → left:60px;
			3 → left:120px;
			4 → left:180px;
			5 → left:240px;
		*/

	/*-------------------------------------*/
	
	#tabs-spec {
		background:#fff;
	}
		.specTable tr {
			border-top:2px solid #afafaf;
			box-sizing:border-box;
		}
		.specTable tr:last-child {
			border-bottom:2px solid #afafaf;
		}
		.specTable tr th {
			width:120px;
			height:40px;
			line-height:40px;
			text-align:center;
			background:#dcdddd;
			border-left:2px solid #afafaf;
			border-right:2px solid #afafaf;
			box-sizing:border-box;
		}
		.specTable tr td {
			width:360px;
			height:40px;
			line-height:40px;
			padding-left:20px;
			border-right:2px solid #afafaf;
			box-sizing:border-box;
		}
			.specTable tr td span {
				font-size:86%;
				background: #666;
				color: #fff;
				padding: 5px 10px;
				margin-left: 15px;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				-o-border-radius: 4px;
				-moz-border-radius: 4px;
			}
#productsDetail .acBox {
	display:none !important;
}
#productsDetail .subMenu {
	display:none !important;
}

@media screen and ( max-width:1090px) { /* h-nav responsive */
	.triangle,
	.childTriangle {
		display:none;
	}
}

@media screen and ( max-width:900px) {
	.flex-control-paging li:nth-child(1) {
		left:30px;
	}
	.flex-control-paging li:nth-child(2) {
		left:30px;
	}
	.flex-control-paging li:nth-child(3) {
		left:30px;
	}
	.flex-control-paging li:nth-child(4) {
		left:30px;
	}
	.flex-control-paging li:nth-child(5) {
		left:30px;
	}
	.flex-control-paging li:nth-child(6) {
		left:30px;
	}
	#detailBox {
		right:40px;
	}
}

@media screen and ( max-height:850px) {
	body {
		min-height:850px;
	}
	#detailBox {
		position: absolute;
		top: 40px;
	}
	@media screen and ( max-width:670px) {
		#detailBox {
			position:absolute;
			top: 200px;
		}
	}
}

@media screen and ( max-height:700px) {
	#centerBox {
		padding-top:0;
		padding-bottom:100px;
	}
	#productsTips {
		padding-top:110px;
	}
}
@media screen and ( max-height:600px) {
	#productsListBox {
		zoom:0.9;
	}
}
@media screen and ( max-height:550px) {
	#productsListBox {
		zoom:0.8;
	}
}


.variation { margin: 10px 0 0 0; }
.variation p { margin: 0 0 10px 0 ; }
.variation table   { width: 100%; }
.variation th, .variation td  { padding: 5px; border: 1px solid #ddd;}
.variation th  { background: #f4f4f4; text-align: left; }

#footer,
footer {
	padding-top:15px !important;
}
	
}