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

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

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

.vheadr {
  width: 1.15rem;
  right: .18rem;
  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.1rem;
  top: 2.58rem;
  background-image: url(../lib/app/img/koten/vheadr-3.png);
}
.vheadr[data-num="4"] {
  height: 1.14rem;
  top: 3.68rem;
  background-image: url(../lib/app/img/koten/vheadr-4.png);
}
.vheadr[data-num="5"] {
  width: .57rem;
  height: calc(1.14 * 6rem + .02rem);
  top: 4.82rem;
  border-left-width: 0;
  border-top-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.14rem;
  right: .75rem;
  border-right-width: .02rem;
}
.vheadr[data-num="6"] {
  height: calc(1.14rem + .02rem);
  top: 4.82rem;
  border-top-width: .04rem;
  background-image: url(../lib/app/img/koten/vheadr-6.png);
}
.vheadr[data-num="7"] {
  top: calc(4.82rem + 1.14rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadr-7.png);
}
.vheadr[data-num="8"] {
  top: calc(4.82rem + 1.14 * 2rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadr-8.png);
}
.vheadr[data-num="9"] {
  top: calc(4.82rem + 1.14 * 3rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadr-9.png);
}
.vheadr[data-num="10"] {
  top: calc(4.82rem + 1.14 * 4rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadr-10.png);
}
.vheadr[data-num="11"] {
  top: calc(4.82rem + 1.14 * 5rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadr-11.png);
}
.vheadr[data-num="12"] {
  height: 2.63rem;
  top: calc(4.82rem + 1.14 * 6rem + .02rem);
  background-image: url(img/vheadr-12.png);
}
.vheadr[data-num="13"] {
  height: 2.48rem;
  top: calc(4.82rem + 1.14 * 6rem + 2.63rem + .02rem);
  border-bottom-width: .04rem;
  background-image: url(img/vheadr-13.png);
}

.vheadl {
  width: .97rem;
  height: 1.14rem;
  border-left-width: .04rem;
  border-bottom-width: 0;
}

.vheadl[data-num="1"] {
  height: 4.42rem;
  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.14rem + .02rem);
  top: calc(3.68rem + 1.14rem);
  border-top-width: .04rem;
  background-image: url(../lib/app/img/koten/vheadl-2.png);
}
.vheadl[data-num="3"] {
  top: calc(3.68rem + 1.14 * 2rem + .02rem);
  background-image: url(img/vheadl-3.png);
}
.vheadl[data-num="4"] {
  top: calc(3.68rem + 1.14 * 3rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadl-4.png);
}
.vheadl[data-num="5"] {
  top: calc(3.68rem + 1.14 * 4rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadl-5.png);
}
.vheadl[data-num="6"] {
  top: calc(3.68rem + 1.14 * 5rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadl-6.png);
}
.vheadl[data-num="7"] {
  top: calc(3.68rem + 1.14 * 6rem + .02rem);
  background-image: url(../lib/app/img/koten/vheadl-7.png);
}
.vheadl[data-num="8"] {
  height: calc(2.63rem + 2.48rem);
  top: calc(3.68rem + 1.14 * 7rem + .02rem);
  border-width: .04rem .04rem 0 0;
}

