@charset "utf-8";

/* -------------------------------------------
 * initialize
 */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

html {
  -webkit-font-smoothing: subpixel-antialiased;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display:block;
}

ul li, ol li{
  list-style: none;
}

input, select {
  vertical-align: middle;
}

.hide {
  display: none;
}

img {
  vertical-align: top;
}

a {
  color: #796b1d;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.clearfix:before, .clearfix:after{content:""; display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}


/* --------------------------------------------------
 * Common Styles
 */

body {
  color: #666666;
  font-family: "メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
}


.wrap {
  position: relative;
  width: 980px;
  margin: 0 auto;
}

header{
  height: 80px;
}

header.wrap{
  position: relative;
  width: 920px;
  margin: 0 auto;
}

header .logo{
  float: left;
  margin: 27px 0 0;
}

header ul{
  float: right;
  margin: 10px 32px 0;
}

header ul li{
  float: left;
}

header ul li:first-child{
  padding: 0 30px 0 0;
  background: url(../img/menu_bg.png) no-repeat center right;
}

header ul li:last-child{
  padding: 0 0 0 28px;
}

header ul li.lineup {
  width: 112px;
  height: 59px;
}

header ul li.shoplist {
  width: 132px;
  height: 59px;
}

header ul li a{
  display: block;
  width: 100%;
  height: 100%;
}

header ul li.lineup.on a,
header ul li.lineup a:hover {
  background: url(../img/menu1.png) no-repeat 0 0;
}

header ul li.shoplist.on a,
header ul li.shoplist a:hover {
  background: url(../img/menu4.png) no-repeat 0 0;
}

header ul li.on img,
header ul li a:hover img {
  display: none;
}


#content .top{
  position: relative;
  width: 100%;
  min-width: 980px;
  height: 570px;
  background: url(../img/top_bg.jpg);
  z-index: 1;
  overflow: hidden;
}

#content .top .pencils{
  position: absolute;
  width: 1340px;
  height: 248px;
  z-index: 10;
  bottom: -248px;
  left: 50%;
  margin: 0 0 0 -670px;
}

#content .top .pencils .group {
  position: relative;
}

#content .top .pencils .group01 {

}

#content .top .pencils .group img {
  position: absolute;
  bottom: -1px;
  filter: alpha(opacity=0);
  opacity: 0;
  -moz-transition: 2s linear;
  -webkit-transition: 2s linear;
  -ms-transition: 2s linear;
  transition: 2s linear;
}
#content .top .pencils .group img.on {
  filter: alpha(opacity=100);
  opacity: 1;
}
#content .top .pencils .group img.off {
  filter: alpha(opacity=0);
  opacity: 0;
}
#content .top .pencils .pencil01 { right: 0; }
#content .top .pencils .pencil02 { right: 26px; }
#content .top .pencils .pencil03 { right: 53px; }
#content .top .pencils .pencil04 { right: 80px; }
#content .top .pencils .pencil05 { right: 107px; }
#content .top .pencils .pencil06 { right: 135px; }
#content .top .pencils .pencil07 { right: 163px; }
#content .top .pencils .pencil08 { right: 190px; }
#content .top .pencils .pencil09 { right: 218px; }
#content .top .pencils .pencil10 { right: 245px; }

#content .top .pencils .pencil11 { right: 272px; }
#content .top .pencils .pencil12 { right: 298px; }
#content .top .pencils .pencil13 { right: 326px; }
#content .top .pencils .pencil14 { right: 353px; }
#content .top .pencils .pencil15 { right: 381px; }
#content .top .pencils .pencil16 { right: 407px; }
#content .top .pencils .pencil17 { right: 433px; }
#content .top .pencils .pencil18 { right: 460px; }
#content .top .pencils .pencil19 { right: 488px; }
#content .top .pencils .pencil20 { right: 515px; }

#content .top .pencils .pencil21 { right: 540px; }
#content .top .pencils .pencil22 { right: 567px; }
#content .top .pencils .pencil23 { right: 592px; }
#content .top .pencils .pencil24 { right: 617px; }
#content .top .pencils .pencil25 { right: 642px; }
#content .top .pencils .pencil26 { right: 667px; }
#content .top .pencils .pencil27 { right: 692px; }
#content .top .pencils .pencil28 { right: 717px; }
#content .top .pencils .pencil29 { right: 742px; }
#content .top .pencils .pencil30 { right: 769px; }

#content .top .pencils .pencil31 { right: 796px; }
#content .top .pencils .pencil32 { right: 821px; }
#content .top .pencils .pencil33 { right: 847px; }
#content .top .pencils .pencil34 { right: 875px; }
#content .top .pencils .pencil35 { right: 903px; }
#content .top .pencils .pencil36 { right: 930px; }
#content .top .pencils .pencil37 { right: 958px; }
#content .top .pencils .pencil38 { right: 984px; }
#content .top .pencils .pencil39 { right: 1012px; }
#content .top .pencils .pencil40 { right: 1039px; }

#content .top .pencils .pencil41 { right: 1066px; }
#content .top .pencils .pencil42 { right: 1094px; }
#content .top .pencils .pencil43 { right: 1122px; }
#content .top .pencils .pencil44 { right: 1149px; }
#content .top .pencils .pencil45 { right: 1178px; }
#content .top .pencils .pencil46 { right: 1205px; }
#content .top .pencils .pencil47 { right: 1232px; }
#content .top .pencils .pencil48 { right: 1259px; }
#content .top .pencils .pencil49 { right: 1286px; }
#content .top .pencils .pencil50 { right: 1314px; }

#content .top .title{
  padding: 110px 0 0;
  text-align: center;
}

#content .point{
  min-width: 980px;
}


#content .point .point1{
  height: 400px;
}

#content .point .point1 img{
  position: absolute;
}

#content .point .point1 .title{top: 77px;left: 319px; display: none;}
#content .point .point1 .pen1_lead{top: 175px;left: 20px;}
#content .point .point1 .pen1_img1{top: 51px;left: 110px; display: none;}
#content .point .point1 .pen1_img2{top: 197px;left: 176px;}
#content .point .point1 .pen1_text{top: 135px;left: 159px; display: none;}
#content .point .point1 .pen2_lead{top: 119px;left: 821px;}
#content .point .point1 .pen2_img1{top: 0px;left: 723px;}
#content .point .point1 .pen2_img2{top: 264px;left: 659px; display: none;}
#content .point .point1 .pen2_text{top: 209px;left: 713px; display: none;}

#content .point .point2{
  background: url(../img/bg2.jpg);
  height: 400px;
  overflow: hidden;
}

#content .point .point2 img{
  position: absolute;
}

#content .point .point2 .main {
}

#content .point .point2 .main .title{
  top: 86px;
  left: 303px;
}

#content .point .point2 .main .btn{
  display: none;
  top: 229px;
  left: 587px;
}

#content .point .point2 .main .origin-r,
#content .point .point2 .main .origin-l {
  width: auto;
  height: 423px;
}

#content .point li .origin-r {
  display: none;
  width: 30px;
  top: -250px;
  right: 80px;

  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);

  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;

  -moz-transition: -moz-transform 1.2s ease-out;
  -webkit-transition: -webkit-transform 1.2s ease-out;
  -ms-transition: -ms-transform 1.2s ease-out;
  transition: transform 1.2s ease-out;
}
#content .point li .origin-l {
  display: none;
  width: 30px;
  top: 650px;
  left: 100px;

  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);

  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;

  -webkit-transition: -webkit-transform 1.2s ease-out;
  -ms-transition: -ms-transform 1.2s ease-out;
  transition: transform 1.2s ease-out;
}
#content .point li .point2-3-1 {
  -webkit-transform: rotate(49deg);
  -ms-transform: rotate(49deg);
  transform: rotate(49deg);
}
#content .point li .point2-3-2 {
  -webkit-transform: rotate(38deg);
  -ms-transform: rotate(38deg);
  transform: rotate(38deg);
}
#content .point li .point2-3-3 {
  -webkit-transform: rotate(27deg);
  -ms-transform: rotate(27deg);
  transform: rotate(27deg);
}
#content .point li .point2-3-4 {
  -webkit-transform: rotate(16deg);
  -ms-transform: rotate(16deg);
  transform: rotate(16deg);
}
#content .point li .point2-3-5 {
  -webkit-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}
#content .point li .point2-3-6 {
  -webkit-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
