@charset "UTF-8";

/** -----------------------------------------------
  共通
------------------------------------------------**/
body {
	font-size: 18px;
	line-height: 32px;
	color: #343434;
	background-color: #fff;
	font-family: 'Zen Kaku Gothic New', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-weight: 400;
}


#service,
#member,
#enviroment,
#recruit {
	padding: 80px 0 120px 0;
}

.section-inner {
	width: 100%;
	max-width: 1200px;
	text-align: center;
	margin: 0 auto;
}

.section-title {
	font-weight: 700;
	font-size: 32px;
	color: #FF7739;
}

.section-text {
	text-align: center;
	font-weight: 400;
	font-size: 18px;
	line-height: 32px;
	letter-spacing: 0;
	margin: 16px auto 0 auto;
}


/** -----------------------------------------------
   ボタン
------------------------------------------------**/
.more-button {
	/* 1. 元々ベースにあった共通の形 */
	display: inline-block;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: #fff;
	font-weight: 600;
	color: #343434;
	text-decoration: none;
	transition: all 0.15s ease;

	/* 2. 元々「medium」に書いていたサイズ（PC版のサイズ）をここに合体 */
	border: 2px solid #FF7739;
	padding: 18px 68px;
	font-size: 24px;
	letter-spacing: 0.05em;
}

/* ホバー時の動き（これもこのままでバッチリ動きます） */
.more-button:hover {
	background-color: #FF7739;
	color: #fff;
}


.entry-button {
	display: inline-block;
	text-align: center;
	text-decoration: none;

	border-radius: 9999px;
	background-color: #fff;

	font-family: "Inter", sans-serif;
	font-weight: 500;
	color: #343434;
	text-decoration: none;
	transition: all 0.15s ease;
	line-height: 1;
}

.entry-button:hover {
	background-color: #F53838;
	color: #fff;
}

.entry-button.large {
	border: 2px solid #F53838;
	padding: 18px 75px;
	font-size: 38px;
	letter-spacing: 0.05em;
}


.entry-button.small {
	border: 1px solid #F53838;
	padding: 10px 40px;
	font-size: 14px;
	letter-spacing: 0.05em;
}


ul.nav-list li a:hover,
ul.footer-nav-col li a:hover {
	color: #FF7739;
}

/** -----------------------------------------------
  PC :  画面の横幅が641px以上
------------------------------------------------**/

#header {
	display: flex;
	justify-content: space-between;
	/* 左（ロゴ）と右（メニュー群）を両端に */
	align-items: center;
	/* 【垂直方向の中央揃え】 */
	padding: 20px 60px;
	background-color: transparent;

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	box-sizing: border-box;
	/* はみ出し防止 */
}

/* 1. 左側：ロゴエリア全体を垂直中央揃え */
.header-logo {
	display: flex;
	align-items: center;
}

.header-logo a {
	display: flex;
	/* inline-flexからflexに変更し安定化 */
	align-items: center;
	/* ロゴ画像とテキストの縦軸を揃える */
	gap: 8px;
	text-decoration: none;
	line-height: 1;
}

.logo-main {
	height: 25px;
	width: auto;
	display: block;
	/* 画像特有の下隙間を排除 */
}

.logo-sub {
	display: inline-block;
	font-size: 12px;
	color: #343434;
	line-height: 1;
	border-top: 1px solid #343434;
	border-bottom: 1px solid #343434;
	padding: 4px 8px;
}

/* 2. 右側：メニュー＋ENTRYボタンのエリアを垂直中央揃え */
.header-right {
	display: flex;
	align-items: center;
	/* ナビとENTRYボタンの縦軸を揃える */
	gap: 25px;
}

/* ナビゲーションのul（リスト全体の枠） */
.nav-list {
	display: flex;
	align-items: center;
	/* 文字同士の縦軸を確実に揃える */
	list-style: none;
	gap: 25px;
	margin: 0;
	padding: 0;
}

