.sec_mv {
    margin: 0 2rem;
    padding: 5.5rem 4rem;
    border-radius:var(--r-xl);
    min-height: 600px;
    background: url("../img/top/mv_bg.jpg") center/cover no-repeat;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    color: var(--c-text-invert)
}

@media only screen and (max-width: 768px) {
    .sec_mv {
        padding: 2.5rem 2rem;
        border-radius:var(--r-sp-md);
        min-height: 400px
    }
}

.sec_mv .sec_mv_wrap {
    width: 100%
}

.sec_mv .sec_mv_copy {
    margin-bottom: 10px;
    font-size:var(--fs-h3)
}

@media only screen and (max-width: 768px) {
    .sec_mv .sec_mv_copy {
        font-size:var(--fs-h4)
    }
}

.sec_mv .sec_mv_heading {
    margin-bottom: 25px;
    font-size:var(--fs-mv);
    font-weight: 500
}

@media only screen and (max-width: 768px) {
    .sec_mv .sec_mv_heading {
        font-size:var(--fs-mv-sp)
    }
}

.sec_mv .sec_mv_tx {
    margin-bottom: 30px;
    font-size:var(--fs-lead);
    font-weight: 400
}

@media only screen and (max-width: 768px) {
    .sec_mv .sec_mv_tx {
        font-size:var(--fs-base)
    }
}

.sec_mv .tmpl_columns .tmpl_btn {
    font-size:var(--fs-lead);
    margin-bottom: 0
}

@media only screen and (max-width: 768px) {
    .sec_mv .tmpl_columns .tmpl_btn {
        font-size: 1.7rem;
        text-align: center;
        margin-bottom: 1.5rem
    }

    .sec_mv .tmpl_columns .tmpl_btn:last-child {
        margin-bottom: 0
    }
}

.sec_mv .tmpl_columns .tmpl_btn a {
    min-width: 320px
}

@media only screen and (max-width: 768px) {
    .sec_mv .tmpl_columns .tmpl_btn a {
        min-width: inherit
    }
}

.sec_enterprise {
    padding: 6.5rem 0 8rem;
    width: 100svw;
    position: relative;
    left: 50%;
    margin-left: -50svw
}

.sec_enterprise .tmpl_heading2 {
    color: var(--c-brand-800)
}

.sec_enterprise .tmpl_attention {
    margin-top: -2rem;
    text-align: center
}

@media only screen and (max-width: 768px) {
    .sec_enterprise .tmpl_attention {
        margin-top: -1rem
    }
}

.sec_enterprise .sec_enterprise_slide {
    margin-top: 3rem;
    display: flex;
    align-items: center;
    overflow: hidden
}

@media only screen and (max-width: 768px) {
    .sec_enterprise .sec_enterprise_slide {
        margin-top: 2rem
    }
}

.sec_enterprise .sec_enterprise_slide img {
    max-width: inherit
}

.sec_enterprise .sec_enterprise_slide.sec_slide_left .sec_enterprise_slide_item {
    margin-bottom: 1rem;
    animation: loop-slide-left 54s infinite linear 1s both
}

.sec_enterprise .sec_enterprise_slide.sec_slide_right .sec_enterprise_slide_item {
    animation: loop-slide-right 46s infinite linear 1s both
}

@keyframes loop-slide-left {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

@keyframes loop-slide-right {
    from {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(0)
    }
}

.sec_service_list {
    padding: 4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap
}

@media only screen and (max-width: 768px) {
    .sec_service_list {
        padding: 0;
        display: block
    }
}

.sec_service_list .sec_service_item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 3.8rem;
    border-radius:var(--r-lg);
    border: 2px solid var(--c-text-invert);
    background-color: var(--c-text-invert);
    color: var(--c-text);
    text-decoration: none;
    opacity: 1;
    box-shadow: 3px 3px 0 rgba(55, 152, 96, .1)
}

@media only screen and (min-width: 769px) {
    .sec_service_list .sec_service_item {
        width: 48.3333333333%;
        margin: 4rem 3.3333333333% 0 0
    }

    .sec_service_list .sec_service_item:nth-child(-n+2) {
        margin-top: 0
    }

    .sec_service_list .sec_service_item:nth-child(2n) {
        margin-right: 0;
        position: relative;
        top: 4rem
    }
}

@media only screen and (max-width: 768px) {
    .sec_service_list .sec_service_item {
        border-radius:var(--r-sp);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border: 0;
        box-shadow: 2px 2px 0 rgba(55, 152, 96, .1)
    }

    .sec_service_list .sec_service_item:last-child {
        margin-bottom: 0
    }
}

.sec_service_list .sec_service_item:hover {
    border: 2px solid var(--c-brand-800)
}

@media only screen and (max-width: 768px) {
    .sec_service_list .sec_service_item:hover {
        border: 0
    }
}

.sec_service_list .sec_service_item .sec_service_illust {
    flex: 0 0 144px;
    margin-right: 25px
}

@media only screen and (max-width: 768px) {
    .sec_service_list .sec_service_item .sec_service_illust {
        flex: 0 0 80px;
        margin-right: 1.5rem
    }
}

.sec_service_list .sec_service_item .sec_service_textbody {
    flex: 1 1 100%;
    max-width: 100%
}