#content .point li .point2-3-7 {
  -webkit-transform: rotate(-17deg);
  -ms-transform: rotate(-17deg);
  transform: rotate(-17deg);
}
#content .point li .point2-3-8 {
  -webkit-transform: rotate(-28deg);
  -ms-transform: rotate(-28deg);
  transform: rotate(-28deg);
}
#content .point li .point2-3-9 {
  -webkit-transform: rotate(-39deg);
  -ms-transform: rotate(-39deg);
  transform: rotate(-39deg);
}
#content .point li .point2-3-10 {
  -webkit-transform: rotate(142deg);
  -ms-transform: rotate(142deg);
  transform: rotate(142deg);
}
#content .point li .point2-3-11 {
  -webkit-transform: rotate(153deg);
  -ms-transform: rotate(153deg);
  transform: rotate(153deg);
}
#content .point li .point2-3-12 {
  -webkit-transform: rotate(164deg);
  -ms-transform: rotate(164deg);
  transform: rotate(164deg);
}
#content .point li .point2-3-13 {
  -webkit-transform: rotate(175deg);
  -ms-transform: rotate(175deg);
  transform: rotate(175deg);
}
#content .point li .point2-3-14 {
  -webkit-transform: rotate(186deg);
  -ms-transform: rotate(186deg);
  transform: rotate(186deg);
}
#content .point li .point2-3-15 {
  -webkit-transform: rotate(197deg);
  -ms-transform: rotate(197deg);
  transform: rotate(197deg);
}
#content .point li .point2-3-16 {
  -webkit-transform: rotate(208deg);
  -ms-transform: rotate(208deg);
  transform: rotate(208deg);
}
#content .point li .point2-3-17 {
  -webkit-transform: rotate(219deg);
  -ms-transform: rotate(219deg);
  transform: rotate(219deg);
}

#content .point .point2 .back {
  display: none;
  width: 980px;
  height: 400px;
}

#content .point .point2 .back .title{top: 185px;left: 292px;}
#content .point .point2 .back .btn{top: 229px;left: 587px;}
#content .point .point2 .back .color01{top: 40px;left: 42px;}
#content .point .point2 .back .color02{top: -10px;left: 189px;}
#content .point .point2 .back .color03{top: 20px;left: 337px;}
#content .point .point2 .back .color04{top: -20px;left: 485px;}
#content .point .point2 .back .color05{top: 10px;left: 633px;}
#content .point .point2 .back .color06{top: 40px;left: 780px;}
#content .point .point2 .back .color07{top: 192px;left: 0px;}
#content .point .point2 .back .color08{top: 270px;left: 139px;}
#content .point .point2 .back .color09{top: 240px;left: 295px;}
#content .point .point2 .back .color10{top: 280px;left: 447px;}
#content .point .point2 .back .color11{top: 280px;left: 696px;}
#content .point .point2 .back .color12{top: 190px;left: 821px;}


#content .point .point3{
  height: 440px;
}

#content .point .point3 img{
  position: absolute;
  display: none;
}


#content .point .point3 .title{top: 20px;left: 262px;}
#content .point .point3 .img1{top: 30px;left: -48px;}
#content .point .point3 .img2{top: 171px;left: 193px;}
#content .point .point3 .img3{top: 152px;left: 517px;}
#content .point .point3 .img4{top: 10px;left: 751px;}

#content .lineup{
  min-width: 980px;
  background: url(../img/bg2.jpg);
}

#content .lineup .title{
  padding: 30px 0 0;
  text-align: center;
}

#content .lineup .menu{
  width: 960px;
  margin: 22px auto 21px;
}

#content .lineup .menu li{
  float: left;
  width: 150px;
  height: 50px;
  margin: 0 12px 0 0;
  cursor: pointer;
}

#content .lineup .menu li:last-child{
  margin: 0;
}

#content .lineup .menu li a {
  display: block;
  width: 100%;
  height: 100%;
}

#content .lineup .menu li.on a img {
  display: none;
}

#content .lineup .menu li.tab1 a { background: url(../img/lineup_btn1_on.png) no-repeat 0 0; }
#content .lineup .menu li.tab2 a { background: url(../img/lineup_btn2_on.png) no-repeat 0 0; }
#content .lineup .menu li.tab3 a { background: url(../img/lineup_btn3_on.png) no-repeat 0 0; }
#content .lineup .menu li.tab4 a { background: url(../img/lineup_btn4_on.png) no-repeat 0 0; }
#content .lineup .menu li.tab5 a { background: url(../img/lineup_btn5_on.png) no-repeat 0 0; }
#content .lineup .menu li.tab6 a { background: url(../img/lineup_btn6_on.png) no-repeat 0 0; }


#content .lineup #view{
  position: relative;
  z-index: 1;
  width: 100%;
}

#content .lineup #view .pencils-wrap{
  position: relative;
  width: 100%;
  min-height: 100px;
  overflow: hidden;
  background: #fff;
}
#content .lineup #view .pencils{
  position: relative;
  width: 100%;
  height: 742px;
  overflow: hidden;
  background: #fff;
  -webkit-transition: height 0.5s ease-out;
  -ms-transition: height 0.5s ease-out;
  transition: height 0.5s ease-out;
}

#content .lineup #view .pencils img {
  display: none;
  position: absolute;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: -webkit-transform 0.8s ease-out, top 0.8s ease-out, left 0.8s ease-out, right 0.8s ease-out;
  -ms-transition: -ms-transform 0.8s ease-out, top 0.8s ease-out, left 0.8s ease-out, right 0.8s ease-out;
  transition: transform 0.8s ease-out, top 0.8s ease-out, left 0.8s ease-out, right 0.8s ease-out;
}


#content .lineup #view.normal .pencils {
  height: 887px;
}
#content .lineup #view.normal .pencils img.normal {
  display: block;
  -webkit-transition: opacity 0.8s ease-out;
  -ms-transition: opacity 0.8s ease-out;
  transition: opacity 0.8s ease-out;
}

#content .lineup #view.normal .pencils img.tip {
  display: block;
  cursor: pointer;
  -webkit-transition: opacity 3s ease-in;
  -ms-transition: opacity 3s ease-in;
  transition: opacity 3s ease-in;
}

#content .lineup #view.normal .pencils img.detail-all { top: 454px; left: -8px; opacity:1;}
#content .lineup #view.normal .pencils img.detail { top: 40px; left: 14px; opacity:0;}
#content .lineup #view.normal .pencils img.detail.on { opacity:1; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}


#content .lineup #view.normal .pencils img.plt01 { top: 40px; left: 350px; opacity:0;}
#content .lineup #view.normal .pencils img.plt02 { top: 40px; left: 460px; opacity:0;}
#content .lineup #view.normal .pencils img.plt03 { top: 40px; left: 570px; opacity:0;}
#content .lineup #view.normal .pencils img.plt04 { top: 40px; left: 680px; opacity:0;}
#content .lineup #view.normal .pencils img.plt05 { top: 40px; left: 790px; opacity:0;}
#content .lineup #view.normal .pencils img.plt06 { top: 40px; left: 900px; opacity:0;}

#content .lineup #view.normal .pencils img.plt07 { top: 170px; left: 350px; opacity:0;}
#content .lineup #view.normal .pencils img.plt08 { top: 170px; left: 460px; opacity:0;}
#content .lineup #view.normal .pencils img.plt09 { top: 170px; left: 570px; opacity:0;}
#content .lineup #view.normal .pencils img.plt10 { top: 170px; left: 680px; opacity:0;}
#content .lineup #view.normal .pencils img.plt11 { top: 170px; left: 790px; opacity:0;}
#content .lineup #view.normal .pencils img.plt12 { top: 170px; left: 900px; opacity:0;}

#content .lineup #view.normal .pencils img.plt13 { top: 300px; left: 350px; opacity:0;}
#content .lineup #view.normal .pencils img.plt14 { top: 300px; left: 460px; opacity:0;}
#content .lineup #view.normal .pencils img.plt15 { top: 300px; left: 570px; opacity:0;}
#content .lineup #view.normal .pencils img.plt16 { top: 300px; left: 680px; opacity:0;}
#content .lineup #view.normal .pencils img.plt17 { top: 300px; left: 790px; opacity:0;}
#content .lineup #view.normal .pencils img.plt18 { top: 300px; left: 900px; opacity:0;}

#content .lineup #view.normal .pencils img.plt19 { top: 430px; left: 350px; opacity:0;}
#content .lineup #view.normal .pencils img.plt20 { top: 430px; left: 460px; opacity:0;}
#content .lineup #view.normal .pencils img.plt21 { top: 430px; left: 570px; opacity:0;}
#content .lineup #view.normal .pencils img.plt22 { top: 430px; left: 680px; opacity:0;}
#content .lineup #view.normal .pencils img.plt23 { top: 430px; left: 790px; opacity:0;}
#content .lineup #view.normal .pencils img.plt24 { top: 430px; left: 900px; opacity:0;}

#content .lineup #view.normal .pencils img.plt25 { top: 560px; left: 350px; opacity:0;}
#content .lineup #view.normal .pencils img.plt26 { top: 560px; left: 460px; opacity:0;}
#content .lineup #view.normal .pencils img.plt27 { top: 560px; left: 570px; opacity:0;}
#content .lineup #view.normal .pencils img.plt28 { top: 560px; left: 680px; opacity:0;}
#content .lineup #view.normal .pencils img.plt29 { top: 560px; left: 790px; opacity:0;}
#content .lineup #view.normal .pencils img.plt30 { top: 560px; left: 900px; opacity:0;}

#content .lineup #view.normal .pencils img.plt31 { top: 690px; left: 350px; opacity:0;}
#content .lineup #view.normal .pencils img.plt32 { top: 690px; left: 460px; opacity:0;}
#content .lineup #view.normal .pencils img.plt33 { top: 690px; left: 570px; opacity:0;}
#content .lineup #view.normal .pencils img.plt34 { top: 690px; left: 680px; opacity:0;}
#content .lineup #view.normal .pencils img.plt35 { top: 690px; left: 790px; opacity:0;}
#content .lineup #view.normal .pencils img.plt36 { top: 690px; left: 900px; opacity:0;}

