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

/* ============================================================
   コンタクトエリアのボタン色変更（緑色テーマに統一）
   ============================================================ */

/* 1. 「30日無料トライアル」ボタン（緑背景・白文字） */
.ol-contact-mail2 a.ol-btn-regular-custom2 {
    background-color: #21b767 !important; /* 緑背景 */
    border: 2px solid #21b767 !important;  /* 緑枠 */
    color: #ffffff !important;             /* 白文字 */
    font-weight: bold !important;          /* 太字 */
}

/* 中のアイコンとテキストも強制的に白にする */
.ol-contact-mail2 a.ol-btn-regular-custom2 i,
.ol-contact-mail2 a.ol-btn-regular-custom2 span {
    color: #ffffff !important;
}


/* 2. 「お問い合わせ」ボタン（白背景・緑文字・緑枠） */
.ol-contact-mail a.ol-btn-regular-custom1 {
    background-color: #ffffff !important;  /* 白背景 */
    border: 2px solid #21b767 !important;  /* 緑枠 */
    color: #21b767 !important;             /* 緑文字 */
}

/* 中のアイコンとテキストも強制的に緑にする */
.ol-contact-mail a.ol-btn-regular-custom1 i,
.ol-contact-mail a.ol-btn-regular-custom1 span {
    color: #21b767 !important;
}

/* ============================================================
   1. 共通セクション設定（背景グレー・フルワイド・余白確保）
   ============================================================ */
#olNewConcept02,
#olFeature,      /* ← ID変更対応済み */
#olPlan,
#olInfo,
#olProposal {
    background-color: #eff0f2 !important; /* 背景グレー */
    width: 100% !important;                /* フルワイド */
    
    /* ★ここを変更：上80px、下0px */
    padding: 80px 0 0 0 !important;        
    
    overflow: hidden !important;
}

@media (min-width: 768px) {
    #olNewConcept02,
    #olFeature,  /* ← PC用も忘れず追加 */
    #olPlan,
    #olInfo,
    #olProposal {
        /* ★ここを変更：PC用も上100px、下0px */
        padding: 180px 0 0 0 !important;       
    }
}

/* ============================================================
   2. インナーコンテナ（幅制限の解除と左右余白）
   ============================================================ */
#olNewConcept02 .inner,
#olFeature .inner,
#olPlan .inner,
#olInfo .inner,
#olProposal .inner {
    width: 100% !important;
    max-width: none !important;   /* コンテナ自体の幅制限を解除 */
    margin: 0 auto !important;
    padding: 0 20px !important;   /* スマホ用左右余白 */
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    #olNewConcept02 .inner,
    #olFeature .inner,
    #olPlan .inner,
    #olInfo .inner,
    #olProposal .inner {
        padding: 0 4% !important; /* PC用余白（テーマ標準に合わせる） */
    }
}

/* ============================================================
   3. 白いカードのデザイン（パディング追加）
   ============================================================ */
.benefit-card {
    background-color: #ffffff !important; /* 白背景 */
    width: 100% !important;
    
    /* カードの最大幅（フルワイド） */
    max-width: none !important;          
    
    margin: 0 auto !important;            /* 中央配置 */
    border-radius: 20px !important;       /* 角丸 */
    box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important; /* 影 */
    box-sizing: border-box !important;    /* 余白を含めて幅を計算する設定 */

    /* カードの内側の余白（スマホ用） */
    padding: 30px !important; 
}

/* カード内の画像設定 */
.benefit-figure-img {
    display: block !important;
    width: 100% !important;           /* 基本は親に合わせて伸縮 */
    height: auto !important;
    vertical-align: bottom !important;
    
    /* ★ここを追加：PCで800px以上広がらないように制限 */
    max-width: 800px !important;
    
    /* ★ここを追加：1080pxで止まった時に中央に寄せる */
    margin: 0 auto !important;
}

/* --- PC表示（幅768px以上）の調整 --- */
@media (min-width: 768px) {
    .benefit-card {
        /* カードの内側の余白（PC用は広めに） */
        padding: 60px !important; 
    }
}

