/* =============================================
   Jimdo textWithImage カスタマイズ
   ============================================= */


/* ------------------------------------------
   共通（全幅）
   ------------------------------------------ */
.cc-pagemode-default .j-textWithImage > div .cc-m-textwithimage-inline-rte {
    padding: 1.5em 2em;
    z-index: 1;
}


/* ------------------------------------------
   PC（990px以上）
   ------------------------------------------ */
@media (min-width: 990px) {

    .cc-pagemode-default .j-textWithImage {
        position: relative;
        z-index: 1;
    }

    .cc-pagemode-default .j-textWithImage figure.cc-imagewrapper {
        display: block;
        z-index: 0;
    }

    .cc-pagemode-default .j-textWithImage figure + div {
        position: absolute;
        top: 30%;
    }

    /* パネルの位置: 画像が左→右寄せ、画像が右→左寄せ */
    .cc-pagemode-default .j-textWithImage figure.cc-m-image-align-1 + div { right: 0; }
    .cc-pagemode-default .j-textWithImage figure.cc-m-image-align-2 + div { left: 0; }

    /* パネルのサイズ（background / box-shadow はパネルスタイルで管理） */
    .cc-pagemode-default .j-textWithImage > div {
        width: 100%;
        max-width: 60%;
    }

    /* ------------------------------------------
       パネルスタイル（共通）
       ------------------------------------------ */
    .cc-pagemode-default .j-textWithImage figure[class*="cc-m-image-align-"] + div {
       border-radius: 0px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 4px solid rgb(34 34 34);
        box-shadow: 15px 14px rgb(34 34 34);
        overflow: hidden;
    }

    /* パネルの傾き: 画像が左→左肩下がり、画像が右→左肩下がり */
    .cc-pagemode-default .j-textWithImage figure.cc-m-image-align-1 + div {
        transform: skewX(-4deg);
    }
    .cc-pagemode-default .j-textWithImage figure.cc-m-image-align-2 + div {
        transform: skewX(-4deg);
    }

    /* 中の要素を逆方向に skew して文字を垂直に戻す */
    .cc-pagemode-default .j-textWithImage figure.cc-m-image-align-1 + div > * {
        transform: skewX(4deg);
    }
    .cc-pagemode-default .j-textWithImage figure.cc-m-image-align-2 + div > * {
        transform: skewX(4deg);
    }

}


/* ------------------------------------------
   SP（989px以下）
   ------------------------------------------ */
@media (max-width: 989px) {

    .cc-pagemode-default .j-textWithImage {
        margin: 0 1em;
        background: rgba(255, 255, 255, 0.8);
        border: 4px solid rgb(34 34 34);
        box-shadow: 15px 14px rgb(34 34 34);
        border-radius: 0px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        position: relative;
        z-index: 0;
    }

    .cc-pagemode-default .j-textWithImage figure img {
        width: 100%;
    }

    .cc-pagemode-default .j-textWithImage figure {
        float: none !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

}