#content .lineup #view.normal.move .pencils img.plt01 { opacity:1; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}
#content .lineup #view.normal.move .pencils img.plt02 { opacity:1; -webkit-transition-delay: 0.6s; -ms-transition-delay: 0.6s; transition-delay: 0.6s;}
#content .lineup #view.normal.move .pencils img.plt03 { opacity:1; -webkit-transition-delay: 0.9s; -ms-transition-delay: 0.9s; transition-delay: 0.9s;}
#content .lineup #view.normal.move .pencils img.plt04 { opacity:1; -webkit-transition-delay: 1.2s; -ms-transition-delay: 1.2s; transition-delay: 1.2s;}
#content .lineup #view.normal.move .pencils img.plt05 { opacity:1; -webkit-transition-delay: 1.5s; -ms-transition-delay: 1.5s; transition-delay: 1.5s;}
#content .lineup #view.normal.move .pencils img.plt06 { opacity:1; -webkit-transition-delay: 1.8s; -ms-transition-delay: 1.8s; transition-delay: 1.8s;}

#content .lineup #view.normal.move .pencils img.plt07 { opacity:1; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s;}
#content .lineup #view.normal.move .pencils img.plt08 { opacity:1; -webkit-transition-delay: 1.7s; -ms-transition-delay: 1.7s; transition-delay: 1.7s;}
#content .lineup #view.normal.move .pencils img.plt09 { opacity:1; -webkit-transition-delay: 2s; -ms-transition-delay: 2s; transition-delay: 2s;}
#content .lineup #view.normal.move .pencils img.plt10 { opacity:1; -webkit-transition-delay: 2.3s; -ms-transition-delay: 2.3s; transition-delay: 2.3s;}
#content .lineup #view.normal.move .pencils img.plt11 { opacity:1; -webkit-transition-delay: 2.6s; -ms-transition-delay: 2.6s; transition-delay: 2.6s;}
#content .lineup #view.normal.move .pencils img.plt12 { opacity:1; -webkit-transition-delay: 2.9s; -ms-transition-delay: 2.9s; transition-delay: 2.9s;}

#content .lineup #view.normal.move .pencils img.plt13 { opacity:1; -webkit-transition-delay: 2.5s; -ms-transition-delay: 2.5s; transition-delay: 2.5s;}
#content .lineup #view.normal.move .pencils img.plt14 { opacity:1; -webkit-transition-delay: 2.8s; -ms-transition-delay: 2.8s; transition-delay: 2.8s;}
#content .lineup #view.normal.move .pencils img.plt15 { opacity:1; -webkit-transition-delay: 3.1s; -ms-transition-delay: 3.1s; transition-delay: 3.1s;}
#content .lineup #view.normal.move .pencils img.plt16 { opacity:1; -webkit-transition-delay: 3.4s; -ms-transition-delay: 3.4s; transition-delay: 3.4s;}
#content .lineup #view.normal.move .pencils img.plt17 { opacity:1; -webkit-transition-delay: 3.7s; -ms-transition-delay: 3.7s; transition-delay: 3.7s;}
#content .lineup #view.normal.move .pencils img.plt18 { opacity:1; -webkit-transition-delay: 4s; -ms-transition-delay: 4s; transition-delay: 4s;}

#content .lineup #view.normal.move .pencils img.plt19 { opacity:1; -webkit-transition-delay: 3.6s; -ms-transition-delay: 3.6s; transition-delay: 3.6s;}
#content .lineup #view.normal.move .pencils img.plt20 { opacity:1; -webkit-transition-delay: 3.9s; -ms-transition-delay: 3.9s; transition-delay: 3.9s;}
#content .lineup #view.normal.move .pencils img.plt21 { opacity:1; -webkit-transition-delay: 4.2s; -ms-transition-delay: 4.2s; transition-delay: 4.2s;}
#content .lineup #view.normal.move .pencils img.plt22 { opacity:1; -webkit-transition-delay: 4.5s; -ms-transition-delay: 4.5s; transition-delay: 4.5s;}
#content .lineup #view.normal.move .pencils img.plt23 { opacity:1; -webkit-transition-delay: 4.8s; -ms-transition-delay: 4.8s; transition-delay: 4.8s;}
#content .lineup #view.normal.move .pencils img.plt24 { opacity:1; -webkit-transition-delay: 5.1s; -ms-transition-delay: 5.1s; transition-delay: 5.1s;}

#content .lineup #view.normal.move .pencils img.plt25 { opacity:1; -webkit-transition-delay: 4.7s; -ms-transition-delay: 4.7s; transition-delay: 4.7s;}
#content .lineup #view.normal.move .pencils img.plt26 { opacity:1; -webkit-transition-delay: 5s; -ms-transition-delay: 5s; transition-delay: 5s;}
#content .lineup #view.normal.move .pencils img.plt27 { opacity:1; -webkit-transition-delay: 5.3s; -ms-transition-delay: 5.3s; transition-delay: 5.3s;}
#content .lineup #view.normal.move .pencils img.plt28 { opacity:1; -webkit-transition-delay: 5.6s; -ms-transition-delay: 5.6s; transition-delay: 5.6s;}
#content .lineup #view.normal.move .pencils img.plt29 { opacity:1; -webkit-transition-delay: 5.9s; -ms-transition-delay: 5.9s; transition-delay: 5.9s;}
#content .lineup #view.normal.move .pencils img.plt30 { opacity:1; -webkit-transition-delay: 6.2s; -ms-transition-delay: 6.2s; transition-delay: 6.2s;}

#content .lineup #view.normal.move .pencils img.plt31 { opacity:1; -webkit-transition-delay: 5.8s; -ms-transition-delay: 5.8s; transition-delay: 5.8s;}
#content .lineup #view.normal.move .pencils img.plt32 { opacity:1; -webkit-transition-delay: 6.1s; -ms-transition-delay: 6.1s; transition-delay: 6.1s;}
#content .lineup #view.normal.move .pencils img.plt33 { opacity:1; -webkit-transition-delay: 6.4s; -ms-transition-delay: 6.4s; transition-delay: 6.4s;}
#content .lineup #view.normal.move .pencils img.plt34 { opacity:1; -webkit-transition-delay: 6.7s; -ms-transition-delay: 6.7s; transition-delay: 6.7s;}
#content .lineup #view.normal.move .pencils img.plt35 { opacity:1; -webkit-transition-delay: 7s; -ms-transition-delay: 7s; transition-delay: 7s;}
#content .lineup #view.normal.move .pencils img.plt36 { opacity:1; -webkit-transition-delay: 7.3s; -ms-transition-delay: 7.3s; transition-delay: 7.3s;}


#content .lineup #view.normal .pencils img.plttxt01 { top: 100px; left: 350px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt02 { top: 100px; left: 460px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt03 { top: 100px; left: 570px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt04 { top: 100px; left: 680px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt05 { top: 100px; left: 790px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt06 { top: 100px; left: 900px; opacity:0;}

#content .lineup #view.normal .pencils img.plttxt07 { top: 230px; left: 350px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt08 { top: 230px; left: 450px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt09 { top: 230px; left: 570px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt10 { top: 230px; left: 680px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt11 { top: 230px; left: 790px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt12 { top: 230px; left: 900px; opacity:0;}

#content .lineup #view.normal .pencils img.plttxt13 { top: 360px; left: 350px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt14 { top: 360px; left: 460px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt15 { top: 360px; left: 570px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt16 { top: 360px; left: 680px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt17 { top: 360px; left: 790px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt18 { top: 360px; left: 900px; opacity:0;}

#content .lineup #view.normal .pencils img.plttxt19 { top: 490px; left: 350px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt20 { top: 490px; left: 453px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt21 { top: 490px; left: 562px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt22 { top: 490px; left: 680px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt23 { top: 490px; left: 790px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt24 { top: 490px; left: 900px; opacity:0;}

#content .lineup #view.normal .pencils img.plttxt25 { top: 620px; left: 338px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt26 { top: 620px; left: 453px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt27 { top: 620px; left: 570px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt28 { top: 620px; left: 680px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt29 { top: 620px; left: 774px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt30 { top: 620px; left: 893px; opacity:0;}

#content .lineup #view.normal .pencils img.plttxt31 { top: 750px; left: 342px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt32 { top: 750px; left: 460px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt33 { top: 750px; left: 570px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt34 { top: 750px; left: 671px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt35 { top: 750px; left: 782px; opacity:0;}
#content .lineup #view.normal .pencils img.plttxt36 { top: 750px; left: 900px; opacity:0;}

