* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
}

img {
    width: 100%;
    height: auto;
}

/*---------------- 
floatBox
----------------*/
.floatBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
}

@keyframes float1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes float2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-1deg); }
}
@keyframes float3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(1deg); }
}
@keyframes float4 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(-2deg); }
}
@keyframes float5 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-22px) rotate(1.5deg); }
}
@keyframes float6 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(-1.5deg); }
}
@keyframes float7 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-28px) rotate(2.5deg); }
}
@keyframes float8 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-16px) rotate(-2.5deg); }
}

.floatBox img {
    position: absolute;
    height: auto;
    transform-origin: center;
    transition: all 0.3s ease;
}

.floatBox .img01 { animation: float1 4s ease-in-out infinite; }
.floatBox .img02 { animation: float2 5s ease-in-out infinite 0.5s; }
.floatBox .img03 { animation: float3 3.5s ease-in-out infinite 1s; }
.floatBox .img04 { animation: float4 4.5s ease-in-out infinite 1.5s; }
.floatBox .img05 { animation: float5 3.8s ease-in-out infinite 2s; }
.floatBox .img06 { animation: float6 5.2s ease-in-out infinite 0.8s; }
.floatBox .img07 { animation: float7 4.2s ease-in-out infinite 2.5s; }
.floatBox .img08 { animation: float8 3.9s ease-in-out infinite 1.2s; }
.floatBox .img09 { animation: float1 4.8s ease-in-out infinite 3s; }
.floatBox .img10 { animation: float2 4.3s ease-in-out infinite 0.3s; }
.floatBox .img11 { animation: float3 5.1s ease-in-out infinite 1.8s; }
.floatBox .img12 { animation: float4 3.6s ease-in-out infinite 2.2s; }
.floatBox .img13 { animation: float5 4.7s ease-in-out infinite 0.7s; }
.floatBox .img14 { animation: float6 3.4s ease-in-out infinite 2.8s; }
.floatBox .img15 { animation: float7 5.3s ease-in-out infinite 1.4s; }
.floatBox .img16 { animation: float8 4.1s ease-in-out infinite 3.2s; }

/*---------------- 
floatBox img 
----------------*/
/* 1400px-1499px - 基本サイズ */
/* 左側の画像 */
.floatBox .img01 { 
    position: absolute; 
    top: 60px;
    left: 10px;
    width: 184px; /* 160px × 1.15 */ 
    height: auto; 
    animation: float1 4s ease-in-out infinite; 
}
.floatBox .img02 { 
    position: absolute; 
    top: 40px;
    left: 330px;
    width: 173px; /* 150px × 1.15 */ 
    height: auto; 
    animation: float2 5s ease-in-out infinite 0.5s; 
}
.floatBox .img03 { 
    position: absolute; 
    top: 190px;
    left: 160px; 
    width: 196px; /* 170px × 1.15 */ 
    height: auto; 
    animation: float3 3.5s ease-in-out infinite 1s; 
}
.floatBox .img04 { 
    position: absolute; 
    top: 300px; 
    left: 330px;
    width: 196px; /* 170px × 1.15 */ 
    height: auto; 
    animation: float4 4.5s ease-in-out infinite 1.5s; 
}
.floatBox .img05 { 
    position: absolute; 
    top: 435px; 
    left: 0px; 
    width: 207px; /* 180px × 1.15 */ 
    height: auto; 
    animation: float5 3.8s ease-in-out infinite 2s; 
}
.floatBox .img06 { 
    position: absolute; 
    bottom: 285px; 
    left: 230px;
    width: 300px; /* 280px × 1.15 */ 
    height: auto; 
    animation: float6 5.2s ease-in-out infinite 0.8s; 
}
.floatBox .img07 { 
    position: absolute; 
    bottom: 125px; 
    left: 35px; 
    width: 242px; /* 210px × 1.15 */ 
    height: auto; 
    animation: float7 4.2s ease-in-out infinite 2.5s; 
}
.floatBox .img08 { 
    position: absolute; 
    bottom: 40px; 
    left: 300px; 
    width: 230px; /* 200px × 1.15 */ 
    height: auto; 
    animation: float8 3.9s ease-in-out infinite 1.2s; 
}

