@charset "UTF-8";

/*------------------------------------------------------------------
    22-8 ににっぱ じかん割eプラン
--------------------------------------------------------------------*/

/*------------------------------------------------------------------
    共通
--------------------------------------------------------------------*/
/* 変数 */
.ninipa_cont {
    --black: #000;
    --white: #fff;

    --blue-deep: #003B83;
    --blue: #2A80BD;
    --blue-medium: #4FA0CA;
    --blue-pale: #C1D5F2;
    --blue-light: #D3EDFB;
    --blue-lighter: #EDF8FA;

    --yellow: #FED300;
    --yellow-light: #FEFCE0;

    --green: #37AC5D;
    --green-light: #C6EAD2;
    --green-pale: #D8EDE6;

    --orange: #FC9219;
    --orange-light: #FDE9DE;
    --orange-deep: #E64800;

    --pink: #FDEDEF;
    --brown-light: #DDD39F;
    --gray: #EBEBEB;

    --blue-gray: #D3E1F4;

    --gradient-blue: linear-gradient(
        to left,
        #fff 0%,
        #155793 78.76%,
        #003B83 100%
    );
}

.ninipa_cont .inner_cont {
    padding-bottom: 10rem;

    @media screen and (max-width: 480px) {
        padding-bottom: 7rem;
    }
}

.mContainer {
    padding: 4.5rem 0;
    @media screen and (max-width: 1300px) {
        padding: 4rem 0;
    }
    @media screen and (max-width: 1024px) {
        padding: 3.5rem 0;
    }
    @media screen and (max-width: 750px) {
        padding: 2.7rem 0;
    }
}

.inner {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;

    @media screen and (max-width: 1300px) {
        padding: 0 3vw;
    }
    @media screen and (max-width: 1024px) {
        padding: 0 4vw;
    }
    @media screen and (max-width: 750px) {
        padding: 0 6.4vw;
    }
}

.pcShow {
    display: block;

    @media screen and (max-width: 750px) {
        display: none;
    }
}

.spShow {
    display: none;

    @media screen and (max-width: 750px) {
        display: block;
    }
}

/* 見出し */
.heading {
    margin-bottom: 3.4rem;
    padding: 0 1rem;
    border-radius: 99em;
    border: 3px solid var(--blue-pale);
    background-color: var(--blue-deep);
    color: var(--white);
    font-weight: 900;
    font-size: clamp(1.125rem, calc(0.348rem + 3.315vw), 2.8rem);
    text-align: center;
    position: relative;
    line-height: 1.5;

    @media screen and (max-width: 750px) {
        margin-bottom: 1.35rem;
        padding: 0.4rem 1rem;
    }
}

/* スムーススクロール対策 */
#ninipa01,
#ninipa02,
#ninipa03 {
    margin-top: -80px;
    padding-top: 80px;
}