#content .lineup #view.normal.move .pencils img.plttxt01 { opacity:1; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}
#content .lineup #view.normal.move .pencils img.plttxt02 { opacity:1; -webkit-transition-delay: 0.6s; -ms-transition-delay: 0.6s; transition-delay: 0.6s;}
#content .lineup #view.normal.move .pencils img.plttxt03 { opacity:1; -webkit-transition-delay: 0.9s; -ms-transition-delay: 0.9s; transition-delay: 0.9s;}
#content .lineup #view.normal.move .pencils img.plttxt04 { opacity:1; -webkit-transition-delay: 1.2s; -ms-transition-delay: 1.2s; transition-delay: 1.2s;}
#content .lineup #view.normal.move .pencils img.plttxt05 { opacity:1; -webkit-transition-delay: 1.5s; -ms-transition-delay: 1.5s; transition-delay: 1.5s;}
#content .lineup #view.normal.move .pencils img.plttxt06 { opacity:1; -webkit-transition-delay: 1.8s; -ms-transition-delay: 1.8s; transition-delay: 1.8s;}

#content .lineup #view.normal.move .pencils img.plttxt07 { opacity:1; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s;}
#content .lineup #view.normal.move .pencils img.plttxt08 { opacity:1; -webkit-transition-delay: 1.7s; -ms-transition-delay: 1.7s; transition-delay: 1.7s;}
#content .lineup #view.normal.move .pencils img.plttxt09 { opacity:1; -webkit-transition-delay: 2s; -ms-transition-delay: 2s; transition-delay: 2s;}
#content .lineup #view.normal.move .pencils img.plttxt10 { opacity:1; -webkit-transition-delay: 2.3s; -ms-transition-delay: 2.3s; transition-delay: 2.3s;}
#content .lineup #view.normal.move .pencils img.plttxt11 { opacity:1; -webkit-transition-delay: 2.6s; -ms-transition-delay: 2.6s; transition-delay: 2.6s;}
#content .lineup #view.normal.move .pencils img.plttxt12 { opacity:1; -webkit-transition-delay: 2.9s; -ms-transition-delay: 2.9s; transition-delay: 2.9s;}

#content .lineup #view.normal.move .pencils img.plttxt13 { opacity:1; -webkit-transition-delay: 2.5s; -ms-transition-delay: 2.5s; transition-delay: 2.5s;}
#content .lineup #view.normal.move .pencils img.plttxt14 { opacity:1; -webkit-transition-delay: 2.8s; -ms-transition-delay: 2.8s; transition-delay: 2.8s;}
#content .lineup #view.normal.move .pencils img.plttxt15 { opacity:1; -webkit-transition-delay: 3.1s; -ms-transition-delay: 3.1s; transition-delay: 3.1s;}
#content .lineup #view.normal.move .pencils img.plttxt16 { opacity:1; -webkit-transition-delay: 3.4s; -ms-transition-delay: 3.4s; transition-delay: 3.4s;}
#content .lineup #view.normal.move .pencils img.plttxt17 { opacity:1; -webkit-transition-delay: 3.7s; -ms-transition-delay: 3.7s; transition-delay: 3.7s;}
#content .lineup #view.normal.move .pencils img.plttxt18 { opacity:1; -webkit-transition-delay: 4s; -ms-transition-delay: 4s; transition-delay: 4s;}

#content .lineup #view.normal.move .pencils img.plttxt19 { opacity:1; -webkit-transition-delay: 3.6s; -ms-transition-delay: 3.6s; transition-delay: 3.6s;}
#content .lineup #view.normal.move .pencils img.plttxt20 { opacity:1; -webkit-transition-delay: 3.9s; -ms-transition-delay: 3.9s; transition-delay: 3.9s;}
#content .lineup #view.normal.move .pencils img.plttxt21 { opacity:1; -webkit-transition-delay: 4.2s; -ms-transition-delay: 4.2s; transition-delay: 4.2s;}
#content .lineup #view.normal.move .pencils img.plttxt22 { opacity:1; -webkit-transition-delay: 4.5s; -ms-transition-delay: 4.5s; transition-delay: 4.5s;}
#content .lineup #view.normal.move .pencils img.plttxt23 { opacity:1; -webkit-transition-delay: 4.8s; -ms-transition-delay: 4.8s; transition-delay: 4.8s;}
#content .lineup #view.normal.move .pencils img.plttxt24 { opacity:1; -webkit-transition-delay: 5.1s; -ms-transition-delay: 5.1s; transition-delay: 5.1s;}

#content .lineup #view.normal.move .pencils img.plttxt25 { opacity:1; -webkit-transition-delay: 4.7s; -ms-transition-delay: 4.7s; transition-delay: 4.7s;}
#content .lineup #view.normal.move .pencils img.plttxt26 { opacity:1; -webkit-transition-delay: 5s; -ms-transition-delay: 5s; transition-delay: 5s;}
#content .lineup #view.normal.move .pencils img.plttxt27 { opacity:1; -webkit-transition-delay: 5.3s; -ms-transition-delay: 5.3s; transition-delay: 5.3s;}
#content .lineup #view.normal.move .pencils img.plttxt28 { opacity:1; -webkit-transition-delay: 5.6s; -ms-transition-delay: 5.6s; transition-delay: 5.6s;}
#content .lineup #view.normal.move .pencils img.plttxt29 { opacity:1; -webkit-transition-delay: 5.9s; -ms-transition-delay: 5.9s; transition-delay: 5.9s;}
#content .lineup #view.normal.move .pencils img.plttxt30 { opacity:1; -webkit-transition-delay: 6.2s; -ms-transition-delay: 6.2s; transition-delay: 6.2s;}

#content .lineup #view.normal.move .pencils img.plttxt31 { opacity:1; -webkit-transition-delay: 5.8s; -ms-transition-delay: 5.8s; transition-delay: 5.8s;}
#content .lineup #view.normal.move .pencils img.plttxt32 { opacity:1; -webkit-transition-delay: 6.1s; -ms-transition-delay: 6.1s; transition-delay: 6.1s;}
#content .lineup #view.normal.move .pencils img.plttxt33 { opacity:1; -webkit-transition-delay: 6.4s; -ms-transition-delay: 6.4s; transition-delay: 6.4s;}
#content .lineup #view.normal.move .pencils img.plttxt34 { opacity:1; -webkit-transition-delay: 6.7s; -ms-transition-delay: 6.7s; transition-delay: 6.7s;}
#content .lineup #view.normal.move .pencils img.plttxt35 { opacity:1; -webkit-transition-delay: 7s; -ms-transition-delay: 7s; transition-delay: 7s;}
#content .lineup #view.normal.move .pencils img.plttxt36 { opacity:1; -webkit-transition-delay: 7.3s; -ms-transition-delay: 7.3s; transition-delay: 7.3s;}


#content .lineup #view.set36 .pencils {
  height: 682px;
}
#content .lineup #view.set36 .pencils img.set36 {
  display: block;
  -webkit-transition: opacity 0.8s ease-out,left 0.8s ease-out;
  -ms-transition: opacity 0.8s ease-out,left 0.8s ease-out;
  transition: opacity 0.8s ease-out,left 0.8s ease-out;
}

#content .lineup #view.set36 .pencils img.set36.detail { top: 40px; left: 0; opacity: 1;}
#content .lineup #view.set36 .pencils img.lpbig01 { top: 40px; left: 260px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig02 { top: 40px; left: 326px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig03 { top: 40px; left: 392px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig04 { top: 40px; left: 468px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig05 { top: 40px; left: 534px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig06 { top: 40px; left: 600px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig07 { top: 40px; left: 666px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig08 { top: 40px; left: 732px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig09 { top: 40px; left: 798px; opacity:0;}

#content .lineup #view.set36 .pencils img.lpbig10 { top: 184px; left: 260px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig11 { top: 184px; left: 326px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig12 { top: 184px; left: 392px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig13 { top: 184px; left: 468px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig14 { top: 184px; left: 534px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig15 { top: 184px; left: 600px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig16 { top: 184px; left: 666px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig17 { top: 184px; left: 732px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig18 { top: 184px; left: 798px; opacity:0;}

#content .lineup #view.set36 .pencils img.lpbig19 { top: 330px; left: 260px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig20 { top: 330px; left: 326px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig21 { top: 330px; left: 392px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig22 { top: 330px; left: 468px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig23 { top: 330px; left: 534px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig24 { top: 330px; left: 600px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig25 { top: 330px; left: 666px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig26 { top: 330px; left: 732px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig27 { top: 330px; left: 798px; opacity:0;}

#content .lineup #view.set36 .pencils img.lpbig28 { top: 472px; left: 260px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig29 { top: 472px; left: 326px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig30 { top: 472px; left: 392px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig31 { top: 472px; left: 468px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig32 { top: 472px; left: 534px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig33 { top: 472px; left: 600px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig34 { top: 472px; left: 666px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig35 { top: 472px; left: 732px; opacity:0;}
#content .lineup #view.set36 .pencils img.lpbig36 { top: 472px; left: 798px; opacity:0;}

