@charset "UTF-8";
/* =========================================================
   保護者・学校関係者の皆さまへ 専用デザイン
   ── recruit.html の「recruit_parents」カードの世界観を踏襲。
      ネイビー＋水色ドット背景＋マーカー見出し＋ブルーボタンで、
      信頼感・安心感のあるトーンに統一。
   ========================================================= */

:root {
	--navy:      #1f3a5c;   /* 枠線・見出し（濃紺） */
	--blue:      #4a90d9;   /* ボタン等のメインブルー */
	--blue-deep: #3a7cc4;   /* ホバー */
	--blue-label:#3f7cc0;   /* 英字ラベル */
	--blue-bg:   #eaf3fc;   /* 水色背景（ドット地のベース） */
	--blue-bg2:  #f4f9fe;   /* さらに淡い水色（ページ地） */
	--mark-a:    #c8e6ff;   /* マーカー上 */
	--mark-b:    #9fd2f0;   /* マーカー下 */
	--ink:       #3f4d5e;   /* 本文 */
	--ink-sub:   #6c7a89;   /* 補助テキスト */
	--line:      #cfe0f0;   /* 罫線（淡いブルー） */
	--dot:       rgba(63, 124, 192, .16);
	--font-base: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.sup-main {
	color: var(--ink);
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 1.9;
	background: var(--blue-bg2);
	letter-spacing: .03em;
}
.sup-main img {
	max-width: 100%;
	height: auto;
}
.sp-only { display: none; }

/* 水色ドットのパターン（共通） */
.sup-dot,
.sup-section--gray,
.sup-main .recruit_internship.r_bg {
	background-color: var(--blue-bg);
	background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
	background-size: 10px 10px;
}

/* =========================================================
   パンくず
   ========================================================= */
.sup-breadcrumb {
	background: var(--blue-bg2);
	border-bottom: 1px solid var(--line);
}
.sup-breadcrumb #breadcrumb {
	max-width: 1080px;
	margin: 0 auto;
	padding: 16px 24px !important;
	background: transparent !important;
	border: none !important;
}
.sup-breadcrumb #breadcrumb p {
	margin: 0;
	color: var(--ink-sub) !important;
	font-size: 12px;
	line-height: 1.6;
}
.sup-breadcrumb #breadcrumb a,
.sup-breadcrumb #breadcrumb span,
.sup-breadcrumb #breadcrumb span[itemprop="title"] {
	color: var(--ink-sub) !important;
}
.sup-breadcrumb #breadcrumb a:hover {
	color: var(--blue-deep) !important;
	text-decoration: underline;
}
.sup-breadcrumb #breadcrumb .breadcrumb_arrow {
	margin: 0 6px;
	color: var(--line) !important;
}

/* =========================================================
   セクション共通
   ========================================================= */
