/* public/css/cyber-samurai.css*/
/* =========================================
   Cyber Samurai Program ページ用スタイル
========================================= */

.cs-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
  z-index: 10;
  /* 背景エフェクトの上に表示 */
}

/* 戻るボタン */
.cs-back-nav {
  margin-bottom: 30px;
}

.cs-mt-large {
  margin-top: 50px;
}

.cs-back-btn {
  display: inline-block;
  color: #00f0ff;
  /* サイトのテーマカラーに合わせて調整 */
  text-decoration: none;
  border: 1px solid #00f0ff;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
  background-color: rgba(0, 240, 255, 0.1);
}

.cs-back-btn:hover {
  background-color: #00f0ff;
  color: #000;
}

/* ヘッダーセクション */
.cs-hero {
  text-align: center;
  margin-bottom: 60px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.cs-title {
  font-size: 2.5rem;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.cs-subtitle {
  font-size: 1.2rem;
  color: #aaa;
}

.cs-company {
  font-size: 0.9rem;
  color: #888;
  margin-top: 10px;
}

/* 各セクション共通 */
.cs-section {
  margin-bottom: 50px;
  background: rgba(10, 15, 20, 0.8);
  /* 半透明の暗い背景パネル */
  padding: 30px;
  border-radius: 8px;
  border-left: 4px solid #00f0ff;
}

.cs-section-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #fff;
}

/* グリッドレイアウト (特長セクション) */
.cs-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.cs-feature-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 6px;
}

.cs-feature-card h3 {
  font-size: 1.2rem;
  color: #00f0ff;
  margin-bottom: 10px;
}

/* リストスタイル */
.cs-target-list,
.cs-support-list {
  line-height: 1.8;
  padding-left: 20px;
}

.cs-target-list li,
.cs-support-list li {
  margin-bottom: 10px;
}

/* テーブルスタイル */
.cs-table-wrapper {
  overflow-x: auto;
}

.cs-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.cs-table th,
.cs-table td {
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.cs-table th {
  background-color: rgba(0, 240, 255, 0.1);
  color: #00f0ff;
  font-weight: bold;
}

.cs-table th:nth-child(2),
.cs-table td:nth-child(2) {
  white-space: nowrap; /* テキストを折り返さず、1行で表示する幅を強制的に確保 */
}
.cs-table th:nth-child(4),
.cs-table td:nth-child(4) {
  white-space: nowrap; /* テキストを折り返さず、1行で表示する幅を強制的に確保 */
}

.cs-table tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

.cs-container img small {
  max-width: 70%;
  /* 親要素の幅を超えないように縮小 */
  height: auto;
  /* 縦横比（アスペクト比）を維持 */
  display: block;
  /* 画像下部の謎の余白（インライン要素特有の隙間）を消す */
  margin: 20px auto;
  /* 上下に余白を取りつつ、画像を中央揃えにする */
  border-radius: 8px;
  /* 既存のセクションの角丸（8px）に合わせて統一感を出す */
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.1);
  /* サイバー感のある淡い影（任意） */
}
.cs-container img {
  max-width: 90%;
  /* 親要素の幅を超えないように縮小 */
  height: auto;
  /* 縦横比（アスペクト比）を維持 */
  display: block;
  /* 画像下部の謎の余白（インライン要素特有の隙間）を消す */
  margin: 20px auto;
  /* 上下に余白を取りつつ、画像を中央揃えにする */
  border-radius: 8px;
  /* 既存のセクションの角丸（8px）に合わせて統一感を出す */
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.1);
  /* サイバー感のある淡い影（任意） */
}

/* =========================================
   研修内容詳細テーブル (画像デザイン再現)
========================================= */

.cs-title-accent {
  color: #fff;
  border-bottom: 2px solid rgba(0, 240, 255, 0.5);
  /* シアンの透過ライン */
  display: inline-block;
  padding-bottom: 5px;
  margin-bottom: 30px;
}

/* 詳細テーブル本体 */
.cs-detail-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  /* 白文字に変更 */
  min-width: 600px;
}

/* ヘッダー部分（上のテーブルに合わせる） */
.cs-detail-table th {
  background-color: rgba(0, 240, 255, 0.1);
  /* 薄いシアン背景 */
  color: #00f0ff;
  /* シアン文字 */
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* 薄いボーダー */
  padding: 12px 15px;
  text-align: center;
}

/* セル共通 */
.cs-detail-table td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 15px;
  font-size: 0.95rem;
}

/* レベル列（少し目立たせるための微調整） */
.cs-detail-table .cs-cell-level {
  background-color: rgba(255, 255, 255, 0.05);
  /* 他のセルより少し明るい透過背景 */
  text-align: center;
  font-weight: bold;
  font-size: 1.1rem;
  color: #00f0ff;
  /* レベル名はアクセントカラーに */
}

/* 研修内容列（背景色を透過） */
.cs-detail-table tr td:not(.cs-cell-level) {
  background-color: transparent;
}

