/* 760px幅のメインコンテナ */
.container {
    width: 760px; /* PCページ左側の幅 */
    margin: 0 auto; /* 左右中央寄せ */
    padding: 20px 0; /* 上下 | 左右 */
    background-color: #fff; /* コンテナの背景色 */
}

.content-wrapper {
    display: flex;
    justify-content: space-between; /* 左右の要素を両端に寄せる */
    align-items: flex-start; /* 縦方向の配置を上端に合わせる */
    padding: 0 30px; /* 上下 | 左右 */
}

.text-area {
    flex-basis: 60%; /* 幅を60%に設定 */
    padding-right: 20px; /* 画像との間に余白 */
    font-size: 14px;
    line-height: 1.8;
}
.image-area {
    flex-basis: 35%; /* 幅を35%に設定 */
    max-width: 360px; /* 画像の最大幅を適宜設定 */
    
    /* 枠と影の適用 */
    border: 1px solid #ddd; /* 外側の枠（写真のフレーム） */
    padding: 5px; /* 枠と写真本体の間の余白 */
    background-color: #fff; /* 枠の内側の背景色 */
    
    /* 影のスタイル */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* X軸、Y軸、ぼかし、色の順 */
}

.image-area img {
    display: block; /* 余分な下余白を削除 */
    width: 100%; /* 親要素(image-area)の幅いっぱいに広げる */
    height: auto; /* 縦横比を維持 */
}


.divider {
    width: 100%; /* 760px → 100% 760px幅の親要素（.container）に合わせて100%に変更 */
    height: 1px;
    margin: 0;
    border-top: 1px dotted #000;
}

.text-container-fixed {
    width: 100%; /* 760px → 100% 760px幅の親要素（.container）に合わせて100%に変更 */
    height: 40px;
    display: flex;
    align-items: center;    /* 縦方向中央寄せ */
    box-sizing: border-box; /* paddingを含めて幅を760pxにする */
}


/* SECTIONタグ部分のスタイル */
.section-tag {
    /* タグの背景色と形 */
    background-color: #e0e0e0; /* 薄いグレーの背景色 */
    color: #333;
    font-size: 11px; /* 文字サイズを小さめに */
    font-weight: bold;
    padding: 0 8px; /* 内側の余白 */
    line-height: 1; /* 行の高さを調整 */
    
    /* borderの設定 */
    border-radius: 2px;
    border: 1px solid #ccc; /* 1px幅で薄いグレーの線 */

    /* SECTIONと01の間のスタイル調整 */
    margin-right: 15px; /* テキストとの間に余白 */
    letter-spacing: 0.5px;
}

.section-tag span {
    /* 01 の部分を少し強調したり、別のフォントにしたりするためのスタイル（任意） */
    font-size: 17px; /* SECTIONの文字（10px）より大きく設定 */
    margin-left: 2px;
}


.text-content {
    font-size: 19px;
    line-height: 1.2;
    margin: 0; 
    padding: 0;
}


/* 5つのBOXを横並びにするためのラッパー */
/* 1段目（BOX 1, 2, 3）と 2段目ラッパー（.row-two-pc）を縦に並べるために、
   flex-direction: column; に変更したいところですが、
   現在は BOX 1, 2, 3 の後に row-two-pc が続く構造なので、
   flex-wrap: wrap; は不要です。
   ただし、このままでは BOX 1, 2, 3 が横並びになるだけで、
   row-two-pc がその横に並ぼうとします。
   そのため、row-two-pc の幅を強制的に 100% (760px) にして、改行させます。
   BOX 1, 2, 3 は横並び、row-two-pc は幅100%で次の行へ。
*/
.strengths-wrapper-pc {
    display: flex; /* 横並びの指定 */
    justify-content: space-between; /* BOX間に均等なスペースを確保 */
    flex-wrap: wrap; /* 念のため折り返しを許可 (今回は5つなので折り返さない想定) */
    gap: 15px; /* BOX間の隙間（調整可能） */
    padding: 0; /* 両端の余白を削除 */
}

/* 個々の強みBOXのスタイル */
.box-5str-pc {
    /* 5つのBOXを横並びにするための幅計算（3等分にする） */
    /* 760px - (15px * 2箇所) = 730px。730px / 3 = 243.33px。 */
    /* gap: 15px; を使用するため、calcで正確に幅を設定します。 */
    width: calc((760px - (15px * 2)) / 3);
    
    height: auto; /* 高さはコンテンツに合わせて自動調整 */
    padding: 15px 10px; /* 内側の余白（上下左右） */
    background: #F2F2F2; /* Lightgrey */
    border: 1px solid #ddd; /* 必要に応じて薄い枠線を追加 */
    border-radius: 5px; 
    box-sizing: border-box; /* paddingとborderを含めて上記のwidthに収める */
    text-align: center; /* 中のテキストを中央寄せ */
    /* 1段目のBOXに下余白をつけ、2段目の行との間隔を確保 */
    margin-bottom: 0; /* 強制的に0にリセット */
}

/* ------------------------------------------------------------- */
/* ******** 2段目（強み04, 05）を中央寄せにするための調整 ******** */
/* ------------------------------------------------------------- */
.row-two-pc {
    /* ******** 必須: 幅を親の760pxいっぱいに広げる ******** */
    width: 100%; 
    /* **************************************************** */
    display: flex; /* BOX 4, 5 を横並びにする */
    justify-content: center; /* 中央寄せ */
    gap: 15px; /* BOX 4 と 5 の間の隙間 */
    /* margin-top: 15px; /* 1段目との間の縦の隙間 */
}


/* アイコンエリアのスタイル */
.icon-area {
    padding-top: 5px;
    padding-bottom: 5px;
}

.icon-area img {
    /* アイコンのサイズを固定値で指定 */
    width: 77px; 
    height: auto;
}

/* 強みタイトル（強み01など） */
.strength-title {
    margin: 0 0 0 0;
    font-size: 12px;
}

/* メインの強みテキスト（今の学習内容に完全対応 など） */
.strength-main {
    margin: 0 0 10px 0;
    line-height: 1.3;
    font-size: 14px; 
}

/* 説明文 */
.strength-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: left; /* 説明文は左寄せにしても読みやすい */
}


/* 「○○」はこちらボタン :::::::::::::::::::::: */
.p_link	{
	width:280px;
	margin: 10px auto 10px; /* 上 | 左右 | 下 */
}

/* -----------------------------------
    Font Awesome（文頭にアイコン）
   ----------------------------------- */
/* Icon Name ： caret-right ------------------------- */
/* アイコン用クラスの定義 */
.fa-caret-right-before-text {
    /* <span>自体を非表示にするか、インラインブロック要素として扱う */
    display: inline-block;
    vertical-align: 0%; /* テキストとの縦位置を合わせる */
}

.fa-caret-right-before-text::before {
    /* 1. caret-rightアイコンの Unicode を指定 */
    content: "\f0da"; 
    /* 2. Font Awesome のフォントとウェイトを指定 (Solidアイコン用) */
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900; 
    /* 3. アイコンのスタイル調整 */
    color: #000000; /* 黒 */
/*    font-size: 1em; */ /* フォントサイズは別に指定 */
    margin-right: 5px; /* テキストとの間に隙間を空ける */
}