/* 右側の画像 */
.floatBox .img09 { 
    position: absolute; 
    top: 80px; 
    right: 280px; 
    width: 207px; /* 180px × 1.15 */ 
    height: auto; 
    animation: float1 4.8s ease-in-out infinite 3s; 
}
.floatBox .img10 { 
    position: absolute; 
    top: 40px; 
    right: 20px; 
    width: 184px; /* 160px × 1.15 */ 
    height: auto; 
    animation: float2 4.3s ease-in-out infinite 0.3s; 
}
.floatBox .img11 { 
    position: absolute; 
    top: 195px; 
    right: 140px; 
    width: 184px; /* 160px × 1.15 */ 
    height: auto; 
    animation: float3 5.1s ease-in-out infinite 1.8s; 
}
.floatBox .img12 { 
    position: absolute; 
    top: 330px;
    right: 300px;
    width: 173px; /* 150px × 1.15 */ 
    height: auto; 
    animation: float4 3.6s ease-in-out infinite 2.2s; 
}
.floatBox .img13 { 
    position: absolute; 
    top: 420px; 
    right: 0px; 
    width: 219px; /* 190px × 1.15 */ 
    height: auto; 
    animation: float5 4.7s ease-in-out infinite 0.7s; 
}
.floatBox .img14 { 
    position: absolute; 
    bottom: 240px; 
    right: 200px; 
    width: 280px; /* 260px × 1.15 */ 
    height: auto; 
    animation: float6 3.4s ease-in-out infinite 2.8s; 
}
.floatBox .img15 { 
    position: absolute; 
    bottom: 60px;
    right: 40px;
    width: 219px; /* 190px × 1.15 */ 
    height: auto; 
    animation: float7 5.3s ease-in-out infinite 1.4s; 
}
.floatBox .img16 { 
    position: absolute; 
    bottom: 20px;
    right: 240px;
    width: 230px; /* 200px × 1.15 */ 
    height: auto; 
    animation: float8 4.1s ease-in-out infinite 3.2s; 
}

/* 1600px以上 - 最大サイズ */
@media (min-width: 1600px) {
    .floatBox .img01 { left: 20px; width: 208px; }
    .floatBox .img02 { left: 420px; width: 195px; }
    .floatBox .img03 { left: 200px; width: 221px; }
    .floatBox .img04 { left: 490px; width: 221px; }
    .floatBox .img05 { left: 10px; width: 234px; }
    .floatBox .img06 { bottom: 310px; left: 275px; width: 338px; }
    .floatBox .img07 { bottom: 60px; left: 70px; width: 273px; }
    .floatBox .img08 { left: 450px; width: 260px; }
    .floatBox .img09 { right: 400px; width: 234px; }
    .floatBox .img10 { right: 30px; width: 208px; }
    .floatBox .img11 { right: 220px; width: 208px; }
    .floatBox .img12 { right: 500px; width: 195px; }
    .floatBox .img13 { right: 10px; width: 247px; }
    .floatBox .img14 { bottom: 250px; right: 270px; width: 316px; }
    .floatBox .img15 { right: 80px; width: 247px; }
    .floatBox .img16 { right: 410px; width: 260px; }
}

/* 1500px-1599px */
@media (max-width: 1599px) {
    .floatBox .img01 { width: 154px; }
    .floatBox .img02 { left: 350px; width: 144px; }
    .floatBox .img03 { top: 170px; width: 163px; }
    .floatBox .img04 { top: 280px; left: 380px; width: 163px; }
    .floatBox .img05 { top: 410px; width: 173px; }
    .floatBox .img06 { bottom: 230px; width: 250px; }
    .floatBox .img07 { bottom: 80px; width: 202px; }
    .floatBox .img08 { left: 330px; width: 192px; }
    .floatBox .img09 { right: 330px; width: 173px; }
    .floatBox .img10 { width: 154px; }
    .floatBox .img11 { right: 170px; width: 154px; }
    .floatBox .img12 { top: 310px; right: 400px; width: 144px; }
    .floatBox .img13 { top: 380px; width: 182px; }
    .floatBox .img14 { bottom: 200px; right: 230px; width: 234px; }
    .floatBox .img15 { width: 182px; }
    .floatBox .img16 { right: 320px; width: 192px; }
}

