/* ///////////// slider /////////////*/
#slider{
  width: 100%;
  margin: 0 auto;
}
/* /////// titleares 各キャプションタイトル欄 ///////*/
.titlearea{
  width: 100%;
  background-color: #F0F0F0;
  border-bottom: solid 2px #0066CC;
}
.titlename{
  font-family: 'Oswald', sans-serif;
  font-size: 2.4rem;
  color: #333300;
  display: inline-block;
  border-bottom: solid 1px #000000;
}
.subtitle{
  font-family: 'Open+Sans', sans-serif;
  font-size: 1rem;
  color: #333300;
  display: inline-block;
}
@media screen and (min-width: 767.98px){
.titleback-1{
  background-image: url("../images/kurosawagakki/titleback-1.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.titleback-2{
  background-image: url("../images/kurosawagakki/titleback-2.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.titleback-3{
  background-image: url("../images/kurosawagakki/titleback-3.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.titleback-4{
  background-image: url("../images/kurosawagakki/titleback-4.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.titleback-5{
  background-image: url("../images/kurosawagakki/titleback-5.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.titleback-6{
  background-image: url("../images/kurosawagakki/titleback-6.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.titleback-7{
  background-image: url("../images/kurosawagakki/titleback-7.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
}
/* ///////////// paneldesign /////////////*/
#paneldesign{
  width: 100%;
  margin: 0 auto;
}
.panel1{
  width: 50%;
  position: relative;
  padding: 0;
  background-color: #000000;
}
.panel2{
  width: 25%;
  position: relative;
  padding: 0;
  background-color: #000000;
}
.panel1 img,.panel2 img {
  width: 100%;
  height: auto;
}
.panel1 p , .panel2 p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: #FFFFFF;
  font-size: 2rem;
  width: 100%;
  text-shadow: 2px 2px 3px #000000;
}
@media (max-width:991.98px){
.panel1 p , .panel2 p{
  font-size: 2.2rem;
}
}
@media (max-width:543.98px){
.panel1 p , .panel2 p{
  font-size: 1.5rem;
}
}
#paneldesign img a:hover{
  opacity: 0.5;
  -webkit-transition:
  0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
/* ///////////// updateinfo /////////////*/
#updateinfo{
  width: 96%;
  margin: 0 auto;
}
#updateinfo img{
  width: 100%;
  height: auto;
}
.text{
  line-height: 1.6;
}
.tile-design{
  background-color: #FFFAFA;
  border: 1px solid #D8D8D8;
  border-radius: 0 0 10px 10px;
}
.image-tile{
  position: relative;
}
.image-tile p{
  position: absolute;
  display: block;
  width: 100%;
  bottom: 0;/*画像の左上に配置*/
  left: 0;
  margin: 0; /*余計な隙間を除く*/
  color: #FFFFFF;/*文字を白に*/
  background-color: rgb(100,100,100,0.7);/*背景色*/
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
  line-height: 1.4;/*行高は1に*/
  text-shadow: 1px 1px 3px #000000;
}
@media (max-width:768px){
.image-tile p{
  font-size: 1.2rem;
}
}
/* ////// ボタン部分共通 SM以下で横幅いっぱい //////*/
@media all and (max-width:696px) {
.custom-btn {
  width: 100%; display:block;
}
}
/* ///////////// productinfo /////////////*/
#productinfo{
  width: 96%;
  margin: 0 auto;
}
.pickup{
  width: 25%;
  margin-left: 0;
  background-color: #CC0000;
  padding: 2px 0;
  font-size: 0.8rem;
  color: #FFFFFF;
}
.card-container{
  border: 2px solid #B0B0B0;
}
.card{
  border: none!important;
}
.card-title{
  border-bottom: dotted 1px #303030;
}
.card-img-product{
  width: 100%;
  height: auto;
}
@media (max-width:768px){
.pickup{
  width: 30%;
  font-size: 75%;
}
.vertical{
  display: flex;
  align-items: center;
}
}
/* ///////////// distributor /////////////*/
#distributor{
  width: 100%;
  margin: 0 auto;
}
@media (max-width:992px){
#distributor{
  width: 94%;
}
#colorchart{
  width: 100%!important;
}
}
@media (max-width:768px){
.chart-title-border{
  width: 100%!important;
}
}
#colorchart{
  width: 75%;
}
.chart-title-border{
  width: 50%;
  margin: 0 auto;
  border: 3px solid #191970;
  border-radius: 10px;
}
.chart-title{
  font-size: 1.2rem;
  font-weight: bolder;
  color: #191970;
  line-height: 1.6;
}
.type{
  color: #FFFFFF;
  font-size: 0.7rem;
  text-align: center;
}
.brand-carousel{
  width: 100%;
  padding: 5px;
  border: dotted 1px #C8C8C8;
}
.brand-carousel img {
  width: 100%;
  height: auto;
}
.brandname{
  font-size: 0.6rem;
  font-weight: 500;
  text-align: center;
  color: #4169E1;
}
@media (max-width:991.98px){
.brandname{
  font-size: 1.2rem;
}
}
@media (max-width:767.98px){
.brandname{
  font-size: 0.7rem;
}
}
@media (max-width:543.98px){
.brandname{
  font-size: 0.5rem;
}
}
.brand-carousel:hover .brandname{
  background-color: #778899;
  color: #FFFFFF;
  opacity: 0.7;
}
.brand-carousel a:hover img{
  background-color: #FFEFD5;
  opacity: 0.7;
}
#colorchart .allbrands{
  background-color: #CC0000;
}
#colorchart .other{
  background-color: #778899;
}
.brand-carousel:hover .eg{
  background-color: #FF4500!important;
}
#colorchart .eg{
  background-color: #FF4500;
}
.brand-carousel:hover .eb{
  background-color: #006400!important;
}
#colorchart .eb{
  background-color: #006400;
}
.brand-carousel:hover .ag{
  background-color: #DC143C!important;
}
#colorchart .ag{
  background-color: #DC143C;
}
.brand-carousel:hover .cg{
  background-color: #1E90FF!important;
}
#colorchart .cg{
  background-color: #1E90FF;
}
.brand-carousel:hover .uke{
  background-color: #4B0082!important;
}
#colorchart .uke{
  background-color: #4B0082;
}
.brand-carousel:hover .strings{
  background-color: #663300!important;
}
#colorchart .strings{
  background-color: #663300;
}
.brand-carousel:hover .wind{
  background-color: #DAA520!important;
}
#colorchart .wind{
  background-color: #DAA520;
}
.brand-carousel:hover .drum{
  background-color: #2F4F4F!important;
}
#colorchart .drum{
  background-color: #2F4F4F;
}
.box{
	border-radius: 5px;
	cursor: pointer;
}
/* ///////////// ブランドソート関係 /////////////*/
#brand-container{
	text-align:justify;
}
.brand-container .mix {
	display:inline-block;
	width:49%;
}
#brand-container .mix {
	display:none;
}
/* ///////////// shopbrand /////////////*/
#shopbrand{
  width: 96%;
  margin: 0 auto;
}
.shopbrandbanner{
  width: 100%;
  padding: 0;
  border-right: solid 1px #FFFFFF;
  border-bottom: solid 1px #FFFFFF;
}
.shopbrandbanner img{
  width: 100%;
  height: auto;
}
.specialty-shop{
  background-color: #333;
  font-size: 1.0rem;
  text-align: center;
  color: #FFFFFF;
}
.shopbrandbanner:hover .specialty-shop{
  background-color: #E80344;
  opacity: 0.7;
}
/* ///////////// shopinfo /////////////*/
#shopinfo{
  width: 96%;
  margin: 0 auto;
}
.shopname{
  width: 100%;
  padding: 0;
}
.shopname img{
  width: 100%;
  height: auto;
}
.shop-carousel{
  width: 100%;
  border-right: solid 1px #FFFFFF;
}