#content .lineup #view.set36.move .pencils img.lpbig01 { left: 290px; opacity:1; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}
#content .lineup #view.set36.move .pencils img.lpbig02 { left: 356px; opacity:1; -webkit-transition-delay: 0.6s; -ms-transition-delay: 0.6s; transition-delay: 0.6s;}
#content .lineup #view.set36.move .pencils img.lpbig03 { left: 422px; opacity:1; -webkit-transition-delay: 0.9s; -ms-transition-delay: 0.9s; transition-delay: 0.9s;}
#content .lineup #view.set36.move .pencils img.lpbig04 { left: 498px; opacity:1; -webkit-transition-delay: 1.2s; -ms-transition-delay: 1.2s; transition-delay: 1.2s;}
#content .lineup #view.set36.move .pencils img.lpbig05 { left: 564px; opacity:1; -webkit-transition-delay: 1.5s; -ms-transition-delay: 1.5s; transition-delay: 1.5s;}
#content .lineup #view.set36.move .pencils img.lpbig06 { left: 630px; opacity:1; -webkit-transition-delay: 1.8s; -ms-transition-delay: 1.8s; transition-delay: 1.8s;}
#content .lineup #view.set36.move .pencils img.lpbig07 { left: 696px; opacity:1; -webkit-transition-delay: 2.1s; -ms-transition-delay: 2.1s; transition-delay: 2.1s;}
#content .lineup #view.set36.move .pencils img.lpbig08 { left: 762px; opacity:1; -webkit-transition-delay: 2.4s; -ms-transition-delay: 2.4s; transition-delay: 2.4s;}
#content .lineup #view.set36.move .pencils img.lpbig09 { left: 828px; opacity:1; -webkit-transition-delay: 2.7s; -ms-transition-delay: 2.7s; transition-delay: 2.7s;}

#content .lineup #view.set36.move .pencils img.lpbig10 { left: 290px; opacity:1; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s;}
#content .lineup #view.set36.move .pencils img.lpbig11 { left: 356px; opacity:1; -webkit-transition-delay: 1.7s; -ms-transition-delay: 1.7s; transition-delay: 1.7s;}
#content .lineup #view.set36.move .pencils img.lpbig12 { left: 422px; opacity:1; -webkit-transition-delay: 2s; -ms-transition-delay: 2s; transition-delay: 2s;}
#content .lineup #view.set36.move .pencils img.lpbig13 { left: 498px; opacity:1; -webkit-transition-delay: 2.3s; -ms-transition-delay: 2.3s; transition-delay: 2.3s;}
#content .lineup #view.set36.move .pencils img.lpbig14 { left: 564px; opacity:1; -webkit-transition-delay: 2.7s; -ms-transition-delay: 2.7s; transition-delay: 2.7s;}
#content .lineup #view.set36.move .pencils img.lpbig15 { left: 630px; opacity:1; -webkit-transition-delay: 3s; -ms-transition-delay: 3s; transition-delay: 3s;}
#content .lineup #view.set36.move .pencils img.lpbig16 { left: 696px; opacity:1; -webkit-transition-delay: 3.3s; -ms-transition-delay: 3.3s; transition-delay: 3.3s;}
#content .lineup #view.set36.move .pencils img.lpbig17 { left: 762px; opacity:1; -webkit-transition-delay: 3.6s; -ms-transition-delay: 3.6s; transition-delay: 3.6s;}
#content .lineup #view.set36.move .pencils img.lpbig18 { left: 828px; opacity:1; -webkit-transition-delay: 3.9s; -ms-transition-delay: 3.9s; transition-delay: 3.9s;}

#content .lineup #view.set36.move .pencils img.lpbig19 { left: 290px; opacity:1; -webkit-transition-delay: 2.2s; -ms-transition-delay: 2.2s; transition-delay: 2.2s;}
#content .lineup #view.set36.move .pencils img.lpbig20 { left: 356px; opacity:1; -webkit-transition-delay: 2.5s; -ms-transition-delay: 2.5s; transition-delay: 2.5s;}
#content .lineup #view.set36.move .pencils img.lpbig21 { left: 422px; opacity:1; -webkit-transition-delay: 2.8s; -ms-transition-delay: 2.8s; transition-delay: 2.8s;}
#content .lineup #view.set36.move .pencils img.lpbig22 { left: 498px; opacity:1; -webkit-transition-delay: 3.1s; -ms-transition-delay: 3.1s; transition-delay: 3.1s;}
#content .lineup #view.set36.move .pencils img.lpbig23 { left: 564px; opacity:1; -webkit-transition-delay: 3.4s; -ms-transition-delay: 3.4s; transition-delay: 3.4s;}
#content .lineup #view.set36.move .pencils img.lpbig24 { left: 630px; opacity:1; -webkit-transition-delay: 3.7s; -ms-transition-delay: 3.7s; transition-delay: 3.7s;}
#content .lineup #view.set36.move .pencils img.lpbig25 { left: 696px; opacity:1; -webkit-transition-delay: 4s; -ms-transition-delay: 4s; transition-delay: 4s;}
#content .lineup #view.set36.move .pencils img.lpbig26 { left: 762px; opacity:1; -webkit-transition-delay: 4.3s; -ms-transition-delay: 4.3s; transition-delay: 4.3s;}
#content .lineup #view.set36.move .pencils img.lpbig27 { left: 828px; opacity:1; -webkit-transition-delay: 4.6s; -ms-transition-delay: 4.6s; transition-delay: 4.6s;}

#content .lineup #view.set36.move .pencils img.lpbig28 { left: 290px; opacity:1; -webkit-transition-delay: 3s; -ms-transition-delay: 3s; transition-delay: 3s;}
#content .lineup #view.set36.move .pencils img.lpbig29 { left: 356px; opacity:1; -webkit-transition-delay: 3.3s; -ms-transition-delay: 3.3s; transition-delay: 3.3s;}
#content .lineup #view.set36.move .pencils img.lpbig30 { left: 422px; opacity:1; -webkit-transition-delay: 3.6s; -ms-transition-delay: 3.6s; transition-delay: 3.6s;}
#content .lineup #view.set36.move .pencils img.lpbig31 { left: 498px; opacity:1; -webkit-transition-delay: 3.9s; -ms-transition-delay: 3.9s; transition-delay: 3.9s;}
#content .lineup #view.set36.move .pencils img.lpbig32 { left: 564px; opacity:1; -webkit-transition-delay: 4.2s; -ms-transition-delay: 4.2s; transition-delay: 4.2s;}
#content .lineup #view.set36.move .pencils img.lpbig33 { left: 630px; opacity:1; -webkit-transition-delay: 4.5s; -ms-transition-delay: 4.5s; transition-delay: 4.5s;}
#content .lineup #view.set36.move .pencils img.lpbig34 { left: 696px; opacity:1; -webkit-transition-delay: 4.8s; -ms-transition-delay: 4.8s; transition-delay: 4.8s;}
#content .lineup #view.set36.move .pencils img.lpbig35 { left: 762px; opacity:1; -webkit-transition-delay: 5.1s; -ms-transition-delay: 5.1s; transition-delay: 5.1s;}
#content .lineup #view.set36.move .pencils img.lpbig36 { left: 828px; opacity:1; -webkit-transition-delay: 5.4s; -ms-transition-delay: 5.4s; transition-delay: 5.4s;}


#content .lineup #view.set24 .pencils {
  height: 560px;
}
#content .lineup #view.set24 .pencils img.set24 {
  display: block;
  -webkit-transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0s ease-out;
  -ms-transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0s ease-out;
  transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0s ease-out;
}

#content .lineup #view.set24 .pencils img.set24.detail { top: 40px; left: 0; opacity: 1;}
#content .lineup #view.set24 .pencils img.lpbig01 { top: 40px; left: 250px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig02 { top: 40px; left: 328px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig03 { top: 40px; left: 404px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig04 { top: 40px; left: 480px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig06 { top: 40px; left: 556px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig15 { top: 40px; left: 632px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig14 { top: 40px; left: 708px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig13 { top: 40px; left: 784px; opacity: 0;}

#content .lineup #view.set24 .pencils img.lpbig11 { top: 176px; left: 250px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig09 { top: 176px; left: 328px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig18 { top: 176px; left: 404px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig17 { top: 176px; left: 480px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig21 { top: 176px; left: 556px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig22 { top: 176px; left: 632px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig26 { top: 176px; left: 708px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig27 { top: 176px; left: 784px; opacity: 0;}

#content .lineup #view.set24 .pencils img.lpbig29 { top: 320px; left: 250px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig31 { top: 320px; left: 328px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig32 { top: 320px; left: 404px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig33 { top: 320px; left: 480px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig20 { top: 320px; left: 556px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig35 { top: 320px; left: 632px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig36 { top: 320px; left: 708px; opacity: 0;}
#content .lineup #view.set24 .pencils img.lpbig34 { top: 320px; left: 784px; opacity: 0;}

