/* ========== ISA-学習方式 — 完全版 (#198fce 基調) ========== */

/* ベース */
.isa-study-style{ background:#f8f9fa; color:#1f2937; box-sizing:border-box; padding-top: 70px;
    padding-bottom: 60px; }
.isa-study-style .container{ max-width:1200px; margin:0 auto; padding:0 16px; }

/* ヘッダー */
.contents02-header{ text-align:center; margin: 0 0 28px;}
.contents02-label{
    display:inline-block; font-weight:700; font-size:26px; line-height:1.25;
    background:#fff; padding:14px 22px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position:relative; margin-bottom: 25px;
}
.contents02-title{
    display:block;        /* flex/inline-flex 対策 */
    white-space:normal;   /* nowrap を解除 */
    line-height:1.4;
}
.contents02-title br{
    display:block;        /* 行送りを確実に */
    content:"";
}

.contents02-title{
    font-size: 36px;
    font-weight: 700;
    margin:0;
    letter-spacing:.01em; }
.label-accent,.title-accent{ color:#198fce; font-weight:800; }
.title-accent{ font-weight: 700; }

/* 2カラム */
.contents01-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;
}

/* カード共通 */
.contents01-card{
    --head:#198fce;                         /* どちらも基調色を#198fceに */
}
.contents01-card::before{
    content:""; display:block; height: 4px; background:var(--head);
}