/*------------------------------------------------------------------
    CTA
--------------------------------------------------------------------*/
.ctaCont {
    background-image: url("/src/img/ninipa/cta_bg.gif");

    .btnArea {
        display: flex;
        justify-content: space-between;
        gap: 2rem;

        &.-col3 {
            gap: 1.4rem;

            .btn {
                padding: 1.6rem 0.9rem;
                font-size: 20px;

                span {
                    &:after {
                        width: 0.95rem;
                        height: 1.6rem;
                    }
                }
                
                &.-simulation {
                    span {
                        padding-left: 3.3rem;
                        padding-right: 1.4rem;

                        &:before {
                            width: 2.83rem;
                            height: 2.83rem;
                        }
                    }
                }
                &.-entry {
                    span {
                        padding-left: 5rem;
                        padding-right: 2.9rem;
                        &:before {
                            width: 3.2rem;
                            height: 2.9rem;
                        }
                    }
                }
            }
        }

        .btn {
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 490px;
            width: 100%;
            padding: 2rem 1rem;
            font-size: clamp(1.3rem, calc(1.1rem + 0.8vw), 1.875rem);
            font-weight: 900;
            border-radius: 10px;
            border: 3px solid;
            background-color: var(--white);
            transition: 0.3s ease;

            span {
                display: inline;
                position: relative;
                &:before,
                &:after {
                    display: block;
                    content: "";
                    background-repeat: no-repeat;
                    background-size: contain;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    transition: 0.3s ease;
                }
                &:before {
                    left: 0;
                }
                &:after {
                    width: 1.1rem;
                    height: 1.9rem;
                    right: 0;
                }
            }

            &:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
            }

            &.-simulation {
                border-color: var(--green);
                color: var(--green);

                span {
                    padding-left: 4.8rem;
                    padding-right: 2.5rem;

                    &:before {
                        width: 3.3rem;
                        height: 3.3rem;
                        background-image: url("/src/img/ninipa/icon_simulation.svg");
                    }
                    &:after {
                        background-image: url("/src/img/ninipa/icon_arrow_green.svg");
                    }
                }
            }
            &.-entry {
                border-color: var(--orange);
                color: var(--orange);

                span {
                    padding-left: 5.6rem;
                    padding-right: 3.1rem;
                    &:before {
                        width: 3.5rem;
                        height: 3.1rem;
                        background-image: url("/src/img/ninipa/icon_entry.svg");
                    }
                    &:after {
                        background-image: url("/src/img/ninipa/icon_arrow_orange.svg");
                    }
                }
            }
            &.-contact {
                border-color: var(--blue);
                color: var(--blue);

                span {
                    padding-left: 5rem;
                    padding-right: 2.7rem;
                    &:before {
                        width: 3.2rem;
                        height: 2.5rem;
                        background-image: url("/src/img/ninipa/icon_contact.svg");
                    }
                    &:after {
                        background-image: url("/src/img/ninipa/icon_arrow_blue.svg");
                    }
                }
            }
        }

        @media screen and (max-width: 1300px) {
            .btn {
                padding: 2rem 1rem;
            }
        }
        @media screen and (max-width: 1024px) {
            gap: 1rem;

            .btn {
                max-width: 490px;
                padding: 1.5rem 1rem;

                span {
                    &:after {
                        width: 0.8rem;
                        height: 1.3rem;
                    }
                }

                &.-simulation {
                    span {
                        padding-left: 2.6rem;
                        padding-right: 1.5rem;

                        &:before {
                            width: 2rem;
                            height: 2rem;
                        }
                    }
                }
                &.-entry {
                    span {
                        padding-left: 3rem;
                        padding-right: 2rem;
                        &:before {
                            width: 2.5rem;
                            height: 2rem;
                        }
                    }
                }
            }
        }
        @media screen and (max-width: 860px) {
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
        }
        @media screen and (max-width: 750px) {
            gap: 2rem;

            .btn {
                max-width: 100%;
                padding: 2.1rem 0.7rem;

                span {
                    &:after {
                        width: 1rem;
                        height: 1.6rem;
                    }
                }

                &.-simulation {
                    span {
                        padding-left: 3.3rem;
                        padding-right: 1.4rem;

                        &:before {
                            width: 2.8rem;
                            height: 2.8rem;
                        }
                    }
                }
                &.-entry {
                    span {
                        padding-left: 5rem;
                        padding-right: 2.9rem;
                        &:before {
                            width: 3.1rem;
                            height: 2.8rem;
                        }
                    }
                }
            }
        }
    }
}


/*------------------------------------------------------------------
    メインイメージ
--------------------------------------------------------------------*/
/* mainView*/
.mainView {
    display: block;
    margin-top: 150px;

    .mainImg {
        display: block;
        width: 100%;

        img {
            max-width: 100%;
            width: 100%;
            height: auto;
        }
    }

    @media screen and (max-width: 1024px) {
        margin-top: 140px;
    }
    @media screen and (max-width: 750px) {
        margin-top: 100px;
    }
}


/*------------------------------------------------------------------
    こんなご家庭にピッタリです
--------------------------------------------------------------------*/
.merit01 .mContainer {
    background-color: var(--blue-medium);
    background-image: var(--gradient-blue);
    background-blend-mode: multiply;
}

.meritCnt {
    padding: 2.5rem 1.5rem;
    background-color: var(--white);
    border-radius: 15px;

    @media screen and (max-width: 750px) {
        padding: 2.2rem 1.3rem;
    }
}