#content .lineup #view.set24.move .pencils img.lpbig01 { left: 280px; opacity:1; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}
#content .lineup #view.set24.move .pencils img.lpbig02 { left: 358px; opacity:1; -webkit-transition-delay: 0.6s; -ms-transition-delay: 0.6s; transition-delay: 0.6s;}
#content .lineup #view.set24.move .pencils img.lpbig03 { left: 434px; opacity:1; -webkit-transition-delay: 0.9s; -ms-transition-delay: 0.9s; transition-delay: 0.9s;}
#content .lineup #view.set24.move .pencils img.lpbig04 { left: 510px; opacity:1; -webkit-transition-delay: 1.2s; -ms-transition-delay: 1.2s; transition-delay: 1.2s;}
#content .lineup #view.set24.move .pencils img.lpbig06 { left: 586px; opacity:1; -webkit-transition-delay: 1.5s; -ms-transition-delay: 1.5s; transition-delay: 1.5s;}
#content .lineup #view.set24.move .pencils img.lpbig15 { left: 662px; opacity:1; -webkit-transition-delay: 1.8s; -ms-transition-delay: 1.8s; transition-delay: 1.8s;}
#content .lineup #view.set24.move .pencils img.lpbig14 { left: 738px; opacity:1; -webkit-transition-delay: 2.1s; -ms-transition-delay: 2.1s; transition-delay: 2.1s;}
#content .lineup #view.set24.move .pencils img.lpbig13 { left: 814px; opacity:1; -webkit-transition-delay: 2.4s; -ms-transition-delay: 2.4s; transition-delay: 2.4s;}

#content .lineup #view.set24.move .pencils img.lpbig11 { left: 280px; opacity:1; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s;}
#content .lineup #view.set24.move .pencils img.lpbig09 { left: 358px; opacity:1; -webkit-transition-delay: 1.7s; -ms-transition-delay: 1.7s; transition-delay: 1.7s;}
#content .lineup #view.set24.move .pencils img.lpbig18 { left: 434px; opacity:1; -webkit-transition-delay: 2s; -ms-transition-delay: 2s; transition-delay: 2s;}
#content .lineup #view.set24.move .pencils img.lpbig17 { left: 510px; opacity:1; -webkit-transition-delay: 2.3s; -ms-transition-delay: 2.3s; transition-delay: 2.3s;}
#content .lineup #view.set24.move .pencils img.lpbig21 { left: 586px; opacity:1; -webkit-transition-delay: 2.6s; -ms-transition-delay: 2.6s; transition-delay: 2.6s;}
#content .lineup #view.set24.move .pencils img.lpbig22 { left: 662px; opacity:1; -webkit-transition-delay: 2.7s; -ms-transition-delay: 2.7s; transition-delay: 2.7s;}
#content .lineup #view.set24.move .pencils img.lpbig26 { left: 738px; opacity:1; -webkit-transition-delay: 3s; -ms-transition-delay: 3s; transition-delay: 3s;}
#content .lineup #view.set24.move .pencils img.lpbig27 { left: 814px; opacity:1; -webkit-transition-delay: 3.3s; -ms-transition-delay: 3.3s; transition-delay: 3.3s;}

#content .lineup #view.set24.move .pencils img.lpbig29 { left: 280px; opacity:1; -webkit-transition-delay: 2.2s; -ms-transition-delay: 2.2s; transition-delay: 2.2s;}
#content .lineup #view.set24.move .pencils img.lpbig31 { left: 358px; opacity:1; -webkit-transition-delay: 2.5s; -ms-transition-delay: 2.5s; transition-delay: 2.5s;}
#content .lineup #view.set24.move .pencils img.lpbig32 { left: 434px; opacity:1; -webkit-transition-delay: 2.8s; -ms-transition-delay: 2.8s; transition-delay: 2.8s;}
#content .lineup #view.set24.move .pencils img.lpbig33 { left: 510px; opacity:1; -webkit-transition-delay: 3.1s; -ms-transition-delay: 3.1s; transition-delay: 3.1s;}
#content .lineup #view.set24.move .pencils img.lpbig20 { left: 586px; opacity:1; -webkit-transition-delay: 3.4s; -ms-transition-delay: 3.4s; transition-delay: 3.4s;}
#content .lineup #view.set24.move .pencils img.lpbig35 { left: 662px; opacity:1; -webkit-transition-delay: 3.7s; -ms-transition-delay: 3.7s; transition-delay: 3.7s;}
#content .lineup #view.set24.move .pencils img.lpbig36 { left: 738px; opacity:1; -webkit-transition-delay: 4s; -ms-transition-delay: 4s; transition-delay: 4s;}
#content .lineup #view.set24.move .pencils img.lpbig34 { left: 814px; opacity:1; -webkit-transition-delay: 4.3s; -ms-transition-delay: 4.3s; transition-delay: 4.3s;}


#content .lineup #view.set12 .pencils {
  height: 529px;
}
#content .lineup #view.set12 .pencils img.set12 {
  display: block;
  -webkit-transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0.8s ease-out;
  -ms-transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0.8s ease-out;
  transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0.8s ease-out;
}

#content .lineup #view.set12 .pencils img.set12.detail { top: 40px; left: 0; opacity: 1;}
#content .lineup #view.set12 .pencils img.lpmini01 { top: 40px; left: 175px; opacity: 0;}
#content .lineup #view.set12 .pencils img.lpmini02 { top: 40px; left: 280px; opacity: 0;}
#content .lineup #view.set12 .pencils img.lpmini03 { top: 40px; left: 385px; opacity: 0;}
#content .lineup #view.set12 .pencils img.lpmini04 { top: 40px; left: 490px; opacity: 0;}
#content .lineup #view.set12 .pencils img.lpmini05 { top: 40px; left: 595px; opacity: 0;}
#content .lineup #view.set12 .pencils img.lpmini06 { top: 40px; left: 700px; opacity: 0;}
#content .lineup #view.set12 .pencils img.lpmini07 { top: 236px; left: 175px; opacity: 0;}
#content .lineup #view.set12 .pencils img.lpmini08 { top: 236px; left: 280px; opacity: 0;}
#content .lineup #view.set12 .pencils img.lpmini09 { top: 236px; left: 385px; opacity: 0;}
#content .lineup #view.set12 .pencils img.lpmini10 { top: 236px; left: 490px; opacity: 0;}
#content .lineup #view.set12 .pencils img.lpmini11 { top: 236px; left: 595px; opacity: 0;}
#content .lineup #view.set12 .pencils img.lpmini12 { top: 236px; left: 700px; opacity: 0;}

#content .lineup #view.set12.move .pencils img.set12.detail { opacity: 1; -webkit-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s;}
#content .lineup #view.set12.move .pencils img.lpmini01 { left: 280px; opacity: 1; -webkit-transition-delay: 0.7s; -ms-transition-delay: 0.7s; transition-delay: 0.7s;}
#content .lineup #view.set12.move .pencils img.lpmini02 { left: 385px; opacity: 1; -webkit-transition-delay: 1s; -ms-transition-delay: 1s; transition-delay: 1s;}
#content .lineup #view.set12.move .pencils img.lpmini03 { left: 490px; opacity: 1; -webkit-transition-delay: 1.3s; -ms-transition-delay: 1.3s; transition-delay: 1.3s;}
#content .lineup #view.set12.move .pencils img.lpmini04 { left: 595px; opacity: 1; -webkit-transition-delay: 1.6s; -ms-transition-delay: 1.6s; transition-delay: 1.6s;}
#content .lineup #view.set12.move .pencils img.lpmini05 { left: 700px; opacity: 1; -webkit-transition-delay: 1.9s; -ms-transition-delay: 1.9s; transition-delay: 1.9s;}
#content .lineup #view.set12.move .pencils img.lpmini06 { left: 805px; opacity: 1; -webkit-transition-delay: 2.2s; -ms-transition-delay: 2.2s; transition-delay: 2.2s;}
#content .lineup #view.set12.move .pencils img.lpmini07 { left: 280px; opacity: 1; -webkit-transition-delay: 2.5s; -ms-transition-delay: 2.5s; transition-delay: 2.5s;}
#content .lineup #view.set12.move .pencils img.lpmini08 { left: 385px; opacity: 1; -webkit-transition-delay: 2.8s; -ms-transition-delay: 2.8s; transition-delay: 2.8s;}
#content .lineup #view.set12.move .pencils img.lpmini09 { left: 490px; opacity: 1; -webkit-transition-delay: 3.1s; -ms-transition-delay: 3.1s; transition-delay: 3.1s;}
#content .lineup #view.set12.move .pencils img.lpmini10 { left: 595px; opacity: 1; -webkit-transition-delay: 3.4s; -ms-transition-delay: 3.4s; transition-delay: 3.4s;}
#content .lineup #view.set12.move .pencils img.lpmini11 { left: 700px; opacity: 1; -webkit-transition-delay: 3.7s; -ms-transition-delay: 3.7s; transition-delay: 3.7s;}
#content .lineup #view.set12.move .pencils img.lpmini12 { left: 805px; opacity: 1; -webkit-transition-delay: 4s; -ms-transition-delay: 4s; transition-delay: 4s;}

#content .lineup #view.set6a .pencils {
  height: 529px;
}
#content .lineup #view.set6a .pencils img.set6a {
  display: block;
  -webkit-transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0.8s ease-out;
  -ms-transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0.8s ease-out;
  transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0.8s ease-out;
}

