@charset "UTF-8";

/* =========================================================
   「未経験からIT業界への／転職はお任せください！」見出し
   案B: .support .support-head h2 → .mv-lead に付け替え
   ソース: index-CxeGrcbb.css
   ※add.css の末尾に追記してください
   ※HTML構造（span の入れ子・順序）は元のまま維持すること。
     nth-child 依存のため構造が変わると装飾が崩れます
   ========================================================= */

/* 見出し全体のラッパ（元 .support .support-head に相当）
   青グラデ背景＋白文字。これが見出しの土台です */
.mv-lead {
  color: #fff;
  background: linear-gradient(90deg, #16b1f3, #0649c4);
}

/* 見出し本体（元 .support .support-head h2） */
.mv-lead h2 {
  /* flex-column 相当を内包（汎用クラスに依存させず自己完結） */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 8% 0 18%;
  margin-bottom: 0;
  row-gap: 10px;
}

/* 下部の装飾画像（元 :before。背景プロパティは元共通リセットの値を統合）
   ※ background-size は元リセットでは cover。元の見た目に合わせて cover を採用 */
.mv-lead h2::before {
  content: "";
  background-image: url(../images/support/Rectangle.png); /* ←パス注意 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
}

/* 各行の基本 */
.mv-lead h2 > span {
  font-size: 24px;
  font-weight: 600;
}

/* 1行目（"未経験からIT業界へ" + "の"）を横並びに（元 flex-row 相当を内包） */
.mv-lead h2 > span:nth-child(1) {
  display: flex;
  align-items: last baseline;
  column-gap: 5px;
}

/* "未経験からIT業界へ" の白背景＋緑文字バッジ */
.mv-lead h2 > span:nth-child(1) > span:nth-child(1) {
  font-weight: 800;
  color: #00b59a;
  background-color: #fff;
  padding: 5px;
}

/* バッジ内の "から"（小さめ・黒文字） */
.mv-lead h2 > span:nth-child(1) > span:nth-child(1) span {
  color: #21242b;
  font-size: 16px;
  font-weight: 800;
}

/* ===== work セクション（add.css 末尾に追記） ===== */
.work,
.work *,
.work *::before,
.work *::after {
  box-sizing: border-box;
}

.work {
  background: linear-gradient(157.37deg, #f2faff 11.02%, #b7cedf 48.02%);
}

.work__inner {
  padding: 8% 0;
}

.work h2 {
  margin-bottom: 15%;
}

.work__cont {
  row-gap: 40px;
  margin-bottom: 10px;
}

.work__img {
  position: relative;
}

.work__img::before {
  font-family: Roboto, sans-serif;
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 10px;
  transform: translateY(-50%);
  font-size: 50px;
  /* color: #2394ff;  ← 連番の色が薄い/黒く見える場合だけ有効化 */
}

.work__img:nth-of-type(1)::before { content: "01"; }
.work__img:nth-of-type(2)::before { content: "02"; }
.work__img:nth-of-type(3)::before { content: "03"; }

.work__img img {
  border-radius: 12px;
}

.work p {
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
  font-weight: 500;
}

.cta-box {
  background: rgba(255, 255, 255, 0.7);
  padding: 3%;
  border-radius: 8px;
  box-shadow: 0px 6px 29px rgba(0, 0, 0, 0.23);
  backdrop-filter: blur(3px);
  /* border はあえて入れない */
}

.hero__box--cta .hero__btn a img {
  max-width: 43px;
}

.hero__box--cta .hero__btn a > span span {
  flex: 1;            /* 画像の右〜spanの右端までを埋める */
  text-align: center; /* その中でテキストを中央寄せ */
  margin-right: 25px; /* 右端の「＞」の幅ぶんを空けて、両アイコンの中間に寄せる */
}

.jobs h4 {
  margin-bottom: 10px;
  column-gap: 5px;
}

.jobs h4 img {
  width: 22%;
  line-height: 0;
  position: relative;
  top: 4px;
}

.jobs h4 > span {
  width: 78%;
  font-size: 40px;
  font-weight: 800;
}

.jobs h4 > span span {
  font-size: 16px;
  font-weight: 700;
}

.jobs .jobs__inner {
  padding: 0 0 20px;
}

.jobs .jobs__head {
  margin-bottom: 20px;
}

.jobs .jobs__head p {
  line-height: 1.5;
  margin-bottom: 30px;
  text-align: center;
}

.jobs .jobs__head p span {
  display: inline-block;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(105.89deg, #e4ce9d 0.8%, #96783f 109.94%);
  border-image-slice: 1;
}

.jobs ul {
  row-gap: 10px;
}

.jobs li {
  color: #21242b;
  font-weight: 600;
  padding: 5px 10px 5px 5px;
  width: 100%;
  position: relative;
  font-size: 16px;
  padding-left: 20px;
  background-color: #cfe1ee;
  max-width: fit-content;
  border-radius: 20px;
}

.jobs .jobs__card {
  padding: 5% 5% 15%;
  row-gap: 25px;
  background: #e8f0f6;
  border: 1px solid #cdd8eb;
  border-radius: 15px;
  min-height: 400px;
  position: relative;
  box-shadow: 0px 5px 10px rgba(47, 58, 66, 0.16);
}

.jobs .jobs__card::before {
  content: "";
  background-image: url(../images/jobs/icon02.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 40%;
  aspect-ratio: 1/0.3;
  position: absolute;
  bottom: 20px;
  right: 30px;
}

.jobs .jobs__box {
  background-color: #fff;
  justify-content: center;
  font-weight: 700;
  align-items: center;
  height: 100%;
  border: 1px solid #cdd8eb;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.jobs .jobs__box .jobs__box-inner {
  text-align: center;
  line-height: 1.5;
  padding: 10% 0;
}

.jobs .jobs__box p {
  font-weight: 900;
  background: linear-gradient(90deg, #16b1f3 0%, #0649c4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: clamp(26px, 6vw, 30px);
}

.jobs .jobs__box span {
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.34);
  font-family: "Noto Serif", serif;
  background: linear-gradient(117.12deg, #e4ce9d -94.51%, #96783f 86.65%);
  color: #fff;
  padding: 1% 2%;
}

.jobs .jobs__body {
  row-gap: 10px;
}

.jobs .swiper {
  margin-bottom: 30px;
}

.jobs .swiper .swiper-slide.t-aj .jobs__box-inner p {
  font-size: clamp(22px, 6vw, 22px);
}

.jobs .swiper .swiper-pagination {
  display: flex;
  justify-content: center;
  column-gap: 5px;
}

.jobs .swiper .swiper-pagination-wrap {
  margin-top: 60px;
}

.jobs .swiper .swiper-pagination-bullet {
  width: 10px;
  height: 100%;
  aspect-ratio: 1;
  background: #cdd8eb;
  opacity: 1;
}

.jobs .swiper .swiper-pagination-bullet-active {
  background: #21242b;
}

.header h1 {
  width: 40%;
}

.header p {
  width: 60%;
  max-width: 207px;
}

.header__wrap {
  gap: 5%;
}

.hero h2 img {
  width: 100%;
  max-width: 345px;
  height: 115px;
  object-fit: cover;
  left: -10px;
}

.hero__inner {
  padding-top: 20px;
}

.hero__ttl {
  margin: 0;
  row-gap: 20px;
}

.hero__ttl img:nth-child(1) {
  margin-bottom: 20px;
}

.hero__ttl img:nth-child(2) {
  position: relative;
  width: 75%;
  max-width: 250px;
  left: -10px;
}
.hero__ttl > span:nth-child(1) {
  font-size: clamp(14px, 4.3vw, 17px);
  max-width: 83%;
  padding: 2%;
}

.hero__ttl > span:nth-child(1) span {
  font-size: clamp(12px, 3vw, 14px);
}

.hero__btn a img {
  max-width: 100%;
}

.hero__box {
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #ffffff;
  box-shadow: 0px 6px 29px rgba(0, 0, 0, 0.23);
  backdrop-filter: blur(3px);
}

.engineer p {
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
  font-weight: 500;
}

/* =========================================================
   3セクション移植 (works / media / info2)
   ソース: index-CxeGrcbb.css
   ※add.css の末尾に追記
   ※前提: 移植先CSS本体から旧 .works 系14ルールは削除済み
     （クリーン版 index-C-ecfnvw.clean.css に差し替えること）
   ========================================================= */

/* ========== works（転職支援実績）クラス名そのまま ========== */
.works {
  background: linear-gradient(90deg, #16b1f3, #0649c4);
}

.works__inner {
  padding: 8% 0;
}

.works h2 {
  color: #fff;
  /* 元ファイルの font-size:700 はタイプミス(font-weightの誤記)のため
     font-weight:700 として復元。font-size は 32px */
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 12%;
  max-width: fit-content;
  margin-inline: auto;
  border-bottom: 6px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, #EE542F 0%, #F67A34 46%, #FFA639 100%);
  border-image-width: 0 0 4px 0;
  line-height: 1.7;
  padding: 0 5px;
}

.works img {
  margin-bottom: 10%;
}

.works__txt {
  color: #fff;
  font-weight: 400;
  font-size: 11px;
  text-align: right;
}

.works__description {
  line-height: 1.5;
  align-items: center;
  font-size: clamp(16px, 5vw, 20px);
  font-weight: 600;
  row-gap: 5px;
  margin-bottom: 5%;
}

.works__description > span {
  width: 100%;
  justify-content: center;
}

/* 1行目「年間 3,284 名 / の方が」 */
.works__description > span:nth-child(1) {
  gap: 5px;
  align-items: baseline;
}

/* 「年間〜名」の白背景バッジ */
.works__description > span:nth-child(1) span:nth-child(1) {
  background-color: #fff;
  padding: 0 5px;
  font-weight: 700;
}

/* 数字「3,284」グラデ文字 */
.works__description > span:nth-child(1) span:nth-child(1) span {
  font-family: Roboto, sans-serif;
  background: linear-gradient(90deg, #ee542f, #f67a34 46%, #e67e00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-weight: 900;
  font-size: 32px;
}

/* 「の方が」白文字 */
.works__description > span:nth-child(1) span:nth-child(2) {
  color: #fff;
}

/* 2行目「弊社経由で〜」白・中央 */
.works__description > span:nth-child(2) {
  color: #fff;
  text-align: center;
}


/* ========== media（メディア掲載実績）新規・衝突なし ========== */
.media {
  background: linear-gradient(0deg, #dce9f3, #dce9f3), #ced5d5;
  font-weight: 700;
}

.media__inner {
  padding: 8% 0;
}

.media__box {
  border-radius: 12px;
  border: 1px solid #CDD8EB;
  padding: 5%;
  background-color: #fff;
}

.media img {
  margin-bottom: 20px;
}

.media h3 {
  background-color: #dce9f3;
  padding: 2% 2% 2% 5%;
  max-width: fit-content;
  margin-inline: auto;
  border-radius: 30px;
  text-align: center;
  margin-bottom: 10px;
}

.media p {
  text-align: center;
  font-size: 14px;
  margin-bottom: 20px;
}


/* ========== info2（相談だけでもOK CTA）.info → .info2 に付け替え ==========
   元の .info[data-info="2"] 専用上書きを .info2 本体に統合済み。
   HTMLでは data-info 属性は不要 */
.info2 {
  background: linear-gradient(90deg, #16b1f3, #0649c4);
  padding: 30px 0;
}

.info2 h2 {
  font-size: 15px;
  color: #fff;
  text-align: center;
  margin-bottom: 15px;
  position: relative;
  max-width: fit-content;
  margin-inline: auto;
  font-weight: 700;
}

/* 「相談だけでもOK」を一回り大きく（元 .info h2 span:nth-child(1)） */
.info2 h2 span:nth-child(1) {
  font-size: 18px;
}

.info2 a {
  padding: 6.5% 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(270deg, #ee542f, #f67a34 46.04%, #ffa639),
    linear-gradient(0deg, #e95640, #e95640),
    linear-gradient(0deg, #0000001a, #0000001a),
    linear-gradient(0deg, #0099ec, #00a6fffb 20.78%, #89dafff6);
  background-blend-mode: normal;
}

/* data-info="2" の上書き（幅90%・中央寄せ）を統合 */
.info2 a > span {
  width: 90%;
  column-gap: 10px;
  position: relative;
  justify-content: center;
}

/* 矢印アイコン（背景プロパティは元共通リセットを統合、size は元ルールの contain） */
.info2 a > span:after {
  content: "";
  right: -5px;
  top: 50%;
  width: 10%;
  max-width: 25px;
  position: absolute;
  transform: translateY(-50%);
  aspect-ratio: 1/.8;
  background-image: url(../images/global/icon01.svg); /* ←パス注意 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* data-info="2" のテキスト 21px を統合 */
.info2 a > span span {
  margin-left: 2%;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, .23);
}

/* ボタン外枠は base の .info__btn と同一なのでクラス名そのまま使用可。
   念のため自己完結させたい場合は下記を有効化（base と同値）
.info2__btn {
  overflow: hidden;
  border: 1px solid #FFAE35;
  border-radius: 40px;
  width: 90%;
  max-width: 330px;
  margin-inline: auto;
}
*/

/* =========================================================
   interview（注目企業インタビュー）＋ popup 移植
   ソース: 移植元 add.css から interview / popup[data-interview] を抽出
   ※移植先 add.css の末尾に追記
   ※前提（移植先 base CSS に既存・追加不要）:
     - Swiper ライブラリ CSS
     - .popup / .popup.active（表示切替）/ .close-btn
     - .main-ttl-200 / .wrap
   ========================================================= */

.background-set,
.interview .swiper p::after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.interview {
  background: linear-gradient(0deg, #dce9f3, #dce9f3), #ced5d5;
}
.interview h2 span:nth-child(2) {
  font-size: clamp(28px, 8vw, 32px);
}
.interview h3 {
  border-bottom: 1px solid #cdd8eb;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.interview h3 span {
  line-height: 1.5;
}
.interview h3 span:nth-child(1) {
  color: #00b59a;
  font-weight: 800;
  font-size: clamp(20px, 6.3vw, 23px);
}
.interview h3 span:nth-child(2) {
  font-weight: 700;
  font-size: clamp(16px, 4.8vw, 18px);
}
.interview__inner {
  padding: 40px 0;
}
.interview .swiper p {
  margin-right: 20px;
  position: relative;
  margin-top: 20px;
  font-weight: 700;
  text-align: right;
}
.interview .swiper p::after {
  content: "";
  background-image: url(../images/interview/arrow.png); /* ←パス注意 */
  background-size: contain;
  position: absolute;
  left: 102%;
  top: 55%;
  transform: translateY(-50%);
  width: 30%;
  max-width: 14px;
  aspect-ratio: 1;
}
.interview .swiper-wrapper {
  padding-bottom: 50px;
}
.interview .swiper-slide {
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
  background-color: #ffffff;
  filter: drop-shadow(0px 5px 10px rgba(47, 58, 66, 0.16));
  border: 1px solid #cdd8eb;
}
.interview .swiper-body {
  padding: 10px 12px 20px;
}
.interview .swiper-box {
  padding: 0 8px;
}
.interview .swiper-box > span {
  font-size: 14px;
  margin-bottom: 20px;
  font-weight: 800;
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, #16b1f3 0%, #0649c4 100%);
}
.interview .swiper-pagination-bullet {
  width: 10px;
  height: 100%;
  aspect-ratio: 1;
  background: #ffffff;
  opacity: 1;
}
.interview .swiper-pagination-bullet-active {
  background: #21242b;
}

/* ========== popup（インタビュー記事モーダル）========== */
.popup[data-interview] {
  padding: 25px 16px;
  border: 1px solid #cdd8eb;
}
.popup[data-interview] h2 {
  border: none;
  padding-bottom: 0;
}
.popup[data-interview] h2 span:nth-child(1) {
  font-size: clamp(20px, 6vw, 23px);
}
.popup[data-interview] h3 {
  padding: 5% 3% 5% 3%;
  font-size: clamp(16px, 5.5vw, 20px);
}
.popup[data-interview] h4 {
  line-height: 1.4;
  font-weight: 700;
  font-size: 16px;
  background: linear-gradient(90deg, #16b1f3 0%, #0649c4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  border-bottom: 1px solid #cdd8eb;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.popup[data-interview] h5 {
  font-weight: 700;
  color: #00b59a;
  font-size: 14px;
  margin-top: 25px;
  margin-bottom: 25px;
}
.popup[data-interview] p {
  font-size: 14px;
  text-align: justify;
}
.popup[data-interview] .popup__head {
  border-bottom: 1px solid #cdd8eb;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.popup[data-interview] .popup__head > span {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, #16b1f3 0%, #0649c4 100%);
}
.popup[data-interview] .popup__img {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.popup[data-interview] .popup__cont {
  margin-bottom: 20px;
}
.popup[data-interview] .popup__box img {
  margin-bottom: 10px;
}
.popup[data-interview] .popup__box:last-of-type {
  border-radius: 12px;
  padding: 5%;
  background-color: #e8f0f6;
}
.popup[data-interview] .popup__box:last-of-type h3 {
  padding: 0;
  background: none;
  border: none;
  font-size: 24px;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #cdd8eb;
}
.popup[data-interview] .popup__box:last-of-type p {
  font-weight: 600;
  font-size: 13px;
}

#global-container {
  max-width: 393px;     /* このページの最大コンテンツ幅に合わせた値 */
  margin-inline: auto;  /* 左右中央寄せ */
}

/* =========================================================
   career（未経験から目指せるIT職種）セクション 移植
   ソース: index-CxeGrcbb.css
   ※移植先 add.css の末尾に追記
   ※前提（移植先に既存・追加不要）: Swiperライブラリ / .main-ttl-200 / .wrap
   ========================================================= */

.career {
  background-color: #e8f0f6;
}

.career__inner {
  padding: 8% 0;
}

.career h2 span:nth-child(2) {
  font-size: clamp(28px, 6vw, 32px);
}

/* カード */
.career__box {
  padding: 5% 3% 10%;
  margin: 5px;
  background-color: #fff;
  row-gap: 15px;
  border: 1px solid #CDD8EB;
  box-shadow: 0 5px 10px #2f3a4229;
  border-radius: 12px;
  /* カード高さを揃える。元の clamp 値をそのまま採用 */
  min-height: clamp(750px, 100vw - 330px + 800px, 810px);
}

/* 4枚目の画像（難易度バッジ）だけ中央・幅制限 */
.career__box img:nth-of-type(4) {
  width: 80%;
  margin-inline: auto;
  max-width: 215px;
}

/* 特徴見出し */
.career h3 {
  background: linear-gradient(90deg, #16b1f3, #0649c4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-weight: 800;
  border-bottom: 1px solid #BBD8ED;
  text-align: center;
  line-height: 1.5;
  font-size: 20px;
  margin-bottom: 10px;
}

/* 特徴リスト枠 */
.career__list {
  background-color: #e8f0f6;
  padding: 2% 5% 5%;
  border-radius: 8px;
}

.career ul {
  row-gap: 5px;
}

.career li {
  letter-spacing: 0;
  line-height: 1.5;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  padding-left: 20px;
}

/* リストのチェックアイコン（背景プロパティは元共通リセットを統合） */
.career li::before {
  content: "";
  background-image: url(../images/career/Vector.png); /* ←パス注意 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 10%;
  aspect-ratio: 1;
  position: absolute;
  top: .2rem;
  right: calc(100% - 15px);
  max-width: 17px;
}

/* ページネーション（.career スコープ。jobs/interview と独立） */
.career .swiper-pagination {
  display: flex;
  justify-content: center;
  column-gap: 5px;
}
.career .swiper-pagination-wrap {
  margin-top: 50px;
}
.career .swiper-pagination-bullet {
  width: 10px;
  height: 100%;
  aspect-ratio: 1;
  background: #fff;
  opacity: 1;
}
.career .swiper-pagination-bullet-active {
  background: #132b72;
}