@charset "UTF-8";
/* ============================================================
   リニューアル追加スタイル（4ページ構成用）
   既存テーマ（pc_style.css / sp_style.css）に追加で読み込む
   ============================================================ */

/* ---- ヒーロー内のお知らせ文 ---- */
.page1597 .r-mv .mv-note {
	color: #fff;
	text-align: right;
	font-size: 16px;
	line-height: 1.9;
	margin-top: 14px;
	text-shadow: 0 1px 6px rgba(0,40,90,.45);
}
.page1597 .r-mv .mv-note .accent {
	display: inline-block;
	background: #fff100;
	color: #35558f;
	font-weight: 700;
	border-radius: 6px;
	padding: 2px 12px;
	margin-top: 6px;
	text-shadow: none;
}

/* ---- ヒーロー: テキスト一式を右詰め ---- */
.page1597 .r-mv .mv-txt img {
	margin: 0 0 22px auto;
}
.page1597 .r-mv .mv-txt h2 {
	text-align: right;
}

/* ---- 代表メッセージ: 写真を拡大(自然なサイズ感=280px) ---- */
.page1597 .r-message .flex-area .img-flame {
	flex: 0 0 280px;
}
.page1597 .r-message .flex-area .img-flame img {
	width: 280px;
}
.page1597 .r-message .flex-area .img-flame .rep-name {
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	margin-top: 8px;
	white-space: nowrap;
}

/* ---- 代表メッセージ末尾とエントリー案内の間隔(2行分) ---- */
.page1597 .r-message .btn-wrap {
	margin-top: 64px;
}

/* ---- マイナビ・リクナビボタンを横並び(PC) ---- */
.page1597 .r-message .btn-wrap,
.page1597 .r-entry .btn-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 28px;
}
.page1597 .r-message .btn-wrap center,
.page1597 .r-entry .btn-wrap center {
	flex: 0 0 100%;
}
.page1597 .r-message .btn-wrap .btn-mynavi img,
.page1597 .r-entry .btn-wrap .btn-mynavi img {
	margin: 12px 0 0;
}
.page1597 .r-navi .wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 28px;
}
.page1597 .r-navi .navi-lead {
	flex: 0 0 100%;
}
.page1597 .r-navi .btn-mynavi img {
	margin: 22px 0 0;
}

