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%; }





.con1 .ab.i1_1 { top: 74px; left: 67px; width: 208px; z-index: 10; }
.con1 .ab.i1_2 { top: 163px; width: 425px; }
.con1 .ab.i1_3 { top: 226px; width: 517px; }
.con1 .ab.i1_4 { top: 37px; width: 694px; }

@media screen and (max-width:768px) {
    .con1 .ab.i1_1 { top: calc(74/768*100vw); left: calc(67 /768*100vw); width: calc(208/768*100vw); } 
    .con1 .ab.i1_2 { top: calc(163/768*100vw); width: calc(425/768*100vw); } 
    .con1 .ab.i1_3 { top: calc(226/768*100vw); width: calc(517/768*100vw); } 
    .con1 .ab.i1_4 { top: calc(37/768*100vw); width: calc(694/768*100vw); } 
}





.con2 .ab.i2_1 { top: 157px; width: 624px; }
.con2 .ab.i2_2 { top: 364px; width: 733px; }
.con2 .ab.i2_3 { top: 667px; width: 424px; }
.con2 .ab.video { top: 811px; width: 694px; }
.con2 .ab.video iframe { height: 438px }
.con2 .ab.i2_4 { top: 1297px; width: 511px; }
.con2 .ab.i2_5 { top: 1413px; width: 634px; }

@media screen and (max-width:768px) {
    .con2 .ab.i2_1 { top: calc(157/768*100vw); width: calc(624/768*100vw); }
    .con2 .ab.i2_2 { top: calc(364/768*100vw); width: calc(733/768*100vw); }
    .con2 .ab.i2_3 { top: calc(667/768*100vw); width: calc(424/768*100vw); }
    .con2 .ab.video { top: calc(811/768*100vw); width: calc(694/768*100vw); }
    .con2 .ab.video iframe { height: calc(438/768*100vw) }
    .con2 .ab.i2_4 { top: calc(1297/768*100vw); width: calc(511/768*100vw); }
    .con2 .ab.i2_5 { top: calc(1413/768*100vw); width: calc(634/768*100vw); }
}





