/* 見たまま編集(TinyMCE)専用補正。公開ページには影響しません。 */
body.mce-content-body img,
body[contenteditable="true"] img {
    max-width: 100% !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 元サイトは content-box 前提の指定が多いため、全要素への box-sizing 上書きはしない。
   募集職種カードの補正に必要な範囲だけ border-box に限定する。 */
body.mce-content-body #work .box,
body.mce-content-body #work .box_left,
body.mce-content-body #work .box_right,
body[contenteditable="true"] #work .box,
body[contenteditable="true"] #work .box_left,
body[contenteditable="true"] #work .box_right {
    box-sizing: border-box;
}

/* PC幅の見たまま編集ではPC版の構成を明示して、CMS側の汎用classとの競合を防ぐ */
@media screen and (min-width: 1074px) {
    body.mce-content-body .spParts,
    body[contenteditable="true"] .spParts {
        display: none !important;
    }

    body.mce-content-body .pcParts,
    body[contenteditable="true"] .pcParts {
        display: block !important;
    }

    body.mce-content-body .header-wrap,
    body[contenteditable="true"] .header-wrap {
        border-bottom: 5px solid #fd5d93 !important;
    }

    body.mce-content-body .header-wrap > header,
    body[contenteditable="true"] .header-wrap > header {
        display: block !important;
        max-width: 1300px !important;
        width: auto !important;
        height: 100px !important;
        margin: 30px auto 0 !important;
    }

    body.mce-content-body .header-wrap header .logo,
    body[contenteditable="true"] .header-wrap header .logo {
        float: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.mce-content-body .header-wrap header .logo h1,
    body.mce-content-body .header-wrap header .logo a,
    body[contenteditable="true"] .header-wrap header .logo h1,
    body[contenteditable="true"] .header-wrap header .logo a {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    body.mce-content-body .header-wrap header .logo img,
    body[contenteditable="true"] .header-wrap header .logo img {
        display: block !important;
    }

    body.mce-content-body .header-wrap header .h_btn,
    body[contenteditable="true"] .header-wrap header .h_btn {
        float: right !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.mce-content-body .header-wrap header .h_btn ul,
    body[contenteditable="true"] .header-wrap header .h_btn ul {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.mce-content-body #mvimg.mvimg,
    body[contenteditable="true"] #mvimg.mvimg {
        display: block !important;
        width: 100% !important;
        height: 640px !important;
        position: relative !important;
        background: url(../img/mvimg.jpg) no-repeat center center / cover !important;
    }

    body.mce-content-body #mvimg.mvimg > h2,
    body[contenteditable="true"] #mvimg.mvimg > h2 {
        width: 500px !important;
        height: 500px !important;
        position: absolute !important;
        left: 20px !important;
        bottom: 20px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 50% !important;
        background: #ffc7d9 !important;
        color: #fd4495 !important;
        font-size: 40px !important;
        line-height: 1.8 !important;
        text-align: center !important;
    }

    body.mce-content-body .message-wrap,
    body[contenteditable="true"] .message-wrap {
        display: block !important;
        background: url(../img/bg_kuse.png) repeat-x top left #faf8e9 !important;
        margin: 50px auto 0 !important;
    }

    body.mce-content-body .message-box,
    body[contenteditable="true"] .message-box {
        display: block !important;
        max-width: 1300px !important;
        width: auto !important;
        margin: 0 auto !important;
        padding: 50px 0 !important;
    }

    body.mce-content-body .message-box > .message,
    body[contenteditable="true"] .message-box > .message {
        display: block !important;
        width: 1073px !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 20px auto 0 !important;
        padding: 30px 0 0 !important;
        text-align: center !important;
    }

    body.mce-content-body #work.work_wrap,
    body[contenteditable="true"] #work.work_wrap {
        display: block !important;
        width: 100% !important;
        background: url(../img/bg_interview.png) repeat !important;
        margin: 0 0 50px !important;
    }

    body.mce-content-body #work > .work,
    body[contenteditable="true"] #work > .work {
        display: block !important;
        max-width: 1073px !important;
        width: auto !important;
        margin: 0 auto !important;
        padding: 50px 0 !important;
    }

    body.mce-content-body #work .work > .box,
    body[contenteditable="true"] #work .work > .box {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 0 50px !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
    }

    body.mce-content-body #work .box > .box_left,
    body[contenteditable="true"] #work .box > .box_left {
        display: block !important;
        flex: 0 0 60% !important;
        width: 60% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    body.mce-content-body #work .box > .box_right,
    body[contenteditable="true"] #work .box > .box_right {
        display: block !important;
        flex: 0 0 calc(40% - 50px) !important;
        width: calc(40% - 50px) !important;
        margin: 0 0 0 50px !important;
        padding: 40px !important;
        float: none !important;
        align-self: center !important;
        text-align: center !important;
        background: #faeec3 !important;
    }

    body.mce-content-body #work .box_right h2,
    body[contenteditable="true"] #work .box_right h2 {
        color: #fc2683 !important;
        font-size: 3rem !important;
    }

    body.mce-content-body #work .box_right h3,
    body[contenteditable="true"] #work .box_right h3 {
        color: #fc2683 !important;
        font-size: 2rem !important;
        margin-bottom: 35px !important;
    }

    body.mce-content-body #work .box_right h4,
    body[contenteditable="true"] #work .box_right h4 {
        background: #fd5d93 !important;
        color: #fff !important;
        font-size: 2.5rem !important;
        margin-bottom: 20px !important;
    }

    body.mce-content-body #work .box_right p,
    body[contenteditable="true"] #work .box_right p {
        text-align: left !important;
        color: #6a3906 !important;
        font-size: 1.8rem !important;
    }

    body.mce-content-body #work .box_right .detail_btn2,
    body[contenteditable="true"] #work .box_right .detail_btn2 {
        display: block !important;
        width: 225px !important;
        margin: 40px auto 0 !important;
        padding: 20px 0 !important;
        text-align: center !important;
        background: #fd5d8e !important;
        color: #fff !important;
        border-radius: 5px !important;
        font-size: 2.2rem !important;
    }
}

/* 狭い編集領域ではSP版の並びを固定 */
@media screen and (max-width: 1073px) {
    body.mce-content-body .pcParts,
    body[contenteditable="true"] .pcParts {
        display: none !important;
    }

    body.mce-content-body .spParts,
    body[contenteditable="true"] .spParts {
        display: block !important;
    }

    body.mce-content-body #work .work > .box,
    body[contenteditable="true"] #work .work > .box {
        display: block !important;
        width: 100% !important;
        margin-bottom: 30px !important;
        float: none !important;
    }

    body.mce-content-body #work .box > .box_left,
    body[contenteditable="true"] #work .box > .box_left {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    body.mce-content-body #work .box > .box_right,
    body[contenteditable="true"] #work .box > .box_right {
        display: block !important;
        width: 94% !important;
        margin: 0 auto !important;
        padding: 20px 0 50px !important;
        float: none !important;
        text-align: center !important;
        background: #faeec3 !important;
    }

    body.mce-content-body #work .box_right .detail_btn2,
    body[contenteditable="true"] #work .box_right .detail_btn2 {
        display: block !important;
        width: 225px !important;
        margin: 20px auto 0 !important;
    }
}