/* ---- 英字グラデ見出し（画像見出しの代替） ---- */
.page1597 .en-title {
	display: block;
	text-align: center;
	font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	font-size: 64px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: .04em;
	line-height: 1.1;
	background: linear-gradient(90deg, #62cdf2 0%, #3f6ad8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #3f6ad8;
}
.page1597 section .en-title { padding-top: 90px; }
.page1597 .r-jobs .en-title,
.page1597 .r-job-intro .en-title { padding-top: 70px; }

/* ---- 新卒募集 3職種バナー ---- */
.page1597 .r-jobs {
	background-color: #f0f7fe;
	padding-bottom: 70px !important;
}
.page1597 .r-jobs.alt { background-color: #fff; }
/* ページ末尾に置く場合: フッターのクリーム色へ自然にグラデーション */
.page1597 .r-jobs.blend-footer {
	background: linear-gradient(180deg, #f0f7fe 0%, #f0f7fe 55%, #fff6d8 100%);
	padding-bottom: 90px !important;
}
.page1597 .r-jobs .lead {
	font-size: 16px;
	line-height: 2;
	text-align: center;
	margin-top: 24px;
}
.page1597 .jobs-box {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 24px;
	margin-top: 36px;
}
.page1597 .jobs-box .job-card {
	display: block;
	width: calc((100% - 48px) / 3);
	background: #fff;
	border: 1px solid #d5e5f4;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(35,85,143,.28);
	transition: opacity .5s ease, transform .5s ease;
}
.page1597 .jobs-box .job-card:hover {
	text-decoration: none;
	opacity: .85;
	transform: translateY(-4px);
}
.page1597 .jobs-box .job-card figure {
	margin: 0;
	height: 190px;
	overflow: hidden;
}
.page1597 .jobs-box .job-card figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.page1597 .jobs-box .job-card .job-name {
	display: block;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	color: #35558f;
	padding: 16px 10px 4px;
}
.page1597 .jobs-box .job-card .job-name::after {
	content: "▶";
	font-size: 13px;
	margin-left: 8px;
	color: #62cdf2;
}
.page1597 .jobs-box .job-card .job-status {
	display: block;
	text-align: center;
	font-size: 13.5px;
	line-height: 1.6;
	color: #666;
	padding: 0 12px 18px;
}
.page1597 .jobs-box .job-card .job-status.open { color: #d7263d; font-weight: 700; }

/* ---- マイナビ・リクナビ バナー帯 ---- */
.page1597 .r-navi {
	padding: 45px 0 55px !important;
	background-color: #e6f3ff;
}
.page1597 .r-navi.plain { background-color: #fff; }
.page1597 .r-navi .navi-lead {
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: #35558f;
}
.page1597 .r-navi .btn-mynavi img {
	display: block;
	border-radius: 10px;
	margin: 22px auto 0;
	box-shadow: 0px 3px 0 #004a70;
}

/* ---- 数字で見る（CSSタイル版） ---- */
.page1597 .date-card-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 35px;
	padding-bottom: 15px;
}
.page1597 .date-card {
	width: calc((100% - 24px) / 3);
	background: linear-gradient(135deg, #eaf6ff 0%, #dcebfb 100%);
	border: 2px solid #b7d9f3;
	border-radius: 12px;
	padding: 26px 18px 22px;
	text-align: center;
	box-sizing: border-box;
}
.page1597 .date-card .label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #35558f;
	line-height: 1.6;
}
.page1597 .date-card .num {
	display: block;
	font-size: 40px;
	font-weight: 800;
	color: #2e77c8;
	line-height: 1.25;
	margin-top: 8px;
}
.page1597 .date-card .num small {
	font-size: 19px;
	font-weight: 700;
}
.page1597 .date-card .note {
	display: block;
	font-size: 11.5px;
	color: #6b7f95;
	line-height: 1.55;
	margin-top: 8px;
}

/* ---- 職種紹介（仕事の内容） ---- */
.page1597 .r-job-intro { padding-bottom: 60px !important; }
.page1597 .r-job-intro .catch {
	font-size: 26px;
	font-weight: 700;
	color: #35558f;
	text-align: center;
	line-height: 1.7;
	margin-top: 45px;
}
.page1597 .r-job-intro .intro-flex {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	margin-top: 35px;
}
.page1597 .r-job-intro .intro-flex .txt { flex: 1.25; }
.page1597 .r-job-intro .intro-flex .pics {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.page1597 .r-job-intro .intro-flex .pics img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.page1597 .r-job-intro .pic-row {
	display: flex;
	gap: 16px;
	margin-top: 20px;
}
.page1597 .r-job-intro .pic-row img {
	width: calc((100% - 32px) / 3);
	border-radius: 10px;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	display: block;
}

/* ---- 1日のスケジュール ---- */
.page1597 .schedule-list {
	margin-top: 26px;
	border-top: 1px solid #b7d9f3;
}
.page1597 .schedule-list li {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 13px 6px;
	border-bottom: 1px solid #b7d9f3;
	font-size: 16px;
	line-height: 1.8;
}
.page1597 .schedule-list li .time {
	flex: 0 0 120px;
	font-weight: 700;
	color: #2e77c8;
	white-space: nowrap;
}

/* ---- 先輩社員紹介（3カラム） ---- */
.page1597 .senpai-grid {
	display: flex;
	gap: 24px;
	margin-top: 40px;
}
.page1597 .senpai-grid .card {
	width: calc((100% - 48px) / 3);
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 3px 14px rgba(35,85,143,.14);
}
.page1597 .senpai-grid .card figure {
	margin: 0;
	height: 230px;
	overflow: hidden;
}
.page1597 .senpai-grid .card figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	display: block;
}
.page1597 .senpai-grid .card .body { padding: 18px 20px 24px; }
.page1597 .senpai-grid .card h4 {
	font-size: 17px;
	font-weight: 700;
	color: #35558f;
	line-height: 1.6;
}
.page1597 .senpai-grid .card h4 small {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #6b7f95;
}
.page1597 .senpai-grid .card p {
	font-size: 14px;
	line-height: 1.9;
	margin-top: 10px;
}

/* ---- 新入社員研修レポート ---- */
.page1597 .report-box {
	background: #fff;
	border-radius: 14px;
	padding: 40px 44px;
	margin-top: 40px;
	box-shadow: 0 3px 14px rgba(35,85,143,.14);
}
.page1597 .report-box h3 {
	font-size: 21px;
	font-weight: 700;
	color: #35558f;
	line-height: 1.7;
	text-align: center;
}
.page1597 .report-box .desc { margin-top: 18px; }
.page1597 .report-pics {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 24px;
}
.page1597 .report-pics figure {
	margin: 0;
	width: calc((100% - 14px) / 2);
}
.page1597 .report-pics.three figure { width: calc((100% - 28px) / 3); }
.page1597 .report-pics img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.page1597 .report-pics figcaption {
	font-size: 13px;
	color: #6b7f95;
	text-align: center;
	margin-top: 6px;
}

/* ---- インタビュー（営業・販売 MEMBER） ---- */
.page1597 .iv-head {
	display: flex;
	align-items: center;
	gap: 36px;
	margin-top: 45px;
}
.page1597 .iv-head figure {
	margin: 0;
	flex: 0 0 320px;
}
.page1597 .iv-head figure img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}
.page1597 .iv-head .who .position {
	font-size: 15px;
	font-weight: 700;
	color: #2e77c8;
}
.page1597 .iv-head .who h3 {
	font-size: 24px;
	font-weight: 700;
	color: #35558f;
	margin-top: 4px;
}
.page1597 .iv-head .who .headline {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.9;
	color: #35558f;
	margin-top: 18px;
}
.page1597 .iv-block { margin-top: 45px; }
.page1597 .iv-block .iv-q {
	font-size: 20px;
	font-weight: 700;
	color: #35558f;
	line-height: 1.7;
	background: #eaf6ff;
	border-left: 6px solid #62cdf2;
	border-radius: 0 8px 8px 0;
	padding: 12px 20px;
}
.page1597 .iv-block .desc { margin-top: 16px; }

/* ---- 職種ページ: JOB/REQUIREMENT直下の見出しを2倍サイズ ---- */
.page1597 .r-job-intro .p-title,
.page1597 .r-requirement .p-title {
	font-size: 40px !important;
}

/* ---- MEMBER: セクション上下の白余白をトル ---- */
.page1597 .r-member {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ---- MEMBER: MESSAGEあたりから背景を自然にグラデーション ---- */
.page1597 .r-member .m-bg02 {
	background: linear-gradient(180deg, #f0f7fe 0%, #dae9f9 45%);
}

/* ---- リクナビ2028バナー(公式アートワーク) ---- */
.page1597 .btn-rikunavi img {
	display: block;
	height: 145px;
	width: auto;
	border-radius: 10px;
	margin: 22px auto 0;
	border: 1px solid #dfe5ec;
	box-shadow: 0 4px 12px rgba(30, 60, 110, .28);
	box-sizing: border-box;
}

/* ---- マイナビボタン: リクナビと同サイズ・drop-shadow(角のゴミ防止) ---- */
.page1597 .btn-mynavi img {
	height: 145px;
	width: auto;
	box-shadow: none !important;
	border-radius: 10px;
	filter: drop-shadow(0 4px 6px rgba(0, 60, 110, .3));
}

/* ---- WORK ONE DAY 写真3枚（大きい写真をタイル化） ---- */
.page1597 .r-member .member-work .img-box img {
	width: calc((100% - 70px) / 3);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
}

/* ---- 募集要項テーブル微調整（職種ページ共通） ---- */
.page1597 .r-requirement table tr td .list-right {
	display: block;
}
.page1597 .r-requirement .job-tag {
	display: inline-block;
	background: #35558f;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	border-radius: 20px;
	padding: 3px 18px;
	margin-right: 10px;
	vertical-align: middle;
}

/* ---- 募集職種リンク（メインページ募集要項内） ---- */
.page1597 .req-joblinks {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.page1597 .req-joblinks a {
	display: inline-block;
	background: #fff;
	border: 2px solid #35558f;
	border-radius: 30px;
	color: #35558f;
	font-size: 15px;
	font-weight: 700;
	padding: 8px 24px;
	transition: all .4s ease;
}
.page1597 .req-joblinks a:hover {
	background: #35558f;
	color: #fff;
	text-decoration: none;
}

/* ---- フッター6バナー: 高解像度画像を従来サイズで表示 ---- */
@media screen and (min-width: 641px) {
	#f_list li img {
		width: 300px;
		height: auto;
		display: block;
	}
}
@media screen and (max-width: 640px) {
	#f_list li img {
		width: 100%;
		height: auto;
	}
}

/* ---- パンくず ---- */
.page1597 .r-breadcrumb {
	font-size: 13px;
	color: #6b7f95;
	padding: 12px 0;
}
.page1597 .r-breadcrumb a { color: #3767c6; }

/* ============================================================
   スマホ（640px以下）
   ============================================================ */
@media screen and (max-width: 640px) {
	.page1597 .r-mv .mv-note { font-size: 13px; margin-top: 10px; }

	/* 代表写真はSPは等倍に戻し、名前を写真の下に中央表示 */
	.page1597 .r-message .flex-area .img-flame { flex: none; }
	.page1597 .r-message .flex-area .img-flame img { width: 280px; }
	.page1597 .r-message .flex-area .img-flame .rep-name {
		font-size: 14px;
		white-space: normal;
	}

	/* マイナビ・リクナビボタン: SPは縦並びのまま間隔をあける */
	.page1597 .r-message .btn-wrap,
	.page1597 .r-entry .btn-wrap,
	.page1597 .r-navi .wrap {
		display: block;
	}
	.page1597 .r-message .btn-wrap .btn-mynavi img,
	.page1597 .r-entry .btn-wrap .btn-mynavi img {
		margin: 18px auto 0;
	}
	.page1597 .r-navi .btn-mynavi img {
		margin: 18px auto 0;
	}

	/* 募集職種ボタン: 職種ごとに改行 */
	.page1597 .req-joblinks { display: block; }
	.page1597 .req-joblinks a {
		display: block;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
	.page1597 .req-joblinks a + a { margin-top: 10px; }
	.page1597 .en-title { font-size: 38px; }
	.page1597 section .en-title { padding-top: 55px; }

	.page1597 .jobs-box { flex-direction: column; gap: 16px; margin-top: 26px; }
	.page1597 .jobs-box .job-card { width: 100%; }
	.page1597 .jobs-box .job-card figure { height: 150px; }

	.page1597 .date-card-box { gap: 10px; }
	.page1597 .date-card { width: calc((100% - 10px) / 2); padding: 18px 12px 16px; }
	.page1597 .date-card .label { font-size: 13px; }
	.page1597 .date-card .num { font-size: 30px; }
	.page1597 .date-card .num small { font-size: 15px; }

	.page1597 .r-job-intro .p-title,
	.page1597 .r-requirement .p-title { font-size: 26px !important; }

	.page1597 .r-job-intro .catch { font-size: 20px; margin-top: 30px; }
	.page1597 .r-job-intro .intro-flex { flex-direction: column; gap: 20px; }
	/* 仕事の内容の写真: 横幅同サイズで縦並び */
	.page1597 .r-job-intro .pic-row { flex-direction: column; gap: 16px; }
	.page1597 .r-job-intro .pic-row img { width: 100%; }

	/* 1日の仕事の写真: 横スワイプ */
	.page1597 .r-member .member-work .img-box {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 12px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
	}
	.page1597 .r-member .member-work .img-box img {
		flex: 0 0 78%;
		width: 78%;
		scroll-snap-align: center;
	}

	/* NEW FACE 現場写真: 横スワイプ */
	.page1597 .report-pics.three {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
	}
	.page1597 .report-pics.three figure {
		flex: 0 0 78%;
		width: 78%;
		scroll-snap-align: center;
	}

	.page1597 .btn-rikunavi img { height: 145px; margin: 18px auto 0; }

	/* スワイプ可能エリアの左右矢印インジケーター */
	.page1597 .swipe-wrap { position: relative; }
	.page1597 .swipe-wrap::before,
	.page1597 .swipe-wrap::after {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: rgba(53, 85, 143, .6);
		color: #fff;
		font-size: 22px;
		font-weight: 700;
		line-height: 30px;
		text-align: center;
		pointer-events: none;
	}
	.page1597 .swipe-wrap::before { content: "‹"; left: 2px; }
	.page1597 .swipe-wrap::after { content: "›"; right: 2px; }

	.page1597 .schedule-list li { font-size: 14px; gap: 12px; }
	.page1597 .schedule-list li .time { flex: 0 0 96px; }

	.page1597 .senpai-grid { flex-direction: column; }
	.page1597 .senpai-grid .card { width: 100%; }

	.page1597 .report-box { padding: 24px 20px; }
	.page1597 .report-pics figure { width: 100%; }

	.page1597 .iv-head { flex-direction: column; gap: 20px; }
	.page1597 .iv-head figure { flex: none; width: 100%; }
	.page1597 .iv-head .who .headline { font-size: 17px; }
	.page1597 .iv-block .iv-q { font-size: 17px; }
}