.toolbar .title { background-image: url(img/title.png); }

.static,
.button,
.mask {
  width: 1.34rem;
  border: .02rem solid #7e5c5e;
  background: center / 100% auto no-repeat;
}

.mask {
  height: 1.78rem;
  background-color: #eaf6fb;
  border-left-width: 0;
  border-bottom-width: 0;
}

.vheadr {
  width: 1.15rem;
  right: 2rem;
  border-right-width: .04rem;
  border-bottom-width: 0;
  background-color: #fff0a8;
}
.vheadr[data-num="1"] {
  height: 2.13rem;
  top: .4rem;
  border-top-width: .04rem;
  border-bottom-width: .02rem;
  background-image: url(../lib/app/img/koten/vheadr-1.png);
}
.vheadr[data-num="2"] {
  height: .06rem;
  top: 2.52rem;
  border-top-width: 0;
  border-left-width: 0;
  background: transparent;
}
.vheadr[data-num="3"] {
  height: 1.74rem;
  top: 2.58rem;
  background-image: url(../lib/app/img/koten/vheadr-3.png);
}
.vheadr[data-num="4"] {
  height: 1.78rem;
  top: 4.32rem;
  background-image: url(../lib/app/img/koten/vheadr-4.png);
}
.vheadr[data-num="5"] {
  width: .57rem;
  height: calc(1.78 * 6rem + .02rem);
  top: 6.1rem;
  border-left-width: 0;
  border-top-width: .04rem;
  border-bottom-width: .04rem;
  background-color: #fff9c5;
  background-image: url(../lib/app/img/koten/vheadr-5.png);
}
.vheadr[data-num="6"],
.vheadr[data-num="7"],
.vheadr[data-num="8"],
.vheadr[data-num="9"],
.vheadr[data-num="10"],
.vheadr[data-num="11"] {
  width: .58rem;
  height: 1.78rem;
  right: 2.57rem;
  border-right-width: .02rem;
}
.vheadr[data-num="6"] {
  height: calc(1.78rem + .02rem);
  top: 6.1rem;
  border-top-width: .04rem;
  background-image: url(../lib/app/img/koten/vheadr-6.png);
}
.vheadr[data-num="7"] {
  top: calc(6.1rem + 1.78rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadr-7.png);
}
.vheadr[data-num="8"] {
  top: calc(6.1rem + 1.78 * 2rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadr-8.png);
}
.vheadr[data-num="9"] {
  top: calc(6.1rem + 1.78 * 3rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadr-9.png);
}
.vheadr[data-num="10"] {
  top: calc(6.1rem + 1.78 * 4rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadr-10.png);
}
.vheadr[data-num="11"] {
  top: calc(6.1rem + 1.78 * 5rem + .02rem);
  border-bottom-width: .04rem;
  background-image: url(../lib/app/img/koten/vheadr-11.png);
}

.vheadl {
  width: .97rem;
  height: 1.78rem;
  right: calc(3.15rem + 1.34 * 2rem);
  border-left-width: .04rem;
  border-bottom-width: 0;
}
.vheadl[data-num="1"] {
  height: 5.7rem;
  top: .4rem;
  border-top-width: .04rem;
  background-color: #f6ebec;
  background-image: url(../lib/app/img/koten/vheadl-1.png);
}
.vheadl[data-num="2"] {
  height: calc(1.78rem + .02rem);
  top: 6.1rem;
  border-top-width: .04rem;
  background-image: url(../lib/app/img/koten/vheadl-2.png);
}
.vheadl[data-num="3"] {
  top: calc(6.1rem + 1.78rem + .02rem);
  background-image: url(img/vheadl-3.png);
}
.vheadl[data-num="4"] {
  top: calc(6.1rem + 1.78 * 2rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadl-4.png);
}
.vheadl[data-num="5"] {
  top: calc(6.1rem + 1.78 * 3rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadl-5.png);
}
.vheadl[data-num="6"] {
  top: calc(6.1rem + 1.78 * 4rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadl-6.png);
}
.vheadl[data-num="7"] {
  top: calc(6.1rem + 1.78 * 5rem + .02rem);
  border-bottom-width: .04rem;
  background-image: url(../lib/app/img/koten/vheadl-7.png);
}