/* ============================================================
   4. 説明文のスタイル（各セクションの見出し下）
   ============================================================ */
.proposal-description {
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #0e1a25 !important;
    margin-bottom: 40px !important;
    font-weight: 500 !important;
}

/* PCでの文字サイズ調整 */
@media (min-width: 768px) {
    .proposal-description {
        font-size: 18px !important;
        margin-bottom: 60px !important;
    }
}

/* ============================================================
   ファーストビューCVボタン：スマホ用強制上書き設定
   ============================================================ */
@media screen and (max-width: 767px) {
    .ol-firstview__cta-wrapper {
        /* 1. 「左寄せ」を打ち消して「中央寄せ」にする */
        justify-content: center !important;
        
        /* 2. もし縦並びを確実にしたい場合はこれを有効化 */
        /* flex-direction: column !important; */
        
        /* 3. 「間隔30px」を打ち消して「15px」に狭くする */
        gap: 15px !important;
        
        /* 4. 上の余白も少し狭くする（好みで調整可） */
        margin-top: 30px !important;
    }
    
    /* ボタン自体の調整（必要であれば） */
    .ol-firstview__cta-wrapper a {
        /* 横幅を少し調整して、はみ出し防止 */
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================================
   ラベル（CONCEPTなどの青背景）
   ============================================================ */

.ol-needs__heading-sub-shortcut,
.ol-product__heading-sub-shortcut, 
.ol-compare__heading-sub-shortcut, 
.ol-story__heading-sub-shortcut, 
.ol-faq__heading-sub-shortcut, 
.ol-media__heading-sub-shortcut {
    background-color: #154ab5;
    padding: 10px;
    color: #fff;
    border-radius: 5px;
}


/* ============================================================
   BENEFIT（製品紹介）専用スタイル
   ============================================================ */

/* カード全体の外枠余白を削除 */
.ol-product__item {
    padding: 0px !important;
}

/* 画像エリアの余白削除 */
.ol-product__image-wrapper {
    padding: 0 !important;
}

/* テキストコンテンツ（青背景部分）のデザイン */
.ol-product__item .ol-product__content {
    /* PC表示：左側を丸くする */
    background-color: #154ab5 !important;
    border-radius: 1.5em 0 0 1.5em !important;
    
    /* PC用の余白（広い画面では clamp が効きます） */
    padding: clamp(4.5em, 6vw, 5.1em) !important;
}

/* 文字色を白にする */
.ol-product__content .ol-font-en, 
.ol-product__content-list-item {
    color: #fff !important;
}

/* リストのチェックマークも白にする */
.ol-product__content-list.ol-product__list-type-checkmark .ol-product__content-list-item::before {
    color: #fff !important;
}

/* 不要なライン装飾を消す */
.ol-heading-sub-line {
    display: none !important;
}

/* ▼▼▼ スマホ表示の調整（ここを修正しました） ▼▼▼ */
@media screen and (max-width: 767px) {
    .ol-product__item .ol-product__content { 
        /* スマホ表示：上側を丸くする */
        border-radius: 1.5em 1.5em 0 0 !important;
        
        /* ★ここが重要：PCのclamp設定（72px）を無視して、スマホ用の程よい余白にする */
        padding: 30px 20px !important; /* 上下30px、左右20px */
    }
}


/* ============================================================
   PLANセクション専用スタイル（修正版：下余白ゼロ）
   ============================================================ */

/* 1. セクション全体の余白と背景 */
.section-plan {
    background-color: #eff0f2;
    
    /* ★修正：上60px、下0px */
    padding: 60px 0 0 0 !important;
    
    margin: 0 !important;
    overflow: hidden;
}

/* PC表示 */
@media screen and (min-width: 768px) {
    .section-plan {
        /* ★修正：上100px、下0px */
        padding: 100px 0 0 0 !important;
    }
}

/* ※注意：
   もし共通設定（#olPlan）が残っているとそちらが勝つ場合があるので、
   念のため .section-plan にも !important をつけました。
*/

/* 2. インナー幅 */
.section-plan .inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .section-plan .inner {
        padding: 0 40px;
    }
}

/* 3. 見出しエリア */
.plan-heading-wrapper {
    text-align: center;
    margin-bottom: 50px;
}

/* 4. 商品リスト */
.plan-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 5. カード全体の設定 */
.plan-item {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* 6. テキストエリア（青い部分）の設定 */
.plan-content {
    background-color: #154ab5;
    color: #ffffff;
    padding: 40px 20px !important; 
    display: flex;
    flex-direction: column !important; /* 縦積み */
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 15px;
    order: 1; /* 画像より上 */
}

/* PCの設定（横並び・左寄せ・中央配置） */
@media screen and (min-width: 768px) {
    .plan-content {
        padding: 60px !important;
        flex-direction: row !important; /* 横並び */
        align-items: center;
        text-align: left;
        justify-content: center;
        gap: 40px;
    }
}

/* 7. 左側の塊（成長プラン＋01） */
.plan-subtitle-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 5px;
}

/* SP：文字サイズ縮小 */
.plan-subtitle {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 5px;
}

/* SP：数字サイズ縮小 */
.plan-num {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    font-family: "Lexend", sans-serif;
}

/* PC設定：元の大きさに戻す */
@media screen and (min-width: 768px) {
    .plan-subtitle {
        font-size: 1rem;
        align-items: flex-start;
    }
    .plan-num {
        font-size: 3.8rem;
    }
    .plan-subtitle-inner {
        align-items: flex-start;
        margin-bottom: 0;
        width: 100px;
    }
}

/* 8. 説明文 */
.ol-plan__content-title {
    font-weight: 500;
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
    word-break: break-all;
    font-size: 20px !important;
    text-align: left !important;
    width: 100%;
}

/* PC設定 */
@media screen and (min-width: 768px) {
    .ol-plan__content-title {
        font-size: 28px !important;
        width: 640px !important;
        max-width: 100%;
    }
}

/* 9. 画像エリア */
.plan-image-wrapper {
    width: 100%;
    padding: 30px 30px !important;
    order: 2;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.plan-image {
    display: block;
    width: 100% !important;
    max-width: 800px !important;
    height: auto !important;
    position: relative;
    margin: 0 auto !important;
}

.plan-image img {
    width: 100%;
    height: auto !important;
    display: block;
    border-radius: 12px;
}

@media screen and (min-width: 768px) {
    .plan-image-wrapper {
        padding: 0 60px !important;
    }
}

/* PC表示（768px以上）のレイアウト変更 */
@media screen and (min-width: 768px) {
    .plan-item {
        flex-direction: column; 
    }
    .plan-content {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 30px 60px;
        gap: 40px;
    }
    .plan-subtitle-inner {
        align-items: flex-start;
        margin-bottom: 0;
        width: auto;
    }
    .ol-plan__content-title {
        font-size: 1.1rem;
        flex: 1;
    }
    .plan-image-wrapper {
        padding: 0 60px;
    }
}

/* =========================================
   PC表示（768px以上）のレイアウト変更
   ========================================= */
@media screen and (min-width: 768px) {
    
    /* カード全体 */
    .plan-item {
        /* 必要に応じて row にできますが、
           デザイン通り「テキスト上・画像下」なら column のままでOK */
        flex-direction: column; 
    }

    /* テキストエリア：横並び・左揃えに変更 */
    .plan-content {
        flex-direction: row;        /* 横並び */
        align-items: center;        /* 上下中央 */
        justify-content: flex-start;
        text-align: left;           /* 左揃え */
        padding: 30px 60px;
        gap: 40px;                  /* 番号と説明文の間隔 */
    }

    /* 左側の塊（成長プラン＋01） */
    .plan-subtitle-inner {
        align-items: flex-start;    /* 左揃え */
        margin-bottom: 0;
        width: auto;
    }

    /* 説明文 */
    .ol-plan__content-title {
        font-size: 1.1rem;
        flex: 1; /* 余白を埋める */
    }

    /* 画像エリア */
    .plan-image-wrapper {
        padding: 0 60px; /* 余白調整 */
    }
}

/* ============================================================
   【緊急修正】サイト全体のH2見出し（太さ・サイズ）統一
   ============================================================ */

/* 1. 見出しの太さと基本設定 */
h2, 
.ol-heading, 
.ol-product__heading,
.wp-block-heading {
    /* テーマで読み込まれている最大太さ(600)を強制適用 */
    font-weight: 600 !important; 
    
    /* 行間を少し締める */
    line-height: 1.4 !important;
    
    /* 文字色を濃い黒に統一 */
    color: #0e1a25 !important;
}

/* 2. PCでのサイズ（必要であれば調整してください） */
@media screen and (min-width: 768px) {
    h2, 
    .ol-heading,
    .ol-product__heading {
        font-size: 32px !important; /* PC標準サイズ */
    }
}

/* 3. スマホでのサイズ（ここを小さくします） */
@media screen and (max-width: 767px) {
    h2, 
    .ol-heading,
    .ol-product__heading {
        /* スマホで「大きい」と感じないサイズへ縮小 */
        font-size: 24px !important; 
        
        /* 上下の余白バランス調整 */
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }

    /* 見出しの上の英語（CONCEPTなど）も少し小さく */
    .ol-heading-sub,
    .ol-product__heading-sub {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }
}

/* メインビジュアル調整  */
@media (max-width: 640px) {
    .ol-firstview-copy-position-top-sp {
        top: 5.5em;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
}
@media screen and (max-width: 767px) {
    .ol-firstview__cta-wrapper {
        margin-top: 20em !important;
    }
}
.ol-btn-regular-download:hover {
    color: #222a78 !important;
}
.ol-needs__list.ol-needs-visual-single .ol-needs__list-item {
justify-content: center;
}
/* パディング調整 */
.ol-product__section {
    padding-top: clamp(0em, 21vw, 4em);
    padding-bottom: clamp(0em, 21vw, 4em);
}
.ol-section {
    margin-top: 0px !important;
    margin-bottom: clamp(0em, 21vw, 4em);
    padding-top: clamp(0em, 21vw, 4em);
    padding-bottom: 0em;
}
@media (min-width: 768px) {
    #olFeature, #olPlan, #olInfo, #olProposal {
        padding-top: clamp(0em, 21vw, 6em) !important;
    }
}
#olNewConcept02 {
    padding-top: clamp(0em, 21vw, 4em) !important;
}

.ol-product__image-wrapper img {
        height: 100% !important;
        border-radius: 0px 30px 30px 0 !important;
}
.ol-product__item {
    column-gap: 0;
}

/* 色調整 */
.ol-product__heading-sub-shortcut, .ol-compare__heading-sub-shortcut, .ol-story__heading-sub-shortcut, .ol-faq__heading-sub-shortcut, .ol-media__heading-sub-shortcut {
    background-color: #006b32 !important;
}

.ol-product__item .ol-product__content {
    background-color: #006b32 !important;
}

.plan-content {
    background-color: #006b32 !important;
}

.ol-contact-mail2 a.ol-btn-regular-custom2 {
    /*background-color: #154ab5 !important;
    border: 2px solid #154ab5 !important;*/
    background-color: #222a78 !important;
    border: 2px solid #222a78 !important;
    
    color: #ffffff !important;
    font-weight: bold !important;
}
.ol-contact-mail a.ol-btn-regular-custom1, {
    background-color: #ffffff !important;
    border: 2px solid #222a78 !important;
    color: #222a78 !important;
}
.ol-contact-mail a.ol-btn-regular-custom1 i, .ol-contact-mail a.ol-btn-regular-custom1 span {
    color: #222a78 !important;
}
.ol-contact-mail2 .ol-btn-regular-custom2 {
    background-color: #222a78 !important;
}
.ol-contact-mail .ol-btn-regular {
    background-color: #ffffff !important;
    border: 2px solid #222a78 !important;
    color: #222a78 !important;
}
/* MV調整 */
@media (min-width: 768px) {
    .ol-firstview__inner {
        /*margin-top: 40px;*/
    }
}
@media (max-width: 640px) {
.ol-firstview-copy-position-top-sp {
        top: 2em;
    }
}
.ol-text-color-text {
    color: #fff !important;
}
.ol-firstview__title-subcopy {
    margin-top: 1em;
}
@media (max-width: 640px) {
    .ol-firstview__text-size-sp-5 .ol-firstview__title-maincopy .ol-firstview__title-accent{
        font-size: 1.6em;
    }
    .ol-firstview__title-subcopy {
        font-size: 0.9em !important;
    }
}
.ol-product-add-contact .ol-section {
    padding-top: 0px !important;
}
@media (max-width: 640px) {
    .ol-firstview__inner {
        display: flex;
        flex-direction: column;
        gap: clamp(0em, 3.3vw, 2em);
        height: 92% !important;
    }
    .ol-firstview__title {
        flex-grow: 0;
        flex-basis: 0;
    }
    .ol-firstview__cta-wrapper {
        justify-content: center !important;
        align-items: flex-end;
        flex-grow: 1 !important;
        align-content: flex-end;
    }
}
@media screen and (max-width: 767px) {
    .ol-firstview__cta-wrapper {
        margin-top: 0em !important;
    }
}
.ol-contact-mail a.ol-btn-regular-custom1 {
    background-color: #ffffff !important;
    border: 2px solid #222a78 !important;
    color: #222a78 !important;
}
.ol-cvbutton-color-accent {
    background-color: #222a78 !important;
}
.ol-cvbutton__icon {
    color: #222a78 !important;
}
.ol-security-h3 {
    color: #076B35 !important;
}
.ol-btn-regular-download, .ol-btn-regular-trial {
    display: flex;
    flex-direction: column;
    padding: 0px 2em !important;
    height: 80px;
    align-items: center;
    align-content: center;
}
.ol-btn-sub-text {
    font-size: 0.7em;
}
.ol-contact-mail-text{
    font-size: 1.4em;
    flex-grow: 0 !important;
}
.ol-contact-mail-text2 {
    font-size: 1.2em;
    flex-grow: 0 !important;
}
.ol-btn-regular-custom1, .ol-btn-regular-custom2 {
    isplay: flex;
    flex-direction: column;
    height: 80px;
}
.ol-btn-regular-custom1::before {
    content: "AIで社労士ビジネスを拡大する方法";
    font-size: 0.7em;
}
.ol-contact__section {
    padding-top: 0;
}
.ol-needs__heading-sub-shortcut {
    background-color: #006b32 !important;
}
/* 不要な装飾を削除 */
#ol-section-needs .ol-needs__list-item-shortcut::before,
#ol-section-needs .ol-needs__list-item-shortcut::after {
    display: none !important;
    content: none !important;
}
.ol-needs__list.ol-needs-visual-single .ol-needs__list-item p {
    padding-left: 0;
}
.table_difference thead th:not(:first-child) {
	min-width: 25% !important;
	width: 25% !important;
}
.table_difference td {
	min-width: 25% !important;
	width: 25% !important;
}
@media (max-width: 640px) {
    .table_difference thead th:not(:first-child) {
        min-width: 180px !important;
        width: 180px !important;
    }
    .table_difference thead th:not(:first-child) {
        min-width: 210px !important;
        width: 210px !important;
    }
}
@media screen and (max-width: 767px) { 
    .ol-firstview__title-main-subcopy_wrapper {
        padding-top: 0.8em !important;
    }
	.ol-firstview__title-main-subcopy_att::after {
		content:"\A" !important;
        white-space:pre !important;
	}
}
.ol-compare__section {
    margin-bottom: 120px !important;
}