@charset "UTF-8";

/* ==========================================================
  TOPページ修正用CSS（2026年10月）
  ・既存CSSは編集せず、このファイルで上書きしています
  ・リブランディング時は、このファイルごと削除して構いません
  ・画面幅の区切りは既存CSSに合わせています
    1099px以下：PCの画面を縮めたとき／768px以下：スマホ
  ========================================================== */


  /* ----------------------------------------------------------
  ① ヘッダー：ページを開いた直後から、白背景・黒ロゴで表示する
  ※スクロールしたときと同じ見た目に固定します
  ※スマホでメニューを開いたとき（黒背景・白ロゴ）は除外しています
  ---------------------------------------------------------- */

/* ヘッダーの背景を白にする */
.top .l-header:not(.-bg-black) {
  background-color: #fff !important;
}

/* ロゴを黒文字にする */
.top .l-header__logo:not(.-white) {
  color: #323232 !important;
}


/* ----------------------------------------------------------
② Service：ロゴを消して上に詰まった分、文字のまとまりを下げる
---------------------------------------------------------- */

/* PC（769px以上）：写真と重ならないよう、上に余白を足す */
@media (min-width: 769px) {
  .top__services--textbox {
    padding-top: 100px;  /* 写真と重ならなくなるまで数値を調整 */
  }

/* 説明文とボタンの間のすき間を狭くする（ほかのセクションと同じ40pxにそろえる） */
.top__services--textbox--text {
  margin-bottom: 0;  /* 説明文の下に元から付いている余白を消す */
  }

.top__services--textbox .c-btn {
  margin-top: 40px;  /* 説明文 → ボタンのすき間 */
  }
}

/* スマホ */
@media (max-width: 768px) {
  .top__services--textbox .c-btn {
    margin-top: 32px;
  }
}

/* スマホ（768px以下）だけ：斜めの模様と重ならないよう、文字のまとまりを下げる
   ※PCには一切影響しません */
@media (max-width: 768px) {
    .top__services--textbox {
      padding-top: 20vw;  /* 画面幅の20%ぶん下げる */
    }
  }

  /* スマホ（768px以下）だけ：説明文とボタンの間の余白を狭くする
   ※元のCSSに負けないよう、親のクラスから書いています。PCには影響しません */
@media (max-width: 768px) {
  .top__services .top__services--textbox .top__services--textbox--text {
    margin-bottom: 0;  /* 説明文の下に元から付いている余白を消す */
  }

  .top__services .top__services--textbox .c-btn {
    margin-top: 32px;  /* 説明文 → ボタンのすき間 */
  }
}

/* ----------------------------------------------------------
  ③ About us：文章の下にボタンを2段で置く
  1段目：会社概要（横いっぱい）
  2段目：役員紹介／IR情報（半分ずつ）
  ---------------------------------------------------------- */

/* ①見出し「SpiderPlus & Co.について」→ 説明文のすき間を狭くする
   ※元のCSSに負けないよう、親のクラスから書いています */
  .top__about-us .top__about-us--textbox .top__about-us--textbox--title {
    margin-bottom: 20px;
    margin-top: 30px;
  }
  
  /* ②説明文の下に元から付いている余白を消す（ボタンとのすき間は下の margin-top で決める） */
  .top__about-us .top__about-us--textbox .top__about-us--textbox--text {
    margin-bottom: 0;
  }
  
  /* ボタンのまとまりを2列のグリッドにする（幅は文章と同じ） */
  .top__about-us--btns {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 同じ幅の2列 */
    gap: 12px;                      /* ③ボタン同士のすき間（縦・横とも）16px → 12px */
    margin-top: 48px;               /* ②説明文 → ボタンのすき間 48px */
  }
  
  /* ボタンを、それぞれのマスの幅いっぱいに広げる */
  .top__about-us--btns .c-btn {
    margin: 0;               /* 元からついている余白を消す */
    width: 100%;             /* マスの幅いっぱいにする */
    min-width: 0;            /* 元の最小幅の指定があっても縮められるようにする */
    max-width: none;         /* 元の最大幅の指定を外す */
    box-sizing: border-box;  /* 余白込みで100%にする（はみ出し防止） */
  }
  
  /* 1つ目のボタン（会社概要）だけ、2列ぶんの幅を使う */
  .top__about-us--btns .c-btn:first-child {
    grid-column: 1 / -1;     /* 1列目から最後の列まで */
  }
  
  /* スマホ */
  @media (max-width: 768px) {
    /* ①見出し → 説明文のすき間（PCと同じ強さの書き方にする） */
    .top__about-us .top__about-us--textbox .top__about-us--textbox--title {
      margin-bottom: 24px;
    }
  
    /* すべて1列（縦並び・横いっぱい）にし、②説明文 → ボタンのすき間を詰める */
    .top__about-us--btns {
      grid-template-columns: 1fr;
      margin-top: 34px;
    }
  }


  @media (max-width: 768px) {
    /* 「About Us」→「SpiderPlus & Co.について」のすき間を狭くする（スマホだけ）
       ※About usセクションの中の小見出しだけに当てる。PCには影響しません */
    .top__about-us .top__caption {
      margin-bottom: -12px;  /* 元は18px */
    }
    /* （すでに書いてある見出し・ボタンの指定はそのまま） */
  }