#content .lineup #view.set6a .pencils img.set6a.detail { top: 40px; left: 12px; opacity: 1;}
#content .lineup #view.set6a .pencils img.lpmini01 { top: 40px; left: 175px; opacity: 0;}
#content .lineup #view.set6a .pencils img.lpmini02 { top: 40px; left: 280px; opacity: 0;}
#content .lineup #view.set6a .pencils img.lpmini04 { top: 40px; left: 385px; opacity: 0;}
#content .lineup #view.set6a .pencils img.lpmini07 { top: 40px; left: 490px; opacity: 0;}
#content .lineup #view.set6a .pencils img.lpmini13 { top: 40px; left: 595px; opacity: 0;}
#content .lineup #view.set6a .pencils img.lpmini09 { top: 40px; left: 700px; opacity: 0;}

#content .lineup #view.set6a.move .pencils img.set6a.detail { opacity: 1; -webkit-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s;}
#content .lineup #view.set6a.move .pencils img.lpmini01 { top: 40px; left: 280px; opacity: 1; -webkit-transition-delay: 0.7s; -ms-transition-delay: 0.7s; transition-delay: 0.7s;}
#content .lineup #view.set6a.move .pencils img.lpmini02 { top: 40px; left: 385px; opacity: 1; -webkit-transition-delay: 1s; -ms-transition-delay: 1s; transition-delay: 1s;}
#content .lineup #view.set6a.move .pencils img.lpmini04 { top: 40px; left: 490px; opacity: 1; -webkit-transition-delay: 1.3s; -ms-transition-delay: 1.3s; transition-delay: 1.3s;}
#content .lineup #view.set6a.move .pencils img.lpmini07 { top: 40px; left: 595px; opacity: 1; -webkit-transition-delay: 1.6s; -ms-transition-delay: 1.6s; transition-delay: 1.6s;}
#content .lineup #view.set6a.move .pencils img.lpmini13 { top: 40px; left: 700px; opacity: 1; -webkit-transition-delay: 1.9s; -ms-transition-delay: 1.9s; transition-delay: 1.9s;}
#content .lineup #view.set6a.move .pencils img.lpmini09 { top: 40px; left: 805px; opacity: 1; -webkit-transition-delay: 2.2s; -ms-transition-delay: 2.2s; transition-delay: 2.2s;}


#content .lineup #view.set6b .pencils {
  height: 529px;
}
#content .lineup #view.set6b .pencils img.set6b {
  display: block;
  -webkit-transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0s ease-out;
  -ms-transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0s ease-out;
  transition: opacity 0.8s ease-out,left 0.8s ease-out, top 0s ease-out;
}

#content .lineup #view.set6b .pencils img.set6b.detail { top: 40px; left: 12px; opacity: 1;}
#content .lineup #view.set6b .pencils img.lpmini19 { top: 40px; left: 175px; opacity: 0;}
#content .lineup #view.set6b .pencils img.lpmini14 { top: 40px; left: 280px; opacity: 0;}
#content .lineup #view.set6b .pencils img.lpmini15 { top: 40px; left: 385px; opacity: 0;}
#content .lineup #view.set6b .pencils img.lpmini16 { top: 40px; left: 490px; opacity: 0;}
#content .lineup #view.set6b .pencils img.lpmini17 { top: 40px; left: 595px; opacity: 0;}
#content .lineup #view.set6b .pencils img.lpmini18 { top: 40px; left: 700px; opacity: 0;}

#content .lineup #view.set6b.move .pencils img.set6b.detail { opacity: 1; -webkit-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s;}
#content .lineup #view.set6b.move .pencils img.lpmini19 { top: 40px; left: 280px; opacity: 1; -webkit-transition-delay: 0.7s; -ms-transition-delay: 0.7s; transition-delay: 0.7s;}
#content .lineup #view.set6b.move .pencils img.lpmini14 { top: 40px; left: 385px; opacity: 1; -webkit-transition-delay: 1s; -ms-transition-delay: 1s; transition-delay: 1s;}
#content .lineup #view.set6b.move .pencils img.lpmini15 { top: 40px; left: 490px; opacity: 1; -webkit-transition-delay: 1.3s; -ms-transition-delay: 1.3s; transition-delay: 1.3s;}
#content .lineup #view.set6b.move .pencils img.lpmini16 { top: 40px; left: 595px; opacity: 1; -webkit-transition-delay: 1.6s; -ms-transition-delay: 1.6s; transition-delay: 1.6s;}
#content .lineup #view.set6b.move .pencils img.lpmini17 { top: 40px; left: 700px; opacity: 1; -webkit-transition-delay: 1.9s; -ms-transition-delay: 1.9s; transition-delay: 1.9s;}
#content .lineup #view.set6b.move .pencils img.lpmini18 { top: 40px; left: 805px; opacity: 1; -webkit-transition-delay: 2.2s; -ms-transition-delay: 2.2s; transition-delay: 2.2s;}



#content .lineup #view .detail{
  margin: 0;
  padding: 20px 0 15px;
  text-align: center;
}
#content .lineup #view .detail img{
  display: none;
}
#content .lineup #view.normal .detail .normal{
  display: inline;
}
#content .lineup #view.set36 .detail .set36{
  display: inline;
}
#content .lineup #view.set24 .detail .set24{
  display: inline;
}
#content .lineup #view.set12 .detail .set12{
  display: inline;
}
#content .lineup #view.set6a .detail .set6a{
  display: inline;
}
#content .lineup #view.set6b .detail .set6b{
  display: inline;
}

#content .bnr{
  min-width: 980px;
}

#content .bnr li{
  position: relative;
  height: 200px;
}

#content .bnr .comingsoon{
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/foot_comingsoon_bg.png);
}

#content .bnr .comingsoon p{
  padding: 86px 0 0;
  text-align: center;
}

#content .bnr .bnr1{
  background: url(../img/foot_bnr1_bg.png) repeat-x;
}

#content .bnr .bnr1 .detail{
  width: 549px;
  height: 200px;
  margin: 0 auto;
  padding: 60px 0 0 26px;
  background: url(../img/foot_bnr1_img.png) no-repeat bottom right;
}

#content .bnr .bnr1 .detail h3{
  margin: 0 0 0 23px;
}

#content .bnr .bnr1 .detail .btn{
  margin: 18px 0 0;
}

#content .bnr .bnr2{
  background: url(../img/foot_bnr2_bg.png) repeat center top;
}

#content .bnr .bnr2 .detail{
  height: 200px;
  background: url(../img/foot_bnr2_model.png) no-repeat bottom center;
  text-align: center;
}

#content .bnr .bnr2 .detail .btn{
  margin: 10px 0 0;
}

#content .bnr .bnr3{
  background: url(../img/foot_bnr3_bg.jpg) repeat-x;
}

#content .bnr .bnr3 .detail{
  width: 760px;
  height: 200px;
  margin: 0 auto;
  background: url(../img/foot_bnr3_img.png) no-repeat left 0 top 15px;
  padding: 43px 0 0 250px;
}

#content .bnr .bnr3 .detail h3{
  float: left;
}

#content .bnr .bnr3 .detail .qrcode{
  float: left;
  margin: -7px 0 0 60px;
}

#content .bnr .bnr4{
  background: url(../img/foot_bnr4_bg1.jpg) repeat-x;
}

#content .bnr .bnr4 .cover{
  height: 200px;
  background: url(../img/foot_bnr4_bg2.jpg) no-repeat top center;
}

#content .bnr .bnr4 .detail{
  width: 518px;
  margin: 0 auto;
  padding: 57px 0 0;
}

#content .bnr .bnr4 .detail h3{
  margin: 0 0 15px 14px;
}

#content .bnr .bnr5{
  background: url(../img/foot_bnr5_bg1.jpg) repeat-x;
}

#content .bnr .bnr5 .cover{
  height: 200px;
  background: url(../img/foot_bnr5_bg2.jpg) no-repeat top center;
}

#content .bnr .bnr5 .detail{
  width: 518px;
  margin: 0 auto;
  padding: 57px 0 0;
}

#content .bnr .bnr5 .detail h3{
  margin: 0 0 15px 14px;
}

#pagetop{
  padding: 40px 0 20px;
  text-align: right;
}

footer{
  padding: 27px 0 20px;
  background: url(../img/bg2.jpg);
  text-align: center;
}

footer .logo{
  margin: 5px 0 17px;
}



/* --------------------------------------------------
 * shoplist
 */

#content.shoplist {
  position: relative;
}

#content.shoplist .wrap {
  width: 960px;
}

#content.shoplist #main_content {
  margin: 0 0 -150px;
  padding: 0 0 150px;
  background: url(../img/shoplist/bg.jpg) repeat center 0;
}

#content.shoplist .top {
  position: relative;
  width: 100%;
  min-width: 920px;
  height: 280px;
  background: url(../img/shoplist/title_bg.png) repeat-x center 0;
  z-index: 1;
}

#content.shoplist .top .title {
  padding: 0;
  position: absolute;
  top: 61px;
  left: 60px;
}

#content.shoplist .top .image {
  position: absolute;
  top: 9px;
  right: 80px;
}

#content.shoplist .top .lead {
  position: absolute;
  top: 226px;
  left: 0;
  font-size: 12px;
  line-height: 16px;
  width: 530px;
}

#content.shoplist .group-list .group {
}

#content.shoplist .group-list .btn {
  width: 100%;
  min-width: 960px;
  height: 50px;
  margin: 0 0 30px;
}