.areaname{
  background-color: #E80344;
  font-size: 0.9rem;
  text-align: center;
  color: #FFFFFF;
}
.name{
  background-color: #333;
  font-size: 0.8rem;
  text-align: center;
  color: #FFFFFF;
}
.itemCategory{
  font-size: 0.8rem;
  text-align: left;
}
@media (min-width:1199.98px){
.areaname{
  font-size: 0.8rem;
}
.name{
  font-size: 0.7rem;
}
.itemCategory{
  font-size: 0.7rem;
}
}
.shopname:hover .name{
  background-color: #333;
  opacity: 0.7;
}
.shopname:hover .areaname{
  background-color: #E80344;
  opacity: 0.7;
}
/* ///////////// youtube /////////////*/
#youtube{
  width:100%;
}
.btn-youtube {
  font-size: 1.4rem;
}
.embed { position: relative; width: 100%; padding-top: 56.25%; }
.embed iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }
@media (max-width:768px){
.btn-youtube {
  font-size: 1.0rem;
}
}
@media (max-width:992px){
.youtube-inner {
  width: 96%;
	margin: 0 auto;
}
}
/* ///////////// freebanner /////////////*/
#freebanner{
  width: 100%;
  background-color: #F8F8F8;
}
.freebannercolumn{
  width: 94%;
  margin: 0 auto;
}
@media (min-width:992px){
.freebannercolumn img{
  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3);
}
}
@media (max-width:992px){
.freebannercolumn{
  width: 98%;
}
.banner{
  padding: 0!important;
  margin: 0!important;
}
}
.banner{
  width:16.6666%;
  margin: 0;
  padding: 5px;
}
.banner img{
  width: 100%;
  height: auto;
}

.check{
	border:1px solid #ffcc00;
}