body { margin: 0 auto; position: relative; min-height: 100vh; }
img { vertical-align: top; }
.container { width: 100%; max-width: 768px; margin: 0 auto; padding: 0; position: relative; overflow: hidden; }
.container .ab { display: block; position: absolute; }
.container .ab.center { left: 50%; transform: translateX(-50%); }
.container .ab img { width: 100%; }
.container .ab iframe { width: 100%; }





#quick { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; width: 100%; transition: opacity .5s ease, visibility .5s ease; }
#quick.is-hide { opacity: 0; visibility: hidden; pointer-events: none; }
#quick ul { font-size: 0; text-align: center; }
#quick ul li { display: inline-block; margin-left: 5px; }
#quick ul li:first-child { margin: 0; }
#quick ul li a img { width: 250px; }

@media screen and (max-width:768px) {
    #quick ul li { margin-left: calc(5/768*100vw); }
    #quick ul li a img { width: calc(250/768*100vw); }
}





.con1 .ab.logo { top: 52px; left: 50px; width: 208px; z-index: 10; }
.con1 .ab.i1_1 { top: 141px; width: 433px; }
.con1 .ab.i1_2 { top: 202px; width: 665px; }
.con1 .ab.i1_3 { bottom: 0; width: 100%; }

@media screen and (max-width:768px) {
    .con1 .ab.logo { top: calc(52/768*100vw); left: calc(50/768*100vw); width: calc(208/768*100vw); }
    .con1 .ab.i1_1 { top: calc(141/768*100vw); width: calc(433/768*100vw); }
    .con1 .ab.i1_2 { top: calc(202/768*100vw); width: calc(665/768*100vw); }
}





.con2 .ab.i2_1 { top: 66px; left: 28px; width: 44px; }
.con2 .ab.i2_2 { top: 105px; width: 657px; }
.con2 .ab.i2_3 { top: 210px; width: 129px; }
.con2 .ab.i2_4 { top: 210px; left: 675px; width: 44px; }
.con2 .ab.video { top: 278px; width: 668px; }
.con2 .ab.video iframe { height: 376px; }
.con2 .ab.i2_5 { top: 684px; width: 596px; }

@media screen and (max-width:768px) {
    .con2 .ab.i2_1 { top: calc(66/768*100vw); left: calc(28/768*100vw); width: calc(44/768*100vw); }
    .con2 .ab.i2_2 { top: calc(105/768*100vw); width: calc(657/768*100vw); }
    .con2 .ab.i2_3 { top: calc(210/768*100vw); width: calc(129/768*100vw); }
    .con2 .ab.i2_4 { top: calc(210/768*100vw); left: calc(675/768*100vw); width: calc(44/768*100vw); }
    .con2 .ab.video { top: calc(278/768*100vw); width: calc(668/768*100vw); }
    .con2 .ab.video iframe { height: calc(376/768*100vw); }
    .con2 .ab.i2_5 { top: calc(684/768*100vw); width: calc(596/768*100vw); }
}





.con3 .ab.i3_1 { top: 68px; width: 620px; }
.con3 .ab.i3_2 { top: 438px; width: 528px; }
.con3 .ab.i3_3 { top: 613px; width: 250px; }
.con3 .ab.i3_4 { top: 826px; width: 629px; }
.con3 .ab.i3_5 { top: 966px; width: 465px; }

@media screen and (max-width:768px) {
    .con3 .ab.i3_1 { top: calc(68/768*100vw); width: calc(620/768*100vw); }
    .con3 .ab.i3_2 { top: calc(438/768*100vw); width: calc(528/768*100vw); }
    .con3 .ab.i3_3 { top: calc(613/768*100vw); width: calc(250/768*100vw); }
    .con3 .ab.i3_4 { top: calc(826/768*100vw); width: calc(629/768*100vw); }
    .con3 .ab.i3_5 { top: calc(966/768*100vw); width: calc(465/768*100vw); }
}





.con4 .ab.i4_1 { top: 130px; width: 605px; }
.con4 .ab.i4_2 { top: 211px; width: 343px; }
.con4 .ab.i4_3 { top: 336px; width: 424px; }
.con4 .ab.i4_4 { top: 375px; width: 79px; }
.con4 .ab.i4_5 { top: 434px; width: 478px; }
.con4 .ab.i4_6 { top: 972px; width: 310px; left: 50px; }
.con4 .ab.i4_7 { top: 1292px; width: 294px; left: 69px; }
.con4 .ab.i4_8 { top: 1050px; width: 203px; left: 377px; }
.con4 .ab.i4_9 { top: 1358px; width: 310px; left: 359px; }
.con4 .ab.i4_10 { top: 1683px; width: 416px; left: 302px; }
.con4 .ab.i4_11 { top: 1479px; width: 172px; left: 144px; }
.con4 .ab.i4_12 { top: 1749px; width: 310px; left: 67px; }
.con4 .ab.i4_13 { top: 2074px; width: 298px; left: 66px; }