/* 左右の個別調整 */
.contents01-card-left{ /* 左は通常の白カードのまま */ }
.contents01-card-right{
    /* 右は“写真以降は背景なし“ → 画像の下から透明・枠なしに */
    background:transparent; border:0; box-shadow:none;
}
.contents01-card-right .contents01-card-content,
.contents01-card-right .contents01-image-title{ background:transparent; }
.contents01-card-right::before{ background:#198fce; } /* 上の太ラインは残す */

/* カードヘッダー（アイコン＋見出し） */
.contents01-card-header{ display:flex; align-items:center; gap:10px; padding:16px 18px 16px; justify-content: center; background: #ffffff;}
.contents01-card-header h3{ margin:0; font-size:22px; font-weight:700; color:#334155; }
.contents01-icon{ width:26px; height:26px; object-fit:contain; flex:0 0 26px; }

/* 画像 */
.contents01-card-image{ width:100%; height:230px; overflow:hidden; }
.contents01-card-image img{ width:100%; height:100%; object-fit:cover; }

/* 画像下の強調テキスト（中段テキストを#198fceに統一） */
.contents01-image-title{ padding: 18px 0; }
.contents01-image-title h4{
    margin:0; font-size: 19px; font-weight:700; color:#198fce; text-align: center;
}

/* 区切りライン（画像のデザインに合わせて青の実線） */
.contents01-card-content{  }
.contents01-card-content::before{
    content:""; display:block; height:2px; background:#198fce; margin: 0 0 2px;
}

/* 箇条書き（■は#198fce） */
.bullet-list{ list-style:none; padding:0; }
.bullet-list li{
    position:relative; padding-left:1.2em; line-height:1.9; font-size:16px; font-weight: 700;
}
.bullet-list li::before{
    content:"■"; position:absolute; left:0; top:0; color:#198fce; font-weight:900; font-size:14px;
}

/* ボタン（白地＋青枠の丸ボタン） */
.contents01-btn{
    --btn:#198fce;
    /* --- 修正箇所 --- */
    display:flex; /* inline-flexからflexに変更して幅を100%にする準備 */
    width: 100%; /* ★追記：幅を親要素いっぱいに広げる */
    justify-content: space-between; /* ★修正：テキストと矢印を両端に配置 */
    /* --- 修正ここまで --- */

    align-items:center;
    gap:10px; /* テキストと矢印の間隔は維持 */
    min-height:56px; padding:0 26px; border-radius:999px; text-decoration:none;
    background:#fff; color:var(--btn); font-weight:900; font-size:17px;
    border:2px solid var(--btn);
    box-shadow:0 8px 22px rgba(25,143,206,.25);
    transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.contents01-btn .btn-arrow{
    display:inline-grid; place-items:center; font-size:31px; line-height:1; font-weight:900; color:var(--btn);
    background:#fff;
}
.contents01-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 26px rgba(25,143,206,.32);
    background:#f3f9fe;
}
.contents01-btn:hover .btn-arrow{ background:#f3f9fe; }

/* === ボタン同サイズ＋同じ高さで揃える === */

/* グリッド内のカードを等高にして、中身を縦レイアウトに */
.contents01-grid{ align-items:stretch; max-width: 825px; }
.contents01-grid > .contents01-card{
    height:100%;
    display:flex;            /* カードを縦並び */
    flex-direction:column;
}

/* コンテンツ領域を伸縮させ、ボタンを最下部に押し下げる */
.contents01-card-content{
    display:flex;
    flex-direction:column;
    gap:16px;
    flex:1;                  /* ここが伸びる */
}

/* ボタン共通サイズ（左右同一） */
.contents01-btn{
    --btn-h:56px;            /* ここを変えれば高さ統一 */
    min-height:var(--btn-h);
    padding:0 26px;          /* 幅は自動、テキスト差でも高さは固定 */
}

/* ボタンを最下部に配置（左右とも） */
.contents01-card-content .contents01-btn{ margin-top:auto; }

/* ===== 配色指定：共通アクセント＋左右ブランド色 ===== */

/* 共通アクセント（中段テキスト/区切り線/■） */
:root{ --study-accent:#198fce; }

/* 左右のブランド色（上端ラインやボタンなどに使用） */
.contents01-card-left { --brand:#198fce; }
.contents01-card-right{ --brand:#3e6364; }

/* 上端の太ラインはブランド色 */
.contents01-card::before{ background:var(--brand); }

/* --- 「この部分だけ色を同じに」 --- */
.contents01-image-title h4{ color:var(--study-accent) !important; }       /* 中段の見出し */
.contents01-card-content::before{ background:var(--study-accent) !important; } /* 画像下の横線 */
.bullet-list li::before{ color:var(--study-accent) !important; }          /* ■ */

/* ボタンはブランド色（枠・文字・矢印） */
.contents01-btn{
    --btn: var(--brand);
    color: var(--btn);
    border-color: var(--btn);
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.contents01-btn .btn-arrow{
    border-color: var(--btn);
    color: var(--btn);
}

/* ボタンテキストの中央揃えを実現するための調整 */
/* テキストを囲むコンテナに設定 */
.contents01-btn {
    position: relative; /* 子要素のabsolute配置の基準にするため */
    padding: 0 26px; /* 左右のパディングを維持 */
}

/* 矢印を絶対配置にし、その幅を考慮してテキストを中央に配置 */
.contents01-btn .btn-arrow {
    position: absolute; /* 親要素の右端に固定 */
    right: 26px; /* 右側のパディング分内側 */
    top: 41%;
    transform: translateY(-50%);
    /* ... 他のスタイルは維持 ... */
}

/* テキスト自体は、親ボタンの中央に配置されるように調整 */
.contents01-btn .btn-text {
    flex-grow: 1; /* テキストが可能な限り幅を使い、中央配置を助ける */
    text-align: center; /* 中央揃え */
    /* 矢印の幅の調整が必要な場合もありますが、一旦この設定で試すのがベストです */
}

/* 右カードは「写真下から背景なし」を維持 */
.contents01-card-right{ background:transparent; border:0; box-shadow:none; }
.contents01-card-right .contents01-card-content,
.contents01-card-right .contents01-image-title{ background:transparent; }

.contents01-card-left .contents01-card-header h3 {
    color: #29609e; /* 例: 青色 */
}

/* 右側のカードのh3に色を指定 */
.contents01-card-right .contents01-card-header h3 {
    color: #3e6364; /* 例: 緑色 */
}

.container {
    margin-left: auto;
    margin-right: auto;
}

/* 2カラム */
.contents01-grid{
    display:grid; grid-template-columns:1fr 1fr; gap: 45px; align-items:start;
}

/* === ボタン同サイズ＋同じ高さで揃える === */

/* グリッド内のカードを等高にして、中身を縦レイアウトに */
.contents01-grid{
    align-items:stretch;
    max-width: 825px;

    /* ★★★ この行を追加/修正 ★★★ */
    margin: 0 auto;
}
.page-id-1212 .contents01-grid, .page-id-1223 .contents01-grid {margin-bottom: 0;}

/* レスポンシブ */
@media (max-width: 1024px){


    .contents02-title{
        /* 最大36px（元サイズ） */
        font-size: clamp(32px, 3.5vw + 12px, 58px);
    }

    .contents02-label{
        /* 最大36px（元サイズ） */
        font-size: clamp(17px, 4.3vw, 36px);
    }

    .contents01-card-header h3{
        /* 最大38px（元サイズ） */
        font-size: clamp(20px, 2.6vw + 14px, 38px);
    }

    .contents01-card-left .contents01-image-title h4{
        /* 最大32px（元サイズ） */
        font-size: clamp(17px, 2.2vw, 32px);
    }
    .contents01-image-title h4 {
        font-size: clamp(17px, 2.2vw, 32px);
    }

    .bullet-list li{
        /* 最大28px（元サイズ） */
        font-size: clamp(16px, 1.5vw, 20px);
        letter-spacing: -0.9px; /* 既存のまま */
        padding-left: clamp(16px, 1.5vw, 18px);
        text-align: left;
    }

    .contents01-btn .btn-text{
        /* 最大34px（元サイズ） */
        font-size: clamp(16px, 3.5vw, 34px);
    }

    /* 参考：アイコンやpaddingはそのまま据え置き
    .contents01-icon { width: 40px; height: 40px; }
    .contents01-btn { padding: 11px 26px; }
    */

    .bullet-list li::before {
        content: "■";
        position: absolute;
        left: 0;
        top: 0;
        color: #198fce;
        font-weight: 900;
        font-size: clamp(16px, 1.5vw, 20px);
    }
    .contents01-grid{ grid-template-columns:1fr; gap: 2.5rem; }
    .contents01-card-content .contents01-btn.right{ margin-left:0; }
    .contents01-card-image {
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    .contents01-card-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 690 / 330;
    }

    .isa-study-style {
        padding-top: 2.8rem;
        padding-bottom: 2.5rem;
    }
    .isa-course-chooser .icc__frame {
        padding: 47px 0px 12px;
        background-color: #edf2f6;
    }
    .isa-course-chooser .icc__inner {
        max-width: 100%;
        margin: 0 auto;
        padding: 28px 16px 34px;
        background-color: #FFFFFF;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 8px;
        padding-bottom: 31px;
        border-radius: 15px;
    }


}