/* ----------------------------------------------------------
  ④ Vision：見出し・説明文・ボタンの大きさと余白
  ---------------------------------------------------------- */

/* 見出しの改行：PCでは改行しない */
.mission-br-sp {
  display: none;
}

/* 見出しの改行：スマホでは改行する */
@media (max-width: 768px) {
  .mission-br-sp {
    display: inline;
  }
}

  /* 見出しの大きさと、説明文との間の余白（PC）
   ※元のCSSより強くするため、親のクラスから書いています */
.top__mission .top__mission--textbox .top__mission--textbox--title {
  font-size: 32px;
  line-height: 1.6;
  margin-bottom: 30px;  /* 見出し → 説明文のすき間 */
  font-weight: 800;
}

/* 説明文の大きさ（PC） */
.top__mission--textbox--text {
  font-size: 14.5px;
  line-height: 2.0;
}

/* 段落と段落の間に余白を空ける（2つ目以降の段落の上だけに付ける） */
.top__mission--textbox--text + .top__mission--textbox--text {
  margin-top: 1em;  /* 文字1つぶんの余白 */
}

/* 説明文とボタンの間のすき間（PC） */
.top__mission--textbox .c-btn {
  margin-top: 54px;
}

/* スマホ */
@media (max-width: 768px) {
  /* 見出し：PCと同じ強さの書き方にしないと、PCの指定が勝ってしまうので注意 */
  .top__mission .top__mission--textbox .top__mission--textbox--title {
    font-size: 26px;
    margin-bottom: 24px;
  }

  /* 説明文を小さくする */
  .top__mission--textbox--text {
    font-size: 14px;
  }

  .top__mission--contents img {
    margin-top: 54px;
  }

  /* 説明文とボタンの間のすき間を詰め、ボタンを横幅いっぱいにする */
  .top__mission--textbox .c-btn {
    margin-top: 40px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
}


/* ----------------------------------------------------------
  ⑤ News：「ニュース一覧」「IRニュース一覧」を横に並べる
  ・広いPC：ボタンは文字に合わせた幅
  ・1099px以下：2つで横幅いっぱい
  ・768px以下：縦に並べて、それぞれ横幅いっぱい
  ---------------------------------------------------------- */

/* ボタンを横に並べる（入りきらなければ自動で折り返す） */
.top__news--btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;  /* ボタン同士のすき間 */
}

/* ボタンに元からついている余白を消して、位置をそろえる */
.top__news--btns .c-btn {
  margin: 0;
}

.top__news--textbox--title {
  margin-bottom: 50px;
}

/* 1099px以下：既存CSSで縦並びに切り替わる幅に合わせて、ボタンを横幅いっぱいにする */
@media (max-width: 1099px) {
  /* 見出し・ボタンのエリアを横幅いっぱいにする */
  .top__news--contents .top__news--title {
    width: 100%;
    max-width: none;
  }

  /* 2つのボタンを1行に並べる（折り返さない） */
  .top__news--btns {
    flex-wrap: nowrap;
  }

  /* 2つのボタンで、横幅を半分ずつ分け合う */
  .top__news--btns .c-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
  }
}

/* 768px以下（スマホ）：縦に並べて、それぞれ横幅いっぱいにする */
@media (max-width: 768px) {
  .top__news--btns {
    flex-direction: column;
  }

  .top__news--textbox--title {
    margin-bottom: 40px;
  }

  .top__news--btns .c-btn {
    flex: none;   /* 1099px以下の「半分ずつ」の指定を外す */
    width: 100%;
  }
}

/* ----------------------------------------------------------
  ⑤ News：余白の微調整
  ---------------------------------------------------------- */

/* PC：「News」→「ニュース」のすき間を狭くする
   ※Newsセクションの中の小見出しだけに当てる */
  .top__news .top__caption {
    margin-bottom: 12px;  /* 元は25px */
  }
  
  /* スマホ（768px以下） */
  @media (max-width: 768px) {
    /* ①「News」→「ニュース」のすき間を、さらに狭くする */
    .top__news .top__caption {
      margin-bottom: 8px;
    }
  
    /* ②「IRニュース一覧」ボタン → ニュース一覧のすき間を広げる */
    .top__news--btns {
      margin-bottom: 28px;  /* 今のすき間に、28px足す */
    }
  }