.nav-list a {
	display: block;
	text-decoration: none;
	color: #343434;
	font-size: 14px;
	line-height: 1;
	/* 文字の上下余白を排除 */
	transition: color 0.15s ease;
}

/* ENTRYボタン */
.entry-button.pc-only {
	display: inline-flex;
	align-items: center;
	/* ボタンの中の「ENTRY」という文字も垂直中央に */
	justify-content: center;
	line-height: 1;
}

/* 3. PC版のバグの主因：スマホ用ボタンを完全に消去する */
#menu-button {
	display: none;
	/* 強制的に非表示にし、高さを「0」にする */
}

#menu-toggle {
	display: none;
}


/* ==========================================================
    メインビジュアル
========================================================== */
#mainvisual {
	width: 100%;
	aspect-ratio: 1440 / 700;
	max-height: 100vh;

	background-image: url("../images/main.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	position: relative
}

.maincopy {
	position: absolute;
	left: 120px;
	bottom: 75px;
	font-size: 32px;
	font-weight: 600;
	line-height: 2.1875;
	letter-spacing: 0.05em;
}


/* ==========================================================
    私たちついて
========================================================== */
#about {
	padding: 120px 0;
	background-image: url("../images/about.png");
	background-position: center -140px;
	background-repeat: no-repeat;
	background-size: 80%;

	.section-copy {
		font-weight: 600;
		font-size: 40px;
		margin-top: 60px;
		margin-bottom: 40px;
	}

	.section-description {
		margin-bottom: 120px;
		font-size: 24px;
		line-height: 60px;
		font-weight: 400;
	}
}


.about-slider {
	/* スライダー全体でも高さを制限しておくのがコツです */
	height: 320px;
	margin-bottom: 60px;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.about-slider .slider-item {
	width: 320px !important;
	margin: 0 44px;
}

.about-slider .slider-item img {
	width: 100%;
	object-fit: cover;
	/* 歪まないようにトリミング */
	display: block;
}




/* ==========================================================
    事業について
========================================================== */
#service {
	background: rgba(255, 119, 57, 0.05);
}

.service-list {
	display: flex;
	flex-direction: column;
	gap: 60px;
	margin: 60px 0;
	/* ここに重要：親要素自体が幅を制限しているか、子要素を中央に寄せる設定が必要 */
	align-items: center;
	/* これで子要素(.item)を確実に中央に配置します */
}

.item {
	display: flex;
	align-items: center;
	width: 1020px;
	height: 300px;
	/* margin: 0 auto; はあっても良いですが、align-items: center があるので不要になります */
	background-color: #ffffff;
	border-radius: 33px;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: 0 1px 5px #f8eeed;
}

/* 画像エリア：左半分 */
.card-img {
	width: 50%;
	height: 100%;
}

.card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 歪ませず枠いっぱいに表示 */
	display: block;
	/* 下の微小な隙間を削除 */
}

.card-text {
	width: 50%;
	padding: 40px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	gap: 16px;
	/* h3とpの間隔 */
}

.item h3 {
	font-size: 20px;
	margin: 0;
}

.item .section-text {
	margin-top: 0;
}

.card-text h3,
.card-text .section-text {
	width: 100%;
	max-width: 420px;
	text-align: left;
}

.card-img .sp-only {
	display: none;
}

/* （参考：元からあるPC用の画像の設定はそのまま） */
.card-img img {
	width: 100%;
	height: auto;
	display: block;
}



/* ==========================================================
    メンバー紹介
========================================================== */
#member {
	text-align: center;
	overflow: hidden;
}

.multiple-items {
	position: relative !important;
	margin-top: 60px !important;
}


.multiple-items .slick-slide {
	width: 375px !important;
}

.multiple-items img {
	width: 100%;
	height: auto;
	display: block;
	padding: 0 30px;
	box-sizing: border-box;
	transform-origin: center center;
}

/* 1. <a>タグの overflow: hidden; を解除してはみ出しを許可する */
.multiple-items a {
	display: block;
	position: relative;
	overflow: visible !important;
	/* はみ出しを許可 */
	transition: transform 0.5s ease;
}