.exampleList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    .exampleList__item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        place-items: center;
        padding: 0 1.3rem;
        
        &:not(:last-child) {
            background-image: linear-gradient(to bottom, var(--blue-deep) 50%, transparent 50%);
            background-position: top right;
            background-size: 3px 6px;
            background-repeat: repeat-y;
        }
    }
    .exampleList__ttl {
        color: var(--blue-deep);
        font-size: clamp(1rem, calc(0.689rem + 1.328vw), 1.75rem);
        font-weight: 600;
    }
    .exampleList__img {
        padding: 2.7rem 0;

        img {
            max-width: 100%;
            height: auto;
        }
    }
    .exampleList__detail {
        line-height: 1.8;
        font-size: clamp(0.75rem, calc(0.646rem + 0.442vw), 1rem);
    }

    @media screen and (min-width: 751px) and (max-width: 1024px) {
        .exampleList__item {
            &:nth-child(even) {
                background-image: none;
            }
        }
    }

    @media screen and (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 0;
    }
    @media screen and (max-width: 750px) {
        grid-template-columns: 1fr;
        gap: 0;

        .exampleList__item {
            grid-template-rows: auto auto;
            grid-template-columns: auto 1fr;
            grid-template-areas:
                "image title"
                "image detail";
            grid-row: auto;
            place-items: unset;
            gap: 0.3rem 1.35rem;
            align-items: start;
            padding: 1.35rem 0.95rem;
            
            &:first-child {
                padding-top: 0;
            }
            &:not(:last-child) {
                background-image: linear-gradient(to right, var(--blue-deep) 50%, transparent 50%);
                background-position: bottom right;
                background-size: 4px 2px;
                background-repeat: repeat-x;
            }
        }
        .exampleList__ttl {
            grid-area: title;
        }
        .exampleList__img {
            grid-area: image;
            padding: 0;
            align-self: center;

            img {
                max-width: 95px;
                max-height: 75px;
            }
        }
        .exampleList__detail {
            grid-area: detail;
        }
    }
}

.chartCont {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.4rem;
    padding: 3rem 1.9rem;
    border-radius: 12px;
    background-color: var(--blue-light);
    color: var(--blue-deep);

    .chartTtl {
        line-height: 1.5;
        font-weight: 600;
        font-size: clamp(1rem, calc(0.586rem + 1.767vw), 2rem);

        &:has(+ .chartSubTtl) {
            margin-bottom: 0.5rem;
        }
    }
    .chartSubTtl {
        line-height: 1.5;
        font-weight: 500;
        font-size: clamp(0.75rem, calc(0.543rem + 0.884vw), 1.25rem);
    }

    .chartArea {
        display: flex;
        gap: 0 1.5rem;

        img {
            max-width: 190px;
            width: 100%;
            height: auto;
        }
    }

    @media screen and (max-width: 1024px) {
        flex-direction: column;
        align-items: center;
        gap: 2.4rem 0;
    }
    @media screen and (max-width: 750px) {
        padding: 1.9rem 1.4rem;

        .chartArea {
            flex-direction: column;
            gap: 2.4rem 0;

            img {
                max-width: 156px;
            }
        }
    }
}


/*------------------------------------------------------------------
    夜の電気を多く使うご家庭がもっとおトクに
--------------------------------------------------------------------*/
.merit02 .mContainer {
    background-color: var(--blue-lighter);
}

