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

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300&subset=latin,greek);
@import url(https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i);

* {box-sizing:border-box;}
a, a:after {-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; outline:none;}
a {cursor:pointer;}
div,ol,ul,li,p,span,a {position:relative;}
ol,ul,li {list-style:none;list-style-type:none;padding:0;}
body,header,footer,menu,p {padding:0;margin:0;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;margin:0;padding:0;line-height:1em;}
div,a,img,p,li {display:block;}
/*a:hover img {opacity:0.75;}*/



body {background:url(../img/tomaz/bg.gif) ;color:#111;font-size:16px;width:100%;
font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
#wrapper {overflow:hidden;}

/*ヘッダー*/
header {width:100%;background-color:#fff;border-top:7px solid #D7AF36;}
header > div {max-width:1200px;margin:0 auto;width:98%;text-align:left;padding:0 0 10px;}
header > div > div {float:left;width:/*72%*/705px;}

header p.lead {font-size:0.75em;line-height:1.3em;margin-top:0.5em;text-align:center;}

header div a {display: inline-block;}
header div a:hover {color:#f90;}

#contentWrapper {background:linear-gradient(to bottom, rgba(255,170,204,0.7), rgba(255,255,255,0.9));/*border-top:1px solid #EADFB1;*/}

/*contents*/
#content {color:#426;margin:0 auto;padding:20px 0 20px;width:1200px;}
/*#content h3 {text-align:center;font-size:2em;line-height:2em;font-weight:600;}*/

#content > img, #content > a img {width:100%;}
#content > hr {border-width: 0 0 8px; border-style: solid; border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(0, 0%, 65%, 0.8)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat; width: 80%;margin:30px auto;}
#content > h1 {line-height: 1.1em;font-size:3em;font-weight: 500;border-bottom:5px #f39 double;padding-bottom: 0.125em;}
#content > h1 span {display:block;font-size:0.675em;font-weight: 400;}
#content > h1 img {width:100%;max-width:800px;margin:0 auto;}
#content p.lead {text-align: center;margin:1em auto;font-weight: 500;font-size: 1.25em;text-shadow:1px 1px 0.1em #fff,-1px 1px 0.1em #fff,-1px -1px 0.1em #fff,1px -1px 0.1em #fff;}

#shelf {width:100%;margin:0 auto;}
#shelf > div.panel {float:left;font-size:0.875em;width:50%;padding:0 0.5em 2em;}
#shelf h2 {font-size:2.5em;font-weight:600;margin:1em 0 0;float: left;width:100%;}
div.panel {width:80%;margin: 2em auto;border-bottom: 1px solid #fff;padding:0 0 1em;}
div.panel > h3 {text-align: left;border-left: 7px solid #f0c;padding:0.25em;margin-bottom: 0.5em;font-weight:500;font-size:2em;cursor:pointer;}
div.panel > h3 span.price {color:#f00;margin-left: 1em;}
div.panel > h3 span.price:after {content:"\0028\007a0e\005225\0029";font-size:0.675em;}
div.panel > a {width:40%;float:left;}
div.panel > div.imagepanel {width:70%;float: left;}
div.panel > div.imagepanel img {width: 100%;}
div.panel > a:hover {transform: scale(1.02);box-shadow: 0 0 7px 1px #f90;}
div.panel > a img {width:100%;}
div.panel > span {float:left;width:28%;margin-left: 2%;}
div.panel > span > h3 {font-weight:600;text-align: left;border-left: 7px solid #f90;border-bottom: 1px solid #f90; padding:0.25em;margin-bottom: 0.75em;}
div.panel > span > h3.crampon {border-left: 7px solid #30f;border-bottom: 1px solid #30f; }
div.panel > span > a {display: none;}
div.panel > span > a:hover {color:#f90;}
div.panel > span > a.button {display: block; text-align: center;background: rgb(164,107,117);border:2px solid #fff;border-radius: 7px;text-decoration: none;color:#fff;font-weight: 800;font-family: 'Open Sans', sans-serif;font-size: 1.5em;box-shadow: 2px 2px 5px 0 #666;line-height: 1.1em;padding:0.125em;}
#content.crampon div.panel > span > a.button {margin:0.75em 0 0.5em;}
div.panel > span > a.button span {display: block;font-size: 0.5em;font-weight: 400;}
div.panel > span > a.button:hover {box-shadow: 0 0 3px 0 #333;top:1px;left:1px;}
div.panel > span > p {margin:0 0 0.75em;background: #fff;padding:0.5em;border-radius: 7px;}
div.panel > span > p.comment {}
div.panel > span > p.comment:before {content:"";display: block;width:0; height: 0;background:none;position: absolute;top:40%;left:-3.8em;border:1em solid transparent;border-right:2em solid #fff;border-left:2em solid transparent;}
div.panel > span > ul {}
div.panel ul.imagechange {margin: 0 0 1em;}
div.panel ul.imagechange li {position: static;}
div.panel ul.imagechange li ul {font-size: 150%;position: static;cursor:pointer;line-height: 1.8em;}
div.panel ul.imagechange li ul li {display: none; position: absolute;top:0;left:-257%;width:250%;}
div.panel ul.imagechange li ul li img {width:100%;}
/*div.panel ul.imagechange li ul:hover li {display:block;}*/
div.panel ul.imagechange li ul.imgshw li {display:block;}

div.panel table {float:left;width:100%;border-collapse: collapse;border: 1px solid #ccc;margin: 1em auto 0;background-color: rgba(255,255,255,0.3);}
div.panel table tr {}
div.panel table th {border-collapse: collapse;border: 1px solid #ccc;font-size:0.875em;text-align: center;}
div.panel table td {padding:0.25em;border-collapse: collapse;border: 1px solid #ccc;text-align: center;}
div.panel table td.price {color:#f00;font-weight: 500;}

div#inform {width:100%;text-align: center;color:#222;}
div#inform h3 {font-size: 3em;font-weight: 400;margin-bottom: 1em;font-family: Lora, serif;font-style: italic;}
div#inform h5 {font-size: 1.25em;font-weight: 600;}
div#inform p {font-weight: 600;}
div#inform p a {display: inline-block;text-decoration: none;color:#223;font-weight: 600;}
div#inform p a:hover {color:#f90;text-decoration: underline;}
div#inform div.mapframe {width:90%;overflow: hidden;margin:0.5em auto;border: 2px solid #ccc;}
div#inform div.mapframe iframe {width:100%;}

/*wind=============================================================================================================================*/


/*ヘッダーメニュー*/
#navmenu {width:100%;background:linear-gradient(to bottom, #474747, #737373);}
#navmenu ul {/*max-*/width:980px;/*width:100%;*/margin:0 auto;}
#navmenu ul li {float:left;width:16.6%;}
#navmenu ul li a {color:#fff;font-weight:600;text-align:center;font-size:0.75em;padding:0.1em 0.5em 0.5em;text-decoration:none;text-shadow: 2px 2px 2px #333;}
#navmenu ul li a:hover {background:rgba(0,0,0,0.4);}
#navmenu ul li a:before {display:inline;position:relative;top:0.45em;}

#navmenu ul li.allstock a:before {content:url(../img/i_all_stock.png);}
#navmenu ul li.newarrival a:before {content:url(../img/i_new.png);}
#navmenu ul li.buying a:before {content:url(../img/i_kaitori.png);}
#navmenu ul li.access a:before {content:url(../img/i_access.png);}
#navmenu ul li.windtop a:before {content:url(../img/i_windtop.png);}
#navmenu ul li.import a:before {content:url(../img/i_import.png);}


/*フッター*/
footer {background-color:rgb(0,0,0);color:#fff;width:100%;}
p.copyright {font-family: 'Open Sans', sans-serif;font-weight:400;font-size:0.75em;text-align:center;line-height:2em;}

/*ページトップへ*/
.pagetop {display: none;position: fixed;bottom: 30px;right: 35px;z-index:+20;}
.pagetop a {display: block;width: 50px;height: 50px;background-color: rgba(0,150,100,0.7);text-align: center;color: #fff;font-size: 24px;text-decoration: none;line-height: 50px;border-radius:25px;outline:none;}

/*汎用*/
.mincho {font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
.serif {font-family:  "Times New Roman", Times, serif, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝";}
.gothic {font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.boxshadow {box-shadow: 2px 2px 4px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.5); -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.5);}
.txthshadow {text-shadow:1px 1px 0.1em #000,-1px 1px 0.1em #000,-1px -1px 0.1em #000,1px -1px 0.1em #000;}
.clearfix:after {content:"";display:block;position:relative;clear:both;}

.spshow {display:none;visibility:hidden;}


/*980px*/
@media screen and (max-width: 61em) {
	#content {width:98%;}
	#shelf > div.panel {float:none;font-size:1em;width:80%;padding:0 0 2em;}
	#shelf h2 {float:none;width:90%;}
}

/*894px*/
@media screen and (max-width: 55.9em) {
}

/*830px*/
@media screen and (max-width: 51.9em) {
}

/*736px*/
@media screen and (max-width: 46.1em) {
	header {font-size:0.8em;}
}

/*666*/
@media screen and (max-width: 41.7em) {
}

/*606px*/
@media screen and (max-width: 37.9em) {
	header {font-size:0.7em;}
	#content > hr {margin:15px auto;}
	.sphide {display:none;visibility:hidden;}
	.spshow {display:inline-block;visibility: visible;}
}

/*529px*/
@media screen and (max-width: 34.5em) {
	header {font-size:0.6em;}
	.mbhide {display:none;visibility:hidden;}
}


/*430px*/
@media screen and (max-width: 26.9em) {
	header {font-size:0.5em;}
}

/*375*/
@media screen and (max-width: 23.5em) {
	header {font-size:0.4em;}
}

/*360*/
@media screen and (max-width: 22.6em) {
}

/*320*/
@media screen and (max-width: 20.1em) {
}