@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700|Roboto+Condensed:400,300,700);

blockquote.kugi:before { content: "ここに目が釘付け！"; }
blockquote.model2:before { content: "常時モデルさんが2名！"; }
blockquote.nikon:before { content: "顕微鏡もニコン！"; }
blockquote.ninagawa:before { content: "蜷川実花氏の作品がお出迎え"; }

strong { font-size: 120%; font-weight: bold; }

/* html -------------------------------------------------------------------------------- */
body { margin: 0; padding: 0; font-family: "Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka, sans-serif; }
body.en { margin: 0; padding: 0; font-family: "Lucida Grande", sans-serif, Helvetica; }


hr { background: url(../img/hr.gif) center center no-repeat; border: none; clear: both; }

th { font-weight: bold; text-align: left; }
th, td { padding: 3px 5px; font-weight: 9pt; }

@media screen and (min-width: 660px) {
	hr { height: 50px; margin: 30px 0; }
}

@media screen and (max-width: 659px) {
	hr { height: 50px; margin: 20px 0; }
}

.clear { clear: both; }
.clearfix { display: inline-block; }
.clearfix:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }

.small, #small { font-size: 80%; }
.vsmall, #vsmall { font-size: 60%; }

.right { text-align: right !important; }

.gray { color: #888; }
.red { color: #c00; }

.off { display: none !important; }

.columns { -webkit-columns: 280px 2; -moz-columns: 280px 2; ms-columns: 280px 2; columns: 280px 2; column-rule-style: thick; }

blockquote { margin: 40px 0; padding: 20px; background: #faf0e6; color: #333; border: solid 1px #ddd; border-radius: 10px; }
blockquote ul { margin: 0; padding-top: 0; padding-bottom: 0; }
blockquote ul li { margin-top: 5px; }
blockquote ul li:first-child { margin-top: 0; }

blockquote.ricoh-theta-spherical-image { border: none; background: none; }
div.theta { margin: 25px 0 45px 0; }
div.theta p { margin-top: 30px !important; }

@media screen and (min-width: 650px) {
	.center { text-align: center !important; }
}

@media screen and (max-width: 649px) {
	.center { text-align: left !important; }
}


/* header -------------------------------------------------------------------------------- */
header { width: 100%; margin: 0; padding: 0; font-family: "Roboto Condensed", Helvetica, sans-serif; z-index: 99999; }
.wrapper { max-width: 960px; min-width: 300px; margin: 0 auto; padding: 0 10px; position: relative; }
.logo { background: url(../img/header_py_logo.png) center left no-repeat; background-size: contain; float: left; }

header ul { margin: 0; padding: 0; font-family: "Roboto Condensed", Helvetica, sans-serif; color: #000; line-height: 1.2em; list-style: none; }
header ul li { display: inline-block; }
header ul a { text-decoration: none; font-weight: bold; }

@media screen and (min-width: 650px) {
	.logo { margin: 20px 0 10px 0; padding-left: 70px; line-height: 1.4em; }
	header h1 { margin: 20px 0 0 0; padding: 0; font-size: 24px; font-weight: 700; }
	header h1 a { color: #000; text-decoration: none; }
	header h2 { margin: 0 0 20px 0; padding: 0; font-size: 18px; color: #555; font-wieght: 300; text-align: center; }
	header h2 span { color: #f00; }
	header ul { position: absolute; font-size: 10pt; top: 50px; right: 10px; }
	header ul a { color: #000; }
	header ul a:hover { text-decoration: underline; } 
}

@media screen and (min-width: 400px) and (max-width: 649px) {
	.logo { margin: 10px 0 0 0; padding-left: 60px; line-height: 1.3em; }
	header h1 { margin: 15px 0 0 0; padding: 0; font-size: 20px; font-weight: 700; }
	header h1 a { color: #000; text-decoration: none; }
	header h2 { margin: 0 0 15px 0; padding: 0; font-size: 14px; color: #555; font-wieght: 300; text-align: center; }
	header h2 span { color: #f00; }
	header ul { position: absolute; font-size: 9pt; top: 20px; right: 10px; }
	header ul li { padding: 5px 5px 4px 5px; background: #000; text-align: center; border: none; border-radius: 5px; opacity: 0.3; }
	header ul li:hover { opacity: 0.5; }
	header ul li span { display: block; }
	header ul a { color: #fff; }
	header ul a:hover {} 
}

@media screen and (max-width: 399px) {
	.logo { margin: 10px 0 0 0; padding-left: 50px; line-height: 1.2em; }
	header h1 { margin: 10px 0 0 0; padding: 0; font-size: 18px; font-weight: 700; }
	header h1 a { color: #000; text-decoration: none; }
	header h2 { margin: 0 0 10px 0; padding: 0; font-size: 12px; color: #555; font-wieght: 300; text-align: center; }
	header h2 span { color: #f00; }
	header ul { position: absolute; font-size: 8pt; top: 16px; right: 10px; }
	header ul li { padding: 3px 5px 2px 5px; background: #000; text-align: center; border: none; border-radius: 5px; opacity: 0.3; }
	header ul li:hover { opacity: 0.5; }
	header ul li span { display: block; }
	header ul a { color: #fff; }
	header ul a:hover {} 
}



/* contents -------------------------------------------------------------------------------- */
#wrapper { max-width: 980px; min-width: 320px; margin: 0 auto; padding: 0; clear: both; }
article#content, section#cart, footer { max-widht: 960px; min-width: 300px; margin: 0; padding: 0 10px; }

/* content */
#content h1, #content h2 { padding: 0 10px; text-align: center; line-height: 1.3em; }

#content h1 a.vol { margin-left: 5px; padding: 2px 5px 1px 5px; background: #fff; font-size: 50%; font-family: "Roboto Condensed", Helvetica, sans-serif; color: #000; letter-spacing: 0.1em; text-decoration: none; font-weight: normal; vertical-align: bottom; border: solid 1px #000; border-radius: 3px; } 
#content h1 a.vol:hover { background: #000; color: #fff; }
#content h1 a.vol_on { margin-left: 5px; padding: 2px 5px 1px 5px; background: #000; font-size: 50%; font-family: "Roboto Condensed", Helvetica, sans-serif; color: #fff; letter-spacing: 0.1em; text-decoration: none; font-weight: normal; vertical-align: bottom; border: solid 1px #000; border-radius: 3px; } 
#content h1 a.vol_on:hover { opacity: 0.6; }

@media screen and (min-width: 860px) {
	#content h1 { margin: 10px 0 30px 0; font-size: 18pt; vertical-align: top; }
	#content h1 span { margin-left: 10px; font-size: 14pt; }
	#content h1 span:before { content: "- "; }
	#content h2 { margin: 10px 0 30px 0; font-size: 15pt; }
	#content p { font-size: 11pt; }
}

@media screen and (max-width: 859px) and (min-width: 550px) {
	#content h1 { margin: 0px 0 25px 0; font-size: 17pt; vertical-align: top; }
	#content h1 span { font-size: 13pt; display: block; }
	#content h2 { margin: 10px 0 30px 0; font-size: 14pt; }
	#content p { font-size: 11pt; }
}

@media screen and (max-width: 549px) {
	#content h1 { margin: 0 0 25px 0; font-size: 15pt; vertical-align: top; }
	#content h1 span { font-size: 12pt; display: block; }
	#content h2 { margin: 0 0 25px 0; font-size: 14pt; }
	#content p { font-size: 11pt; }
}

#content p { margin: 0; padding: 0 0 15px 0; line-height: 1.8em; text-align: justify; }
#content p a { color: #09c; text-decoration: none; }
#content p a:hover { text-decoration: underline; } 
#content p.sign { margin-top: 10px; text-align: right; }

p.w960 img { width: 100%; max-width: 960px; min-width: 300px; margin: 15px 0; padding: 0; }

p.w460l img, p.w460r img, p.w460 img { max-width: 460px; }
p.w507l img, p.w507r img, p.w507 img { max-width: 507px; }
p.w508l img, p.w508r img, p.w508 img { max-width: 508px; }
p.w530l img, p.w530r img, p.w530 img { max-width: 530px; }
p.w531l img, p.w531r img, p.w531 img { max-width: 531px; }
p.w532l img, p.w532r img, p.w532 img { max-width: 532px; }
p.w533l img, p.w533r img, p.w533 img { max-width: 533px; }
p.w534l img, p.w534r img, p.w534 img { max-width: 534px; }
p.w535l img, p.w535r img, p.w535 img { max-width: 535px; }
p.w600l img, p.w600r img, p.w600 img { max-width: 600px; }

p.w460 img, 
p.w507 img, 
p.w508 img, 
p.w530 img, 
p.w531 img, 
p.w532 img, 
p.w533 img, 
p.w534 img, 
p.w535 img, 
p.w600 img { width: 100%; min-width: 300px; margin: 0 auto !important; padding: 20px 0; display: block; clear:both; }

@media screen and (min-width: 900px) {
	p.w460l, p.w460r, 
	p.w507l, p.w507r, 
	p.w508l, p.w508r, 
	p.w530l, p.w530r, 
	p.w531l, p.w531r, 
	p.w532l, p.w532r, 
	p.w533l, p.w533r, 
	p.w534l, p.w534r, 
	p.w535l, p.w535r, 
	p.w600l, p.w600r { margin: 20px 0 !important; padding: 20px 0 !important; }
	
	p.w460l:after, p.w460r:after, 
	p.w507l:after, p.w507r:after, 
	p.w508l:after, p.w508r:after, 
	p.w530l:after, p.w530r:after, 
	p.w531l:after, p.w531r:after, 
	p.w532l:after, p.w532r:after, 
	p.w533l:after, p.w533r:after, 
	p.w534l:after, p.w534r:after, 
	p.w535l:after, p.w535r:after, 
	p.w600l:after, p.w600r:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
	
	p.w460l img, 
	p.w507l img, 
	p.w508l img, 
	p.w530l img, 
	p.w531l img, 
	p.w532l img, 
	p.w533l img, 
	p.w534l img, 
	p.w535l img, 
	p.w600l img { margin: 0 25px 0 0; float: left; }
	
	p.w460r img, 
	p.w507r img, 
	p.w508r img, 
	p.w530r img, 
	p.w531r img, 
	p.w532r img, 
	p.w533r img, 
	p.w534r img, 
	p.w535r img, 
	p.w600r img { margin: 0 0 0 25px; float: right; }
	
	p.w460l img, p.w460r img, 
	p.w507l img, p.w507r img, 
	p.w508l img, p.w508r img, 
	p.w530l img, p.w530r img, 
	p.w531l img, p.w531r img, 
	p.w532l img, p.w532r img, 
	p.w533l img, p.w533r img, 
	p.w534l img, p.w534r img, 
	p.w535l img, p.w535r img, 
	p.w600l img, p.w600r img { width: 100%; min-width: 300px; }
}

@media screen and (max-width: 899px) {
	p.w460l, p.w460r, 
	p.w507l, p.w507r, 
	p.w508l, p.w508r, 
	p.w530l, p.w530r, 
	p.w531l, p.w531r, 
	p.w532l, p.w532r, 
	p.w533l, p.w533r, 
	p.w534l, p.w534r, 
	p.w535l, p.w535r, 
	p.w600l, p.w600r { margin: 25px 0; padding: 5px 0 15px 0 !important; }
	
	p.w460l img, p.w460r img, 
	p.w507l img, p.w507r img, 
	p.w508l img, p.w508r img, 
	p.w530l img, p.w530r img, 
	p.w531l img, p.w531r img, 
	p.w532l img, p.w532r img, 
	p.w533l img, p.w533r img, 
	p.w534l img, p.w534r img, 
	p.w535l img, p.w535r img, 
	p.w600l img, p.w600r img { width: 100%; min-width: 300px; margin: 10px auto 20px auto; display: block; clear:both; }
}

ul.w2pix { margin: 0 0 -10px 0; padding: 15px 0 10px 0; list-style: none; line-height: 0; }
ul.w2pix:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
ul.w2pix li { width: 48%; margin-bottom: 20px; padding: 0 2% 0 0; font-size: 10pt; line-height: 1.8em; text-align: justify; float: left; }
ul.w2pix li:nth-child(2n) { padding: 0 0 0 2%; float: right; }
ul.w2pix li:nth-child(2n+1) { clear: both; }
ul.w2pix li img { width: 100%; }
ul.w2pix li a { color: #09c; text-decoration: none; }
ul.w2pix li a { text-decoration: none; }

@media screen and (max-width: 600px) {
	ul.w2pix li { font-size: 9pt; line-height: 1.5em; }
}

p.date { padding-top: 20px !important; font-size: 8pt !important; color: #888; text-align: right !important; }

ul.categories { margin: 0; padding: 30px 0 0 0; list-style: none; }
ul.categories:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
ul.categories li { margin: 0 5px 10px 0; padding: 0; float: left; }
ul.categories li a { margin: 0; padding: 4px 5px 4px 4px; background: #aaa; font-size: 9pt; color: #fff; text-decoration: none; border: none; border-radius: 3px; }
ul.categories li a:hover { background: #555; }


/* blockquote */
blockquote.point { margin: 40px 0; padding: 10px; background: #fff; border: solid 8px #ccc; border-radius: 25px 30px 30px 30px; position: relative; }
blockquote.point:before { margin: 0 0 0 10px; padding: 0 5px; background: #fff; font-size: 140%; color: #ff4500; font-weight: bold; position: absolute; top: -0.98em; }

blockquote.point:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
blockquote.point p { margin: 15px 10px !important; padding: 0 !important; text-align: center; }
blockquote.point p:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }

@media screen and (min-width: 660px) {
	blockquote.point p img { width: 100%; max-width: 400px; margin: 0 20px 0 0 !important; border-radius: 10px; float: left; }
}

@media screen and (max-width: 659px) {
	blockquote.point p img { width: 100%; max-width: 630px; margin: 0 0 10px 0 !important; border-radius: 10px; }
}


/* sns */
#snsButton { height: 50px; margin: 0; padding: 20px 0 0 0; text-align: left; float: left; }
#snsButton ul { padding: 0; float: left; }
#snsButton li { margin-right: 10px; float: left; }

body#home #snsButton { height: 50px; margin: 0; padding: 10px 0 0 0; text-align: left; float: left; }


/* top and category page */
#makerindex, #headline { margin: 40px 0 0 0; }

@media screen and (min-width: 750px) {
	#makerindex { width: 25%; float: right; }
	#headline { width: 72%; float: left }
	
	#makerindex h2 span, #headline h2 span { margin-left: 10px; font-size: 9pt; color: #555; font-weight: normal; }
	
	#makerindex > ul { margin: 0; padding: 0; border-top: solid 1px #555; list-style: none; }
	body.home #makerindex > ul:after, body.category #makerindex > ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
	#makerindex > ul > li { font-size: 10pt; text-align: center; border-bottom: dotted 1px #555; }
	#makerindex > ul > li:last-child { border-bottom: solid 1px #555; }
	#makerindex > ul > li a { width: 100%; padding: 12px 0; color: #000; text-decoration: none; display: block; }
    #makerindex > ul > li a.sorry { color: #aaa; }
	#makerindex > ul > li:hover { background: #eee; }
}

@media screen and (max-width: 749px) {
	#makerindex { }
	#headline { }
	
	#headline h2 span, #makerindex h2 span { display: none; }
	
	#makerindex > ul { margin: 0; padding: 15px 0; border-top: solid 1px #555; list-style: none; }
	#makerindex > ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
	#makerindex > ul > li { margin: 0 5px 10px 0; padding: 0; float: left; }
	#makerindex > ul > li.home, #makerindex > ul > li.cateogry { display: none; }
	#makerindex > ul > li a { margin: 0; padding: 4px 5px 4px 4px; background: #aaa; font-size: 9pt; color: #fff; text-decoration: none; border: none; border-radius: 3px; }
	#makerindex > ul > li a.sorry { color: #ddd;}
	#makerindex > ul > li a:hover { background: #555; }
}

#makerindex h2, #headline h2 { margin: 0; padding: 0; font-size: 22pt; line-height: 1.2em; text-align: left; }

#headline > ul { margin: 0; padding: 0; border-top: solid 1px #555; list-style: none; }
#headline > ul > li { padding: 12px 0; border-bottom: dotted 1px #555; }
#headline > ul > li:last-child { border-bottom: solid 1px #555; }
#headline > ul > li:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }

@media screen and (min-width: 500px) {
	#headline .photo { width: 36%; margin: 0; float: left; }
	#headline .text { width: 60%; margin: 0 1% 0 3%; float: right; }
	#headline .photo img { width: 100%; border: none; border-radius: 5px; }
}

@media screen and (max-width: 499px) {
	#headline .photo { margin: 0; }
	#headline .text { margin: 0; }
	#headline .photo img { width: 100%; margin-bottom: 10px; border: none; border-radius: 5px; }
}


#headline h3 { margin: 0; padding: 0; font-size: 15pt; line-height: 1.4em; }
#headline h3 a { color: #000; text-decoration: none; }
#headline h3 a:hover { text-decoration: underline; }
#headline ul.categories { margin: 5px 0 0 0; padding: 5px 0 0 0; }
#headline ul.categories li { margin: 0 5px 10px 0 !importante; padding: 0; }
#headline ul.categories li a { font-size: 8pt; }
#headline p { margin: 0; padding: 5px 0; font-size: 10pt; line-height: 1.4em; }
#headline p.more { padding: 0; text-align: right; }
#headline p.more a { text-decoration: none; }
#headline p.more a:hover { text-decoration: underline; }


/* cart -------------------------------------------------------------------------------- */
#cart ul { margin: 50px 0 0 0; padding: 0; font-size: 10pt; list-style: none; }
#cart ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
#cart li { padding: 0; }
#cart a { color: #000; text-decoration: none; }
#cart a:hover { text-decoration: underline; }
#cart p { margin: 0; padding: 0; line-height:1.8; }

@media screen and (min-width: 600px) {
	p.lead { text-align: center !important; }
	#cart li { width: 48%;  margin: 0 4% 40px 0; float: left; }
	#cart li:nth-child(2n) { margin-right: 0; }
}

@media screen and (max-width: 599px) {
	#cart li { width: 100%;  margin: 0 0 40px 0; padding: 0; }
}

p.price { color: #f00; font-weight: bold; line-height:1.2 !important; }
p.fixedprice, span.tax { color:#888; }
p.ptitle { font-weight: bold; }
p.pread { margin: 5px 0 !important; }
div.shoppingimg { text-align:center; }
div.cartBtnImg { text-align:right; }
div.cartBtnImg input { margin-top:20px; }
.Prd-cartImageTag img { margin-top: 20px; }


/* cart3 -------------------------------------------------------------------------------- */
section#cart3 { margin-top: 50px; clear: both; }
#cart3 ul { margin: 30px 0 20px 0; padding: 0; font-size: 8pt; list-style: none; }
#cart3 ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
#cart3 li { padding: 0; }
#cart3 a { color: #000; text-decoration: none; }
#cart3 a:hover { text-decoration: underline; }
#cart3 p { margin: 0; padding: 0; line-height:1.2; text-align: left; }
#cart3 h2 { margin: 30px 0 10px 0; padding: 0 0 3px 0; font-size: large; color: #555; text-align: left; border-bottom: solid 1px #555 !important; }

@media screen and (min-width: 650px) {
	#cart3 li { width: 30%;  margin: 0 5% 40px 0; float: left; }
	#cart3 li:nth-child(3n) { margin-right: 0; }
	#cart3 li:nth-child(3n+1) { clear: both; }
}

@media screen and (max-width: 649px) {
	#cart3 li { width: 100%;  margin: 0 0 40px 0; padding: 0; }
}

#cart3 p.ptitle { margin: 5px 0; font-size: 9pt; font-weight: bold; }
#cart3 p.price { margin-bottom: 5px; font-size: 9pt; color: #f00; font-weight: normal; }
#cart3 p.fixedprice, span.tax { font-size: 8pt; color:#888; }
#cart3 p.pread { margin: 5px 0 !important; }
#cart3 div.shoppingimg { margin: 0 10px; text-align:center; }
#cart3 div.cartBtnImg { text-align:right; }
#cart3 div.cartBtnImg input { margin-top:20px; }
#cart3 .Prd-cartImageTag img { margin-top: 20px; }


/* footer -------------------------------------------------------------------------------- */
footer { padding: 10px 10px 0 10px; clear: both; }

@media screen and (min-width: 650px) {
	footer p.top { font-size: 9pt; text-align: right; }
	footer p.top a { color: #000; text-decoration: none; }
	footer p.top a:before { content: "Back to top "; }
}

@media screen and (max-width: 649px) {
	footer p.top { position: fixed; bottom: -5px; right: 10px; z-index: 2; }
	footer p.top a { padding: 5px 10px; background: #000; font-size: 20pt; color: #fff; text-decoration: none; line-height: 1.2em; border: none; border-radius: 5px; display: block; opacity: 0.2; }
	footer p.top a:hover { opacity: 0.4; }
}

footer div { margin: 10px 0 0 0; padding: 10px 0 0 0; border-top: solid 1px #555; }
footer h6 { font-family: "Roboto Condensed", Helvetica, sans-serif; font-size: 13pt; vertical-align: middle; }
footer h6 a { color: #000; text-decoration: none; }
footer h6 a:hover { opacity: 0.6; }
footer small { font-family: "Roboto Condensed", Helvetica, sans-serif; display: block; }

footer ul { margin: 0; padding: 0; color: #888; list-style: none; }
footer li { margin: 0; padding: 0; }
footer li a { color: #888; text-decoration: none; }
footer li a:hover { color: #000; }
footer h5 { margin: 0; padding: 0; text-align: center; }

@media screen and (min-width: 860px) {
	footer h6 { height: 30px; margin: 0; padding: 0 20px 0 0; line-height: 30px; vertical-align: middle; float: left; }
	footer small { height: 30px; margin: 0; padding: 0 20px 0 0; font-size: 9pt; line-height: 30px; float: left; }
	footer ul { height: 30px; font-size: 8pt; float: right; }
	footer ul li { height: 30px; margin-right: 5px; line-height: 30px; vertical-align: middle; display: inline; }
	footer h5 { margin-top: 40px; }
}

@media screen and (max-width: 859px) and (min-width: 550px) {
	footer h6 { height: 28px; margin: 0; padding: 0 20px 0 0; line-height: 28px; float: left; }
	footer small { height: 28px; margin: 0; padding: 0 5px 0 20px; font-size: 9pt; line-height: 28px; vertical-align: middle; float: right; }
	footer ul { height: 25px; font-size: 8pt; text-align: right; clear: both; }
	footer li { height: 25px; margin-right: 5px; line-height: 25px; vertical-align: middle; display: inline; }
	footer h5 { margin-top: 20px; }
}

@media screen and (max-width: 549px) {
	footer h6 { height: 30px; margin: 0; padding: 0 20px 0 0; line-height: 30px; }
	footer small { height: 30px; margin: 0; padding: 0 5px 0 0; font-size: 9pt; line-height: 30px; vertical-align: middle; }
	footer ul { margin-top: 5px; padding: 0; font-size: 9pt; }
	footer h5 { margin-top: 15px; }
}

body.en footer ul { display: none; }
body.en footer h5 { margin: 0; padding: 0; text-align: center; }

@media screen and (min-width: 860px) {
	body.en footer small { padding: 0; float: right; }
	body.en footer h5 { margin-top: 40px; }
}

@media screen and (max-width: 859px) and (min-width: 550px) {
	body.en footer h5 { margin-top: 40px; }
}


/* ----- End of Files -----*/