@media screen and (max-width:768px) {
    .con4 .ab.i4_1 { top: calc(130/768*100vw); width: calc(605/768*100vw); }
    .con4 .ab.i4_2 { top: calc(211/768*100vw); width: calc(343/768*100vw); }
    .con4 .ab.i4_3 { top: calc(336/768*100vw); width: calc(424/768*100vw); }
    .con4 .ab.i4_4 { top: calc(375/768*100vw); width: calc(79/768*100vw); }
    .con4 .ab.i4_5 { top: calc(434/768*100vw); width: calc(478/768*100vw); }
    .con4 .ab.i4_6 { top: calc(972/768*100vw); width: calc(310/768*100vw); left: calc(50/768*100vw); }
    .con4 .ab.i4_7 { top: calc(1292/768*100vw); width: calc(294/768*100vw); left: calc(69/768*100vw); }
    .con4 .ab.i4_8 { top: calc(1050/768*100vw); width: calc(203/768*100vw); left: calc(377/768*100vw); }
    .con4 .ab.i4_9 { top: calc(1358/768*100vw); width: calc(310/768*100vw); left: calc(359/768*100vw); }
    .con4 .ab.i4_10 { top: calc(1683/768*100vw); width: calc(416/768*100vw); left: calc(302/768*100vw); }
    .con4 .ab.i4_11 { top: calc(1479/768*100vw); width: calc(172/768*100vw); left: calc(144/768*100vw); }
    .con4 .ab.i4_12 { top: calc(1749/768*100vw); width: calc(310/768*100vw); left: calc(67/768*100vw); }
    .con4 .ab.i4_13 { top: calc(2074/768*100vw); width: calc(298/768*100vw); left: calc(66/768*100vw); }
}





.con5 .container > div { position: relative; }
.con5 .container > div.hide { display: none; }
.con5 .container > div .arrow { position: absolute; left: 162px; bottom: 6px; width: 28px; display: none; }
.con5 .ab.i5_1 { top: 80px; width: 220px; left: 50px; }
.con5 .ab.i5_2 { top: 98px; width: 386px; left: 295px; }
.con5 .ab.i5_4 { top: 80px; width: 220px; left: 50px; }
.con5 .ab.i5_5 { top: 98px; width: 419px; left: 295px; }

@media screen and (max-width:768px) {
    .con5 .container > div .arrow { left: calc(162/768*100vw); bottom: calc(6/768*100vw); width: calc(28/768*100vw); }
    .con5 .ab.i5_1 { top: calc(80/768*100vw); width: calc(220/768*100vw); left: calc(50/768*100vw); }
    .con5 .ab.i5_2 { top: calc(98/768*100vw); width: calc(386/768*100vw); left: calc(295/768*100vw); }
    .con5 .ab.i5_4 { top: calc(80/768*100vw); width: calc(220/768*100vw); left: calc(50/768*100vw); }
    .con5 .ab.i5_5 { top: calc(98/768*100vw); width: calc(419/768*100vw); left: calc(295/768*100vw); }
}





.con6 .ab.i6_1 { top: 609px; width: 607px; }

@media screen and (max-width:768px) {
    .con6 .ab.i6_1 { top: calc(609/768*100vw); width: calc(607/768*100vw); }
}





.con7 .ab.i7_1 { top: 80px; width: 668px; }
.con7 .ab.i7_2 { top: 495px; width: 465px; }
.con7 .ab.i7_3 { top: 1020px; width: 324px; left: 50px; }
.con7 .ab.i7_4 { top: 1020px; width: 324px; left: 394px; }
.con7 .ab.i7_5 { top: 1140px; width: 222px; left: 99px; }
.con7 .ab.i7_6 { top: 1140px; width: 218px; left: 445px; }
.con7 .ab.i7_7 { top: 1240px; width: 397px; }
.con7 .ab.i7_8 { top: 1325px; width: 674px; }
.con7 .ab.i7_9 { top: 1445px; width: 670px; }

@media screen and (max-width:768px) {
    .con7 .ab.i7_1 { top: calc(80/768*100vw); width: calc(668/768*100vw); }
    .con7 .ab.i7_2 { top: calc(495/768*100vw); width: calc(465/768*100vw); }
    .con7 .ab.i7_3 { top: calc(1020/768*100vw); width: calc(324/768*100vw); left: calc(50/768*100vw); }
    .con7 .ab.i7_4 { top: calc(1020/768*100vw); width: calc(324/768*100vw); left: calc(394/768*100vw); }
    .con7 .ab.i7_5 { top: calc(1140/768*100vw); width: calc(222/768*100vw); left: calc(99/768*100vw); }
    .con7 .ab.i7_6 { top: calc(1140/768*100vw); width: calc(218/768*100vw); left: calc(445/768*100vw); }
    .con7 .ab.i7_7 { top: calc(1240/768*100vw); width: calc(397/768*100vw); }
    .con7 .ab.i7_8 { top: calc(1325/768*100vw); width: calc(674/768*100vw); }
    .con7 .ab.i7_9 { top: calc(1445/768*100vw); width: calc(670/768*100vw); }
}