/* ==========================================================================
   オンライン英語講座（online-lp）専用スタイル - 並列ブロック・幅崩れ完全修正版
   ========================================================================== */

/* ベース設定 */
.online-lp {
    color: #333333;
    line-height: 1.8;
    font-size: 1.4rem;
    padding-top: 50px;
}

.online-lp p {
    font-size: 1.5rem;
    text-align: left;
    color: #333333;
    margin-bottom: 20px;
}

/* カラム幅制御 */
.online-lp .lp-inner {
    max-width: 970px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 全幅背景エリア（選ばれる理由と共通） */
.online-lp .lp-full-bg {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
    padding: 80px 0;
    box-sizing: border-box;
}

/* 導入メッセージ（ファーストビュー） */
.online-lp .lp-intro-header {
    background-color: #1a2a4c;
    background-image: url(https://school.curious-world.co.jp/wp-content/uploads/2026/02/PXL_20220507_042223435-1.png);
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    margin-bottom: 60px;
    text-align: center;
}

.online-lp .lp-main-catch {
    font-size: 2.6rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.5;
    margin-bottom: 30px;
    text-align: center;
}

/* <h2> セクション大見出し */
.online-lp h2.lp-sec-title {
    font-size: 2.6rem;
    line-height: 1.5;
    color: #004a99;
    text-align: center;
    margin: 60px 0 40px 0;
    font-weight: 900;
}

/* <h3> セクション中見出し（通常版） */
.online-lp h3.lp-sub-headline {
    font-size: 2.2rem;
    color: #004a99;
    margin: 60px 0 35px 0;
    font-weight: 900;
    text-align: center;
}

/* 標準2カラムグリッド構造（プログラム内容用） */
.online-lp .lp-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin: 0;
}
.online-lp .lp-grid-item {
    flex: 1;
    min-width: calc(50% - 10px);
    background: #f4f7f9;
    padding: 40px;
    box-sizing: border-box;
    border-radius: 4px;
}

/* プログラムの特徴：4カラムグリッド構造 */
.online-lp .lp-feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
    margin: 0 0 40px 0;
}
.online-lp .lp-feature-item {
    flex: 1;
    min-width: calc(25% - 12px);
    background: #f4f7f9;
    padding: 25px 20px;
    box-sizing: border-box;
    border-radius: 6px;
    text-align: center;
}
.online-lp .lp-feature-item h4 {
    text-align: center;
    font-size: 1.6rem;
    margin-top: 15px;
}
.online-lp .lp-feature-item p {
    font-size: 1.4rem;
    line-height: 1.6;
}

/* 各種カード内の <h4> 見出し設定 */
.online-lp h4 {
    font-size: 1.7rem;
    line-height: 1.5;
    color: #004a99;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 900;
    text-align: left;
}

/* 奇数（7つ目）の中央寄せラッパー */
.online-lp .lp-grid-center {
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}
.online-lp .lp-grid-center .lp-grid-item {
    flex: 0 1 calc(50% - 10px);
}

/* 特殊連携プログラム用ワイドカード */
.online-lp .lp-grid-item-wide {
    min-width: 100%;
    background: #f4f7f9;
    padding: 45px;
    box-sizing: border-box;
    border-radius: 4px;
    margin-bottom: 30px;
}
.online-lp .lp-grid-item-wide h4 {
    font-size: 1.8rem;
    margin-top: 25px;
    margin-bottom: 10px;
}
.online-lp .lp-grid-item-wide h4:first-of-type {
    margin-top: 0;
}

/* ==========================================================================
   料金例セクション：グリッド幅崩れ修正スタイル
   ========================================================================== */
.online-lp .price-section-bg {
    background-color: #f4f7f9;
    padding: 80px 0;
    margin-bottom: 60px;
}

/* 完全に同一の1:1幅で2列に固定し、自動伸縮をシャットアウト */
.online-lp .lp-price-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

/* 統合された大枠の白背景カード（枠線の狂いを防ぐためoverflowを設定） */
.online-lp .lp-price-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
    border-radius: 8px;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 料金例エリア専用の <h3> スタイリング（マイナスマージンを廃止し、グリッドの崩れを完全回避） */
.online-lp h3.lp-price-section-title {
    font-size: 1.9rem;
    color: #ffffff;
    background: #004a99;
    padding: 15px 20px;
    margin: 0;
    font-weight: 900;
    text-align: center;
    border-radius: 0;
}

/* カード内部のコンテンツ用の余白を個別に設定 */
.online-lp .lp-price-card-body {
    padding: 40px;
    box-sizing: border-box;
    flex-grow: 1;
}

/* カード内部の見出し（特徴 / 料金例） */
.online-lp .lp-price-card h4 {
    font-size: 1.65rem;
    color: #333333;
    margin-top: 25px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e2e8f0;
}
.online-lp .lp-price-card h4:first-of-type {
    margin-top: 0;
}

/* <h5> 料金例の中の小見出し */
.online-lp h5 {
    font-size: 1.5rem;
    font-weight: 900;
    margin: 20px 0 10px 0;
    padding-left: 8px;
    border-left: 3px solid #000;
    text-align: left;
}

/* 料金用リスト（オレンジの矢印「〉」を付与） */
.online-lp ul {
    padding: 0;
    margin: 0 0 20px 0;
    background: none;
}
.online-lp ul li {
    list-style: none;
    position: relative;
    padding-left: 20px;
    font-size: 1.45rem;
    color: #333333;
    margin: 10px 0;
    text-align: left;
}
.online-lp ul li::before {
    content: '〉';
    color: #fca702;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}

/* 金額の強調用スタイル */
.online-lp .price-highlight {
    font-weight: 900;
    color: #004a99;
    font-size: 1.55rem;
}

/* ダミー画像用プレースホルダー */
.online-lp .img-dummy {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #e2e8f0;
    border: 2px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-weight: bold;
    font-size: 1.6rem;
    border-radius: 6px;
}

/* アイコン用の小さなダミー画像枠 */
.online-lp .icon-dummy {
    width: 64px;
    height: 64px;
    background: #e2e8f0;
    border: 1px dashed #cbd5e1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 1.2rem;
    font-weight: bold;
}

/* お問い合わせBOX */
.online-lp .lp-cta-dashed-box {
    background: #ffffff;
    border: 4px dashed #004a99;
    border-radius: 20px;
    color: #333333;
    padding: 60px 40px;
    text-align: center;
}

/* モバイルレスポンシブ */
@media (max-width: 767px) {
    .online-lp .lp-main-catch { font-size: 2.0rem; }
    .online-lp h2.lp-sec-title { font-size: 2.3rem; }
    .online-lp h3.lp-sub-headline { font-size: 1.9rem; }
    .online-lp .lp-section-flex, .online-lp .lp-section-flex.row-reverse { flex-direction: column; gap: 20px; margin-bottom: 40px; }
    .online-lp .lp-flex-media { min-width: 100%; width: 100%; }
    .online-lp .lp-grid-item { min-width: 100%; padding: 30px 20px; }
    .online-lp .lp-feature-item { min-width: calc(50% - 8px); padding: 20px 15px; }
    
    /* スマホ表示時は等幅1列に切り替え */
    .online-lp .lp-price-grid-wrapper { grid-template-columns: 1fr; gap: 20px; }
    .online-lp .lp-price-card-body { padding: 30px 20px; }
    .online-lp .lp-grid-center .lp-grid-item { flex: 1 1 100%; }
    .online-lp .lp-grid-item-wide { padding: 30px 20px; }
}
@media (max-width: 480px) {
    .online-lp .lp-feature-item { min-width: 100%; }
}
</style>