#content.shoplist .group-list .group1 .btn { background: url(../img/shoplist/group1_bg.png) repeat-x center 0; }
#content.shoplist .group-list .group2 .btn { background: url(../img/shoplist/group2_bg.png) repeat-x center 0; }
#content.shoplist .group-list .group3 .btn { background: url(../img/shoplist/group3_bg.png) repeat-x center 0; }
#content.shoplist .group-list .group4 .btn { background: url(../img/shoplist/group4_bg.png) repeat-x center 0; }
#content.shoplist .group-list .group5 .btn { background: url(../img/shoplist/group5_bg.png) repeat-x center 0; }
#content.shoplist .group-list .group6 .btn { background: url(../img/shoplist/group6_bg.png) repeat-x center 0; }
#content.shoplist .group-list .group7 .btn { background: url(../img/shoplist/group7_bg.png) repeat-x center 0; }

#content.shoplist .group-list .btn.open .wrap {
  cursor: pointer;
}

#content.shoplist .group-list .btn.open .wrap:after {
  content: " ";
  display: block;
  position: absolute;
  top: 7px;
  right: 66px;
  width: 38px;
  height: 38px;
  background: url(../img/shoplist/close.png) no-repeat 0 0;
}

#content.shoplist .group-list .btns {
  margin: 0 0 30px;
}

#content.shoplist .group-list .btns ul {
  overflow: hidden;
}

#content.shoplist .group-list .btns ul li {
  float: left;
  padding: 0 28px 0 0;
  margin: 0 28px 0 0;
  line-height: 20px;
}

#content.shoplist .group-list .group1 .btns ul li { border-right: 1px solid #ff638f; }
#content.shoplist .group-list .group2 .btns ul li { border-right: 1px solid #ff9cb1; }
#content.shoplist .group-list .group3 .btns ul li { border-right: 1px solid #b59de7; }
#content.shoplist .group-list .group4 .btns ul li { border-right: 1px solid #f9a254; }
#content.shoplist .group-list .group5 .btns ul li { border-right: 1px solid #87d1f0; }
#content.shoplist .group-list .group6 .btns ul li { border-right: 1px solid #7dddb7; }
#content.shoplist .group-list .group7 .btns ul li { border-right: 1px solid #e9eb58; }

#content.shoplist .group-list .btns ul li:last-child {
  border-right: none;
}

#content.shoplist .group-list .btns ul li a {
  color: #000000;
  font-size: 18px;
  line-height: 20px;
}

#content.shoplist .group-list .group1 .btns ul li.on a { color: #ff638f; }
#content.shoplist .group-list .group2 .btns ul li.on a { color: #ff9cb1; }
#content.shoplist .group-list .group3 .btns ul li.on a { color: #b59de7; }
#content.shoplist .group-list .group4 .btns ul li.on a { color: #f9a254; }
#content.shoplist .group-list .group5 .btns ul li.on a { color: #87d1f0; }
#content.shoplist .group-list .group6 .btns ul li.on a { color: #7dddb7; }
#content.shoplist .group-list .group7 .btns ul li.on a { color: #e9eb58; }

#content.shoplist .group-list .box {
  position: absolute;
  left: -2000px;
  display: block;
  width: 960px;
}

#content.shoplist .group-list.loaded .box {
  position: relative;
  top: auto;
  left: auto;
}

#content.shoplist .group-list .box-wrap {
  position: relative;
  width: 960px;
  max-height: 400px;
  overflow: hidden;
  margin: 0 0 0 -50px;
}
#content.shoplist .group-list .group.on .box-wrap {
  margin: 0 0 30px -50px;
}

#content.shoplist .group-list .box ul {
  position: relative;
  width: 960px;
  max-height: 400px;
  display: block;
}

#content.shoplist .group-list.loaded .box ul {
  display: none;
}

#scrollbox {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  overflow: auto;
}

#content.shoplist .group-list .box ul li {
  clear: both;
  overflow: hidden;
  display: block;
  width: 960px;
  padding: 0 0 0 50px;
  line-height: 30px;
  background: url(../img/shoplist/list_bg.png) repeat 0 0;
}

#content.shoplist .group-list .box ul li:nth-child(2n) {
  background: none;
}

#content.shoplist .group-list .box ul li p {
  float: left;
  color: #000000;
  font-size: 14px;
}

#content.shoplist .group-list .box ul li p.name {
  width: 217px;
  margin: 0 3em 0 0;
}
#content.shoplist .group-list .box ul li p.place {
  width: 436px;
}
#content.shoplist .group-list .box ul li p.tel {
  width: 123px;
  margin: 0 0 0 3em;
}




/* 全体 */
.jspContainer {
  overflow: hidden;
  position: relative;
}

/* スクロールバーを除いたエリア */
.jspPane {
  position: absolute;
}

/* 縦スクロールバー */
.jspVerticalBar {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  max-height: 380px;
  background: none;
}

/* 横スクロールバー */
.jspHorizontalBar {
  display: none;
}

.jspCap {
  display: none;
}

.jspHorizontalBar .jspCap {
  float: left;
}

/* 背景 */
.jspTrack {
  background: none;
  position: relative;
  top: 0;
  left: -40px;
  width: 20px;
  margin: -5px 0 0 0;
  padding: 5px 0 0 0;
  border-radius: 20px;
  z-index: 1;
}

.jspTrack:after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 400px;
  background: url(../img/shoplist/scroll_bg.png) no-repeat 0 0;
  z-index: 1;
}

/* ノブ */

.jspDrag {
  position: relative;
  top: 0;
  left: 5px;
  width: 10px;
  margin: 10px 0 0;
  cursor: pointer;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 10;
}

.group1 .jspDrag { background: url(../img/shoplist/scroll_group1-top.png) no-repeat 0 top; }
.group1 .jspDrag:after {
  content: " ";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
  background: url(../img/shoplist/scroll_group1.png) no-repeat 0 bottom;
}
.group1 .jspDrag:before {
  content: " ";display: block;position: absolute;top: 15%;left: 0;width: 10px;height: 65%;
  background: #ff638f;
}
.group2 .jspDrag { background: url(../img/shoplist/scroll_group2-top.png) no-repeat 0 top; }
.group2 .jspDrag:after {
  content: " ";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
  background: url(../img/shoplist/scroll_group2.png) no-repeat 0 bottom;
}
.group2 .jspDrag:before {
  content: " ";display: block;position: absolute;top: 15%;left: 0;width: 10px;height: 65%;
  background: #ff9cb1;
}
.group3 .jspDrag { background: url(../img/shoplist/scroll_group3-top.png) no-repeat 0 top; }
.group3 .jspDrag:after {
  content: " ";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
  background: url(../img/shoplist/scroll_group3.png) no-repeat 0 bottom;
}
.group3 .jspDrag:before {
  content: " ";display: block;position: absolute;top: 15%;left: 0;width: 10px;height: 65%;
  background: #b59de7;
}
.group4 .jspDrag { background: url(../img/shoplist/scroll_group4-top.png) no-repeat 0 top; }
.group4 .jspDrag:after {
  content: " ";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
  background: url(../img/shoplist/scroll_group4.png) no-repeat 0 bottom;
}
.group4 .jspDrag:before {
  content: " ";display: block;position: absolute;top: 15%;left: 0;width: 10px;height: 65%;
  background: #f9a254;
}
.group5 .jspDrag { background: url(../img/shoplist/scroll_group5-top.png) no-repeat 0 top; }
.group5 .jspDrag:after {
  content: " ";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
  background: url(../img/shoplist/scroll_group5.png) no-repeat 0 bottom;
}
.group5 .jspDrag:before {
  content: " ";display: block;position: absolute;top: 15%;left: 0;width: 10px;height: 65%;
  background: #87d1f0;
}
.group6 .jspDrag { background: url(../img/shoplist/scroll_group6-top.png) no-repeat 0 top; }
.group6 .jspDrag:after {
  content: " ";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
  background: url(../img/shoplist/scroll_group6.png) no-repeat 0 bottom;
}
.group6 .jspDrag:before {
  content: " ";display: block;position: absolute;top: 15%;left: 0;width: 10px;height: 65%;
  background: #7dddb7;
}
.group7 .jspDrag { background: url(../img/shoplist/scroll_group7-top.png) no-repeat 0 top; }
.group7 .jspDrag:after {
  content: " ";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
  background: url(../img/shoplist/scroll_group7.png) no-repeat 0 bottom;
}
.group7 .jspDrag:before {
  content: " ";display: block;position: absolute;top: 15%;left: 0;width: 10px;height: 65%;
  background: #e9eb58;
}


.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}

.jspArrow {
  background: red;
  text-indent: -20000px;
  display: block;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.jspArrow.jspDisabled {
  cursor: default;
  background: #80808d;
}

.jspVerticalBar .jspArrow {
  height: 10px;
}

.jspHorizontalBar .jspArrow {
  width: 10px;
  float: left;
  height: 100%;
}

.jspVerticalBar .jspArrow:focus {
    outline: none;
}

.jspCorner {
  background: #eeeef4;
  float: left;
  height: 100%;
}