/* 1500px-1599px */
@media (max-width: 1440px) {
    .floatBox .img01 { width: 154px; }
    .floatBox .img02 { left: 350px; width: 144px; }
    .floatBox .img03 { top: 170px; width: 163px; }
    .floatBox .img04 { top: 280px; left: 350px; width: 163px; }
    .floatBox .img05 { top: 410px; width: 173px; }
    .floatBox .img06 { bottom: 250px; left: 220px; width: 250px; }
    .floatBox .img07 { bottom: 80px; width: 202px; }
    .floatBox .img08 { left: 330px; width: 192px; }
    .floatBox .img09 { right: 330px; width: 173px; }
    .floatBox .img10 { width: 154px; }
    .floatBox .img11 { right: 170px; width: 154px; }
    .floatBox .img12 { top: 310px; right: 350px; width: 144px; }
    .floatBox .img13 { top: 380px; width: 182px; }
    .floatBox .img14 { bottom: 200px; right: 230px; width: 234px; }
    .floatBox .img15 { width: 182px; }
    .floatBox .img16 { right: 320px; width: 192px; }
}

/* 1300px-1399px - img01=160px基準 */
@media (max-width: 1399px) {
    .floatBox .img01 { left: 25px; top: 60px; width: 144px; }
    .floatBox .img02 { left: 310px; top: 40px; width: 135px; }
    .floatBox .img03 { left: 130px; top: 150px; width: 153px; }
    .floatBox .img04 { left: 320px; top: 250px; width: 153px; }
    .floatBox .img05 { left: 15px; top: 370px; width: 162px; }
    .floatBox .img06 { left: 210px; bottom: 200px; width: 234px; }
    .floatBox .img07 { left: 50px; bottom: 80px; width: 189px; }
    .floatBox .img08 { left: 280px; bottom: 20px; width: 180px; }
    
    .floatBox .img09 { right: 300px; top: 80px; width: 162px; }
    .floatBox .img10 { right: 35px; top: 40px; width: 144px; }
    .floatBox .img11 { right: 170px; top: 170px; width: 144px; }
    .floatBox .img12 { right: 320px; top: 280px; width: 135px; }
    .floatBox .img13 { right: 15px; top: 330px; width: 171px; }
    .floatBox .img14 { right: 200px; bottom: 160px; width: 219px; }
    .floatBox .img15 { right: 50px; bottom: 60px; width: 171px; }
    .floatBox .img16 { right: 270px; bottom: 20px; width: 180px; }
}

/* 1200px-1299px - img01=140px（約87.5%縮小） */
@media (max-width: 1299px) {
    .floatBox .img01 { left: 40px; top: 60px; width: 140px; }
    .floatBox .img02 { left: 280px; top: 40px; width: 131px; }
    .floatBox .img03 { left: 130px; top: 160px; width: 149px; }
    .floatBox .img04 { left: 280px; top: 250px; width: 149px; }
    .floatBox .img05 { left: 30px; top: 320px; width: 150px; }
    .floatBox .img06 { left: 180px; bottom: 180px; width: 228px; }
    .floatBox .img07 { left: 40px; bottom: 50px; width: 184px; }
    .floatBox .img08 { left: 260px; bottom: 20px; width: 175px; }
    
    .floatBox .img09 { right: 270px; top: 80px; width: 158px; }
    .floatBox .img10 { right: 50px; top: 40px; width: 140px; }
    .floatBox .img11 { right: 180px; top: 170px; width: 140px; }
    .floatBox .img12 { right: 300px; top: 280px; width: 131px; }
    .floatBox .img13 { right: 20px; top: 310px; width: 166px; }
    .floatBox .img14 { right: 180px; bottom: 140px; width: 213px; }
    .floatBox .img15 { right: 50px; bottom: 40px; width: 166px; }
    .floatBox .img16 { right: 250px; bottom: 20px; width: 175px; }
}

