@charset "UTF-8";

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


/* 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; }

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

@media screen and (max-width: 549px) {
	.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.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.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.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.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.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.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.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.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.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; }
}

/* talk */
.talk { max-width: 960px; min-width: 300px; margin: 20px 0 40px 0; clear: both; }
.talk:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
.talk img { width: 48%; }
.talk ul { width: 48%; margin: 0; padding: 0; list-style: none; }
.talk ul li { padding: 10px 3%; font-size: 10pt; border: none; text-align: justify; }
.talk ul li:last-child { margin-bottom: 0; }
.talk ul li a { color: #000; text-decoration: underline; }
li.La, li.Lb, li.Lc, li.Ld { width: 84%; margin: 0 10% 20px 0; border-radius: 0 12px 12px 12px; }
li.Ra, li.Rb, li.Rc, li.Rd { width: 84%; margin: 0 0 20px 10%; border-radius: 12px 0 12px 12px; }
li.La, li.Ra { background: #ddd; }
li.Lb, li.Rb { background: #efadb1; }
li.Lc, li.Rc { background: #b2dedb; }
li.Ld, li.Rd { background: #98c7e4; }

@media screen and (min-width: 760px) {
	.talk img { width: 48%; }
	.talk ul { width: 48%; margin: 0; padding: 0; list-style: none; }
	.textR img { margin-bottom: 20px; float: left; }
	.textR ul { float: right; }
	.textL img { margin-bottom: 20px; float: right; }
	.textL ul { float: left; }
	.all img { margin-bottom: 20px; width: 100%; }
	.all ul { width: 80%; margin: 0 auto; padding: 20px 0; list-style: none; }
}

@media screen and (max-width: 759px) and (min-width: 560px) {
	.talk img { margin-bottom: 20px; width: 100%; }
	.talk ul { width: 80%; margin: 0 auto; padding: 20px 0; list-style: none; }
	.textR img, .textL img { margin-bottom: 20px; }
	.textR ul, .textL ul { margin-bottom: 20px; }
}

@media screen and (max-width: 559px) {
	.talk img { width: 100%; }
	.talk ul { width: 90%; margin: 0 auto; padding: 20px 0; list-style: none; }
	.textR img, .textL img { margin-bottom: 20px; }
	.textR ul, .textL ul { margin-bottom: 20px; }
}


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; }


/* 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: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: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; }


/* 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 -----*/