@charset "utf-8";

/* 共通 */
.medium-title {
    text-align: start;
}

/* mv-detail */
.mv-detail .detail_image {
    object-position: 0 12%;
}

/* ボタンのアニメーション */
.career_btn {
    transition: all 0.5s ease 0s;
}

.career_btn:hover {
    transform: scale(1.1);
}

/* owner-titlearea */

.owner-titlearea {
    margin-top: 90px;
    max-width: 1280px;

}


.owner-titlearea .main-title {
    word-break: auto-phrase;
    font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
    color: #468902;
    line-height: 1.6;
}

/* owner-career */
.career {
    margin-top: 100px;
    max-width: 1200px;
}

.owner-career {
    position: relative;

}

.owner-career::before {
    position: absolute;
    content: "";
    background-image: url(../image/deco_02.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 13%;
    height: 20%;
    transform: rotate(-60deg);
    top: -6em;
    right: 2em;
}

.career .career_container {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.career .career_box {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.career .career_list {
    display: flex;
    gap: 20px;
}

.career .career_list dt {
    white-space: nowrap;
}



.career .career_imagebox {
    position: relative;
    width: 40%;
}

.career .career_imagebox::before {
    position: absolute;
    content: "";
    background-color: #E3F4C2;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: clamp(0.938rem, 0.142rem + 3.98vw, 3.125rem);
    right: clamp(0.938rem, 0.142rem + 3.98vw, 3.125rem);

}

.career .career_btnarea {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: clamp(3.75rem, 2.159rem + 7.95vw, 8.125rem);
}

.career .career_btn {
    padding: 20px 60px;
}

.career .btn_text {
    text-align: center;
    margin-left: 0;
}

.career .inner_career {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.career .btn_iconarea {
    display: flex;
    gap: 10px;
    align-items: center;
}

.career .btn_icon {
    width: 28px;
}

.career .instagram_text {
    color: #fff;
}




/* owner-story*/
.story {
    margin-top: 200px;
    background-image: url(../image/section_bg.png);
    background-repeat: repeat;
    background-size: contain;
    width: 100%;
    border: 2px solid #C8E88A;
    padding: 50px clamp(1.875rem, -0.17rem + 10.23vw, 7.5rem);


}

.story .story_title {
    border-bottom: none;
    padding-bottom: 0;
    display: block;
    text-align: center;
}

.story .story_container {
    margin-top: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem);
    padding: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem) clamp(1.563rem, -0.369rem + 9.66vw, 6.875rem);
    border: 2px solid #C8E88A;
    background-color: #fff;
}

.story .story_textarea {
    display: flex;
    flex-direction: column;
    gap: 30px;

}

.story .story_imagearea {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
}

.story .story_image {
    width: 20%;
}

/*  owner-result*/

.result {
    margin-top: clamp(6.25rem, 3.977rem + 11.36vw, 12.5rem);
}

.result .result_imagebox {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.result .result_image {
    width: 350px;
}

.result .image_under {
    margin-left: auto;
}

.result .career_btn {
    padding: 20px;
}



@media (max-width: 768px) {

    .owner-career::before {
        width: clamp(6.25rem, 4.018rem + 11.16vw, 9.375rem);
        height: clamp(6.25rem, 4.018rem + 11.16vw, 9.375rem);
        right: 1em;
    }

    .career .career_container {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    .career .career_box,
    .career .career_imagebox,
    .result .result_imagebox {
        width: 90%;
    }


    .career .career_btnarea {
        flex-direction: column;
        align-items: center;
        margin-top: 80px;
        gap: 30px;
    }


    .story .story_imagearea {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .story .story_image {
        width: 90%;
    }


}

@media (max-width: 425px) {
    .career .career_list {
        flex-direction: column;
        gap: 0;
    }

}




@media (max-width: 375px) {



    /* mv-detail */
    .mv-detail .detail_image {
        object-position: 40% 12%;
    }


}