.body1,
.body2 {
  height: 1.78rem;
  border-left-width: 0; 
  border-bottom-width: 0;
}
.body1 { right: 3.15rem; }
.body2 { right: calc(3.15rem + 1.34rem); }
.body1[data-num="1"],
.body2[data-num="1"] {
  height: 2.13rem;
  top: .4rem;
  border-top-width: .04rem;
  border-bottom-width: .02rem;
  background-color: #f3d8d9;
}
.body1[data-num="2"],
.body2[data-num="2"] {
  height: 1.78rem;
  top: 4.32rem;
}
.body1[data-num="3"],
.body2[data-num="3"] {
  height: calc(1.78rem + .02rem);
  top: 6.1rem;
  border-top-width: .04rem;
}
.body1[data-num="4"],
.body2[data-num="4"] { top: calc(6.1rem + 1.78rem + .02rem); }
.body1[data-num="5"],
.body2[data-num="5"] { top: calc(6.1rem + 1.78rem * 2 + .02rem); }
.body1[data-num="6"],
.body2[data-num="6"] { top: calc(6.1rem + 1.78rem * 3 + .02rem); }
.body1[data-num="7"],
.body2[data-num="7"] { top: calc(6.1rem + 1.78rem * 4 + .02rem); }
.body1[data-num="8"],
.body2[data-num="8"] {
  top: calc(6.1rem + 1.78rem * 5 + .02rem);
  border-bottom-width: .04rem;
}

.mask1 { right: 3.15rem; }
.mask2 { right: calc(3.15rem + 1.34rem); }
.mask[data-num="1"] {
  height: 2.13rem;
  top: .4rem;
  border-top-width: .04rem;
  border-bottom-width: .02rem;
}
.mask[data-num="2"] {
  height: 1.78rem;
  top: 4.32rem; 
}
.mask[data-num="3"] {
  height: calc(1.78rem + .02rem);
  top: 6.1rem; 
  border-top-width: .04rem;
}
.mask[data-num="4"] { top: calc(6.1rem + 1.78rem + .02rem); }
.mask[data-num="5"] { top: calc(6.1rem + 1.78 * 2rem + .02rem); }
.mask[data-num="6"] { top: calc(6.1rem + 1.78 * 3rem + .02rem); }
.mask[data-num="7"] { top: calc(6.1rem + 1.78 * 4rem + .02rem); }
.mask[data-num="8"] {
  top: calc(6.1rem + 1.78 * 5rem + .02rem);
  border-bottom-width: .04rem;
}

.button {
  height: 1.74rem;
  top: 2.58rem;
  border-left-width: 0;
  border-bottom-width: 0;
  background-size: cover;
}
.row1 {
  right: 3.15rem;
  border-right-width: .02rem;
  background-image: url(img/button-row1.png);
}
.row2 {
  right: calc(3.15rem + 1.34rem);
  background-image: url(img/button-row2.png);
}

[data-tab="1"] .body1[data-num="1"] { background-image: url(img/1-body1-1.png); }
[data-tab="1"] .body1[data-num="2"] { background-image: url(img/1-body1-2.png); }
[data-tab="1"] .body1[data-num="3"] { background-image: url(img/1-body1-3.png); }
[data-tab="1"] .body1[data-num="4"] { background-image: url(img/1-body1-4.png); }
[data-tab="1"] .body1[data-num="5"] { background-image: url(img/1-body1-5.png); }
[data-tab="1"] .body1[data-num="6"] { background-image: url(img/1-body1-6.png); }
[data-tab="1"] .body1[data-num="7"] { background-image: url(img/1-body1-7.png); }
[data-tab="1"] .body1[data-num="8"] { background-image: url(img/1-body1-8.png); }
[data-tab="1"] .body2[data-num="1"] { background-image: url(img/1-body2-1.png); }
[data-tab="1"] .body2[data-num="2"] { background-image: url(img/1-body2-2.png); }
[data-tab="1"] .body2[data-num="3"] { background-image: url(img/1-body2-3.png); }
[data-tab="1"] .body2[data-num="4"] { background-image: url(img/1-body2-4.png); }
[data-tab="1"] .body2[data-num="5"] { background-image: url(img/1-body2-5.png); }
[data-tab="1"] .body2[data-num="6"] { background-image: url(img/1-body2-6.png); }
[data-tab="1"] .body2[data-num="7"] { background-image: url(img/1-body2-7.png); }
[data-tab="1"] .body2[data-num="8"] { background-image: url(img/1-body2-8.png); }