html {
  scroll-behavior: smooth;
}

body {
  background-position: center top;
  text-align: center;
  font-family: "游ゴシック", "Yu Gothic", メイリオ, Meiryo, ＭＳ, Ｐゴシック, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  background-color: white;
  background-image: url("image/common/bg.gif");
  background-repeat: repeat-x;
  line-height: 1.4;
  margin: 0px;
  padding: 0px;
  
}

#wrapper {
  width: 1000px;
  margin: 0px auto;
  padding: 0px;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
  font-size: 0.1em;
  line-height: 0;
}

.clearfix {
  min-height: 1px;
}

#header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#company_name {
	width: 560px;
	height: 80px;
	background: linear-gradient(to bottom, #ffffff, #f2f2f2);
	text-align: left;
	position: relative;
	margin: 0px;
	border-top: 10px solid #3e54f9;
	padding: 10px 20px 20px 20px;
}

#indexlink {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  color: black;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  margin: 0px;
  padding: 0px 0px 0px;
}

.fa {
  font: 26px serif;
  margin: 0px;
  text-align: right;
}

.fb {
  font-size: 40px;
  font-weight: 900;
text-shadow: 2px 2px 3px gray;
  white-space: nowrap;
  margin: 0px;
  padding: 0px;
}

#map {
  width: 400px;
  height: 110px;
  border-top: 10px solid #3e54f9;
  margin: 0px;
  padding: 0px;
}

#contents {
  width: 1000px;
  background-color: white;
  min-height: 1px;
}

#left {
  float: left;
  width: 230px;
  margin-top: 8px;
}

#lefts {
  float: left;
  width: 230px;
  margin-top: 8px;
}

#right {
  float: right;
  width: 750px;
  padding-left: 0px;
  margin: 12px 0px 0px 20px;
}

.nav-unshown {
  display: none;
}

#navi {
  width: 230px;
  margin: 0px;
  padding: 0px;
}

#navi li {
  font-size: 14px;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

#navi li a:link {
  color: #333333;
  background-color: #cdcdff;
  height: 24px;
  text-decoration: none;
  text-align: left;
  list-style-type: none;
  display: block;
  padding: 7px 0px 0px 20px;
}

#navi li a:visited {
  color: #333333;
  background-color: #cdcdff;
  height: 24px;
  text-decoration: none;
  text-align: left;
  width: auto;
  list-style-type: none;
  display: block;
  padding: 7px 0px 0px 20px;
}

#navi li a:hover {
  color: #ff8000;
  background-color: #e8cdff;
  height: 24px;
  text-decoration: none;
  text-align: left;
  width: auto;
  list-style-type: none;
  display: block;
  padding: 7px 0px 0px 20px;
}

#navi li a:active {
  color: #ff8000;
  background-color: #e8cdff;
  height: 24px;
  text-decoration: none;
  text-align: left;
  width: auto;
  list-style-type: none;
  display: block;
  padding: 7px 0px 0px 20px;
}

.m1 {
  background-image: url("image/common/sprite.png");
  background-repeat: no-repeat;
  display: block;
  width: 230px;
  height: 32px;
  background-position: -5px -5px;
}

.m2 {
  height: 40px;
}

.m2 a {
  display: block !important;
  height: 33px !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAAAoBAMAAAAYpptMAAAABGdBTUEAALGPC/xhBQAAADBQTFRFsMzqncDiN4XRh7Tl4ez0AmbLwcHDw7/B8fT49PT08PDw8vLy9vb2+Pj4+/v7/v7+0GDLtQAAAShJREFUWMPt1D9Lw0AcxvGgb0DQ7lLoLkgWJ8GlxKnUey36CsIvtN0ccjFjh+uFbiKarCJpc1lF5FpfQeM7aO2fO9+BT4b6DL/1w/cCcYj8rxVwd0QO0dMKb74v8aZfQ6f/vRedA7+O71nVYC4r4Go0qz0xF//mn5kz5JDmYnfn8M45tnO30poaJWqlrakw4Eyv45Q1ESuV1qVW1pxAUKW3B2lyHfddVubG5Agz/FQfLuvFSDMY8dBlg9CaiFFRxDQsAqTZz5unB00SSDOjVrfBaGrMB0jn1pxwY6YZYFHgnFwevZAxEWR2fnF4dnUseshOdrN5W5njzWlizARkdhrMM/+EN4nYeCQiec9tJ8SUop1Ez6mEmq/p47Xw2kjT25zhb+ctcmvzB4iEWh8zhg98AAAAAElFTkSuQmCC") !important;
}