.body1,
.body2,
.body3,
.body4,
.body5 {
  height: 1.14rem;
  border-left-width: 0;
  border-bottom-width: 0;
}
.body1 { right: 1.33rem; }
.body2 { right: calc(1.33rem + 1.26rem); }
.body3 { right: calc(1.33rem + 1.26 * 2rem); }
.body4 { right: calc(1.33rem + 1.26 * 3rem); }
.body5 { right: calc(1.33rem + 1.26 * 4rem); }
.body1[data-num="1"],
.body2[data-num="1"],
.body3[data-num="1"],
.body4[data-num="1"],
.body5[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"],
.body3[data-num="2"],
.body4[data-num="2"],
.body5[data-num="2"] { top: 3.68rem; }
.body1[data-num="3"],
.body2[data-num="3"],
.body3[data-num="3"],
.body4[data-num="3"],
.body5[data-num="3"] {
  height: calc(1.14rem + .02rem);
  top: calc(3.68rem + 1.14rem);
  border-top-width: .04rem;
}
.body1[data-num="4"],
.body2[data-num="4"],
.body3[data-num="4"],
.body4[data-num="4"],
.body5[data-num="4"] { top: calc(3.68rem + 1.14rem * 2 + .02rem); }
.body1[data-num="5"],
.body2[data-num="5"],
.body3[data-num="5"],
.body4[data-num="5"],
.body5[data-num="5"] { top: calc(3.68rem + 1.14rem * 3 + .02rem); }
.body1[data-num="6"],
.body2[data-num="6"],
.body3[data-num="6"],
.body4[data-num="6"],
.body5[data-num="6"] { top: calc(3.68rem + 1.14rem * 4 + .02rem); }
.body1[data-num="7"],
.body2[data-num="7"],
.body3[data-num="7"],
.body4[data-num="7"],
.body5[data-num="7"] { top: calc(3.68rem + 1.14rem * 5 + .02rem); }
.body1[data-num="8"],
.body2[data-num="8"],
.body3[data-num="8"],
.body4[data-num="8"],
.body5[data-num="8"] { top: calc(3.68rem + 1.14rem * 6 + .02rem); }
.body1[data-num="9"],
.body2[data-num="9"],
.body3[data-num="9"],
.body4[data-num="9"],
.body5[data-num="9"] {
  height: 2.63rem;
  top: calc(3.68rem + 1.14 * 7rem + .02rem);
}
.body1[data-num="10"],
.body2[data-num="10"],
.body3[data-num="10"],
.body4[data-num="10"],
.body5[data-num="10"] {
  height: 2.48rem;
  top: calc(3.68rem + 1.14 * 7rem + 2.63rem + .02rem);
  border-bottom-width: .04rem;
}

.mask1 { right: 1.33rem; }
.mask2 { right: calc(1.33rem + 1.26rem); }
.mask3 { right: calc(1.33rem + 1.26 * 2rem); }
.mask4 { right: calc(1.33rem + 1.26 * 3rem); }
.mask5 { right: calc(1.33rem + 1.26 * 4rem); }
.mask[data-num="1"] {
  height: 2.14rem;
  top: .4rem;
  border-top-width: .04rem;
  border-bottom-width: .02rem;
}
.mask[data-num="2"],
.mask[data-num="3"],
.mask[data-num="4"],
.mask[data-num="5"],
.mask[data-num="6"],
.mask[data-num="7"],
.mask[data-num="8"] { height: 1.14rem; }
.mask[data-num="2"] { top: 3.68rem; }
.mask[data-num="3"] {
  height: calc(1.14rem + .02rem);
  top: calc(3.68rem + 1.14rem);
  border-top-width: .04rem;
}
.mask[data-num="4"] { top: calc(3.68rem + 1.14 * 2rem + .02rem); }
.mask[data-num="5"] { top: calc(3.68rem + 1.14 * 3rem + .02rem); }
.mask[data-num="6"] { top: calc(3.68rem + 1.14 * 4rem + .02rem); }
.mask[data-num="7"] { top: calc(3.68rem + 1.14 * 5rem + .02rem); }
.mask[data-num="8"] { top: calc(3.68rem + 1.14 * 6rem + .02rem); }
.mask[data-num="9"] {
  height: 2.63rem;
  top: calc(3.68rem + 1.14 * 7rem + .02rem);
  background-image: url(img/mask-9.png);
}
.mask[data-num="10"] {
  height: 2.48rem;
  top: calc(3.68rem + 1.14 * 7rem + 2.63rem + .02rem);
  border-bottom-width: .04rem;
}

.button {
  height: 1.1rem;
  top: 2.58rem;
  border-left-width: 0;
  border-bottom-width: 0;
  background-size: cover;
}
.row1 {
  right: 1.33rem;
  border-right-width: .02rem;
}
.row2 { right: calc(1.33rem + 1.26rem); }
.row3 { right: calc(1.33rem + 1.26 * 2rem); }
.row4 { right: calc(1.33rem + 1.26 * 3rem); }
.row5 { right: calc(1.33rem + 1.26 * 4rem); }

[data-tab="1"] .vheadl { right: calc(1.33rem + 1.26 * 5rem); }
[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"] .body1[data-num="9"] { background-image: url(img/1-body1-9.png); }
[data-tab="1"] .body1[data-num="10"] { background-image: url(img/1-body1-10.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); }
[data-tab="1"] .body2[data-num="9"] { background-image: url(img/1-body2-9.png); }
[data-tab="1"] .body2[data-num="10"] { background-image: url(img/1-body2-10.png); }
[data-tab="1"] .body3[data-num="1"] { background-image: url(img/1-body3-1.png); }
[data-tab="1"] .body3[data-num="2"] { background-image: url(img/1-body3-2.png); }
[data-tab="1"] .body3[data-num="3"] { background-image: url(img/1-body3-3.png); }
[data-tab="1"] .body3[data-num="4"] { background-image: url(img/1-body3-4.png); }
[data-tab="1"] .body3[data-num="5"] { background-image: url(img/1-body3-5.png); }
[data-tab="1"] .body3[data-num="6"] { background-image: url(img/1-body3-6.png); }
[data-tab="1"] .body3[data-num="7"] { background-image: url(img/1-body3-7.png); }
[data-tab="1"] .body3[data-num="8"] { background-image: url(img/1-body3-8.png); }
[data-tab="1"] .body3[data-num="9"] { background-image: url(img/1-body3-9.png); }
[data-tab="1"] .body3[data-num="10"] { background-image: url(img/1-body3-10.png); }
[data-tab="1"] .body4[data-num="1"] { background-image: url(img/1-body4-1.png); }
[data-tab="1"] .body4[data-num="2"] { background-image: url(img/1-body4-2.png); }
[data-tab="1"] .body4[data-num="3"] { background-image: url(img/1-body4-3.png); }
[data-tab="1"] .body4[data-num="4"] { background-image: url(img/1-body4-4.png); }
[data-tab="1"] .body4[data-num="5"] { background-image: url(img/1-body4-5.png); }
[data-tab="1"] .body4[data-num="6"] { background-image: url(img/1-body4-6.png); }
[data-tab="1"] .body4[data-num="7"] { background-image: url(img/1-body4-7.png); }
[data-tab="1"] .body4[data-num="8"] { background-image: url(img/1-body4-8.png); }
[data-tab="1"] .body4[data-num="9"] { background-image: url(img/1-body4-9.png); }
[data-tab="1"] .body4[data-num="10"] { background-image: url(img/1-body4-10.png); }
[data-tab="1"] .body5[data-num="1"] { background-image: url(img/1-body5-1.png); }
[data-tab="1"] .body5[data-num="2"] { background-image: url(img/1-body5-2.png); }
[data-tab="1"] .body5[data-num="3"] { background-image: url(img/1-body5-3.png); }
[data-tab="1"] .body5[data-num="4"] { background-image: url(img/1-body5-4.png); }
[data-tab="1"] .body5[data-num="5"] { background-image: url(img/1-body5-5.png); }
[data-tab="1"] .body5[data-num="6"] { background-image: url(img/1-body5-6.png); }
[data-tab="1"] .body5[data-num="7"] { background-image: url(img/1-body5-7.png); }
[data-tab="1"] .body5[data-num="8"] { background-image: url(img/1-body5-8.png); }
[data-tab="1"] .body5[data-num="9"] { background-image: url(img/1-body5-9.png); }
[data-tab="1"] .body5[data-num="10"] { background-image: url(img/1-body5-10.png); }
[data-tab="1"] .row1 { background-image: url(img/1-button-row1.png); }
[data-tab="1"] .row2 { background-image: url(img/1-button-row2.png); }
[data-tab="1"] .row3 { background-image: url(img/1-button-row3.png); }
[data-tab="1"] .row4 { background-image: url(img/1-button-row4.png); }
[data-tab="1"] .row5 { background-image: url(img/1-button-row5.png); }

[data-tab="2"] .vheadl { right: calc(1.33rem + 1.26 * 4rem); }
[data-tab="2"] .body1[data-num="1"] { background-image: url(img/2-body1-1.png); }
[data-tab="2"] .body1[data-num="2"] { background-image: url(img/2-body1-2.png); }
[data-tab="2"] .body1[data-num="3"] { background-image: url(img/2-body1-3.png); }
[data-tab="2"] .body1[data-num="4"] { background-image: url(img/2-body1-4.png); }
[data-tab="2"] .body1[data-num="5"] { background-image: url(img/2-body1-5.png); }
[data-tab="2"] .body1[data-num="6"] { background-image: url(img/2-body1-6.png); }
[data-tab="2"] .body1[data-num="7"] { background-image: url(img/2-body1-7.png); }
[data-tab="2"] .body1[data-num="8"] { background-image: url(img/2-body1-8.png); }
[data-tab="2"] .body1[data-num="9"] { background-image: url(img/2-body1-9.png); }
[data-tab="2"] .body1[data-num="10"] { background-image: url(img/2-body1-10.png); }
[data-tab="2"] .body2[data-num="1"] { background-image: url(img/2-body2-1.png); }
[data-tab="2"] .body2[data-num="2"] { background-image: url(img/2-body2-2.png); }
[data-tab="2"] .body2[data-num="3"] { background-image: url(img/2-body2-3.png); }
[data-tab="2"] .body2[data-num="4"] { background-image: url(img/2-body2-4.png); }
[data-tab="2"] .body2[data-num="5"] { background-image: url(img/2-body2-5.png); }
[data-tab="2"] .body2[data-num="6"] { background-image: url(img/2-body2-6.png); }
[data-tab="2"] .body2[data-num="7"] { background-image: url(img/2-body2-7.png); }
[data-tab="2"] .body2[data-num="8"] { background-image: url(img/2-body2-8.png); }
[data-tab="2"] .body2[data-num="9"] { background-image: url(img/2-body2-9.png); }
[data-tab="2"] .body2[data-num="10"] { background-image: url(img/2-body2-10.png); }
[data-tab="2"] .body3[data-num="1"] { background-image: url(img/2-body3-1.png); }
[data-tab="2"] .body3[data-num="2"] { background-image: url(img/2-body3-2.png); }
[data-tab="2"] .body3[data-num="3"] { background-image: url(img/2-body3-3.png); }
[data-tab="2"] .body3[data-num="4"] { background-image: url(img/2-body3-4.png); }
[data-tab="2"] .body3[data-num="5"] { background-image: url(img/2-body3-5.png); }
[data-tab="2"] .body3[data-num="6"] { background-image: url(img/2-body3-6.png); }
[data-tab="2"] .body3[data-num="7"] { background-image: url(img/2-body3-7.png); }
[data-tab="2"] .body3[data-num="8"] { background-image: url(img/2-body3-8.png); }
[data-tab="2"] .body3[data-num="9"] { background-image: url(img/2-body3-9.png); }
[data-tab="2"] .body3[data-num="10"] { background-image: url(img/2-body3-10.png); }
[data-tab="2"] .body4[data-num="1"] { background-image: url(img/2-body4-1.png); }
[data-tab="2"] .body4[data-num="2"] { background-image: url(img/2-body4-2.png); }
[data-tab="2"] .body4[data-num="3"] { background-image: url(img/2-body4-3.png); }
[data-tab="2"] .body4[data-num="4"] { background-image: url(img/2-body4-4.png); }
[data-tab="2"] .body4[data-num="5"] { background-image: url(img/2-body4-5.png); }
[data-tab="2"] .body4[data-num="6"] { background-image: url(img/2-body4-6.png); }
[data-tab="2"] .body4[data-num="7"] { background-image: url(img/2-body4-7.png); }
[data-tab="2"] .body4[data-num="8"] { background-image: url(img/2-body4-8.png); }
[data-tab="2"] .body4[data-num="9"] { background-image: url(img/2-body4-9.png); }
[data-tab="2"] .body4[data-num="10"] { background-image: url(img/2-body4-10.png); }
[data-tab="2"] .row1 { background-image: url(img/2-button-row1.png); }
[data-tab="2"] .row2 { background-image: url(img/2-button-row2.png); }
[data-tab="2"] .row3 { background-image: url(img/2-button-row3.png); }
[data-tab="2"] .row4 { background-image: url(img/2-button-row4.png); }
[data-tab="2"] .row5 { background-image: url(img/2-button-row5.png); }