@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

img {
  vertical-align: bottom;
  border: none;
}

button,
input,
select,
textarea {
  vertical-align: middle;
}

input {
  outline: 0;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}

textarea {
  overflow: auto;
  vertical-align: top;
  font-family: sans-serif;
}

/*
=====================================================================
*
*    clearfix
*
* =================================================================== 
*/
.clearfix:after,
.cell:after {
  content: " ";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
}

.clearfix,
.cell {
  display: inline-block;
}

/* Hides from IE-mac \*/
*html .clearfix,
*html .cell {
  height: 1%;
}

.clearfix,
.cell {
  display: block;
}

/* End hide from IE-mac */

/*
=====================================================================
*
*    Main
*
* =================================================================== 
*/
html, body {
  font-family: sans-serif;
  font-size: 16px;
}

a {
}

.blog a:hover,
.shop a:hover {
	color: rgba(193,157,114,1);
}

.imgHeight {
	width: 100%;
	height: 100%;
}

.mainImg {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
}
.mainImg span {
	display: block;
	position: absolute;
}

#LogoTop{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 13%;
	margin: auto;
	width: 230px;
	height: 72px;
}

.spImgHeight{
	display: none;
}

#SpHeader {
  display: none;
}

.navHeight{
	height: 80px;
	width: 100%;
}


#PcHeader{
	background-color: rgba(255,255,255,1);
	height: 80px;
	width: 100%;
}

body.naviFixed #PcHeader{
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 100;
}



#PcHeader nav {
  width: 530px;
  margin: 0px auto 0px auto;
}

#PcHeader nav li {
  float: left;
  margin-right: 66px;
}

#PcHeader nav li.last {
  margin-right: 0px;
}

#PcHeader nav li a {
	display: block;
	height: 80px;
	line-height: 47px;	
}

#NavAbout{
	background: url(../images/pc/nav/01.gif) no-repeat left center;
	background-size: 75px 14px;
}

#NavCollection{
	background: url(../images/pc/nav/02.gif) no-repeat left center;
	background-size: 140px 14px;
}

#NavBlog{
	background: url(../images/pc/nav/03.gif) no-repeat left center;
	background-size: 58px 14px;
}
#NavShop{
	background: url(../images/pc/nav/04.gif) no-repeat left center;
	background-size: 58px 14px;
}


.about {
  margin: 200px auto 200px auto;
}

.about .title {
  text-align: center;
  margin-bottom:80px;
}

.about .copy {
  height: 300px;
  background: url(../images/pc/copy-about01.gif) no-repeat center center;
  background-size: 700px;
  margin-bottom: 60px;
}

.about .produce {
  height: 24px;
  background: url(../images/pc/copy-about02.gif) no-repeat center center;
  background-size: 205px 24px;
}

.model {
  margin-bottom: 200px;
}

.collection {
  width: 980px;
  margin: 0 auto 200px auto;
}

.collection .title {
  text-align: center;
  margin-bottom: 148px;
}

.collection .more {
	display: none;
  width: 55px;
  margin: 40px 460px 0px 460px;
}

.collection .precious .title {
  position: absolute;
  width: 980px;
  height: 88px;
  background: url(../images/pc/title-precious.png) no-repeat left top;
  background-size: 980px 88px;
  margin-top: -68px;
}

.collection .yarn {
  margin-top: 200px;
}

.collection .yarn .title {
  position: absolute;
  width: 980px;
  height: 118px;
  background: url(../images/pc/title-yarn.png) no-repeat left top;
  background-size: 980px 118px;
  margin-top: -68px;
}

.collection .products a {
  float: left;
  margin-bottom: 10px;
  z-Index: 1;
  background-size: 2425px;
  text-decoration: none;
}


.collection .products a span.itemBg {
	display: block;
	opacity: 0;
	background-color: rgba(193,157,114,0.7);
	width: 485px;
	height: 485px;
}

.collection .products a span.itemTitle {
	display: block;
	color: rgba(255,255,255,1);
	text-align: center;
	width: 485px;
	height: 485px;
	line-height: 485px;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0.075em;
}


.collection .products a:nth-child(odd) {
  margin-right: 10px;
}


@media screen and (min-width:640px) and ( max-width:980px) {

	.collection {
  	width: 485px;
	}
	
	.collection .precious .title {
		width: 640px;
		height: 88px;
		left: 50%;
		margin-left: -320px;
	  background-size: 980px 88px;
	  background-position: -165px 0px;
	  margin-top: -70px;
	}
	
	.collection .yarn .title {
		width: 640px;
		height: 118px;
		left: 50%;
		margin-left: -320px;
	  background-size: 980px 118px;
	  background-position: -165px 0px;
	  margin-top: -68px;
	}
	
	.collection .products a:nth-child(odd) {
	  margin-right: auto;
	}
	
	.about .copy {
	  height: 300px;
	  background-size: 700px;
	}
	
	.about .produce {
	  height: 19px;
	  background-size: 164px 19px;
	}
	
	
}


.blog {
  width: 600px;
  margin: 0 auto 200px auto;
}

.blog .title {
  text-align: center;
  margin-bottom: 40px;
}
.blog dl {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #161616;
  margin-bottom: 30px;
  font-size: 16px;
}

.blog dt {
  width: 170px;
  float: left;
  margin-right: 30px;
  font-size: 90%;
  line-height: 35px;
}

.blog dd {
  width: 400px;
  float: left;
  line-height: 30px;
}

.blog dd a {
  color: #494949;
}




.shop {
  width: 600px;
  margin: 0 auto 240px auto;
}

.shop .title {
  text-align: center;
  margin-bottom: 90px;
}

.shop dl {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #161616;
  margin-bottom: 50px;
  font-size: 15px;
}

.shop dt {
  width: 170px;
  float: left;
  margin-right: 30px;
  line-height: 1.8;
}

.shop dd {
  width: 400px;
  float: left;
  line-height: 1.8;
}

.shop dd a {
  color: #494949;
}

footer {
  width: 640px;
  margin: 0 auto;
}

footer .logo {
  width: 230px;
  margin: 0px auto 120px;
}

footer .sns {
  margin-bottom: 80px;
}

footer .instagram {
  width: 30px;
  float: left;
  margin-left: 275px;
}

footer .facebook {
  width: 30px;
  float: left;
  margin-left: 10px;
}

footer .copyright {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #c3a671;
  margin-bottom: 30px;
  font-size: 11px;
  text-align: center;
}


.detailImage {
	display: none;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
/* 	background-color: rgba(255,255,255,0.85); */
	background-color: rgba(193,157,114,0.7);
	z-index: 101;
}

.detailImage .detail img {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 600px;
	height: 600px;
	margin-left: -300px;
	margin-top: -300px;
	display: block;
}

.detailImage .close{
	position: absolute;
	top: 20px;
	right: 20px;
}

.detailImage .detailTxt{
	display: none;
	position: absolute;
	color: #FFF;
	left: 50%;
	top: 50%;
	margin-left: -300px;
	margin-top: 315px;
	width: 600px;
	height: auto;
	text-align: center;
	font-size: 14px;
	letter-spacing: 0.125em;
}