#c_header {
  width: 1000px;
  background-image: url("image/common/header.png");
  background-repeat: no-repeat;
}

.menubarlink {
  border-left: 1px solid black;
  border-right: 1px solid black;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0) linear-gradient(#485ff7, #2f46fb) repeat scroll 0% 0%;
  margin: 0px;
  padding: 0px;
  width: 20%;
  height: 40px;
}

.menubarlink:hover {
  background: #ff9933 none repeat scroll 0% 0%;
}


img {
  border: 0px none;
}

#SiteSearchs {
  width: auto;
  height: 100px;
  clear: left;
}

#Searchs {
  height: 40px;
  font-size: 18px;
  width: 220px;
  border-radius: 10px;
  font-weight: 700;
  border: 2px solid black;
  padding: 0px 0px 0px 8px;
}

#Searchs:focus {
  border: 2px solid #408cdb;
}

#SearchBs {
  border-radius: 10px;
  height: 40px;
  margin-top: 8px;
  border: 1px solid black;
  width: 100px;
  background-color: gainsboro;
  padding: 8px;
}

#SearchBs:active {
box-shadow: 0px 0px 2px rgba(128, 128, 128, 0.1) inset;
  transform: translateY(2px);
}



.Midasi {
  padding: 10px;
  border-left: 8px groove #1f4291;
  border-bottom: 1px solid #1f4291;
  color: #1f4291;
  font-size: 18px;
  font-weight: bolder;
  letter-spacing: 0.8em;
  text-align: left;
  margin-left: 20px;
  background-color: white;
  clear: left;
}

.Midasi2 {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.5em;
  text-align: left;
  margin-left: 4%;
  margin-right: 4%;
  position: relative;
  color: white;
  padding: 0.5em 0.5em 0.5em 1.4em;
  background-color: #446689;
  border-radius: 5px;
  clear: left;
}

.Midasi2::after {
  position: absolute;
  top: 50%;
  left: 0.7em;
  transform: translateY(-50%);
  content: "";
  width: 5px;
  height: 25px;
  background-color: white;
}

.Midasi3 {
  padding: 10px;
  border-left: 8px groove #1f4291;
  border-bottom: 1px solid #1f4291;
  color: #1f4291;
  font-size: 18px;
  font-weight: bolder;
  text-align: left;
}

.Midasi5 {
font-size:24px;
  text-align: left;
  border-width: 1px 1px 1px 3px;
  border-style: solid;
  border-color: #dddddd #dddddd #dddddd #33ccff;
  padding: 5px 0px 5px 10px;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, white 0%, #eeeeee 50%, #dddddd 51%, white 100%) repeat scroll 0% 0%;
  clear: left;
  line-height: 1.6;
letter-spacing: 0.3em;
text-shadow: 2px 2px 2px silver;
display: flex;
align-items: center;
}

#Midasi6 {
  border-top: 5px solid teal;
  color: black;
  font-size: 24px;
  background: #eeeeee url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIAQMAAACXljzdAAAABGdBTUEAALGPC/xhBQAAAAZQTFRFm5ubAAAAHlEv6wAAAAJ0Uk5T+QCz7ZfMAAABD0lEQVRYw+3WwQrCMAwA0I0d5q1Xb/sNb/OzvFXZj1X2I/uEgpeCo7VtioclQdAh6JLDxniHQJo1qQIXlYiIiMjWxVUxNCU2SUfJlERRYpK0lJxjDk9Kzj4Q4lmZd0lGQtyeE3vgZDpxYhwnF1YakBGJb0EMklkV0UtxXZF+KbYHsUgmDTJ3SzGBk0uwWTyShpN4mFMgZVbB0BKbrWalYaVlRTFyhC9CoNV/Tm7xeScl/4yrSv1HdVtX+OqsewpSa6ftl2ptt9LxPbwHVhrqJoerHksFgcUXUXiWFOmwGBCNJe8ncTZgeSZcR8Y35PpK8KSFoZkmO5ZSnx7vLkU03neKUNtTjlr2XhEREZHP5QGByEuBiZ58GgAAAABJRU5ErkJggg==") no-repeat scroll right center / contain;
  line-height: 1.4;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
  margin: 0px;
  padding: 0.25em 0.5em;
}

