/*------------ padding ------------*/
/* コンテンツ幅が560pxの時（PC） */
/* All sides padding */
.pdg10 {
    padding: 7px;
}

.pdg15 {
    padding: 11px;
}

.pdg20 {
    padding: 15px;
}

.pdg25 {
    padding: 19px;
}

/* Left padding */
.pdg-l10 {
    padding-left: 7px;
}

.pdg-l15 {
    padding-left: 11px;
}

.pdg-l20 {
    padding-left: 15px;
}

.pdg-l25 {
    padding-left: 19px;
}

/* Right padding */
.pdg-r10 {
    padding-right: 7px;
}

.pdg-r15 {
    padding-right: 11px;
}

.pdg-r20 {
    padding-right: 15px;
}

.pdg-r25 {
    padding-right: 19px;
}

/* Top padding */
.pdg-t10 {
    padding-top: 7px;
}

.pdg-t15 {
    padding-top: 11px;
}

.pdg-t20 {
    padding-top: 15px;
}

.pdg-t25 {
    padding-top: 19px;
}

/* Bottom padding */
.pdg-b10 {
    padding-bottom: 7px;
}

.pdg-b15 {
    padding-bottom: 11px;
}

.pdg-b20 {
    padding-bottom: 15px;
}

.pdg-b25 {
    padding-bottom: 19px;
}

/* Horizontal padding */
.pdg-x10 {
    padding-left: 7px;
    padding-right: 7px;
}

.pdg-x15 {
    padding-left: 11px;
    padding-right: 11px;
}

.pdg-x20 {
    padding-left: 15px;
    padding-right: 15px;
}

.pdg-x25 {
    padding-left: 19px;
    padding-right: 19px;
}

.pdg-x40 {
    padding-left: 30px;
    padding-right: 30px;
}

/* Vertical padding */
.pdg-y10 {
    padding-top: 7px;
    padding-bottom: 7px;
}

.pdg-y15 {
    padding-top: 11px;
    padding-bottom: 11px;
}

.pdg-y20 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.pdg-y25 {
    padding-top: 19px;
    padding-bottom: 19px;
}

@media screen and (max-width: 750px) {

    /* All sides padding */
    .pdg10 {
        padding: 1.333333333333333%;
    }

    .pdg15 {
        padding: 2%;
    }

    .pdg20 {
        padding: 2.66666666666666%;
    }

    .pdg25 {
        padding: 3.333333333333333%;
    }

    /* Left padding */
    .pdg-l10 {
        padding-left: 1.333333333333333%;
    }

    .pdg-l15 {
        padding-left: 2%;
    }

    .pdg-l20 {
        padding-left: 2.66666666666666%;
    }

    .pdg-l25 {
        padding-left: 3.333333333333333%;
    }

    /* Right padding */
    .pdg-r10 {
        padding-right: 1.333333333333333%;
    }

    .pdg-r15 {
        padding-right: 2%;
    }

    .pdg-r20 {
        padding-right: 2.66666666666666%;
    }

    .pdg-r25 {
        padding-right: 3.333333333333333%;
    }

    /* Top padding */
    .pdg-t10 {
        padding-top: 1.333333333333333%;
    }

    .pdg-t15 {
        padding-top: 2%;
    }

    .pdg-t20 {
        padding-top: 2.66666666666666%;
    }

    .pdg-t25 {
        padding-top: 3.333333333333333%;
    }

    /* Bottom padding */
    .pdg-b10 {
        padding-bottom: 1.333333333333333%;
    }

    .pdg-b15 {
        padding-bottom: 2%;
    }

    .pdg-b20 {
        padding-bottom: 2.66666666666666%;
    }

    .pdg-b25 {
        padding-bottom: 3.333333333333333%;
    }

    /* Horizontal padding */
    .pdg-x10 {
        padding-left: 1.333333333333333%;
        padding-right: 1.333333333333333%;
    }

    .pdg-x15 {
        padding-left: 2%;
        padding-right: 2%;
    }

    .pdg-x20 {
        padding-left: 2.66666666666666%;
        padding-right: 2.66666666666666%;
    }

    .pdg-x25 {
        padding-left: 3.333333333333333%;
        padding-right: 3.333333333333333%;
    }

    .pdg-x40 {
        padding-left: 5.3333332%;
        padding-right: 5.3333332%;
    }

    /* Vertical padding */
    .pdg-y10 {
        padding-top: 1.333333333333333%;
        padding-bottom: 1.333333333333333%;
    }

    .pdg-y15 {
        padding-top: 2%;
        padding-bottom: 2%;
    }

    .pdg-y20 {
        padding-top: 2.66666666666666%;
        padding-bottom: 2.66666666666666%;
    }

    .pdg-y25 {
        padding-top: 3.333333333333333%;
        padding-bottom: 3.333333333333333%;
    }
}

/*------------ fontsize ------------*/
@media screen and (max-width: 750px) {
    .font44 {
        font-size: 5.87vw;
    }

    .font24 {
        font-size: 3.2vw;
    }

    .font32 {
        font-size: 4.27vw;
    }

    .font28 {
        font-size: 3.73vw;
    }

    .font40 {
        font-size: 5.33vw;
    }

    .font60 {
        font-size: 8vw;
    }

    .font36 {
        font-size: 4.8vw;
    }

    .font22 {
        font-size: 2.93vw;
    }

    .font92 {
        font-size: 12.27vw;
    }

    .font48 {
        font-size: 6.4vw;
    }

    .font18 {
        font-size: 2.4vw;
    }

    .font52_2 {
        font-size: 7vw;
    }

    .font54 {
        font-size: 7.2vw;
    }

    .font68 {
        font-size: 9.1vw;
    }
}

@media screen and (min-width: 751px) {
    .font44 {
        font-size: 32.85px;
    }

    .font24 {
        font-size: 17.92px;
    }

    .font32 {
        font-size: 23.89px;
    }

    .font28 {
        font-size: 20.90px;
    }

    .font40 {
        font-size: 29.86px;
    }

    .font60 {
        font-size: 44.80px;
    }

    .font36 {
        font-size: 26.88px;
    }

    .font22 {
        font-size: 16.43px;
    }

    .font92 {
        font-size: 68.69px;
    }

    .font48 {
        font-size: 35.84px;
    }

    .font18 {
        font-size: 13.44px;
    }

    .font52_2 {
        font-size: 39.20px;
    }

    .font54 {
        font-size: 40.32px;
    }

    .font68 {
        font-size: 50.96px;
    }
}

/*------------ color ------------*/
.orange {
    color: #ff7d2e;
}

.pink {
    color: #ec6e89;
}

.pink_2 {
    color: #ea627f;
}

.dark_blue {
    color: #005083;
}

.light_blue {
    color: #0098dc;
}

.purple {
    color: #a03393;
}

.dark_purple {
    color: #690f5f;
}

.yellow {
    color: #ffe168;
}

/* font_weight */
.font_weight500 {
    font-weight: 500;
}

.font_weight600 {
    font-weight: 600;
}

/*-------------- title --------------*/
.title {
    text-align: center;
    font-weight: 600;
    line-height: 1.45;
}

/* 751px以上の場合 */
@media screen and (min-width: 751px) {
    .title {
        line-height: 46.29px;
        /* 62px * 0.7466 ≈ 46.29px */
    }
}

/* 750px以下の場合 */
@media screen and (max-width: 750px) {
    .title {
        font-size: 5.9vw; /* (62 / 750) * 100 ≈ 8.27vw */
    }
}