/* 2. ホバー時の拡大 */
.multiple-items a:hover img {
	transform: scale(1.03);
}

/* 3. Slickのコンテナ自体もはみ出しを許可する設定 */
/* .slick-list はスライドの表示領域、.slick-track はスライド全体 */
.multiple-items .slick-list,
.multiple-items .slick-track {
	overflow: visible !important;
	padding-top: 10px !important;
	/* 上に拡大した分が隠れないよう、少し余白を確保 */
	padding-bottom: 10px !important;
	/* 下も同様 */
	margin-top: -10px !important;
	/* 余白確保でずれた分を戻す */
	margin-bottom: -10px !important;
}



/* 矢印ボタンの位置調整 */
#member .slick-prev,
#member .slick-next {
	width: 43px !important;
	height: 43px !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	display: block !important;
	/* 念のため明示 */
	z-index: 90 !important;
	/* 数値を大きくして前面に */
	top: 45% !important;
}

.slick-prev::before,
.slick-next::before {
	display: none !important;
}

#member .slick-prev {
	background-image: url('../images/arrow-left.png') !important;
	left: 120px !important;
}

#member .slick-next {
	background-image: url('../images/arrow-Right.png') !important;
	right: 120px !important;
}

.slick-dots {
	bottom: 0 !important;
}


.slick-dotted.slick-slider {
	margin-bottom: 0 !important;
}


/* ドットをラインに変更 */
.slick-dots {
	display: flex !important;
	justify-content: center;
	list-style: none;
	padding: 0;
	position: static !important;
	/* 上下の余白調整：PCは60px、スマホは30px */
	margin: 60px 0 !important;
}


.slick-dots li {
	width: auto !important;
	height: auto !important;
	margin: 0 30px !important;
	padding: 0 !important;
}

/* 元々の丸ボタンの形を「線」に塗り替える */
.slick-dots li button {
	display: block;
	width: 80px !important;
	height: 4px !important;

	padding: 0 !important;

	background-color: #cccccc !important;
	border: none !important;
	border-radius: 2px !important;
	cursor: pointer;

	text-indent: -9999px !important;
	overflow: hidden !important;
}


.slick-dots li.slick-active button {
	background-color: #FF7739 !important;
}





/* ==========================================================
    働く環境
========================================================== */
#environment {
	text-align: center;
	padding: 80px 0 120px;
	background: rgba(255, 119, 57, 0.05);
}

/* カードと全体のデザイン */
.feature-card {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 200px;

	width: 1200px;
	height: 348px;

	background-color: #ffffff;
	border-radius: 33px;
	box-shadow: 0 1px 5px #f8f0ed;
	box-sizing: border-box;
	margin: 60px auto;
}

.feature-img {
	width: 200px;
	height: 200px;
}

.feature-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

.feature-icon {
	width: 200px;
	height: auto;
}

.feature-text {
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	margin: 0;
}



/* ==========================================================
募集職種
========================================================== */
#recruit {
	text-align: center;
}

.recruit-list-top {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 44px;
	margin-top: 60px;
	margin-bottom: 60px;
}

.recruit-list-bottom {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 44px;
	margin-bottom: 60px;
}

.recruit-img {
	width: 360px;
}

.recruit-link {
	display: block;
	transition: transform 0.5s ease;
}

.recruit-img img {
	width: 100%;
	height: auto;
	display: block;
}

.recruit-link:hover img {
	transform: scale(1.03);
}


/* ==========================================================
    CTAエリア
========================================================== */
#cta {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(to bottom, #FFC0A3 0%, #FF7739 100%);
	height: 654px;
	padding: 60px 0;
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
}

.cta-inner {
	margin-bottom: 20px;
}

.section-cta {
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	line-height: 70px;
	text-shadow: 0 2px 2px rgba(206, 118, 78, 0.25);
	margin-bottom: 30px;
}