.Midasi7 {
  color: black;
  font-size: 16px;
  background: rgba(0, 0, 0, 0) linear-gradient(#fefefe, #e4e3e4) repeat scroll 0% 0%;
  line-height: 1.4;
  margin: 0px;
  padding: 0.25em;
  border: 2px solid #c3bfc1;
}

.Midasi8 {
  border-bottom: 3px solid #cce4ff;
  font-size: 16px;
  position: relative;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

.Midasi8::after {
  position: absolute;
  content: "";
  display: block;
  border-bottom: 3px solid #5472cd;
  bottom: -3px;
  width: 60px;
}

.Midasi9 {
  border: 2px solid gray;
  color: black;
  font-size: 16px;
  background: rgba(0, 0, 0, 0) linear-gradient(#fefefe, #e4e3e4) repeat scroll 0% 0%;
  line-height: 1.4;
  margin: 20px 0px 0px;
  padding: 0.25em;
}

.mi-special {
  width: 88%;
  margin-left: 3%;
  position: relative;
  color: red;
  padding: 0.75em 0.5em;
  border: 1px solid #7ed1e6;
  clear: left;
}

.mi-special::after {
  content: "bargain article";
  position: absolute;
  top: -0.6em;
  left: 10px;
  background: white none repeat scroll 0% 0%;
  font-size: 0.75em;
  color: #7ed1e6;
  padding: 0px 10px;
}

/*横スクロールボックスindexで使用*/
.Yoko-scroll-box {
  display: flex;
  height: 100%;
  overflow-x: scroll;
}

/*横スクロールバー装飾ファイヤーフォックスでは効かない*/
.Yoko-scroll-box::-webkit-scrollbar { 
  height: 24px; 
} 
.Yoko-scroll-box::-webkit-scrollbar-track { 
  margin: 0 2px; 
  background: #ccc; 
  border-radius: 5px; 
} 
.Yoko-scroll-box::-webkit-scrollbar-thumb { 
  border-radius: 5px; background: #666; 
}

.Yoko-scroll-sab {
  width: 170px;
  margin: 5px;
  flex-shrink: 0;
}


.HaikeiGry {
  margin: 5px 0px 20px 20px;
  padding: 16px;
  background-color: #f7f7f7;
  border: 2px solid #cacaca;
  text-align: left;
  font-size: 13pt;
  clear: left;
}

.HaikeiWhite {
  margin: 5px 0px 20px 20px;
  padding: 16px;
  text-align: left;
  font-size: 13pt;
}

#NewItem-title {
  background-color: #3a51f9;
  color: white;
  margin: 0px;
  padding: 2px 2px 2px 12px;
}

#NewItem {
  border: 2px solid #3a51f9;
  display: flex;
  flex-wrap: wrap;
}
/*
.alist {
  margin: 8px;
  padding: 2px;
  height: Auto;
  width: 20%;
  border: 1px solid teal;
  word-break: break-all
}

.alist:hover {
  opacity: 0.8;
}

.pikup {
  clear: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 2px solid #c3bfc1;
  margin: 0px 0px 20px;
  padding: 0px;
}
*/

.Special-price {
  clear: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 2px solid #c3bfc1;
  margin: 0px 0px 20px;
  padding: 0px;
}

.Special-price-list {
  padding: 2px;
  height: Auto;
  width: 50%;
  box-sizing: border-box;
  border: 1px solid teal;
  word-break: break-all
}


.bargain-item {
  border: 1px solid red;
  box-sizing: border-box;
  width: 48%;
  margin-bottom: 30px;
}

.spitem-Name {
  background-color: red;
  margin: 0px;
  padding: 10px;
  color: white;
  font-size: 18px;
text-shadow: 1px 2px 3px gray;
}

.Discount-rate {
  background-color: red;
  margin: 0px;
  padding: 5px;
  font-size: 14px;
  color: white;
}

.Discount-price {
  font-size: 30px;
  font-style: oblique;
  color: red;
  margin: 0px;
  padding: 0px;
}

.toppagesell {
  width: 175px;
  float: left;
  margin-left: 10px;
}

.sellname {
  background: rgba(0, 0, 0, 0) linear-gradient(#fefefe, #e4e3e3) repeat scroll 0% 0%;
  border: 2px solid #cacaca;
  height: 120px;
  text-align: left;
  margin: 6px;
  padding: 6px;
}

.syuhinnmei {
  font-size: 18px;
}

.kategori {
  text-align: left;
  line-height: 1em;
  margin-left: 30px;
}

.btnA {
	display: block;
	width: 150px;
	padding: 0.3em;
	text-align: center;
	text-decoration: none;
	color: #446689;
	border: 2px solid #446689;
	border-radius: 3px;
	transition: all 0.4s ease 0s;
	margin: 0px;
}

.btnA:hover {
  background: #446689 none repeat scroll 0% 0%;
  color: white;
}

.textleft {
  text-align: left;
  margin-left: 10px;
}

.ProductColorBlue {
  font-size: 15pt;
  font-weight: bold;
  color: #0192d6;
  margin: 2px;
  position: relative;
}

.PriceColorRed {
  font-size: 16pt;
  font-weight: bold;
  color: red;
}

.productend {
  clear: left;
  border-bottom: 5px double #364e96;
  text-align: right;
}

.ProductALL {
  width: 146px;
  height: 180px;
  float: left;
  margin: 2px;
  padding: 0px;
  position: relative;
}

div.ProductALL img {
  width: 146px;
  height: 105px;
}

.ProductALL a {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.tuginopage {
  border: 1px solid white;

  padding: 8px;
  margin: 16px 0px;
  background-color: #f3f4f5;
}

.Linkbutton {
  margin: 1%;
  float: left;
  display: block;
  padding: 20px;
  line-height: 20px;
  color: white;
  text-decoration: none;
  text-align: center;
  background-color: white;
  border-radius: 5px;
  border-color: #d3d4d5;
transition: all 0.5s ease 0s;
}

.Linkbutton:hover {
  background-color: #f9c500;
}

.LinkbuttonNo {
  margin: 1%;
  float: left;
  display: block;
  padding: 20px;
  line-height: 20px;
  color: white;
  text-decoration: none;
  text-align: center;
  background-color: #d3e9ff;
  border-radius: 5px;
  border-color: #84bed5;
transition: all 0.5s ease 0s;
}


/*特価品ページ修正後削除↓*/
.spblock {
  width: 710px;
  height: 200px;
  margin: 34px 20px 0px;
  padding: 0px;
}

.sptitle {
  position: relative;
  color: black;
  font-size: 24px;
  background: #eeeeee none repeat scroll 0% 0%;
  line-height: 1.4;
  margin: 0px;
  padding: 0.25em 0.5em;
  border-style: solid;
  border-color: currentcolor;
  border-width: 1px 1px 0px;
  border-radius: 0px 5px 0px 0px;
}

.sptitle::after {
  position: absolute;
  content: "　処分特価!!　";
  background: red none repeat scroll 0% 0%;
  color: white;
  left: 0px;
  bottom: 100%;
  border-style: solid;
  border-color: black;
  border-width: 1px 1px 0px;
  border-radius: 5px 5px 0px 0px;
  padding: 3px 7px 1px;
  font-size: 0.8em;
  line-height: 1;
  letter-spacing: 0.05em;
}

.spPicture {
  width: 280px;
  height: 140px;
  float: left;
  margin: 0px;
  padding: 0px 16px 0px 0px;
  border-style: solid;
  border-color: currentcolor;
  border-width: 0px 0px 1px 1px;
  border-radius: 0px 0px 0px 5px;
}

.sptext {
  width: 400px;
  height: 140px;
  float: left;
  font-size: 2em;
  line-height: 125%;
  text-align: left;
  padding: 0px 6px;
  border-style: solid;
  border-color: currentcolor;
  border-width: 0px 1px 1px 0px;
  border-radius: 0px 0px 5px;
  background-image: url("image/common/sptextBG.png");
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*特価品ページ修正後削除↑*/


.BlackEmphasis {
  font-size: x-large;
  color: black;
}

.Productleft {
  border: 0px solid black;
  width: 400px;
  margin: 10px 0px;
  padding: 10px 0px;
}

.Productright {
  border: 2px solid #eeeeee;
  width: 330px;
  text-align: left;
  font-size: 125%;
  line-height: 2em;
  margin: 30px 0px 10px 16px;
  padding: 0px;
}

.Productrights {
  padding: 10px;
}

#ProductversionT {
  font-size: x-large;
  font-weight: bold;
  background: whitesmoke none repeat scroll 0% 0%;
  width: 150px;
  border: 2px solid whitesmoke;
  border-radius: 5px 5px 0px 0px;
  margin: 0px;
  padding: 0px;
}

.Productborder {
  border: 1px solid #333333;
}

a.obutton {
  display: block;
  width: 198px;
  height: 66px;
  background: rgba(0, 0, 0, 0) url("./image/meilInquirymin.png") no-repeat scroll 0px 0px / contain;
  margin: 0px auto;
}

a.obutton:hover {
  opacity: 0.8;
}

.hidden_box {
  clear: left;
  text-align: center;
  margin: 16px 0px;
  padding: 0px;
}

.hidden_box input {
  display: none;
}

.hidden_box .hidden_show {
  height: 0px;
  padding: 0px;
  overflow: hidden;
  opacity: 0;
transition: all 0.8s ease 0s;
}

.hidden_box input:checked ~ .hidden_show {
  padding: 10px 0px;
  height: auto;
  opacity: 1;
}

.btnS {
  font-weight: 700;
  border: 2px solid black;
  border-radius: 30px;
box-shadow: 0px 0px 0px 2px #cccccc inset;
  cursor: pointer;
  padding: 15px 55px;
}

.btnS:hover {
  background: #efefef none repeat scroll 0% 0%;
}


.tbutton {
  position: relative;
  width: 198px;
  height: 60px;
  display: block;
  background: rgba(0, 0, 0, 0) url("./image/OrderIconmin.png") no-repeat scroll 0px 0px / contain;
  margin: 0px 70px 20px auto;
}

.tbutton:hover {
  opacity: 0.8;
}


#ifno {
  display: none;
  height: 1420px;
  width: 100%;
  border: 0px none;
}


.box2 {
  text-align: left;
  background: #f4f4f4 none repeat scroll 0% 0%;
  border-left: 6px solid gray;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
  margin: 1em 0px;
  clear: left;
  padding: 0.5em 1em;
}

.kanrenbox {
  margin: 50px 0px;
  clear: left;
}

.sort-contents {
  padding: 1em;
}

input[name=sort] {
  display: none;
}

.sort-contents label {
  display: inline-block;
  font-size: 18px;
  cursor: pointer;
  width: 100px;
  position: relative;
  text-decoration: none;
  color: #212121;
  background: #eeeeee none repeat scroll 0% 0%;
  border-radius: 4px;
box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.2) inset, 0px -2px 0px rgba(0, 0, 0, 0.05) inset;
  font-weight: 700;
  border: 2px solid #9e9e9e;
  margin: 20px;
  padding: 0.6em;
}

.sort-contents label:hover, input[name=sort]:checked + label {
  color: black;
  border: 2px solid;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
}

.sort-contents input[name=sort]:checked + label {
  cursor: default;
}

.sort-contents label[for=sort-red]:hover, #sort-red:checked + label {
  color: #e74c3c;
}