.sec_service_list .sec_service_item .sec_service_textbody .tmpl_heading3 {
    margin-bottom: .5rem
}

.sec_service_list .sec_service_item .sec_service_textbody p {
    margin: 0
}

.sec_service_list .sec_service_item .sec_service_textbody .tmpl_more_tx {
    margin-top: 2rem
}

@media only screen and (max-width: 768px) {
    .sec_service_list .sec_service_item .sec_service_textbody .tmpl_more_tx {
        margin-top: 1rem
    }
}

.sec_box_column {
    position: relative;
    width: 100svw;
    left: 50%;
    margin-left: -50svw;
    display: flex;
    justify-content: space-between;
    align-items: stretch
}

@media only screen and (max-width: 768px) {
    .sec_box_column {
        display: block
    }
}

.sec_box_column .sec_tmpl_block {
    flex: 1;
    padding: 75px 0 80px !important
}

@media only screen and (max-width: 768px) {
    .sec_box_column .sec_tmpl_block {
        padding: 3.5rem 0 5rem !important
    }
}

@media only screen and (max-width: 768px) {
    .sec_box_column .sec_tmpl_block:nth-child(1) {
        padding: .5rem 0 5rem !important
    }
}

.sec_box_column .sec_tmpl_block:nth-child(2) {
    background-color: var(--c-brand-50)
}

.sec_box_column .sec_box_column_inner {
    max-width: 510px;
    margin: 0 auto;
    padding: 0 20px
}

@media only screen and (max-width: 768px) {
    .sec_box_column .sec_box_column_inner {
        max-width: 100%
    }
}

.sec_info_list>* {
    margin-bottom: 1.5rem
}

.sec_info_list>*:last-child {
    margin-bottom: 0
}

.sec_service.sec_tmpl_green::before {
    content: " ";
    display: block;
    width: 100%;
    height: 150px;
    border-radius:var(--r-xl) 24px 0 0;
    background-color: var(--c-brand-50);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

@media only screen and (max-width: 768px) {
    .sec_service.sec_tmpl_green::before {
        border-radius:var(--r-sp-md) 12px 0 0;
        height: 60px
    }
}

.sec_service.sec_tmpl_green::after {
    height: calc(100% - 150px) !important;
    top: inherit !important;
    bottom: 0 !important
}

@media only screen and (max-width: 768px) {
    .sec_service.sec_tmpl_green::after {
        height: calc(100% - 60px) !important
    }
}

/* ==========================================================================
   MV Video 対応（動画版ヒーロー）
   .sec_mv--video クラス付きのとき、既存の .sec_mv のスタイルを打ち消す
   ========================================================================== */

/* ラッパー側の調整：動画と文字を重ねるためのリセット */
.sec_mv.sec_mv--video {
    position: relative !important;
    overflow: hidden !important;
    background: #055a3e !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 600px !important;
    padding: 5.5rem 4rem !important;
    margin: 0 2rem !important;
    border-radius: var(--r-xl) !important;
}

@media only screen and (max-width: 768px) {
    .sec_mv.sec_mv--video {
        min-height: 420px !important;
        padding: 4rem 2rem !important;
        margin: 0 1rem !important;
        border-radius: var(--r-sp-md) !important;
    }
}

/* 動画要素：MV領域を必ず覆うサイズ。はみ出しは overflow:hidden で切る */
.sec_mv.sec_mv--video .sec_mv_video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: 100% !important;
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* 動画の上に半透明オーバーレイ：文字を読みやすく、ブランドトーンを維持 */
.sec_mv.sec_mv--video .sec_mv_overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        135deg,
        rgba(6, 142, 98, 0.55) 0%,
        rgba(5, 90, 62, 0.72) 100%
    ) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* テキストは動画・オーバーレイの上に */
.sec_mv.sec_mv--video .sec_mv_wrap {
    position: relative !important;
    z-index: 2 !important;
    width: auto !important;
    max-width: 60rem !important;
    margin: 0 !important;
    color: #ffffff !important;
}

@media only screen and (max-width: 768px) {
    .sec_mv.sec_mv--video .sec_mv_wrap {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* MV 内テキストを白に */
.sec_mv.sec_mv--video .sec_mv_copy,
.sec_mv.sec_mv--video .sec_mv_heading,
.sec_mv.sec_mv--video .sec_mv_tx {
    color: #ffffff !important;
}

/* ボタンを左寄せ + 横並び（SP は縦並び） */
.sec_mv.sec_mv--video .tmpl_columns--btns {
    justify-content: flex-start !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

@media only screen and (max-width: 768px) {
    .sec_mv.sec_mv--video .tmpl_columns--btns {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .sec_mv.sec_mv--video .tmpl_columns--btns .tmpl_btn {
        width: 100% !important;
    }
    .sec_mv.sec_mv--video .tmpl_columns--btns .tmpl_btn a {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================================================
   MV 内テキストの横位置調整（tmpl_inner 相当のコンテナ幅に収める）
   ========================================================================== */
.sec_mv.sec_mv--video {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sec_mv.sec_mv--video .sec_mv_wrap {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 4rem !important;
    box-sizing: border-box !important;
}

@media only screen and (max-width: 768px) {
    .sec_mv.sec_mv--video .sec_mv_wrap {
        padding: 0 2rem !important;
    }
}