/* ----------------------------------------------------------
  ⑥ バナー削除：空いた分だけ、Careerセクションを上に詰める
  ※背景の斜めの帯・写真・文字をまとめて上に移動します
  ---------------------------------------------------------- */

/* PC（1100px以上）：元は100px */
@media (min-width: 1100px) {
  .top__career--wrap .top__career {
    margin-top: -80px;  /* 0 → -80px に。 */
  }
}

/* 1099px以下（PCを縮めたとき・スマホ）：元の -9.333vw から、さらに10px上げる */
@media (max-width: 1099px) {
  .top__career--wrap .top__career {
    margin-top: calc(-9.333vw - 10px);  /* 40px → 10px に */
  }
}


/* ----------------------------------------------------------
  ⑦ Career：「新卒採用サイト」「中途採用サイト」を横に並べる
  ・広いPC：ボタンは文字に合わせた幅
  ・1099px以下：2つで横幅いっぱい
  ・768px以下：縦に並べて、それぞれ横幅いっぱい
  ---------------------------------------------------------- */

/* ボタンを横に並べる（入りきらなければ自動で折り返す） */
.top__career--btns {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 40px;  /* 説明文とボタンの間のすき間（PC） */
}

/* ボタンに元からついている余白を消して、位置をそろえる */
.top__career--btns .c-btn {
  margin: 0;
}

/* 1099px以下：2つのボタンで、横幅を半分ずつ分け合う */
@media (max-width: 1099px) {
  .top__career--btns {
    flex-wrap: nowrap;
  }

  .top__career--btns .c-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
  }
}

/* 768px以下（スマホ）：縦に並べて、それぞれ横幅いっぱいにする */
@media (max-width: 768px) {
  .top__career--btns {
    flex-direction: column;
    margin-top: 32px;  /* 説明文とボタンの間のすき間（スマホ） */
  }

  .top__career--btns .c-btn {
    flex: none;
    width: 100%;
  }
}


/* ----------------------------------------------------------
  ⑧ フッター：メディア（左）とSNS（右）を2列に並べる
  各項目の上下に区切り線を入れる
  ---------------------------------------------------------- */

/* ロゴの下に元から付いている余白を消す（ロゴ → リンクの間は、下の margin-top で決める） */
.l-footer__left .l-footer__logo {
  margin-bottom: 0;
}

/* ポリシーのリンクの上に元から付いている余白を消す（リンク → ポリシーの間は、下の margin-bottom で決める） */
.l-footer__links + .l-footer__bottom--link {
  margin-top: 0;
  padding-top: 0;  /* 元のCSS（2304_style.css）の padding-top: 50px を消す ← 追加 */
}

/* 2つの列（メディア／SNS）を左右に並べる */
.l-footer__links {
  display: flex;
  align-items: flex-start;  /* 項目数が違っても、上をそろえる */
  gap: 28px;                /* 列と列のすき間 */
  margin-top: 43px;         /* ロゴ → リンクのすき間 */
  margin-bottom: 50px;      /* YouTubeの下線 → プライバシーポリシーのすき間 */
}

/* 1つの列（PC：線の長さを177pxに固定） */
.l-footer__media {
  flex: 0 0 177px;          /* 幅を177pxに固定（伸び縮みしない） */
  margin: 0;
  padding: 0;
  list-style: none;         /* リストの「・」を消す */
  border-top: 1px solid rgba(255, 255, 255, 0.2);  /* 1つ目の項目の上の線 */
}

/* 各項目の下に区切り線を引く */
.l-footer__media li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* アイコンと名前を横に並べ、項目の高さをそろえる */
.l-footer__media a {
  display: flex;
  align-items: center;      /* アイコンと文字の上下の中心をそろえる */
  gap: 10px;                /* アイコンと名前のすき間 */
  height: 52px;             /* 1項目の高さ（線と線の間） */
  color: #fff;
  font-size: 15px;
  text-decoration: none;
}

/* マウスを乗せたときに少し薄くして、リンクだとわかるようにする */
.l-footer__media a:hover {
  opacity: 0.7;
}

/* アイコンの大きさをそろえる */
.l-footer__media img {
  width: 22px;
  height: 22px;
  object-fit: contain;      /* 縦横比を保ったまま枠に収める（つぶれ防止） */
  flex-shrink: 0;           /* 狭い画面でもアイコンが縮まないようにする */
}


/* スマホ（768px以下）：2列で横幅を分け合う */
@media (max-width: 768px) {
  .l-footer__links {
    gap: 16px;
  }

  .l-footer__media {
    flex: 1 1 0;            /* 177px固定をやめて、2列で幅を分け合う */
  }
}

@media (max-width: 768px) {
  /* フッター左側の、元からある左の余白（30px）を消す（スマホだけ） */
  .l-footer__top .l-footer__left {
    padding-left: 0;
  }

  /* （すでに書いてある .l-footer__links・.l-footer__media の指定はそのまま） */
}