/* 1100px-1199px - img01=120px（75%縮小） */
@media (max-width: 1199px) {
    .floatBox .img01 { left: 20px; top: 60px; width: 120px; }
    .floatBox .img02 { left: 240px; top: 40px; width: 113px; }
    .floatBox .img03 { left: 110px; top: 190px; width: 128px; }
    .floatBox .img04 { left: 240px; top: 300px; width: 128px; }
    .floatBox .img05 { left: 20px; top: 435px; width: 135px; }
    .floatBox .img06 { left: 170px; bottom: 285px; width: 195px; }
    .floatBox .img07 { left: 50px; bottom: 125px; width: 158px; }
    .floatBox .img08 { left: 220px; bottom: 40px; width: 150px; }
    
    .floatBox .img09 { right: 240px; top: 80px; width: 135px; }
    .floatBox .img10 { right: 20px; top: 40px; width: 120px; }
    .floatBox .img11 { right: 130px; top: 195px; width: 120px; }
    .floatBox .img12 { right: 260px; top: 330px; width: 113px; }
    .floatBox .img13 { right: 10px; top: 420px; width: 143px; }
    .floatBox .img14 { right: 130px; bottom: 240px; width: 183px; }
    .floatBox .img15 { right: 40px; bottom: 60px; width: 143px; }
    .floatBox .img16 { right: 210px; bottom: 20px; width: 150px; }
}

/* 1000px-1099px - img01=100px（62.5%縮小） */
@media (max-width: 1099px) {
    .floatBox .img01 { left: 10px; top: 60px; width: 120px; }
    .floatBox .img02 { left: 200px; top: 40px; width: 113px; }
    .floatBox .img03 { left: 90px; top: 190px; width: 128px; }
    .floatBox .img04 { left: 200px; top: 300px; width: 128px; }
    .floatBox .img05 { left: 10px; top: 435px; width: 135px; }
    .floatBox .img06 { left: 135px; bottom: 285px; width: 195px; }
    .floatBox .img07 { left: 25px; bottom: 125px; width: 158px; }
    .floatBox .img08 { left: 180px; bottom: 40px; width: 150px; }
    
    .floatBox .img09 { right: 180px; top: 80px; width: 135px; }
    .floatBox .img10 { right: 10px; top: 40px; width: 120px; }
    .floatBox .img11 { right: 130px; top: 195px; width: 120px; }
    .floatBox .img12 { right: 200px; top: 330px; width: 113px; }
    .floatBox .img13 { right: 5px; top: 420px; width: 143px; }
    .floatBox .img14 { right: 100px; bottom: 240px; width: 183px; }
    .floatBox .img15 { right: 20px; bottom: 60px; width: 143px; }
    .floatBox .img16 { right: 170px; bottom: 20px; width: 150px; }
}

/* 900px-999px - img01=80px（50%縮小） */
@media (max-width: 999px) {
    .floatBox .img01 { left: 10px; top: 60px; width: 100px; }
    .floatBox .img02 { left: 170px; top: 40px; width: 93px; }
    .floatBox .img03 { left: 65px; top: 190px; width: 108px; }
    .floatBox .img04 { left: 170px; top: 300px; width: 108px; }
    .floatBox .img05 { left: 10px; top: 435px; width: 115px; }
    .floatBox .img06 { left: 100px; bottom: 285px; width: 175px; }
    .floatBox .img07 { left: 25px; bottom: 125px; width: 138px; }
    .floatBox .img08 { left: 150px; bottom: 40px; width: 130px; }
    
    .floatBox .img09 { right: 160px; top: 80px; width: 115px; }
    .floatBox .img10 { right: 10px; top: 40px; width: 100px; }
    .floatBox .img11 { right: 90px; top: 195px; width: 100px; }
    .floatBox .img12 { right: 180px; top: 330px; width: 93px; }
    .floatBox .img13 { right: 5px; top: 420px; width: 123px; }
    .floatBox .img14 { right: 80px; bottom: 240px; width: 163px; }
    .floatBox .img15 { right: 20px; bottom: 90px; width: 123px; }
    .floatBox .img16 { right: 130px; bottom: 20px; width: 130px; }
}

/* 800px-899px - img01=60px（37.5%縮小） */
@media (max-width: 899px) {
    .floatBox .img01 { left: 10px; top: 60px; width: 100px; }
    .floatBox .img02 { left: 140px; top: 40px; width: 93px; }
    .floatBox .img03 { left: 55px; top: 190px; width: 108px; }
    .floatBox .img04 { left: 125px; top: 330px; width: 108px; }
    .floatBox .img05 { left: 10px; top: 435px; width: 115px; }
    .floatBox .img06 { left: 65px; bottom: 265px; width: 175px; }
    .floatBox .img07 { left: 15px; bottom: 125px; width: 138px; }
    .floatBox .img08 { left: 100px; bottom: 10px; width: 130px; }
    
    .floatBox .img09 { right: 120px; top: 80px; width: 115px; }
    .floatBox .img10 { right: 10px; top: 40px; width: 100px; }
    .floatBox .img11 { right: 60px; top: 195px; width: 100px; }
    .floatBox .img12 { right: 130px; top: 330px; width: 93px; }
    .floatBox .img13 { right: 5px; top: 420px; width: 123px; }
    .floatBox .img14 { right: 60px; bottom: 240px; width: 163px; }
    .floatBox .img15 { right: 20px; bottom: 90px; width: 123px; }
    .floatBox .img16 { right: 100px; bottom: 20px; width: 130px; }
}

