.page_main_visual {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px;
}
.company .page_main_visual {
    background-image: url('../img/company/main.jpg');
}
/* .contact .page_main_visual {
    background-image: url('../img/contact/main.jpg');
} */
.business .page_main_visual {
    background-image: url('../img/business/main.jpg');
}
.price .page_main_visual {
    background-image: url('../img/price/main.jpg');
}
.flow .page_main_visual {
    background-image: url('../img/flow/main.jpg');
}
.works-archive .page_main_visual {
    background-image: url('../img/works/main.jpg');
}
.page_main_visual_span {
    display: block;
}
.page_main_visual_h1 {
    font-size: 36px;
    /* background: linear-gradient(90deg, #2CA763 0%, #0073E6 50%, #77ADD7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block; */
}
.page_main_visual_span {
    font-size: 24px;
}



.page_main_slant_visual {
    position: relative;
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    overflow: hidden;
}

/* 斜めの背景 */
.page_main_slant_visual::after {
    content: "";
    position: absolute;
    top: 0;
    right: -5%;
    width: 55%;
    height: 100%;
    background: linear-gradient(to bottom right, #9a95ff, #57c6f7);
    transform: skewX(-15deg);
    transform-origin: top right;
    opacity: 0.9;
}

/* テキストデザイン */
.page_main_slant_text_wrapper {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInSlideUp 1s ease-out forwards;
}
.page_main_slant_text_h1 {
    font-size: 50px;
    font-weight: bold;
    background: linear-gradient(90deg, #4f9cff, #9b5bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin: 0;
}
.page_main_slant_text {
    font-size: 20px;
    color: #444;
    margin-top: 8px;
    font-weight: 500;
}

/* フェードイン + スライドアニメーション */
@keyframes fadeInSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 600px) {
    .page_main_slant_visual {
        height: 180px; /* スマホでの高さを調整 */
        justify-content: center; /* テキストを中央寄せにする */
        text-align: center; /* テキストを中央寄せにする */
        padding: 0 20px; /* 左右に余白 */
    }

    /* 斜めの背景の調整 */
    .page_main_slant_visual::after {
        right: -20%; /* 斜めの背景を少し右に移動させ、画面中央に収まるように調整 */
        width: 80%; /* スマホの画面に合わせて幅を調整 */
        transform: skewX(-20deg); /* 斜め具合を少し強くする (調整可) */
        transform-origin: top right;
    }

    /* テキストデザインの調整 */
    .page_main_slant_text_wrapper {
        width: 100%; /* 幅を100%にして中央寄せに対応 */
    }
    .page_main_slant_text_h1 {
        font-size: 38px; /* スマホで見やすいようにフォントサイズを小さく */
        display: block; /* 中央寄せのためにブロック要素に */
        margin: 0 auto; /* 中央寄せ */
    }
    .page_main_slant_text {
        font-size: 16px; /* スマホで見やすいようにフォントサイズを小さく */
        margin-top: 5px; /* マージンを調整 */
    }
}