/**
 * =====================================================
 * みつピタジョブ関西
 * トップページ HERO
 * -----------------------------------------------------
 * 配置場所：
 * /wp-content/plugins/mitsupita-kansai/assets/front/css/hero.css
 *
 * 役割：
 * ・HERO画像を画面の端から端まで表示
 * ・スマホからPC大画面まで自動リサイズ
 * ・画像を切り抜かず縦横比を維持
 * ・専用テンプレート上で余白やズレを防止
 *
 * @package Mitsupita_Kansai
 * =====================================================
 */


/**
 * ページ全体の横スクロールを防止
 */
html,
body {
	width: 100%;
	max-width: 100%;
	margin: 0;
	overflow-x: hidden;
}


/**
 * 関西トップ全体
 */
.mitsupita-kansai-home {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
}


/**
 * HERO全体
 */
.mitsupita-kansai-hero {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 0 64px;
	background: #eefaf5;
	box-sizing: border-box;
	overflow: visible;
}

.mitsupita-kansai-hero *,
.mitsupita-kansai-hero *::before,
.mitsupita-kansai-hero *::after {
	box-sizing: border-box;
}


/**
 * HERO内部
 */
.mitsupita-kansai-hero__inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}


/**
 * HERO画像外枠
 *
 * ブラウザ幅いっぱいに表示します。
 */
.mitsupita-kansai-hero__image-wrap {
	position: relative;
	width: 100vw;
	max-width: none;
	margin: 0 0 36px;
	margin-left: calc(50% - 50vw);
	padding: 0;
	overflow: hidden;
	background: transparent;
}


/**
 * HERO画像
 *
 * 横幅100％・高さ自動で、
 * 縦横比を維持しながら画面幅に合わせます。
 */
.mitsupita-kansai-hero__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: contain;
	object-position: center center;
}


/**
 * HEROテキスト部分
 */
.mitsupita-kansai-hero__content {
	width: calc(100% - 40px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

.mitsupita-kansai-hero__label {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.08em;
	color: #3f5149;
}

.mitsupita-kansai-hero__title {
	margin: 0 0 18px;
	font-size: clamp(28px, 3.7vw, 46px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: #27322e;
}

.mitsupita-kansai-hero__description {
	max-width: 850px;
	margin: 0 0 25px;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.9;
	color: #46544e;
}

.mitsupita-kansai-hero__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 12px 28px;
	border-radius: 999px;
	background: #0c8f5a;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition:
		transform 0.2s ease,
		opacity 0.2s ease;
}

.mitsupita-kansai-hero__button:hover,
.mitsupita-kansai-hero__button:focus-visible {
	color: #ffffff;
	text-decoration: none;
	opacity: 0.9;
	transform: translateY(-1px);
}


/**
 * タブレット
 */
@media screen and (max-width: 991px) {

	.mitsupita-kansai-hero {
		padding-bottom: 50px;
	}

	.mitsupita-kansai-hero__image-wrap {
		margin-bottom: 28px;
	}

	.mitsupita-kansai-hero__content {
		width: calc(100% - 32px);
	}
}


/**
 * スマートフォン
 */
@media screen and (max-width: 767px) {

	.mitsupita-kansai-hero {
		padding-bottom: 40px;
	}

	.mitsupita-kansai-hero__image-wrap {
		width: 100vw;
		margin-bottom: 22px;
		margin-left: calc(50% - 50vw);
	}

	.mitsupita-kansai-hero__image {
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center;
	}

	.mitsupita-kansai-hero__content {
		width: calc(100% - 24px);
	}

	.mitsupita-kansai-hero__label {
		margin-bottom: 10px;
		font-size: 11px;
	}

	.mitsupita-kansai-hero__title {
		margin-bottom: 15px;
		font-size: clamp(24px, 7.5vw, 34px);
		line-height: 1.4;
	}

	.mitsupita-kansai-hero__description {
		margin-bottom: 21px;
		font-size: 15px;
		line-height: 1.8;
	}

	.mitsupita-kansai-hero__button {
		width: 100%;
		min-height: 52px;
		padding: 13px 20px;
	}
}