/* 700px-799px - img01=40px（25%縮小） */
@media (max-width: 799px) {
    .floatBox .img01 { left: 10px; top: 95px; width: 92px; }
    .floatBox .img02 { left: 100px; top: 20px; width: 85px; }
    .floatBox .img03 { left: 85px; top: 190px; width: 100px; }
    .floatBox .img04 { left: 10px; top: 290px; width: 100px; }
    .floatBox .img05 { left: 80px; top: 435px; width: 107px; }
    .floatBox .img06 { left: 10px; bottom: 255px; width: 167px; }
    .floatBox .img07 { left: 60px; bottom: 130px; width: 130px; }
    .floatBox .img08 { left: 20px; bottom: 10px; width: 122px; }

    .floatBox .img09 { right: 85px; top: 100px; width: 107px; }
    .floatBox .img10 { right: 10px; top: 10px; width: 92px; }
    .floatBox .img11 { right: 20px; top: 195px; width: 92px; }
    .floatBox .img12 { right: 100px; top: 330px; width: 85px; }
    .floatBox .img13 { right: 5px; top: 420px; width: 115px; }
    .floatBox .img14 { right: 50px; bottom: 240px; width: 145px; }
    .floatBox .img15 { right: 20px; bottom: 120px; width: 115px; }
    .floatBox .img16 { right: 60px; bottom: 20px; width: 122px; }
}

/* 600px-699px - img01=25px（15.6%縮小） */
@media (max-width: 699px) {
    .floatBox .img01 { left: 10px; top: 100px; width: 82px; }
    .floatBox .img02 { left: 60px; top: 20px; width: 75px; }
    .floatBox .img03 { left: 50px; top: 190px; width: 90px; }
    .floatBox .img04 { left: 10px; top: 320px; width: 90px; }
    .floatBox .img05 { left: 40px; top: 460px; width: 97px; }
    .floatBox .img06 { left: 10px; bottom: 255px; width: 130px; }
    .floatBox .img07 { left: 30px; bottom: 130px; width: 120px; }
    .floatBox .img08 { left: 20px; bottom: 10px; width: 112px; }

    .floatBox .img09 { right: 45px; top: 110px; width: 97px; }
    .floatBox .img10 { right: 10px; top: 10px; width: 82px; }
    .floatBox .img11 { right: 20px; top: 200px; width: 82px; }
    .floatBox .img12 { right: 60px; top: 330px; width: 75px; }
    .floatBox .img13 { right: 5px; top: 450px; width: 105px; }
    .floatBox .img14 { right: 20px; bottom: 240px; width: 125px; }
    .floatBox .img15 { right: 20px; bottom: 110px; width: 100px; }
    .floatBox .img16 { right: 30px; bottom: 10px; width: 105px; }
}

/* 500px-599px - img01=15px（9.4%縮小） */
@media (max-width: 599px) {
    .floatBox .img01 { left: 10px; top: 100px; width: 65px; }
    .floatBox .img02 { left: 10px; top: 20px; width: 60px; }
    .floatBox .img03 { left: 10px; top: 190px; width: 73px; }
    .floatBox .img04 { left: 10px; top: 320px; width: 73px; }
    .floatBox .img05 { left: 10px; top: 460px; width: 80px; }
    .floatBox .img06 { left: 10px; bottom: 255px; width: 95px; }
    .floatBox .img07 { left: 10px; bottom: 130px; width: 103px; }
    .floatBox .img08 { left: 10px; bottom: 10px; width: 95px; }

    .floatBox .img09 { right: 10px; top: 110px; width: 80px; }
    .floatBox .img10 { right: 10px; top: 10px; width: 65px; }
    .floatBox .img11 { right: 10px; top: 200px; width: 65px; }
    .floatBox .img12 { right: 10px; top: 330px; width: 58px; }
    .floatBox .img13 { right: 5px; top: 450px; width: 88px; }
    .floatBox .img14 { right: 10px; bottom: 240px; width: 90px; }
    .floatBox .img15 { right: 10px; bottom: 110px; width: 75px; }
    .floatBox .img16 { right: 10px; bottom: 10px; width: 80px; }
}