/* 夜の電気を多く使うご家庭がもっとおトクに */
.dealBox {
    display: grid;
    /* 5列: 画像(1fr), アイコン(60px), 画像(1fr), アイコン(60px), 画像(1fr) */
    grid-template-columns: 1fr 45px 1fr 45px 1fr;
    column-gap: 22px;
    align-items: start;
    margin-bottom: 4rem;

    .priceImg {
        width: 100%;
    
        &.price01 {
            grid-column: 1;
            grid-row: 1;
        }
        &.price02 {
            grid-column: 3;
            grid-row: 1;
        }
        &.price03 {
            grid-column: 5;
            grid-row: 1;
        }
    }

    /* さらにプラス */
    .plusImg {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-self: center;
        grid-row: 1;

        &.plusImg01 {
            grid-column: 2;
        }
        &.plusImg02 {
            grid-column: 4;
        }
    }

    /* 線 */
    .borderItem {
        border-top: 1px solid #707070;
        margin-top: 20px;
        &.borderItem01 {
            grid-column: 1;
            grid-row: 2;
        }
        &.borderItem02 {
            grid-column: 3;
            grid-row: 2;
        }
        &.borderItem03 {
            grid-column: 5;
            grid-row: 2;
        }
    }

    /* 注釈テキスト */
    .noteArea {
        font-size: 11px;
        line-height: 1.8;
        color: #333333;
        margin-top: 16px;

        &.-left {
            grid-column: 1 / 4;
            grid-row: 3;
        }
        &.-right {
            grid-column: 5;
            grid-row: 3;
        }
    }

    @media screen and (max-width: 750px) {
        display: flex;
        flex-direction: column;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 3rem;

        .priceImg {
            text-align: center;
            img {
                max-width: 100%;
                width: 100%;
                height: auto;
            }
        }

        .plusImg {
            margin: 17px auto;
        }

        .borderItem {
            display: none;
        }

        .noteArea {
            margin-top: 17px;
            margin-bottom: 17px;
            font-size: 10px;

            &.-left {
                margin-bottom: 0;
            }
            &.-right {
                margin-bottom: 0;
            }
        }
    }
    @media screen and (max-width: 480px) {
        max-width: 100%;
        margin-bottom: 2rem;
    }
}

