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

/*ショップごとのCSSです。

------------------------------------------------------*/
/*INDEX*/
#yabatsuma_at .tabs{
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
-ms-flex-wrap:wrap;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
align-items:stretch;
width: 100%;
padding: 5px;
}
#yabatsuma_at .tabs li{
text-align: center;
padding: 1px;
}
#yabatsuma_at .tabs.three li{
width: 33.3%;
}
#yabatsuma_at .tabs.four li{
width: 25%;
}
#yabatsuma_at .tabs.five li{
width: 20%;
}
#yabatsuma_at .tabs li p{
cursor: pointer;
background: #464646;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
border: 1px #464646 solid;
position: relative;
}
#yabatsuma_at .tabs li p{
filter:alpha(opacity=80);
-moz-opacity:0.80;
-webkit-opacity:0.80;
-o-opacity:0.80;
-ms-opacity:0.80;
opacity:0.80;
}
#yabatsuma_at .tabs li p:hover{
background: #48024a;
border-color: #fff;
filter:alpha(opacity=100);
-moz-opacity:1;
-webkit-opacity:1;
-o-opacity:1;
-ms-opacity:1;
opacity:1;
}
#yabatsuma_at .tabs li p img:nth-child(2),
#yabatsuma_at .tabs li p img:nth-child(3){
position: absolute;
left: 0;
top: 0;
width: 100% auto;
}
#yabatsuma_at .tabs li p img:nth-child(3),
#yabatsuma_at .tabs li.selected p img:nth-child(2){
display: none;
}
#yabatsuma_at .tabs li.selected p img:nth-child(3){
display: block;
}
#yabatsuma_at .tabs li.selected p{
cursor: default;
background: #ce012c;
border-color: #fff;
filter:alpha(opacity=100);
-moz-opacity:1;
-webkit-opacity:1;
-o-opacity:1;
-ms-opacity:1;
opacity:1;
}
#yabatsuma_at #tabcontents_1,
#yabatsuma_at #tabcontents_2,
#yabatsuma_at #tabcontents_3,
#yabatsuma_at #tabcontents_4,
#yabatsuma_at #tabcontents_5,
#yabatsuma_at #tabcontents_6,
#yabatsuma_at #tabcontents_7,
#yabatsuma_at #tabcontents_8,
#yabatsuma_at #tabcontents_9{
display: none;
}
#yabatsuma_at #tabcontents_1.selected,
#yabatsuma_at #tabcontents_2.selected,
#yabatsuma_at #tabcontents_3.selected,
#yabatsuma_at #tabcontents_4.selected,
#yabatsuma_at #tabcontents_5.selected,
#yabatsuma_at #tabcontents_6.selected,
#yabatsuma_at #tabcontents_7.selected,
#yabatsuma_at #tabcontents_8.selected,
#yabatsuma_at #tabcontents_9.selected{
display: block;
}
/*AVAILABILTY*/
#main_column .paging .link_btn{
top: 1px;
}
/*PAGING*/
#main_column .paging{
border-top: 1px solid;
border-bottom: 1px solid;
padding: 3px 0;
margin: 10px 0;
}
#main_column .paging nav a{
color: #fff;
}
/*BLOG LIST*/
#contents .blog_list li{
box-shadow: 0 0 0 0 transparent;
}
/*PLAY*/
.play .list li .text .yabatsuma_yellow,
.play .list li .text .yabatsuma_red{
display: inline;
font-size: 16px;
}
.play .list li .text .yabatsuma_yellow{
color: #e9b500;
}
.play .list li .text .yabatsuma_red{
color: #d40432;
}
.play .list li .text .big_text{
font-size: 22px;
}
/*SIDE COLUMN*/
#side_column #shop_data .shop_name{
text-align: center;
}
/*MEDIA QUERIES
--------------------------------------------------*/
/*-----------------------------------------------------*/
/*sp + tablet*/
@media (max-width: 893px) {
#header .logo{
visibility: hidden;
}
#contents_header{
margin-bottom: 20px;
}
#mainimage .flex-control-nav {width: 100%; position: absolute; bottom: -25px; text-align: center; display: block }
#mainimage .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; }
#mainimage .flex-control-paging li a {width: 8px; height: 8px; display: block; background: #666; background: rgba(255,255,255,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
#mainimage .flex-control-paging li a:hover { background: #333; background: rgba(255,255,255,0.7); }
#mainimage .flex-control-paging li a.flex-active { background: #000; background: rgba(255,255,255,0.9); cursor: default; }
}
/*-----------------------------------------------------*/
/*smartphone*/
@media (max-width: 640px) {
#yabatsuma_at .tabs.four li{
width: 50%;
}
}
/*-----------------------------------------------------*/
/*tablet*/
@media (min-width: 641px) and (max-width: 893px) {
}
/*-----------------------------------------------------*/
/*PC*/
@media (min-width: 894px) {
#header .logo{
width: 310px;
margin: 0;
}
#header.mini .logo_box {
background: 000;
}
}