.con3 .ab.i3_1 { top: 88px; width: 252px; }
.con3 .ab.i3_2 { top: 163px; width: 486px; }
.con3 .ab.i3_3 { top: 345px; width: 10px; }
.con3 .ab.i3_4 { top: 437px; width: 592px; }
.con3 .ab.i3_5 { top: 611px; width: 312px; }
.con3 .ab.i3_6 { top: 715px; width: 599px; }
.con3 .ab.i3_7 { top: 994px; width: 696px; }
.con3 .ab.i3_8 { top: 1182px; width: 459px; }
.con3 .ab.i3_9 { top: 1270px; width: 642px; }
.con3 .ab.i3_t { top: 491px; font-size: 70px; color: #35312c; letter-spacing: -3px; white-space: nowrap; font-family: 'Paperlogy'; font-weight: 600; }
.con3 .ab.i3_t span { color: #ff7132; font-weight: 700; }

@media screen and (max-width:768px) {
    .con3 .ab.i3_1 { top: calc(88/768*100vw); width: calc(252/768*100vw); }
    .con3 .ab.i3_2 { top: calc(163/768*100vw); width: calc(486/768*100vw); }
    .con3 .ab.i3_3 { top: calc(345/768*100vw); width: calc(10/768*100vw); }
    .con3 .ab.i3_4 { top: calc(437/768*100vw); width: calc(592/768*100vw); }
    .con3 .ab.i3_5 { top: calc(611/768*100vw); width: calc(312/768*100vw); }
    .con3 .ab.i3_6 { top: calc(715/768*100vw); width: calc(599/768*100vw); }
    .con3 .ab.i3_7 { top: calc(994/768*100vw); width: calc(696/768*100vw); }
    .con3 .ab.i3_8 { top: calc(1182/768*100vw); width: calc(459/768*100vw); }
    .con3 .ab.i3_9 { top: calc(1270/768*100vw); width: calc(642/768*100vw); }
    .con3 .ab.i3_t { top: calc(491/768*100vw); font-size: calc(70/768*100vw); letter-spacing: calc(-3/768*100vw); }
}





.con4 .ab.i4_1 { top: 95px; width: 688px; }
.con4 .ab.i4_2 { top: 263px; width: 583px; }
.con4 .ab.i4_3 { top: 601px; width: 355px; left: 125px; }
.con4 .ab.i4_4 { top: 558px; width: 153px; left: 509px; }
.con4 .ab.i4_5 { top: 221px; width: 721px; }
.con4 .ab.i4_6 { top: 880px; width: 577px; }
.con4 .ab.i4_7 { top: 1218px; width: 380px; left: 100px; }
.con4 .ab.i4_8 { top: 1175px; width: 153px; left: 509px; }
.con4 .ab.i4_9 { top: 828px; width: 721px; }

@media screen and (max-width:768px) {
    .con4 .ab.i4_1 { top: calc(95/768*100vw); width: calc(688/768*100vw); }
    .con4 .ab.i4_2 { top: calc(263/768*100vw); width: calc(583/768*100vw); }
    .con4 .ab.i4_3 { top: calc(601/768*100vw); width: calc(355/768*100vw); left: calc(125/768*100vw); }
    .con4 .ab.i4_4 { top: calc(558/768*100vw); width: calc(153/768*100vw); left: calc(509/768*100vw); }
    .con4 .ab.i4_5 { top: calc(221/768*100vw); width: calc(721/768*100vw); }
    .con4 .ab.i4_6 { top: calc(880/768*100vw); width: calc(577/768*100vw); }
    .con4 .ab.i4_7 { top: calc(1218/768*100vw); width: calc(380/768*100vw); left: calc(100/768*100vw); }
    .con4 .ab.i4_8 { top: calc(1175/768*100vw); width: calc(153/768*100vw); left: calc(509/768*100vw); }
    .con4 .ab.i4_9 { top: calc(828/768*100vw); width: calc(721/768*100vw); }
}





.con5 > .container { text-align: center; background-color: #413629; padding-bottom: 105px; }
.con5 .i { margin: 0 auto; }
.con5 .b { cursor: pointer; position: relative; }
.con5 .b span { display: block; position: absolute; top: 50%; right: 26px; width: 37px; transform: translate(0, -50%); transition: transform 0.3s ease; }
.con5 .b span img { display: block; }
.con5 .b.open span { transform: translate(0, -50%) rotate(-180deg); }
.con5 .c { display: none; }
.con5 .i5_1 { width: 635px; margin-top: 105px; }
.con5 .i5_2 { width: 694px; margin-top: 43px; }
.con5 .i5_3 { width: 694px; }
.con5 .i5_4 { width: 651px; margin-top: 80px; }
.con5 .i5_5 { width: 694px; margin-top: 70px; }
.con5 .i5_6 { width: 694px; background-color: #ffffff; padding-bottom: 47px; }
.con5 .i5_6 .i5_6_1 ,
.con5 .i5_6 .i5_6_2 { width: 630px; }
.con5 .i5_6 .i5_6_1.b span { right: 15px; }
.con5 .i5_7 { width: 694px; margin-top: 45px; }
.con5 .i5_8 { width: 694px; }
.con5 .i5_9 { width: 694px; margin-top: 45px; }
.con5 .i5_10 { width: 694px; }
.con5 .i5_11 { width: 635px; margin-top: 105px; }
.con5 .i5_12 { width: 694px; margin-top: 70px; }
.con5 .i5_13 { width: 694px; }

@media screen and (max-width:768px) {
    .con5 > .container { padding-bottom: calc(105/768*100vw); }
    .con5 .b span { right: calc(26/768*100vw); width: calc(37/768*100vw); }
    .con5 .i5_1 { width: calc(635/768*100vw); margin-top: calc(105/768*100vw); }
    .con5 .i5_2 { width: calc(694/768*100vw); margin-top: calc(43/768*100vw); }
    .con5 .i5_3 { width: calc(694/768*100vw); }
    .con5 .i5_4 { width: calc(651/768*100vw); margin-top: calc(80/768*100vw); }
    .con5 .i5_5 { width: calc(694/768*100vw); margin-top: calc(70/768*100vw); }
    .con5 .i5_6 { width: calc(694/768*100vw); padding-bottom: calc(47/768*100vw); }
    .con5 .i5_6 .i5_6_1 ,
    .con5 .i5_6 .i5_6_2 { width: calc(630/768*100vw); }
    .con5 .i5_6 .i5_6_1.b span { right: calc(15/768*100vw); }
    .con5 .i5_7 { width: calc(694/768*100vw); margin-top: calc(45/768*100vw); }
    .con5 .i5_8 { width: calc(694/768*100vw); }
    .con5 .i5_9 { width: calc(694/768*100vw); margin-top: calc(45/768*100vw); }
    .con5 .i5_10 { width: calc(694/768*100vw); }
    .con5 .i5_11 { width: calc(635/768*100vw); margin-top: calc(105/768*100vw); }
    .con5 .i5_12 { width: calc(694/768*100vw); margin-top: calc(70/768*100vw); }
    .con5 .i5_13 { width: calc(694/768*100vw); }
}





.con6 .ab.i6_1 { top: 100px; width: 626px; }
.con6 .ab.i6_2 { bottom: -10px; right: 0; width: 698px; }
.con6 .ab.i6_3 { top: 222px; width: 576px; }
.con6 .ab.i6_4 { top: 923px; width: 698px; }

@media screen and (max-width:768px) {
    .con6 .ab.i6_1 { top: calc(100/768*100vw); width: calc(626/768*100vw); }
    .con6 .ab.i6_2 { bottom: calc(-10/768*100vw); width: calc(698/768*100vw); }
    .con6 .ab.i6_3 { top: calc(222/768*100vw); width: calc(576/768*100vw); }
    .con6 .ab.i6_4 { top: calc(923/768*100vw); width: calc(698/768*100vw); }
}





.con7 .ab.i7_1 { top: 90px; width: 708px; }
.con7 .ab.i7_2 { top: 330px; width: 86px; }
.con7 .ab.i7_3 { top: 387px; width: 456px; }
.con7 .ab.i7_4 { top: 634px; width: 698px; }

@media screen and (max-width:768px) {
    .con7 .ab.i7_1 { top: calc(90/768*100vw); width: calc(708/768*100vw); }
    .con7 .ab.i7_2 { top: calc(330/768*100vw); width: calc(86/768*100vw); }
    .con7 .ab.i7_3 { top: calc(387/768*100vw); width: calc(456/768*100vw); }
    .con7 .ab.i7_4 { top: calc(634/768*100vw); width: calc(698/768*100vw); }
}