.sort-contents label[for=sort-blue]:hover, #sort-blue:checked + label {
  color: #3498db;
}

.sort-contents label[for=sort-yellow]:hover, #sort-yellow:checked + label {
  color: #f1c40f;
}

.sort-contents label[for=sort-kimidori]:hover, #sort-kimidori:checked + label {
  color: #b8d200;
}

.sort-contents label[for=sort-green]:hover, #sort-green:checked + label {
  color: green;
}

.sort-contents label[for=sort-orange]:hover, #sort-orange:checked + label {
  color: orange;
}

.sort-contents label[for=sort-purple]:hover, #sort-purple:checked + label {
  color: purple;
}

.sort-contents label[for=sort-brown]:hover, #sort-brown:checked + label {
  color: brown;
}

.sort {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: outside none none;
  margin: 0px;
  padding: 0px;
}

.sort li {
	background: #eeeeee none repeat scroll 0% 0%;
	color: #111111;
	border-width: 2px;
	border-style: solid;
	border-color: white #cccccc #cccccc white;
	border-radius: 12px;
	width: 224px;
	height: auto;
	line-height: 20px;
	box-shadow: 4px 4px #555555;
	letter-spacing: -0.03em;
	position: relative;
	margin: 8px 0px;
	padding: 0px 0px 16px 0px;
	transition: all 1s ease 0s;
}

