@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-color:#000;color:#111;font-size:16px;width:100%; 
font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
#wrapper {overflow:hidden;}



p.sample3 {background-color: rgba(80,80,2176,0.5);} 



.rounded-corner {
  background-color: #5850B0;
  width: 400px;
  height: 50px;
  color: #FFFFFF;
  font-size: 18px;

  border-radius: 10px; //
}








/*ヘッダー*/
header {width:100%;background-color:#000000;}
header > div {max-width:1440px;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.65em;line-height:1.3em;margin-top:0.5em;text-align:center;}

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:#ffffff;}
header div a:visited {color:#ffffff;}








/*contents*/
#content {color:#111;margin:0 auto;padding:0px 0 0px;width:100%;color:#111; }


/*背景画像*/
#content {background:  url(../img/sakurai_altus-flute_2023/haikei-green-1500a.png) center center fixed ;width: 100%;max-width: 1920px; 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 span {display:block;font-size:0.675em;font-weight: 400;}
#content > h2 img {width:100%;}


/*TEXT SHADOW*//*みなさん、こんにちは！*/
#content p.lead {text-align: center;margin:0em auto;font-weight: 800;font-size: 1.45em;text-shadow:2px 2px 0.2em #D0B0FF,-1px 2px 0.2em #000000,-1px -1px 0.1em #D0B0FF,2px -2px 0.2em #D0B0FF;}


#shelf {width:100%;margin:0 auto;}
#shelf > div.panel {float:left;font-size:0.875em;width:50%;padding:0 0.5em 2em;}

h4{
	margin: 0.4em;
	color: #999;
	display: inline-block;
}



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;}
/*税別⇒　\0028\007a0e\005225\0029*/ /*⇒　税込\FF08\7A0E\8FBC\FF09*/
div.panel.sold > h3 {line-height: 2.0rem;}
div.panel.sold > h3 span.price {display: none;}
div.panel.sold > h3 span.price:after {content:"";}
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 > 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;}
div.panel.sold > span > a.button {box-shadow: none;background: rgb(180,180,180);cursor: default;color: #ccc;line-height: 2em;}
#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.sold > span > a.button:hover {box-shadow: none;top:0;left: 0;}
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;}*/
.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: 0px 0px 5px 0 #666;line-height: 1.1em;padding:0em;}
.button_.sold{box-shadow: none;background: rgb(180,180,180);cursor: default;color: #ccc;line-height: 2em;}
.button_{margin:0.75em 0 0.5em;}
.button_ span {display: block;font-size: 0.5em;font-weight: 400;}
.button_:hover {box-shadow: 0 0 3px 0 #333;top:1px;left:1px;}
.button_.sold:hover {box-shadow: none;top:0;left: 0;}



ul.param {}
ul.param:before {content: "\005b\0030b5\0030a6\0030f3\0030c9\0030fb\0030a4\0030f3\0030d7\0030ec\0030c3\0030b7\0030e7\0030f3\005d";font-weight: 600;}
ul.param li {background: url(../img/param_bg.png) top left / contain repeat-y;width: 100%;margin:1em 0 1.25em;height: 1.1em;color: #f30;font-weight: 600;padding: 0.1em 0;text-indent: -0.5em;font-size: 1.6em;line-height: 1em;text-shadow:1px 1px 0.1em #fff,-1px 1px 0.1em #fff,-1px -1px 0.1em #fff,1px -1px 0.1em #fff;}
ul.param li.l1 {text-align: left; padding-left: 10%;}
ul.param li.l2 {text-align: left; padding-left: 20%;}
ul.param li.l3 {text-align: left; padding-left: 30%;}
ul.param li.l4 {text-align: left; padding-left: 40%;}
ul.param li.ct {text-align: left; padding-left: 50%;}
ul.param li.r4 {text-align: left; padding-left: 60%;}
ul.param li.r3 {text-align: left; padding-left: 70%;}
ul.param li.r2 {text-align: left; padding-left: 80%;}
ul.param li.r1 {text-align: left; padding-left: 90%;}


ul.param li.e0 {text-align: left; padding-left: 0%;}
ul.param li.e1 {text-align: left; padding-left: 10%;}
ul.param li.e2 {text-align: left; padding-left: 20%;}
ul.param li.e3 {text-align: left; padding-left: 30%;}
ul.param li.e4 {text-align: left; padding-left: 40%;}
ul.param li.e5 {text-align: left; padding-left: 50%;}
ul.param li.e6 {text-align: left; padding-left: 60%;}
ul.param li.e7 {text-align: left; padding-left: 70%;}
ul.param li.e8 {text-align: left; padding-left: 80%;}
ul.param li.e9 {text-align: left; padding-left: 90%;}
ul.param li.e10 {text-align: left; padding-left: 100%;}


ul.param li:before, ul.param li:after {position: absolute;top:-1.4em;color: #333;font-size: 0.675em;text-indent: 0;}
ul.param li:before {content: "\0030c0\0030fc\0030af";left:0;padding-left: 0.25em;}
ul.param li:after {content: "\00660e\00308b\003044";right:0;padding-right: 0.25em;}
ul.param li:nth-of-type(2):before {content: "\0030cf\0030c3\0030ad\0030ea";}
ul.param li:nth-of-type(2):after {content: "\0067d4\003089\00304b\003044";}
ul.param li:nth-of-type(3):before {content: "\0062b5\006297\003042\00308a";}
ul.param li:nth-of-type(3):after {content: "\0097f3\00629c\003051\008efd\003044";}

ul.star {margin-top:0;}
ul.star li {color:#cc0;font-size: 2em;margin-bottom: 0.25em; text-shadow:1px 1px 0.1em #fff,-1px 1px 0.1em #fff,-1px -1px 0.1em #fff,1px -1px 0.1em #fff;}
ul.star li:before {content:"\0062b5\006297\00611f\00ff1a";color: #222;}
ul.star li:nth-of-type(2):before {content:"\0030ec\0030b9\0030dd\0030f3\0030b9\00ff1a";}

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



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


/*960px*/
@media screen and (max-width: 61em) {
	#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*/
}