/* #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;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

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


/* レイアウト崩れ対策：縦並び・中央揃え強制 */
#mainimg-inner {
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	display: flex !important;
	gap: 20px;
	max-width: 2800px;
}

/* 子要素が正しく縦に並ぶように幅制限 */
#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;
}

/* テロップ */
.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%); /* 待機位置 */ }
}

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

/* --- テロップ2: 求人数テロップ --- */
.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をオフ */
}

/* 検索フォーム */
#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;
}

/* レスポンシブ対応：モバイル時の幅を調整 */
@media screen and (max-width: 600px) {
	#mainimg-inner div {
		width: 90%;
	}
}

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