.cta-slider {
	width: 100%;

	.slick-slide {
		width: auto !important;
		float: left;
		padding: 0 40px;
		box-sizing: border-box;
	}


	img {
		width: auto;
		height: 74px;
		display: block;
		opacity: 0.15;
	}
}

.cta-slider-bottom {
	transform: scaleX(-1);
}

.cta-slider-bottom img {
	transform: scaleX(-1);
}



/* ==========================================================
   footer
========================================================== */
#footer {
	padding: 60px 0;
}


.footer-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

/* 右側の2列メニューを横並びにする */
.footer-nav {
	display: flex;
	gap: 60px;
}

.footer-nav-col {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
	gap: 20px;
}

.footer-nav-col a {
	text-decoration: none;
	color: #343434;
	font-size: 14px;
}


.footer-line {
	border: none;
	border-top: 1px solid #ccc;
	margin: 30px 0;
}


.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.footer-meta-links {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 60px;
	line-height: 1;
}

.footer-meta-links a {
	text-decoration: none;
	color: #343434;
	font-size: 12px;
	transition: color 0.15s ease;
}

.footer-meta-links a:hover {
	color: #ACACAC;
	/* 薄いグレー */
}


.copyright {
	margin: 0;
	color: #343434;
	font-size: 12px;
}


/*ここからメディアクエリで各デバイスサイズに書き分けます。
今回の課題で考慮するのはPCとスマホのみでOKですが、タブレットサイズでのスタイルを書いてもOK！
また、CSSは上から下に継承されるので、変化させたいところだけ書けばOKです*/
.pc-only {
	display: inline;
}

.sp-only {
	display: none;
}