.sup-section {
	padding: 62px 24px;
	background: var(--blue-bg2);
}
.sup-section--gray {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.sup-section__inner {
	max-width: 1080px;
	margin: 0 auto;
}

/* =========================================================
   見出し（英字ラベル＋マーカー風の日本語見出し）
   ========================================================= */
.sup-head {
	text-align: center;
	margin-bottom: 34px;
}
.sup-head__en {
	display: block;
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .26em;
	color: var(--blue-label);
}
.sup-head__ja {
	display: inline;
	margin: 0;
	padding: 3px 14px 6px;
	font-size: 28px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.9;
	letter-spacing: .05em;
	background: linear-gradient(180deg, var(--mark-a) 0%, var(--mark-b) 100%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.sup-head__ja::after { content: none; }
/* 見出し内の改行用（モバイルのみ表示） */
.sup-head__br { display: none; }

/* =========================================================
   リード文（白カード・ネイビー枠＋ドット）
   ========================================================= */
.sup-lead {
	max-width: 1080px;
	margin: 0 auto;
	background-color: #fff;
	background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
	background-size: 10px 10px;
	border: 2px solid var(--navy);
	border-radius: 10px;
	padding: 80px 80px;
	text-align: left;
	font-size: 20px;
	font-weight: 500;
	line-height: 2.15;
	color: var(--navy);
}
.sup-lead-btn {
	text-align: center;
	margin-top: 40px;
}

/* =========================================================
   画像＋テキスト（白カード）
   ========================================================= */
.sup-media {
	display: flex;
	align-items: center;
	gap: 48px;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.sup-media + .sup-media {
	margin-top: 24px;
}
.sup-media--reverse {
	flex-direction: row-reverse;
}
.sup-media__img {
	flex: 0 0 50%;
	max-width: 50%;
	position: relative;
}
/* 画像の背面に、少しずらした青いフレームを敷いてデザイン性を出す */
.sup-media__img::before {
	content: "";
	position: absolute;
	inset: 16px -16px -16px 16px;
	border: 2px solid var(--blue);
	border-radius: 10px;
	z-index: 0;
	pointer-events: none;
}
.sup-media--reverse .sup-media__img::before {
	inset: 16px 16px -16px -16px;
}
.sup-media__img img {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	display: block;
	box-shadow: 0 12px 28px rgba(31, 58, 92, .12);
}
.sup-media__body {
	flex: 1;
}
.sup-media__title {
	position: relative;
	margin: 0 0 20px;
	padding-left: 18px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy);
	letter-spacing: .04em;
}
.sup-media__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .25em;
	bottom: .25em;
	width: 5px;
	border-radius: 2px;
	background: var(--blue);
}
.sup-media__body p {
	margin: 0;
	line-height: 2.15;
	color: var(--ink);
}

/* =========================================================
   福利厚生（白カードを並べる）
   ========================================================= */
.sup-benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 16px;
	max-width: 1080px;
	margin: 32px auto 0;
}
.sup-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 28px 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(31, 58, 92, .05);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sup-benefit:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(31, 58, 92, .12);
	border-color: var(--blue);
}
.sup-benefit__icon {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--blue-bg);
	color: var(--navy);
}
.sup-benefit__icon svg {
	width: 36px;
	height: 36px;
	stroke: var(--blue);
}
.sup-benefit__txt {
	width: 100%;
}
.sup-benefit__title {
	display: flex;
	align-items: center;
	justify-content: center;
	/* タイトルの行数差を吸収し、説明文(desc)の開始位置を全カードで揃える（最大3行分） */
	min-height: 4.95em;
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.65;
	color: var(--navy);
}
.sup-benefit__desc {
	/* テキスト幅は最大267px。カードが狭い時は縮む（固定widthだとグリッドが縮まずはみ出すため） */
	width: 100%;
	max-width: 267px;
	margin: 0 auto;
	text-align: left;
	font-size: 14px;
	line-height: 1.75;
	color: var(--ink);
}
.sup-benefit__note {
	width: 100%;
	max-width: 267px;
	margin: 8px auto 0;
	text-align: left;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ink-sub);
}

/* =========================================================
   流用しているコーポレート部品の上書き
   ========================================================= */

/* PURPOSE（社会貢献の実感）：重要セクション。
   やわらかいブルーの角丸カード＋人物イラストで、
   強調しつつ親しみ・安心感のあるトーンに。 */
.sup-main .recruit_about {
	background: #fff;
	padding: 62px 0;
}
.sup-main .recruit_about_in.r_bg {
	max-width: 1080px;
	margin: 0 auto;
	background-color: #fff;
	background-image: none;
	border: none;
	border-radius: 24px;
	padding: 8px 44px 0;
	overflow: hidden;
}
/* カード内のテーマ既定 .inner_m が二重に余白・最大幅を持ち、
   中身が狭くなるのを防ぐ。横幅はカード自身のパディングで統一する。 */
.sup-main .recruit_about_in.r_bg .inner_m {
	width: auto;
	max-width: 100%;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}