/* 料金プランの比較（例） */
.priceTable {
    margin-bottom: 1.8rem;
    overflow-x: auto;

    /* テーブル共通設定 */
    table {
        width: 100%;
        min-width: 1020px;
        border-collapse: collapse;
        table-layout: fixed;
        
        & + table {
            margin-top: 1.8rem;
        }
    }
    th, td {
        border: 1px solid #888;
        padding: 9px 12px;
        text-align: center;
        vertical-align: middle;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.5;
    }
    td .num {
        display: inline-block;
        min-width: 66px;
        text-align: right;
    }
    .dot {
        margin-right: -0.2rem;
        margin-left: 0.1rem;
    }
    thead {
        th {
            font-size: 12px;
        }
    }

    /* 背景色定義 */
    .bg-gray { background-color: #e6e5e5; }
    .bg-pink { background-color: #fceaea; }
    .bg-rose { background-color: #E9DADC; }
    .bg-white { background-color: #ffffff; }
    .bg-daytime { background-color: #ffe6d9; }
    .bg-hometime { background-color: #d9f0e6; }
    .bg-nighttime { background-color: #d9e6f2; }

    /* 罫線なし用の特殊クラス */
    .noneCont {
        border: none !important;
        background: transparent !important;
    }
}
.note,
.important {
    line-height: 1.5;
    font-weight: 500;
    font-size: clamp(0.625rem, calc(0.521rem + 0.442vw), 0.875rem);

    &:before {
        content: "※";
    }
}
.note {
    margin-bottom: 1.8rem;
    color: var(--black);
    letter-spacing: 0.021em;
}
.important {
    color: var(--orange-deep);
    letter-spacing: 0.01em;
}


/*------------------------------------------------------------------
    サーラのでんきはいいコトたくさん!!
--------------------------------------------------------------------*/
.merit03 .mContainer {
    background-color: var(--blue-medium);
    background-image: var(--gradient-blue);
    background-blend-mode: multiply;
}

.benefitsCnt {
    padding: 1.9rem;
    border-radius: 15px;
    background-color: var(--white);

    picture {
        display: block;
    }

    @media screen and (max-width: 750px) {
        padding: 2.1rem 1.3rem;
    }
}


/*------------------------------------------------------------------
    ギモンにお答えします！お客さまＱ＆Ａ
--------------------------------------------------------------------*/
.merit04 .mContainer {
    background-color: var(--blue-lighter);
}

.ques_contInner {
    margin-bottom: 3.6rem;
    @media screen and (max-width: 1024px) {
        margin-bottom: 3rem;
    }
    @media screen and (max-width: 750px) {
        margin-bottom: 2.2rem;
    }

    /* アコーディオンラップ */
    .accordion_cont {
        border: var(--yellow) 3px solid;
        border-radius: 15px;
        overflow: hidden;

        &:not(:last-child) {
            margin-bottom: 3.6rem;
        }

        @media screen and (max-width: 1024px) {
            &:not(:last-child) {
                margin-bottom: 3rem;
            }
        }
        @media screen and (max-width: 750px) {
            &:not(:last-child) {
                margin-bottom: 2.2rem;
            }
        }
    }

    /* 共通：アイコン */
    i {
        display: inline-block;
        max-width: 60px;
        margin-right: 2.6rem;

        img {
            width: 100%;
            height: auto;
        }

        @media screen and (max-width: 750px) {
            max-width: 32px;
            margin-right: 0.6rem;
        }
    }
    
    /* 質問 */
    .quesArea {
        background-color: var(--yellow-light);
        color: var(--green);
        line-height: 1.5;
        font-size: clamp(0.938rem, calc(0.704rem + 0.994vw), 1.5rem);
        position: relative;

        .ques_inner {
            display: flex;
            padding: 1.3rem 4rem 1.3rem 2rem;
            cursor: pointer;

            @media screen and (max-width: 750px) {
                align-items: flex-start;
                padding: 0.7rem 3rem 0.5rem 0.7rem;
            }
        }

        /* タイトル */
        .tit {
            display: block;
            padding-top: 0.6rem;
            line-height: 1.5;
            font-weight: 600;

            @media screen and (max-width: 750px) {
                padding-top: 0;
                flex: 1;

                br {
                    display: none;
                }
            }
        }

        /* 矢印 */
        &.active .arrow:after {
            transform: rotate(-45deg);
            top: 38%;
        }
        .arrow {
            display: block;
            background: #c3b671;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: absolute;
            right: 2%;
            top: 32%;

            &:after {
                content: '';
                width: 10px;
                height: 10px;
                border-top: 3px solid #fff;
                border-right: 3px solid #fff;
                -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
                transition: all 0.3s;
                position: absolute;
                top: 20%;
                right: 29%;
            }

            @media screen and (max-width: 750px) {
                width: 26px;
                height: 26px;
                right: 3%;

                &:after {
                    width: 7px;
                    height: 7px;
                    top: 23%;
                    right: 31%;
                }
            }
        }
    }

    /* 回答 */
    .ansArea {
        display: none;
        background-color: var(--white);
        border-top: var(--yellow) 3px dotted;

        .ans_inner {
            display: flex;
            padding: 2.65rem 3.4rem 3rem 2rem;

            &.-align {
                align-items: center;

                .text {
                    padding-top: 0;
                }
            }

            @media screen and (max-width: 750px) {
                align-items: flex-start;
                padding: 0.7rem 0.7rem 0.5rem 0.7rem;

                &.-align {
                    align-items: flex-start;
                }
            }
        }

        .ansBox {
            flex: 1;
        }

        .text {
            padding-top: 0.6rem;
            line-height: 1.8;
            font-weight: 600;
            font-size: clamp(1rem, calc(0.896rem + 0.442vw), 1.25rem);

            &:has(+ *) {
                margin-bottom: 1.8rem;
            }

            @media screen and (max-width: 750px) {
                padding-top: 0;
            }
        }
        .textArea {
            line-height: 1.8;
            font-weight: normal;
            font-size: clamp(1rem, calc(0.896rem + 0.442vw), 1.25rem);

            a {
                color: var(--orange);
                text-decoration: underline;

                &:hover {
                    text-decoration: none;
                }
            }
        }
    }    
}

/* その他のよくある質問 */
.otherFaq {
    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 1.7rem 1rem;
        background-color: var(--white);
        border-radius: 15px;
        border: 3px solid var(--brown-light);
        text-align: center;
        color: var(--green);
        font-weight: 600;
        font-size: clamp(1.125rem, calc(0.9rem + 0.6vw), 1.5rem);
        transition: 0.3s ease;

        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);

            img {
                opacity: 1;
            }
        }

        @media screen and (max-width: 750px) {
            flex-direction: column;
            gap: 0.7rem;
            padding: 1.5rem 1rem;
            border-radius: 20px;
        }
    }

    i {
        display: inline-block;
        max-width: 57px;
        margin-right: 3.1rem;

        img {
            width: 100%;
            height: auto;
        }

        @media screen and (max-width: 750px) {
            max-width: 38px;
            margin-right: 0;
        }
    }
    span {
        display: inline-block;
        padding-right: 4rem;
        position: relative;
        &:after {
            content: '';
            width: 13px;
            height: 13px;
            border-top: 3px solid var(--yellow);
            border-right: 3px solid var(--yellow);
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%) rotate(45deg);
        }

        @media screen and (max-width: 750px) {
            padding-right: 1.4rem;

            &:after {
                width: 10px;
                height: 10px;
            }
        }
    }
}


/*------------------------------------------------------------------
    こんなこともご相談ください!
--------------------------------------------------------------------*/
.merit05 .mContainer {
    background-color: var(--blue-medium);
    background-image: var(--gradient-blue);
    background-blend-mode: multiply;
}

.consultCnt {
    padding: 3.6rem;
    background-color: var(--white);
    border-radius: 15px;

    .reaText {
        display: block;
        margin-bottom: 1.8rem;
        line-height: 1.8;
        font-size: clamp(0.75rem, calc(0.543rem + 0.884vw), 1.25rem);
    }

    @media screen and (max-width: 750px) {
        padding: 1.9rem 1rem;
    }
}

.consultList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem 1.9rem;

    .consultList__item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        gap: 2rem 0;
        place-items: center;
        padding: 2.2rem 1.4rem;
        border-radius: 10px;
        border: 3px dashed var(--blue-deep);
    }

    .consultList__ttl {
        text-align: center;
        line-height: 1.5;
        color: var(--blue-deep);
        font-weight: 600;
        font-size: clamp(1rem, calc(0.689rem + 1.326vw), 1.68rem);
    }

    @media screen and (max-width: 750px) {
        grid-template-columns: auto;
        gap: 1.3rem 0;

        .consultList__item {
            grid-template-rows: auto;
            grid-row: auto;
        }
    }
}


/*------------------------------------------------------------------
    サーラの電気や「住まい・暮らし」についてのご相談は下記販売代理店へご連絡ください。
--------------------------------------------------------------------*/

.contactHeading {
    margin-bottom: 2.3rem;
    text-align: center;
    line-height: 1.5;
    color: var(--blue);
    font-weight: 600;
    font-size: clamp(1.563rem, calc(1.174rem + 1.657vw), 2.5rem);

    @media screen and (max-width: 1300px) {
        br {
            display: none;
        }
    }
    @media screen and (max-width: 750px) {
        margin-bottom: 3rem;
    }
}

.contactCnt {
    margin-bottom: 4rem;
    text-align: center;
    
    picture {
        display: inline-block;
    }

    img {
        max-width: 1022px;
        width: 100%;
        height: auto;
    }

    @media screen and (max-width: 750px) {
        margin-bottom: 2.9rem;
    }
}

.salaPlazaCnt {
    display: flex;
    align-items: center;
    gap: 0 3.7rem;
    max-width: 913px;
    margin: 0 auto;
    padding: 1.6rem 2.5rem;
    border-radius: 15px;
    border: 5px solid var(--green-light);
    background-color: var(--white);

    @media screen and (max-width: 750px) {
        flex-direction: column;
        padding: 1.8rem 0.9rem;
    }

    .imgArea {
        width: 44%;
        text-align: center;

        img {
            max-width: 100%;
            height: auto;
        }

        @media screen and (max-width: 750px) {
            margin-bottom: 1.6rem;
            width: 100%;
        }
    }
    .txtArea {
        width: 56%;
        line-height: 1.8;
        font-size: clamp(0.938rem, calc(0.834rem + 0.442vw), 1.188rem);

        .emphasis {
            color: var(--green);
            font-weight: 600;
        }
        .bold {
            font-weight: 600;
        }
        .quoteLeft {
            display: inline-block;
            margin-left: -0.4em;
        }
        .quoteRight {
            display: inline-block;
            margin-right: -0.4em;
            &.-last {
                margin-right: -0.8em;
            }
        }

        @media screen and (max-width: 750px) {
            max-width: 96%;
            width: 100%;
            margin: 0 auto;
        }
    }
}