/** -----------------------------------------------
  Smartphone :  画面の横幅が640pxまで
------------------------------------------------**/
@media screen and (max-width:640px) {
	.section-inner {
		padding: 0 16px;
		max-width: 375px;
		box-sizing: border-box;
		/* 余白を幅の計算に含める */
		margin: 0 auto;
	}

	.pc-only {
		display: none;
	}

	.sp-only {
		display: inline;
	}

	#service,
	#member,
	#environment,
	#recruit {
		padding: 40px 0;
	}


	.section-title {
		font-size: 20px;
	}

	.section-text {
		width: 300px;
		/* 横幅を指定 */
		text-align: left;
		font-size: 12px;
		line-height: 21px;
		margin: 5px auto 0 auto;
		/* 上5px、左右をautoにすることで中央寄せ */
	}

	.more-button {
		border: 1px solid #FF7739;
		padding: 0 40px;
		font-size: 14px;
		letter-spacing: 0.05em;

		/* ボタンを中央に寄せたり、高さを出すための設定（必要に応じて追加してください） */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		/* 例：押しやすい高さ */
		text-decoration: none;
	}

	/* これを最初に入れておくと、高さのズレが減ります */
	ul,
	li,
	a,
	p,
	label {
		margin: 0;
		padding: 0;
		line-height: 1;
		box-sizing: border-box;
		/* 重要：これを入れるとpaddingの計算が楽になります */
	}



	/** -----------------------------------------------
    ヘッダー
    ------------------------------------------------**/
	#header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		width: 100%;
		box-sizing: border-box;
		position: absolute;
		/* これでコンテンツの上に重なります */
		top: 0;
		left: 0;
		z-index: 100;
	}

	/* 2. ロゴ部分の調整 */
	.header-logo {
		display: flex;
		align-items: center;
	}

	.header-logo a {
		display: flex;
		align-items: center;
		/* ロゴとテキストの縦軸を揃える */
		gap: 8px;
		text-decoration: none;
		line-height: 1;
		/* 縦方向のズレを防ぐ */
	}

	.logo-main {
		height: 22px;
		/* スマホ用のロゴ高さに指定 */
		width: auto;
		display: block;
		/* 画像の下隙間を排除 */
	}

	.logo-sub {
		font-size: 10px;
		color: #343434;
		line-height: 1;
		/* PC版の上下ボーダーがスマホでは不要、もしくはデザインを調整する場合 */
		border-top: 1px solid #343434;
		border-bottom: 1px solid #343434;
		padding: 2px 4px;
		/* スマホ用に少しタイトな余白に調整 */
	}

	/* PC用のメニューエリアを非表示 */
	.header-right {
		display: none;
	}


	/* ハンバーガーメニュー */
	.menu-button-innner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 6px;
		width: 40px;
		height: 40px;
		background-color: #FF7739;
		border-radius: 50%;
	}

	/* ボタンの中の白い線 */
	.menu-button-innner span {
		display: block;
		width: 20px;
		height: 2px;
		background-color: #ffffff;
		border-radius: 2px;
	}

	#menu-button {
		position: relative;
		/* static から変更 */
		cursor: pointer;
		display: flex !important;
		z-index: 10001;
		/* ヘッダーやメニューよりも確実に上に表示させる */
	}

	/* 2. メニューの表示制御（先ほどの修正内容を維持） */

	#menu-wrapper {
		position: static;
		/* 崩れを防ぐためstaticに */
		overflow: visible;
	}

	.menu {
		position: fixed;
		/* 画面固定 */
		top: 0;
		left: 0;
		width: 100vw;
		/* 画面幅いっぱい */
		height: 100vh;
		/* 画面高さいっぱい */
		background: #fff;
		z-index: 9999;
		/* 最前面 */

		/* 初期状態を画面外へ */
		transform: translateX(100%);
		transition: transform 0.4s ease;

		/* コンテンツ中央寄せ */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 0;
	}

	/* 3. クリック判定（inputのIDをしっかり指定） */
	#menu-toggle:checked~.menu {
		transform: translateX(0);
	}

	.menu ul {
		list-style: none;
		/* ここで黒い点を消します */
		padding: 0;
		margin: 0;
	}

	#menu-toggle:checked+#menu-button .menu-button-innner span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	/* 2番目の線を消す */
	#menu-toggle:checked+#menu-button .menu-button-innner span:nth-child(2) {
		opacity: 0;
	}

	/* 3番目の線を斜めに */
	#menu-toggle:checked+#menu-button .menu-button-innner span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.menu ul {
		list-style: none;
		padding: 0;
		display: flex;
		flex-direction: column;
		/* 縦並び */
		gap: 40px;
		/* 項目間の余白 */
		justify-content: center;
		align-items: center;
	}


	.menu .entry-button.small {
		margin-top: 60px;
	}


	.menu ul li label {
		display: block;
		cursor: pointer;
		width: 100%;
	}

	/* 2. a タグ自体の装飾を整える */
	.menu ul li label a {
		text-decoration: none;
		color: #333;
		font-size: 18px;
		font-weight: bold;
		display: block;
		/* pointer-events: none; は使わない！ */
	}




	/** -----------------------------------------------
    メインビジュアル
    ------------------------------------------------**/
	#mainvisual {
		aspect-ratio: auto;
		height: 550px;
		max-height: none;

		/* 2倍で書き出した画像を設定 */
		background-image: url("../images/mainvisual-sp.jpg");
		/* ※実際の画像名に合わせてください */

		/* ★2倍画像をスマホの画面幅ぴったりに自動縮小してフィットさせる設定 */
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;

		/* 文字とボタンを下に綺麗に並べるための設定 */
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 0 16px 20px;
		box-sizing: border-box;
	}

	/* ② キャッチコピー（スマホ版）※変更なし */
	.maincopy {
		position: static;
		left: auto;
		bottom: auto;
		font-size: 20px;
		line-height: 1.6;
		letter-spacing: 0;
		text-align: left;
		margin-bottom: 24px;
	}

	/* ③ メインビジュアル内にあるENTRYボタンの調整 ※変更なし */
	#mainvisual .entry-button.small {
		display: inline-block;
		width: auto;
		margin: 0 auto;
		/* 中央に寄せる */
	}





	/** -----------------------------------------------
    私たちについて
    ------------------------------------------------**/
	#about {
		padding: 60px 0;

		/* --- スマホ用の背景画像調整 --- */
		background-position: 53% top;

		/* 💡 【修正】横幅を「画面の何%の大きさにするか」を数値で指定する */
		background-size: 155% auto;


		.section-copy {
			font-size: 24px;
			/* スマホ用に文字を小さく */
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.section-description {
			margin-bottom: 40px;
			font-size: 14px;
			/* スマホ用に文字を小さく */
			line-height: 34px;
			/* スマホで見やすい行高（固定値pxから倍数に変更） */
			letter-spacing: 0.02em;
			text-align: center
		}
	}

	.about-slider {
		/* スライダー全体の高さも合わせる */
		height: 146px;
		display: block !important;
		margin-bottom: 40px;
	}

	.about-slider .slider-item {
		/* 幅と高さを強制的に同じ146pxにします */
		width: 146px !important;
		min-width: 146px !important;
		/* Slickの計算崩れを防ぐために追加 */
		height: 146px !important;
		display: block !important;
		margin: 0 15px !important;
		overflow: hidden;
	}

	.about-slider .slider-item img {
		width: 146px !important;
		/* 100%ではなくpxで直接指定してみる */
		height: 146px !important;
		object-fit: cover;
		display: block !important;
	}

	.about-slider .slick-track {
		display: flex !important;
		/* 強制的に横並びにする */
		margin: 0 !important;
		/* 誤った計算による余白を消す */
	}



	/** -----------------------------------------------
    事業について
    ------------------------------------------------**/
	.service-list {
		gap: 30px;
		margin: 30px 0;
		align-items: center;
		/* これにより.itemの中央寄せが完了します */
	}

	.item {
		width: 300px;
		height: 387px;
		flex-direction: column;
		border-radius: 24px;
		background-color: #ffffff;
		overflow: hidden;
		/* margin: 0 auto; は align-items: center により不要のため削除 */
	}

	.card-img {
		width: 100%;
		height: 248px;
		/* ご指定の画像高さ */
	}

	.card-img img {
		width: 100%;
		height: 100%;
		/* 親の248pxに合わせる */
		object-fit: cover;
		/* 画像が歪まないようにトリミング */
		display: block;
	}


	.card-text {
		width: 100%;
		padding: 16px;
		box-sizing: border-box;
		gap: 5px;
	}

	.card-text h3 {
		width: 270px;
		margin-left: auto;
		margin-right: auto;
		font-size: 18px;
		/* ここでサイズを指定 */
	}

	.card-text .section-text {
		width: 270px;
		margin-left: auto;
		margin-right: auto;
	}


	.card-img .pc-only {
		display: none;
		/* スマホではPC用画像を隠す */
	}

	.card-img .sp-only {
		display: block;
		/* スマホではSP用画像を表示 */
	}



	/** -----------------------------------------------
    メンバー紹介
    ------------------------------------------------**/
	.multiple-items {
		margin-top: 30px !important;
	}

	.multiple-items .slick-slide {
		/* PCの375pxを基準に0.75倍を適用 */
		width: calc(375px * 0.75) !important;
	}


	/* 以下、ドット（ライン）の調整 */
	.slick-dots {
		margin: 30px 0 !important;
	}

	.slick-dots li {
		margin: 0 15px !important;
	}

	.slick-dots li button {
		width: 40px !important;
	}

	/* --- 共通の余白調整（被りを防ぐため） --- */
	.slick-dotted.slick-slider {
		margin-bottom: 0 !important;
	}

	.slick-dots {
		/* 上下の余白を30pxに */
		margin: 30px 0 !important;
	}

	.slick-dots li {
		/* 線同士の余白を30pxに */
		margin: 0 15px !important;
		/* 合計で30px間隔になるよう調整 */
	}

	.slick-dots li button {
		/* ラインの幅を40pxに */
		width: 40px !important;
	}


	#member .slick-prev,
	#member .slick-next {
		width: 40px !important;
		height: 40px !important;
		top: 46% !important;
		/* 中央より少し上に微調整 */
	}

	#member .slick-prev {
		left: 25px !important;
	}

	#member .slick-next {
		right: 25px !important;
	}






	/** -----------------------------------------------
    働く環境
    ------------------------------------------------**/
	/* 💡 3つのアイテムを包んでいる白い大きなボックスの調整 */
	.feature-card {
		flex-direction: column;
		gap: 50px;
		width: 290px;
		height: auto;
		padding: 40px 0;
		border-radius: 25px;
		margin: 30px auto;
	}

	.feature-item {
		gap: 10px;
		/* スマホ用：画像とテキストの隙間 */
	}

	.feature-img {
		width: 160px;
		height: 160px;
		/* margin-bottom は削除し、親の gap で管理 */
	}

	.feature-text {
		font-size: 20px;
	}


	/** -----------------------------------------------
    募集職種
    ------------------------------------------------**/
	/* 💡 上段（2列）と下段（3列）の枠を、どちらも縦積みの命令に書き換える */
	.recruit-list-top,
	.recruit-list-bottom {
		display: flex;
		flex-direction: column;
		/* 💡 縦積みにする */
		align-items: center;
		/* 中央揃え */
		gap: 30px;
		/* 画像と画像の間のすき間（スマホ用に少し狭く） */
		margin-top: 0;
		margin-bottom: 30px;
		/* 上段と下段の間も同じすき間にする */
	}

	/* 💡 上段の最初のマージンをスマホ用に調整 */
	.recruit-list-top {
		margin-top: 30px;
	}

	/* 💡 下段の一番最後のマージンを調整 */
	.recruit-list-bottom {
		margin-bottom: 30px;
	}

	/* 💡 各職種画像の横幅調整 */
	.recruit-img {
		width: 100%;
		/* 画面幅いっぱいに広げる */
		max-width: 260px;
		/* 💡 大きくなりすぎないようにストッパーをかける（お好みで調整） */
	}




	/** -----------------------------------------------
    CTA
    ------------------------------------------------**/
	#cta {
		height: 430px;
		/* 指定の高さに変更 */
		padding: 30px 0;
		/* コンテンツが縦に並ぶため、上下パディングを少し調整 */
	}

	.cta-inner {
		margin-bottom: 10px;
	}

	.section-cta {
		font-size: 24px;
		line-height: 38px;
		margin-bottom: 20px;
	}

	.entry-button.large {
		width: 172px;
		/* 指定の幅 */
		padding: 12px 0;
		/* 左右のパディングを0にして幅を優先 */
		font-size: 24px;
		/* 指定のフォントサイズ */

		/* 左右のパディングを消すと中央揃えが崩れることがあるため、
           display: block にして margin: 0 auto で中央に寄せるのが確実です */
		display: block;
		margin: 0 auto;
	}

	.cta-slider img {
		height: 33px;
		/* ここで高さを変更 */
	}

	.cta-slider .slick-slide {
		padding: 0 22px;
		/* 40pxから例えば15pxに減らすことで余白が詰まります */
	}


	/** -----------------------------------------------
フッター
------------------------------------------------**/
	#footer {
		padding: 30px 0;
	}

	#footer .logo-main {
		height: 14px;
		width: auto;
	}

	#footer .logo-sub {
		font-size: 6px;
	}

	/* ナビゲーション */
	.footer-nav {
		gap: 16px;
	}

	.footer-nav-col {
		gap: 16px;
	}

	.footer-nav-col a {
		font-size: 10px;
		line-height: 1.2;
		/* 1.2だけは個別に必要 */
		display: block;
	}

	/* ライン */
	.footer-line {
		margin: 16px 0;
	}

	/* 下段リンクとコピーライト */
	.footer-meta-links {
		display: flex;
		gap: 8px;
		list-style: none;
		/* list-styleはリセットに含まれないため残す */
		align-items: center;
	}

	.footer-meta-links a {
		font-size: 8px;
		display: block;
	}

	.copyright {
		font-size: 8px;
	}
}