.sup-main .recruit_about .recruit_message_conts {
	max-width: 760px;
	margin: 0 auto;
	background: transparent;
	background-image: none;
	border: none;
	border-radius: 0;
	padding: 0;
	text-align: center;
}
.sup-main .recruit_about .recruit_message_conts_tagline {
	display: inline-block;
	position: relative;
	color: var(--navy);
	letter-spacing: .05em;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.9;
	padding-bottom: 24px;
}
.sup-main .recruit_about .recruit_message_conts_tagline::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 56px;
	height: 4px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: var(--blue);
}
.sup-main .recruit_about .recruit_message_conts_subtext {
	margin-top: 20px;
}
.sup-main .recruit_about .recruit_message_conts_subtext p {
	color: var(--ink);
	line-height: 2;
	text-align: left;
}
/* PURPOSE 直下の写真（recruit.html と同じ separator を流用）。
   指定サイズの枠に画像の中心を表示し、スクロールでスワイプアップ表示する。 */
.sup-main .recruit_about .recruit_about_visual {
	margin-top: 16px;
	/* 帯を高めにして cover による縦の切り取りを抑え、顔（上列〜前列）が収まるようにする */
	height: clamp(440px, 36vw, 720px);
	background-image: url(../images/recruit/staff-group-sakura.jpg);
	background-size: cover;
	/* 顔群の中心（画像の縦約52%）に合わせて、上下どちらの顔も切れないようにする */
	background-position: center 50%;
	background-repeat: no-repeat;
	background-attachment: scroll;
}
/* スクロールで下から上へスワイプアップ（JS有効時のみ初期非表示） */
.sup-main .recruit_about .recruit_about_visual.reveal {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, .84, .44, 1);
	will-change: opacity, transform;
}
.sup-main .recruit_about .recruit_about_visual.reveal.is-shown {
	opacity: 1;
	transform: translateY(0);
}

