@charset "utf-8";

/*----- gallery.html CSS -----*/

/* tab */
.tab{
  margin: 20px;
}
.tab li{
  margin: 10px;
  border-radius: 10px;
  cursor: pointer;
}
.tab li{
  background: #e5e5ff;
}
.tab li.current{
  background: #9999ff;
  color: #ffffff;
}
.tab li.current:hover{
  opacity: 1;
}
.tab li p{
  padding: 10px 28px;
  font-weight: bold;
}

/* detail */
.detail{
  margin: 0px 20px 20px;
}
.detail li{
  margin: 20px 32px;
}
@media(max-width:499px){/* for mobile */
  .detail li{
    margin: 20px;
  }
}
.detail li div{
  width: 64px; height: 64px;
  margin: 0 auto;
  cursor: pointer;
}
.detail li div:hover{
  opacity: 0.8;
}
.detail li p{
  padding: 5px 0px;
}

/* chara */
.detail li div.chara.c01Kuck{
	background: url(../img/sub/gallery/thChara.gif) no-repeat 0px 0px;
}
.detail li div.chara.c01Yasoichi{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -64px 0px;
}
.detail li div.chara.c01Ninin{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -128px 0px;
}
.detail li div.chara.c01Nana{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -192px 0px;
}
.detail li div.chara.c01Mimi{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -256px 0px;
}
.detail li div.chara.c01Sazan{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -320px 0px;
}
.detail li div.chara.c02Kuck{
	background: url(../img/sub/gallery/thChara.gif) no-repeat 0px -64px;
}
.detail li div.chara.c02Yasoichi{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -64px -64px;
}
.detail li div.chara.c02Ninin{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -128px -64px;
}
.detail li div.chara.c02Nana{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -192px -64px;
}
.detail li div.chara.c02Mimi{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -256px -64px;
}
.detail li div.chara.c02Sazan{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -320px -64px;
}
.detail li div.chara.c02Shura{
	background: url(../img/sub/gallery/thChara.gif) no-repeat 0px -128px;
}
.detail li div.chara.c02ShuraB{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -64px -128px;
}
.detail li div.chara.c02KuckO{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -128px -128px;
}
.detail li div.chara.c02ShuraO{
	background: url(../img/sub/gallery/thChara.gif) no-repeat -192px -128px;
}

/* newY */
.detail li div.newY.newY2014{
	background: url(../img/sub/gallery/thNewY.gif) no-repeat 0px 0px;
}
.detail li div.newY.newY2015{
	background: url(../img/sub/gallery/thNewY.gif) no-repeat -64px 0px;
}
.detail li div.newY.newY2016{
	background: url(../img/sub/gallery/thNewY.gif) no-repeat -128px 0px;
}
.detail li div.newY.newY2017{
	background: url(../img/sub/gallery/thNewY.gif) no-repeat -192px 0px;
}
.detail li div.newY.newY2018{
	background: url(../img/sub/gallery/thNewY.gif) no-repeat -256px 0px;
}
.detail li div.newY.newY2019{
	background: url(../img/sub/gallery/thNewY.gif) no-repeat -320px 0px;
}
.detail li div.newY.newY2020{
	background: url(../img/sub/gallery/thNewY.gif) no-repeat -384px 0px;
}
.detail li div.newY.newY2021{
	background: url(../img/sub/gallery/thNewY.gif) no-repeat -448px 0px;
}

/* pictArea */
#pictArea{
  background: #333333;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	position: relative;
  text-align: center;
}
#pictArea img{
  background: #ffffff;
  margin: 50px 0px;
}