.sort li:hover {
  border-width: 2px;
  border-style: solid;
  border-color: #ffcc66 #ff9933 #ff9933 #ffcc66;
  background-color: #e1e1e1;
}

.sort li a {
  display: block;
  text-decoration: none;
  font-weight: bold;
}

.sort li img {
  margin-top: 20px;
}

.copyBtn {
  border: 1px solid black;
  border-radius: 3px;
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 48px;
  height: 48px;
transition: all 0.3s ease 0s;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAgMAAADzfxo+AAAABGdBTUEAALGPC/xhBQAAAAxQTFRFSkpKSkpKS0tLAAAAR/GPRQAAAAR0Uk5TjEDIAGelv58AAADXSURBVDjL7dS9CgIhAAdwt4Ne4miT3iFqDMfA+fb2Zmm6KXqEiAjvfByhxeewUcyPi/waiggK7j84/OD0r5wCXQgY8VOUzKRNkFvsEkQXjDEiESpIzShilKcC8n0B0TxHBZXDdRWgPA/YB8gPHrcT8kS0UHQJakFEgLCRdMZiVHbfV0wyPLpKIZqNkwypL/0KSmBSp2jPOEVljjit9MZCf13pZis1v1QJYpdV9C9tmEuvQ+Qe2wi1/1zHqJvHUuE9qkpISzj1s6JozqFUl99ixnbjW/cFvAPuS6eTtND0MgAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-size: contain;
}

