/* 共通のヘルパースタイルを定義するCSS */

/* display */
.hp_block {
    display: block;
}

/* 中央ぞろえ */
.hp_mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* absolute要素のx方向中央ぞろえ */
.hp_absolute-x-center {
    left: 50%;
    transform: translateX(-50%);
}

/* position */
.hp_relative {
    position: relative;
}

.hp_absolute {
    position: absolute;
}

/* top */
.hp_-top-13 {
    top: -13px;
}

.hp_-top-20 {
    top: -20px;
}

/* right */
.hp_right-10 {
    right: 10px;
}


/* max-width */
.hp_max-w-100per {
    max-width: 100%;
}

.hp_max-w-90per {
    max-width: 90%;
}

.hp_max-w-511 {
    max-width: 511px;
}

.hp_max-w-340 {
    max-width: 340px;
}

.hp_max-w-225 {
    max-width: 225px;
}

/* min-width */
.hp_min-w-1080 {
    min-width: 1080px;
}

/* width */
.hp_w-full {
    width: 100%;
}

.hp_w-1080 {
    width: 1080px;
}

.hp_w-893 {
    width: 893px;
}

.hp_w-708 {
    width: 708px;
}

.hp_w-670 {
    width: 670px;
}

.hp_w-340 {
    width: 340px;
}

.hp_w-300 {
    width: 300px;
}

.hp_w-285 {
    width: 285px;
}

.hp_w-255 {
    width: 255px;
}

.hp_w-248 {
    width: 248px;
}

.hp_w-240 {
    width: 240px;
}

.hp_w-205 {
    width: 205px;
}

.hp_w-200 {
    width: 200px;
}

.hp_w-177 {
    width: 177px;
}

.hp_w-100 {
    width: 100px;
}

.hp_w-42 {
    width: 42px;
}

.hp_w-24 {
    width: 24px;
}

.hp_w-14 {
    width: 14px;
}

/* padding-top */
.hp_pt-30 {
    padding-top: 30px;
}

.hp_pt-50 {
    padding-top: 50px;
}

/* padding-bottom */
.hp_pb-80 {
    padding-bottom: 80px;
}

/* margin */
.hp_m-0 {
    margin: 0 !important;
}

/* margin-bottom */
.hp_mb-80 {
    margin-bottom: 80px;
}

.hp_mb-70 {
    margin-bottom: 70px;
}

.hp_mb-60 {
    margin-bottom: 60px;
}

.hp_mb-50 {
    margin-bottom: 50px;
}

.hp_mb-40 {
    margin-bottom: 40px;
}

.hp_mb-30 {
    margin-bottom: 30px;
}

.hp_mb-20 {
    margin-bottom: 20px;
}

.hp_mb-10 {
    margin-bottom: 10px;
}

/* color */
.hp_color-blue-2 {
    color: var(--custom-blue-2);
}

/* background-color */
.hp_bgColor-blue {
    background-color: var(--custom-blue);
}

.hp_bgColor-gray {
    background-color: var(--custom-gray-11);
}

/* z-index */
.hp_zIndex-30 {
    z-index: var(--custom-z-index-30);
}

.hp_zIndex-40 {
    z-index: var(--custom-z-index-40);
}

.hp_zIndex-50 {
    z-index: var(--custom-z-index-50);
}

.hp_zIndex-60 {
    z-index: var(--custom-z-index-60);
}

.hp_zIndex-70 {
    z-index: var(--custom-z-index-70);
}

.hp_zIndex-80 {
    z-index: var(--custom-z-index-80);
}

.hp_zIndex-90 {
    z-index: var(--custom-z-index-90);
}