/* 400px-499px - img01=10px（6.25%縮小） */
@media (max-width: 499px) {
    .floatBox .img01 { left: 2px; top: 100px; width: 60px; }
    .floatBox .img02 { left: 2px; top: 20px; width: 55px; }
    .floatBox .img03 { left: 2px; top: 190px; width: 68px; }
    .floatBox .img04 { left: 2px; top: 320px; width: 68px; }
    .floatBox .img05 { left: 2px; top: 460px; width: 75px; }
    .floatBox .img06 { left: 2px; bottom: 255px; width: 90px; }
    .floatBox .img07 { left: 2px; bottom: 130px; width: 98px; }
    .floatBox .img08 { left: 2px; bottom: 10px; width: 90px; }

    .floatBox .img09 { right: 2px; top: 110px; width: 75px; }
    .floatBox .img10 { right: 2px; top: 10px; width: 60px; }
    .floatBox .img11 { right: 2px; top: 200px; width: 60px; }
    .floatBox .img12 { right: 2px; top: 330px; width: 53px; }
    .floatBox .img13 { right: 2px; top: 450px; width: 83px; }
    .floatBox .img14 { right: 2px; bottom: 240px; width: 85px; }
    .floatBox .img15 { right: 2px; bottom: 110px; width: 70px; }
    .floatBox .img16 { right: 2px; bottom: 10px; width: 75px; }
}

/* 375px以下は非表示 */
@media (max-width: 480px) {
    .floatBox {
        display: none;
    }
}

/*---------------- 
contents 
----------------*/
.contents {
    width: 375px;
    margin: 0 auto;
    min-height: 100vh;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
    position: relative;
    z-index: 1;
    background-color: #fff;
}

@media (max-width: 480px) {
    .contents {
        width: 100%;
        box-shadow: none;
    }
}

header {
    background: url(./img/fv-bg.png) no-repeat bottom center / cover;
    padding: 16px 0;
}

header .fv {
    display: block;
}

.contents .sec01 {
    background: url(./img/sec01-bg.png) no-repeat top center / cover;
    margin-top: -30px;
    padding: 20px;
}

.contents .sec01,
.contents .sec01 img {
    display: block;
}

.contents .sec01 .img01 {
    position: relative;
    z-index: 4;
}

.contents .sec01 .img02 {
    width: 81%;
    margin-top: -90px;
    position: relative;
    z-index: 3;
}

.contents .sec01 .img03 {
    width: 85%;
    margin: -110px 0 0 auto;
    position: relative;
    z-index: 2;
}

.contents .sec01 .img04 {
    width: 82%;
    margin-top: -170px;
    position: relative;
    z-index: 1;
}

.contents .sec02 {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contents .sec02 a {
    display: block;
    transition: transform .6s ease;
}

.contents .sec02 img {
    display: block;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.contents .sec02 a:hover {
    transform: scale(1.05);
}

.contents .sec02 .img04:hover {
    transform: none;
}

.contents .sec03 {
    background: url(./img/sec03-bg.png) no-repeat center / cover;
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contents .sec03 a {
    background: #fff;
    border-radius: 25px;
    color: #333;
    font-weight: bold;
    text-decoration: none;
    display: block;
    padding: 13px;
    font-size: 15px;
    text-align: center;
    width: 100%;
    position: relative;
    transition: all 0.3s ease;
}

.contents .sec03 a:hover {
    background: #e73378;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.contents .sec03 a::after {
    position: absolute;
    content: '';
    background: url(./img/sec03-img01.png) no-repeat center / cover;
    width: 40px;
    height: 40px;
    top: 4px;
    right: 5px;
}

.contents .sec01 img {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.contents .sec01 img.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/*---------------- 
footer 
----------------*/
footer {
    padding: 15px 68px;
    text-align: center;
}

footer .footer-logo {
    max-width: 164px;
    height: auto;
}

footer .copy {
    font-size: 9px;
    font-weight: bold;
    margin-top: 10px;
    color: #333;
}