/* 視認性向上のためのストライプ（上の表と同じ設定） */
.cs-detail-table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* アイコンとテキストを綺麗に横並びにするためのFlexコンテナ */
.cs-flex-row {
  display: flex !important;
  flex-direction: column !important;
  /* 縦積みに変更 */
  align-items: center !important;
  /* 左右の中央揃え */
  gap: 12px;
  margin-bottom: 15px;
  text-align: center;
}

.cs-flex-row h3 {
  margin: 0 !important;
}

/* パターンBの場合は、カード全体のテキストも中央寄せにする */
.cs-feature-card {
  text-align: center;
}

/* アイコン画像専用の制御 */
/* インラインSVGアイコン専用の制御 */
.cs-icon {
  width: 32px;
  /* アイコンのサイズ（変更可） */
  height: 32px;
  color: #00ffcc;
  /* ここで指定した色がSVGの線色になります！ */
  flex-shrink: 0;
  /* テキストが長くなってもアイコンが潰れないようにする */
  filter: drop-shadow(0 0 8px rgba(0, 255, 204, 0.4));
  /* サイバーな発光エフェクト（任意） */
}

/* =========================================
   講師陣セクション
========================================= */

.cs-instructors-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* カード同士の余白 */
}

/* 講師カード本体 */
.cs-instructor-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  /* セクション背景よりわずかに明るく */
  border: 1px solid rgba(0, 240, 255, 0.2);
  /* サイバー感のある枠線 */
  border-radius: 8px;
  padding: 25px;
  gap: 30px;
  /* プロフィールと経歴文の間の余白 */
}

/* 左側：写真と名前のエリア */
.cs-instructor-profile {
  flex: 0 0 180px;
  /* 幅を180pxに固定（縮小させない） */
  text-align: center;
}

/* 講師の画像 */
.cs-instructor-img {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 4 / 3;    /* 縦横比を 4:3 の横長に強制固定 */
  object-fit: cover;      /* 枠に合わせて画像を拡大縮小し、はみ出た部分をトリミング */
  object-position: top;   /* トリミングの基準位置を「上部（顔）」に合わせる */
  height: auto;
  border-radius: 4px;
  /* 少しだけ角を丸くする */
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* 講師の名前 */
.cs-instructor-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #00f0ff;
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.4;
}

/* 役職部分（小さく、少し控えめな色にする） */
.cs-instructor-title {
  font-size: 0.85rem;
  color: rgba(0, 240, 255, 0.7); /* シアンを少し透過させて目立ちすぎないように */
  font-weight: normal;
  letter-spacing: 1px; /* 文字間隔を少し開けるとスマートになります */
}

/* 名前部分（大きく、アクセントカラーで強調する） */
.cs-instructor-fullname {
  font-size: 1.2rem;
  color: #00f0ff;
  font-weight: bold;
  line-height: 1.2;
}

/* 右側：経歴テキスト */
.cs-instructor-bio {
  flex: 1;
  /* 残りの幅をすべて埋める */
}

.cs-instructor-bio p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

/* 技術系(Hacker)ルート専用の文字色・アイコン色 */
.cs-icon.cs-color-hacker {
  color: #ff3366 !important; /* 強いネオンピンク・赤 */
  filter: drop-shadow(0 0 8px rgba(255, 51, 102, 0.4));
}

/* ② 技術系テキスト専用の色（隣のシアンと明度を合わせた柔らかいピンク） */
.cs-text-hacker {
  color: #ff99b3 !important; /* アイコンと同系色で少し明るく柔らかい色 */
}

/* 技術系アイコン専用の発光エフェクト（文字色に合わせて影の色も変更） */
svg.cs-icon.cs-color-hacker {
  filter: drop-shadow(0 0 8px rgba(255, 51, 102, 0.4));
}

.cs-final-message {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff; /* ネオングリーンやシアンなどお好みで */
  margin-top: 30px;
  text-align: center;
  letter-spacing: 2px;
}

/* 特長エリアのコンテナ */
.cs-feature-card {
    background-color: #111111; /* 背景よりほんの少し明るい黒 */
    border: 1px solid #222222;    /* 控えめな境界線 */
    padding: 2rem;               /* 中の余白 */
    border-radius: 8px;          /* 誠実さと洗練さを出す緩やかな角丸 */
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}

/* =========================================
   レスポンシブ（スマホ用）微調整
========================================= */
@media screen and (max-width: 768px) {

  /* スマホでは全体の左右の余白を少し詰める */
  .cs-container {
    padding: 30px 15px;
  }

  /* メインタイトルとサブタイトルをスマホサイズに縮小 */
  .cs-title {
    font-size: 1.8rem;
  }

  .cs-subtitle {
    font-size: 1rem;
  }

  /* セクション内の余白を狭くして画面を広く使う */
  .cs-section {
    padding: 20px 15px;
    margin-bottom: 40px;
  }

  .cs-section-title {
    font-size: 1.4rem;
  }

  /* スマホでの横スクロールをユーザーに気づかせるヒント（任意） */
  .cs-table-wrapper {
    /* スクロールバーの見た目を少し調整するなど */
    padding-bottom: 5px;
  }
}