@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:1.5em;}
div,a,img,p,li {display:block;}
/*a:hover img {opacity:0.75;}*/



body {background-color:#fff;color:#fff;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:#000;border-top:10px solid #cc9933;}
header > div {max-width:980px;margin:0 auto;width:100%;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;font-color:#000;}

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


header h1 {text-align:left;font-size:2.5em;}
header h1 img {width:100%;max-width:800px;display:block;}

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





/*contents*/
#content {color:#111;margin:0 auto;padding:0px 0 0px;width:950px;color:#111; ) center center fixed no-repeat;}
/*#content h3 {text-align:center;font-size:2em;line-height:2em;font-weight:600;}*/

#content.crampon {background:  url(../img/yuya-miyajima/haikeilogo.png) center center fixed;max-width: 1200px;width: 100%;margin:0px;}


#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 > h2 {line-height: 1.1em;font-size:2.375em;font-weight: 800;border-bottom:5px #f90 double;padding-bottom: 0.125em;width: 100%;}
#content > h2 span {display:block;font-size:0.675em;font-weight: 400;}
#content > h2 img {width:100%;}







/*メインテキスト！40年以上の歴史を持つ*/
#content p.lead {text-align: center;margin:0em auto;font-weight: 800;font-size: 1.3em;text-shadow:1px 1px 0.1em #fff,-1px 1px 0.1em #fff,-1px -1px 0.1em #fff,1px -1px 0.1em #fff;}

div.panel {width:80%;margin: 2em auto;/*border-bottom: 1px solid #666;*/padding:0 0 1em;}

/*#content.crampon div.panel {padding:0 0 2em;}*/
div.panel > h3 {text-align: left;border-left: 7px solid #f90;padding:0.25em;margin-bottom: 0.5em;font-weight:600;font-size:2em;}
div.panel > h3.crampon {border-left: 7px solid #30f;}
div.panel > h3 span.price {color:#f00;margin-left: 1em;font-size: 0.9em;}
div.panel > h3 span.price:after {content:"\FF08\7A0E\8FBC\FF09";font-size:0.675em;}


div.panel > img {width:40%;float:left;}
div.panel > a {width:40%;float:left;}
div.panel > a:hover {transform: scale(1.02);box-shadow: 0 0 7px 1px #f90;}
div.panel > a img {width:100%;}

/*.crampon div.panel > a img {max-height: 354px; height: 100%;}*/
div.panel > span {float:left;width:58%;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 > 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 {}
/*.muramatsu div.panel.sold {margin-bottom: 2.5em;}*/


div.panel2 > span {float:left;width:90%;margin-left: 2%;}
div.panel2> 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.panel2> span > h3.crampon {border-left: 7px solid #30f;border-bottom: 1px solid #30f; }

/*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.crampon {width:100%;}
	#content.muramatsu {width:100%;}
	#content.crampon {width:950px;}
	#content.muramatsu {width:950px;}*/
	#shelf > div.panel {float:none;font-size:1em;width:80%;padding:0 0 2em;}
}

/*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) {
}

.star_size{
  font-size: 1.0vw;
}

.comment1-ul {
  padding: 0;
  width: 300px;
  height: 96px;
  overflow-y: scroll;
  border: 1px solid #ccc
}
.comment1-li {
  list-style: none!important;
  padding: 4px
}

.comment1-li:nth-child(even) {
  background: #eff
}

.comment1-li:nth-child(odd) {
  background: #fec;
}

.comment2-ul {
  margin: 0 0 15px 0;
  padding: 0;
  width:  100%;
  height: 6em;
  overflow-y: scroll;
  border: 1px solid #ccc
}
.comment2-ul::-webkit-scrollbar {
  display: none;
}
.comment2-li {
  list-style: none!important;
  padding: 4px
}

.comment2-li:nth-child(even) {
  background: #fff;
}

.comment2-li:nth-child(odd) {
  background: #fff;
}
.comment3-wrap {
  padding: 0;
  width: 300px;
  overflow-x: hidden;
  overflow-y: hidden;
  border: 1px solid #ccc
}
.comment3-ul {
  margin: 0;
  padding: 0;
  height: 96px;
  width: 317px;
  padding-right: 17px;
  overflow-y: scroll;
}
.comment3-li {
  list-style: none!important;
  padding: 4px
}

.comment3-li:nth-child(even) {
  background: #eff
}

.comment3-li:nth-child(odd) {
  background: #fec;
}

.center {
  display: block;
  margin: 0 auto;
  margin-left: auto;/*これでもOK*/
  margin-right: auto;/*これでもOK*/
}