.copyBtn:hover {
  background-color: #7ed1e6;
}

#sort-red:checked ~ ul [data-color*="red"], #sort-blue:checked ~ ul [data-color*="blue"], #sort-yellow:checked ~ ul [data-color*="yellow"], #sort-kimidori:checked ~ ul [data-color*="kimidori"], #sort-green:checked ~ ul [data-color*="green"], #sort-orange:checked ~ ul [data-color*="orange"], #sort-purple:checked ~ ul [data-color*="purple"], #sort-brown:checked ~ ul [data-color*="brown"] {
  order: -1;
}

.redico {
  width: 104px;
  height: 20px;
  color: white;
  background-color: #e74c3c;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
}

.blueico {
  width: 104px;
  height: 20px;
  color: white;
  background-color: #3498db;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
}

.yellowico {
  width: 104px;
  height: 20px;
  color: white;
  background-color: #f1c40f;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
}

.kimidoriico {
  width: 104px;
  height: 20px;
  color: white;
  background-color: #b8d200;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
}

.greenico {
  width: 104px;
  height: 20px;
  color: white;
  background-color: green;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
}

.orangeico {
  width: 104px;
  height: 20px;
  color: white;
  background-color: orange;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
}

.purpleico {
  width: 104px;
  height: 20px;
  color: white;
  background-color: purple;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
}

.brownico {
  width: 104px;
  height: 20px;
  color: white;
  background-color: brown;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
}
.sold-outico{
width: 140px;
height: auto;
color: red;
box-shadow: 2px 2px gray;
font-size: 26px;
font-style: italic;
font-weight: bold;
text-shadow: 2px 2px gray;
border: solid;
border-radius: 20px;
padding: 8px;
cursor: pointer;
position: absolute;
top: 50px;
left: 30px;
} 

p.viewmain {
  width: 100%;
  height: auto;
  padding: 0px;
}


#viewbox {
  width: 100%;
  height: auto;
}

.viewul {
  width: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.viewli {
	width: 70px;
	height: 70px;
	border: 1px solid #cccccc;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
	list-style: outside none none;
	font-size: 12px;
}

.viewli:hover {
  border: 1px solid #7ed1e6;
  opacity: 0.7;
}

.viewli1 {
  float: left;
  width: 80px;
  height: 70px;
  border: 1px solid #cccccc;
  border-radius: 8px;
  list-style: outside none none;
}

.viewli2 {
  width: 70px;
  height: 45px;
  border: 1px solid #cccccc;
  border-radius: 0 0 8px 8px;
  list-style: outside none none;
  font-size: 12px;
 text-align : center;
 padding-top:6px;

  position: relative;
  display: inline-block;
  color: #1B1B1B;
  text-decoration: none;

}

.viewli2:hover {
  border: 1px solid #f93;
  opacity: 0.7;
  
  
  cursor: pointer;
  text-decoration: none;
}


.viewli2::after {
  position: absolute;
  bottom: -8px;
  left: 0;
  content: '拡大表示';
  width: 100%;
  height: 2px;
  background: #333;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.viewli2:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;

}