/* ==============================
   メインビジュアル周り
   ============================== */

/* #mainimg-inner のボタン崩れ対策 */
#mainimg {
	display: block; /* ← ここをflexやめる（中央寄せが不要な場合） */
	justify-content: center;
	/* background-image: url('../images/images.png'); ← パスはあなたの画像に合わせて変更してください */
	background-repeat: no-repeat;
	background-position: center;
}

/* #mainimg-inner のレイアウト */
#mainimg-inner {
	width: 100vw;              /* ビューポート幅いっぱい */
	height: 100vh;
	box-sizing: border-box;
	
	/* レイアウト崩れ対策：縦並び・中央揃え強制 */
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 20px;
	max-width: 2800px;
}

/* ボタンの最大幅を調整（スマホでも崩れにくく） */
#mainimg-inner div {
	width: 100%;
	max-width: 400px;
}

/* 子要素が正しく縦に並ぶように幅制限 */
#mainimg-inner > div {
	width: 100%;
	max-width: 1000px;
}

/* 共通レイアウト（影・背景をリセット） */
.centered-block,
.left-content {
	box-shadow: none !important;      /* 強制的に影を消す */
	background: transparent !important; /* 背景色も無色に */
}

/* 横並びブロック */
.centered-block {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 40px;
	width: 100%;
	max-width: 1000px;
	margin-top: 20px;
}

/* テロップ付きの左側 */
.left-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
	max-width: 400px;
}

/* ==============================
   テロップ1（メインテロップ）
   ============================== */

.ticker {
	width: 100%;
	background: #007BFF;
	color: white;
	overflow: hidden;
	white-space: nowrap;
	font-weight: bold;
	padding: 10px 0;
	border-radius: 4px;
}

.ticker-inner {
	display: inline-block;
	padding-left: 100%;
	animation: ticker-scroll 20s linear infinite;
}

@keyframes ticker-scroll {
	0%   { transform: translateX(0); }        /* 右外から開始 */
	90%  { transform: translateX(-250%); }   /* 左へ十分流れる（-100%だと切れる場合） */
	100% { transform: translateX(-250%); }   /* 待機位置 */
}

/* ==============================
   テロップ2（求人数テロップ）
   ============================== */

.job-count-ticker {
	overflow: hidden;
	background-color: #f8f8f8; /* 背景色はお好みで */
	border: 1px solid #ddd;    /* 枠線はお好みで */
	padding: 5px 10px;
	margin-top: 10px;
}

/* 求人数テロップ本体 */
.job-count-inner {
	display: inline-block;
	white-space: nowrap;
	font-size: 16px;
	line-height: 1.5;
	animation: job-count-scroll 30s linear infinite; /* ← ここで速さを変える */
}

@keyframes job-count-scroll {
	0%   { transform: translateX(100%); }
	90%  { transform: translateX(-125%); }
	100% { transform: translateX(-125%); }
}

/* テロップ内テキストの共通設定 */
.ticker-inner,
.job-count-inner {
	box-shadow: none !important; /* box-shadowをオフ */
	pointer-events: none;        /* クリックなどを無効化 */
}

/* ==============================
   検索フォーム
   ============================== */

#search-job-block {
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	width: 100%;
	max-width: 400px;
}

.search-input,
.search-select {
	width: 100%;
	padding: 8px;
	margin-bottom: 10px;
}

.search-button,
.clear-button {
	width: 100%;
	padding: 10px;
	margin-top: 5px;
	border: none;
	border-radius: 4px;
}

.search-button {
	background-color: #007BFF;
	color: white;
}

.clear-button {
	background-color: #ccc;
	color: black;
}

/* クリアボタン通常 */
#clear-search {
	background-color: #f8f9fa; /* 薄いグレー */
	border: 1px solid #ccc;
	color: #333;
	padding: 6px 12px;
	border-radius: 4px;
	transition: background-color 0.3s, color 0.3s;
	cursor: pointer;
}

/* クリアボタン ホバー時 */
#clear-search:hover {
	background-color: #007bff; /* 青色 */
	color: #fff;
	border-color: #007bff;
}

/* ==============================
   レスポンシブ対応
   ============================== */

/* モバイル時の幅を調整 */
@media screen and (max-width: 600px) {
	#mainimg-inner div {
		width: 90%;
	}
}

/* PC幅でのマージン調整（求職様・テロップの横並びや枠を崩さない） */
@media screen and (min-width: 900px) {
	.centered-block .left-content > div + div {
		margin-left: 0 !important;
		margin-top: 20px !important; /* 元の余白に戻す */
	}
}

/* ==============================
   診断ボタン（mainimg-innerと独立）
   ============================== */

/* 検索ボックスのすぐ下に寄せる */
.diagnosis-cta-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 150px;    /* 上に引き寄せる：強ければ -20px などに調整 */
}

.diagnosis-cta-wrapper {
  width: 100%;
  max-width: 1000px;    /* サイト全体のコンテンツ幅と合わせる */
  padding: 0 32px;
  box-sizing: border-box;
}

/* 横長カード本体 */
.diagnosis-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #ffffff;
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* 左側テキストブロック */
.diagnosis-text {
  flex: 1 1 auto;
}

.diagnosis-label {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #444;
}

/* 「こんな方におすすめ」チェックリスト */
.diagnosis-points {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.6;
  list-style: none;
}

.diagnosis-points li {
  position: relative;
  padding-left: 1.2em;
}

.diagnosis-points li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8rem;
  color: #54bae9;
}

/* 右側のボタン部分 */
.diagnosis-button {
  flex: 0 0 300px;        /* ボタン幅 */
  display: block;
  text-align: center;
  background: #54bae9;    /* 通常時の色 */
  color: #fff;            /* 文字色は固定 */
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* ★ホバー時：背景色だけ変える（文字色はそのまま） */
.diagnosis-button:hover {
  background: #2f9ed3;    /* 少し濃いブルーに */
  color: #fff;            /* 念のため文字色を固定 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.diagnosis-main {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.diagnosis-sub {
  display: block;
  font-size: 0.8rem;
  opacity: 0.95;
}

/* ===== スマホ対応 ===== */
@media screen and (max-width: 980px) {
  .diagnosis-cta-section {
    margin-top: 130px;        /* スマホでは上に詰めすぎない */
    margin-bottom: 24px;
  }

  .diagnosis-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .diagnosis-button {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ===== スマホ対応 ===== */
@media screen and (max-width: 768px) {
  .diagnosis-cta-section {
    margin-top: 130px;        /* スマホでは上に詰めすぎない */
    margin-bottom: 24px;
  }

  .diagnosis-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .diagnosis-button {
    width: 100%;
    flex: 0 0 auto;
  }
}