/* CONTACT（会社見学・説明会）：水色ドット地＋白カードのテーブル */
.sup-main .recruit_internship.r_bg {
	padding: 62px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
/* CONTACT セクションの幅も他セクションと揃えて 1080 に */
.sup-main .recruit_internship .inner_m {
	max-width: 1080px;
}
.sup-main .recruit_internship .hdM {
	color: var(--navy);
	letter-spacing: .05em;
}
.sup-main .recruit_internship .hdM span,
.sup-main .recruit_internship .hdM span i {
	color: var(--blue-label);
}
.sup-main .recruit_internship_conts .rec_txt {
	margin-bottom: 16px;
	color: var(--ink);
	line-height: 2;
	text-align: center;
}

/* ご応募はこちら（RECRUIT / #entrylink）は採用ページと共通の
   theme ブロック（.recruit_entry）をそのまま使用するため、
   このページ独自スタイルは当てない（sup-main の外に配置済み）。 */

/* =========================================================
   テーブル（supporters_table）
   ========================================================= */
.sup-main .supporters_table {
	box-shadow: 0 10px 28px rgba(31, 58, 92, .07) !important;
	border-radius: 12px !important;
	border: 1px solid var(--line) !important;
	overflow: hidden;
}
.sup-main .supporters_table th {
	background: var(--blue-bg) !important;
	color: var(--navy) !important;
	border-bottom: 1px solid var(--line) !important;
	font-weight: 700;
}
.sup-main .supporters_table td {
	border-bottom: 1px solid var(--line) !important;
	color: var(--ink) !important;
}
.sup-main .supporters_table a {
	color: var(--blue-deep) !important;
	font-weight: 700;
}

/* =========================================================
   レスポンシブ
   ── 横幅仕様は採用ページ(recruit)に合わせる：
      ブレークポイント 959px / 左右各25px(計50px)の余白 / 最大1080px。
      content幅 = ウィンドウ幅 − 50px（最小ウィンドウ485px → 435px）
   ========================================================= */
@media (max-width: 959px) {
	.sp-only { display: inline; }

	.sup-section {
		padding: 60px 16px;
	}
	.sup-head {
		margin-bottom: 32px;
	}
	.sup-head__ja {
		font-size: 21px;
		/* マーカー背景(box-decoration-break: clone)が2行で重ならないよう行間を確保 */
		line-height: 2.3;
	}
	.sup-head__br { display: inline; }
	.sup-lead {
		padding: 30px 22px;
		font-size: 15px;
		line-height: 2.05;
	}
	.sup-media,
	.sup-media--reverse {
		flex-direction: column;
		gap: 28px;
		padding: 0;
	}
	.sup-media__img {
		flex: none;
		max-width: 100%;
		width: 100%;
	}
	.sup-media__title {
		font-size: 19px;
	}
	.sup-benefits {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		margin-top: 36px;
	}
	.sup-benefit {
		padding: 28px 14px;
		gap: 14px;
	}
	.sup-benefit__icon {
		flex: 0 0 58px;
		width: 58px;
		height: 58px;
	}

	.sup-main .recruit_about {
		padding: 60px 16px;
	}
	.sup-main .recruit_about_in.r_bg {
		padding: 8px 0 32px;
		border-radius: 20px;
	}
	.sup-main .recruit_about .recruit_message_conts {
		padding: 0;
	}
	.sup-main .recruit_about .recruit_message_conts_tagline {
		font-size: 20px;
		padding-bottom: 18px;
	}
	.sup-main .recruit_about .recruit_about_visual {
		margin-top: 14px;
		/* スマホは240pxを下限に、幅が広いタブレット帯（〜959px）では高くする
		   例) ウィンドウ940px → 約395px */
		height: clamp(240px, 42vw, 440px);
		background-position: center center;
	}
	.sup-main .recruit_internship.r_bg {
		padding: 60px 0;
	}
	.sup-main #entrylink .recruit_internship_conts {
		padding: 30px 20px;
	}

	/* 親セクションの左右パディングは消し、内側コンテナの calc(100% - 50px) で
	   左右各25pxの余白を作る（採用ページの inner_* と同じ実効幅にするため） */
	.sup-section,
	.sup-main .recruit_about,
	.recruit_entry#entrylink {
		padding-left: 0;
		padding-right: 0;
	}
	.sup-breadcrumb #breadcrumb {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.sup-breadcrumb #breadcrumb,
	.sup-section__inner,
	.sup-main .recruit_about_in.r_bg,
	.sup-main .recruit_internship .inner_m,
	.recruit_entry#entrylink .inner_s {
		/* 採用ページ(recruit)と同じ仕様：左右各25px(計50px)の余白。
		   content幅 = ウィンドウ幅 − 50px（最小ウィンドウ485px → 435px） */
		width: calc(100% - 50px);
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
	/* sup-lead / sup-benefits は sup-section__inner の子要素なので、
	   親いっぱいに広げる（同じ計算式を当てると二重に余白が引かれて狭くなるため） */
	.sup-lead,
	.sup-benefits {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
	/* inner_m / inner_s はテーマ既定の左右パディング(25px)を消し、
	   上の calc(100% - 50px) のみで余白を作る（二重余白の防止） */
	.sup-main .recruit_internship .inner_m,
	.recruit_entry#entrylink .inner_s {
		padding-left: 0;
		padding-right: 0;
	}
}

/* CONTACT セクションの会社見学テーブル */
.supporters_table {
	width: 100%;
	max-width: 900px;
	margin: 35px auto 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.8;
}
.supporters_table th,
.supporters_table td {
	border: 1px solid #ddd;
	padding: 18px 22px;
	text-align: left;
	vertical-align: middle;
}
.supporters_table td {
	background: #fff;
}
.supporters_table th {
	background: #bf0128;
	color: #fff;
	width: 170px;
	font-weight: bold;
	white-space: nowrap;
}
@media (max-width: 959px) {
	.supporters_table th,
	.supporters_table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
}