/*
 Theme Name: oltana-006 Child
 Template:   oltana-006
*/

/* =============================================================
   1. 共通設定：不要な線を消す・タイトルの強制表示
   ============================================================= */

/* H2下の動く線を完全に消去 */
.ol-heading-sub-line {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 要素の強制表示（トップ以外でも文字が出るようにする） */
[class*="-shortcut"],
.ol-heading,
.ol-heading-sub {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* =============================================================
   2. Productセクション（メリット）：入れ替えなし・サイズ固定
   ============================================================= */

/* アイテム全体の共通設定 */
.ol-product__item {
    padding: 0 !important;
    margin-bottom: 30px !important;
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    overflow: hidden;
    background-color: #154ab5 !important;
    border-radius: 1.5em;
}

/* 青い背景の中の文字色とアイコンを白で固定 */
.ol-product__content,
.ol-product__content .ol-font-en, 
.ol-product__content-list-item,
.ol-product__content-title {
    background-color: #154ab5 !important;
    color: #fff !important;
}

.ol-product__content-list.ol-product__list-type-checkmark .ol-product__content-list-item::before {
    color: #fff !important;
}

/* 画像の基本設定 */
.ol-product__image-wrapper {
    padding: 0 !important;
    line-height: 0;
    flex-basis: auto !important;
}

.ol-product__image-wrapper img {
    width: 100% !important;
    display: block;
    object-fit: cover;
}

/* --- PC・タブレット時のレイアウト（768px以上） --- */
@media screen and (min-width: 768px) {
    .ol-product__item {
        flex-direction: row !important; /* すべて「テキスト左・画像右」に固定 */
    }

    /* 画像とテキストを50%ずつにする（巨大化防止） */
    .ol-product__content,
    .ol-product__image-wrapper {
        flex: 0 0 50% !important;
        width: 50% !important;
    }

    .ol-product__image-wrapper img {
        height: 100% !important; /* PCでは高さを揃える */
    }

    .ol-product__item .ol-product__content {
        padding: 5vw !important; /* PC用の広い余白 */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* ※ 左右の入れ替え（row-reverse）設定は削除しました */
}

/* --- スマホ時の設定（767px以下） --- */
@media screen and (max-width: 767px) {
    .ol-product__item .ol-product__content {
        padding: 30px 20px !important; /* スマホに適した余白 */
        order: 2; /* テキストを下へ */
    }
    .ol-product__image-wrapper {
        order: 1; /* 画像を上へ */
    }
    .ol-product__image-wrapper img {
        height: auto !important; /* 画像が潰れないように自動調整 */
    }
}

/* =============================================================
   3. CVボタン(CTA)・スマホ表示の縦並び
   ============================================================= */

@media (max-width: 640px) {
    .main_cta_area {
        display: flex !important;
        flex-direction: column !important; /* ボタンを縦並びに */
        gap: 15px !important;
    }
    .main_cta_area .ol-btn-regular-custom2 {
        font-size: 1.3em !important;
        width: 100% !important;
        aspect-ratio: auto !important;
        border-radius: 30px !important;
    }
    /* スマホ時のMVテキスト位置調整 */
    .ol-firstview-copy-position-bottom-