* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic Pro', "Meiryo UI", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
    background-color: #00b9ef;
}

img {
    width: 100%;
    display: block;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

.page-wrapper {
    overflow: hidden;
    max-width: 1920px;
    margin: 0 auto;
}

.img-wrap {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: -1px;
}

.text01 {
    width: 100%;
    font-size: clamp(16px, 2.2vw, 40px);
    line-height: 1.7;
    font-weight: 600;
    color: #00b9ef;
    text-align: center;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
}

.text02 {
    width: 100%;
    font-size: clamp(14px, 1.7vw, 28px);
    line-height: 1.7;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.text03 {
    width: 100%;
    font-size: clamp(14px, 1.7vw, 28px);
    line-height: 1.7;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
}

.text04 {
    width: 100%;
    color: #00a0e9;
    text-align: center;
    position: absolute;
    bottom: 23%;
    left: 50%;
    transform: translateX(-50%);
}

.text04 h3 {
    font-size: clamp(22px, 1.7vw, 32px);
    line-height: 1.2;
    font-weight: 600;

}

.text04 p {
    font-size: clamp(13px, 1.4vw, 24px);
    line-height: 1.7;
    font-weight: 500;
}

.text05 {
    bottom: 19%;
}

.text06 {
    bottom: 29%;
}




@media (max-width: 768px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .img-wrap {
        aspect-ratio: 780 / 500;
        /* 適宜調整 */
    }

    .ratio01 {
        aspect-ratio: 580 / 360;
    }

    .ratio02 {
        aspect-ratio: 400 / 670;
    }

    .ratio03,
    .ratio04,
    .ratio05 {
        aspect-ratio: 600 / 720;
    }

    .ratio06 {
        aspect-ratio: 780 / 500;
    }

    .ratio07 {
        aspect-ratio: 650 / 620;
    }

    .ratio08 {
        aspect-ratio: 780 / 630;
    }

    .ratio09 {
        aspect-ratio: 550 / 550;
    }

    .ratio10 {
        aspect-ratio: 600 / 750;
    }

    .ratio11 {
        aspect-ratio: 780 / 500;
    }

    .ratio12 {
        aspect-ratio: 750 / 650;
    }

    .ratio13 {
        aspect-ratio: 270 / 800;
    }

    .img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}