@charset "UTF-8";
/* ==================================================================
 * 採用ページ（固定ページ employment-2）
 *
 * 校正版 employment-test/css/style.css の [R] 節をそのまま移したもの。
 * 見た目を変えるときは、先に校正版を直してからこちらに反映すること。
 *
 * 校正版との差分は2点だけ（どちらも WordPress 側の事情）。
 *
 *   1. 画像パス
 *      校正版は css/ の中にあるため ../images/ だが、recruit.css はテーマ直下に
 *      置くので images/recruit/ にしている。
 *
 *   2. 全幅背景の描き方
 *      校正版は ::before を 100vw で敷き、はみ出しを html { overflow-x: clip } で
 *      止めていた。その土台は静的版だけのもので、ここには移せない。
 *      さらにテーマの style.css 11行目が html { overflow-y: scroll } を指定していて
 *      スクロールバーが常時出るため、100vw 方式だと Windows で確実に横スクロールが出る。
 *      box-shadow + clip-path に変えた。box-shadow はスクロール領域に含まれないので
 *      html / body を触らずに済む。
 *
 * 読み込みは functions.php 追記分（functions-append.txt）で is_page('employment-2')
 * のときだけ。テーマの style.css より後に出るよう、依存に def-style を指定している。
 * ================================================================== */

/* ==================================================================
 * [R] 採用ページ本体
 * ================================================================== */

/* ------------------------------------------------------------------
 * 0. 継承リセット
 * ------------------------------------------------------------------ */
.recruit,
.recruit *,
.recruit *::before,
.recruit *::after {
	box-sizing: border-box;
}

.recruit {
	letter-spacing: 0;
	line-height: 1.7;
	/* 日本語を文節で折る。「募集／しています」のような切れ方を防ぐ。
	   未対応ブラウザでは従来どおりの折り返しになるだけで崩れない */
	word-break: auto-phrase;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	color: #4d4d4d;
	font-size: 15px;
}

/* :where で詳細度を0にして、各クラスの margin-top が勝つようにする */
.recruit :where(p) {
	margin: 0;
}

.u-nobr {
	white-space: nowrap;
}

/* 明朝はセクション見出し（h1・h2）だけ。
   カードの区分名「パート・アルバイト」はモックアップに合わせてゴシック太字（2026-09-19）。
   明朝に戻すときは .recruit-btn__label をここに足す */
.recruit h1,
.recruit h2,
.recruit-hero__label {
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Noto Serif CJK JP", serif;
}

.recruit h1,
.recruit h2 {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.recruit a {
	transition: none;
}

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

.recruit ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.recruit hr {
	margin: 0;
	border: 0;
	background: none;
	height: auto;
}

/* 固定ヘッダーの下にアンカーが隠れないようにする */
#recruit-buttons,
#recruit-form {
	scroll-margin-top: 120px;   /* テーマの固定ヘッダーは PC 100px。余裕を見て 120px */
}

@media (prefers-reduced-motion: reduce) {
	.recruit * {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------
 * 1. セクションの切れ目と、見出しのかたち
 *    切れ目は大きく取る。見出しの中は詰める。
 * ------------------------------------------------------------------ */
.recruit > section + section {
	margin-top: 48px;
}

/* ヒーローと最初のボタン群だけは近づける（写真→入口をひと続きに見せる） */
.recruit > .recruit-hero + .recruit-buttons {
	margin-top: 36px;
}

/* 背景色のあるセクション（白・薄ピンク）。中身はコンテナ幅のまま、背景だけ全幅に伸ばす */
.recruit-note,
.recruit-contact {
	position: relative;
	padding: 44px 0;
}

/* 画面幅いっぱいの背景。box-shadow を左右に無限に伸ばし、上下だけ clip-path で切る。
   100vw を使わないので、縦スクロールバーの分がはみ出さない（横スクロールが出ない）。 */
.recruit-note {
	background: #ffffff;
	box-shadow: 0 0 0 100vmax #ffffff;
	clip-path: inset(0 -100vmax);
}

.recruit-contact {
	background: #f8ebeb;
	box-shadow: 0 0 0 100vmax #f8ebeb;
	clip-path: inset(0 -100vmax);
}

/* 生成りに戻る「はたらく毎日」は、白い帯との切れ目を margin で取る */
.recruit > .recruit-note + .recruit-ig {
	margin-top: 44px;
}

/* 薄ピンクの帯は Instagram の写真からすぐ始めてよい（帯自体が区切りになる） */
.recruit > .recruit-ig + .recruit-contact {
	margin-top: 40px;
}

/* 見出し。通し番号は振らない（採用ページは手順書ではないため） */
.recruit-sec__head h2 {
	position: relative;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: #8d214d;
}

.recruit-sec__desc {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.7;
	color: #4d4d4d;
}

/* 見出しの右端や、リンク・ボタンの末尾に付く矢印。文字ではなく罫線で描く（環境でグリフが変わらない）。
   色は currentColor なので、えんじの文字にはえんじ、白いボタンの中では白になる */
.recruit-arrow {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 10px;
}

.recruit-arrow::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	background: currentColor;
}

.recruit-arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transform-origin: center;
	margin-top: 0.5px;
}

/* 見出しの右端に置く「noteで全記事を読む」「Instagramを見る」。
   スマホでは一覧の下（左寄せ）、PCではグリッドで見出しの行に上げる */
.recruit-note__more-wrap,
.recruit-ig__more-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 12px;
	padding-left: 2px;             /* .recruit-buttons__fallback と同じ */
}

.recruit .recruit-note__more,
.recruit .recruit-ig__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 14px;
	color: #92214d;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.recruit .recruit-note__more .recruit-arrow,
.recruit .recruit-ig__more .recruit-arrow {
	width: 14px;
	margin-left: 2px;
}

/* ------------------------------------------------------------------
 * A. ヒーロー（2026-09-28 望月さんの最終版に差し替え）
 *
 *   見出しと本文は画像の中に入っている。HTML側の .recruit-hero__text は
 *   視覚的に隠すだけで、DOMからは消さない（読み上げと検索のため）。
 *
 *   画像は切り抜かない。切ると焼き込んだ文字が落ちる。
 *     スマホ 1122×1402（4:5）  PC 2000×833（2.4:1）
 * ------------------------------------------------------------------ */
.recruit-hero {
	display: block;
	padding: 4px 0 16px;
}

.recruit-hero__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.recruit-hero__photos {
	margin-top: 12px;
}

.recruit-hero__photos picture {
	display: block;
}

.recruit .recruit-hero__photo1 {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

@media (min-width: 640px) {
	.recruit-hero {
		padding: 8px 0;
	}

	.recruit-hero__photos {
		margin-top: 0;
	}
}

/* ------------------------------------------------------------------
 * B. 雇用区分ボタン（のれん）
 *    2026-09-20 クライアントのデザイン案に合わせた。
 *
 *    しくみ（画像は使わない。区分名は文字のまま）
 *      布   … .recruit-btn__head::before にえんじを敷き、clip-path の多角形で下端中央に切れ込みを入れる。
 *              のっぺりしないよう、上を少し明るく・下を少し暗くするグラデーションと、
 *              縦の細い織り目（repeating-linear-gradient）、上端近くの縫い目1本を重ねている。影は使わない
 *      木の棒 … PCだけ。各カードの ::before を左右に 14px はみ出させ、隣と重ねて1本に見せる。
 *              行ごとに1本になるので、4つ目が増えて 2×2 になっても崩れない
 *      吊り輪 … PCだけ。.recruit-btn__head::after の背景に濃えんじの短冊を左右1本ずつ描き、棒の上にかぶせる
 *
 *    スマホ（〜782px）
 *      布を短い帯（区分名を白抜き）にし、その下に職種と枠線ボタン。
 *      棒はカードの左右に 10px だけ出す。3枚が縦に積まれて隙間がないので、
 *      PCのように木が長く見えることはない。端がちょっと覗く程度でよい（2026-09-28）。
 *      吊り輪は出さない。
 *      横スクロールにはしない（低関心のスマホ利用者に3つ目を隠したくない）
 *
 *    PC（783px〜）
 *      デザイン案どおり。布の上に区分名を白抜きで載せる、職種は1行1つ、枠線ボタン
 *
 *    カード全体がリンク。見出しは他セクションと同じ左揃え・線なし、末尾の「迷った方は」は左右を横線で挟む
 * ------------------------------------------------------------------ */

.recruit-btn-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	max-width: 560px;                /* タブレットで横に伸びすぎないように。PCで解除 */
	margin: 22px auto 0;
}

.recruit .recruit-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 0 16px;
	background: #ffffff;
	border: 1px solid #e6decb;
	border-radius: 0 0 8px 8px;      /* 上は布が掛かるので角を落とさない（布は四角く垂れる） */
	color: #333333;
	text-decoration: none;
}

/* 木の棒（望月さん支給の のれん棒.png）。スマホは端がちょっと覗くだけ。
   はみ出しは 10px。画面の左右の余白が 320px 幅の端末でも 16px あるので、丸い端が切れない。
   PC（783px〜）では長さと端の処理を上書きしている */
.recruit .recruit-btn::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 3px;                        /* 布の上端の袋の中に通す */
	left: -10px;
	right: -10px;
	height: 10px;
	background:
		url("images/recruit/noren-bar-l.png") left center / auto 100% no-repeat,
		url("images/recruit/noren-bar-r.png") right center / auto 100% no-repeat,
		url("images/recruit/noren-bar.png") center / auto 100% repeat-x;
}

/* 布。スマホでは番号と区分名をこの中に入れる */
.recruit-btn__head {
	position: relative;
	z-index: 2;                      /* PCの棒（z:1）より手前。吊り輪が棒にかぶるように */
	display: block;
	margin: -1px -1px 0;             /* カードの枠線の上まで布で覆う */
	padding: 12px 16px 26px;
	text-align: center;
	color: #ffffff;
}

.recruit-btn__head::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)) 0 17px / 100% 1px no-repeat,      /* 袋の縫い目 */
		linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0)) 0 0 / 100% 17px no-repeat,  /* 袋の膨らみ */
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.05)),
		url("images/recruit/noren.jpg") center / cover no-repeat,   /* 布（望月さん支給） */
		#8d214d;                                               /* 画像が読めないときの色 */
	/* 下端中央の切れ込み。幅 10px、高さ 14px の細い三角 */
	clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + 5px) 100%, 50% calc(100% - 14px), calc(50% - 5px) 100%, 0 100%);
}


.recruit-btn__label {
	display: block;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

.recruit-btn__jobs {
	display: block;
	flex: 1 1 auto;                  /* カードの高さが揃ったとき、ボタンを下端にそろえる */
	margin-top: 14px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
	color: #5c5c5c;
}

.recruit-btn__jobs .job {
	display: inline-block;
}

.recruit-btn__jobs .job:not(:last-child)::after {
	content: "／";
	color: #e6decb;
	margin: 0 2px;
}

.recruit-btn__more {
	font-size: 14px;
	font-weight: 700;
}

/* 枠線ボタン。えんじの線と文字、白地。応募フォームの CTA（塗り）より弱くして格の差を付ける */
.recruit-btn__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 46px;
	margin: 16px 16px 0;
	padding: 0 16px;
	background: #ffffff;
	border: 1.5px solid #8d214d;
	border-radius: 6px;
	color: #8d214d;
}

.recruit-btn__foot .recruit-arrow {
	width: 18px;
}

/* 押した・重ねたときは枠線ボタンが塗りに変わる。カードの白は変えない */
.recruit .recruit-btn:active .recruit-btn__foot {
	background: #8d214d;
	color: #ffffff;
}

.recruit .recruit-btn:focus-visible {
	outline: 3px solid #8d214d;
	outline-offset: 2px;
}

@media (hover: hover) {
	.recruit .recruit-btn:hover .recruit-btn__foot {
		background: #8d214d;
		color: #ffffff;
	}
}

/* 本番写真用（いまは HTML に無い。使うなら .recruit-btn__head の直後） */
.recruit-btn__thumb {
	width: 100%;
	aspect-ratio: 2 / 1;
	margin: 0 0 14px;
	border-radius: 6px;
	overflow: hidden;
}

.recruit-btn__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recruit-btn__dest {
	font-size: 12px;
	line-height: 1.4;
	color: #5c5c5c;
}

/* 「迷った方は、応募・相談フォームへ」。左右を短い横線で挟む。狭い幅では線が縮む */
.recruit .recruit-buttons__fallback a {
	display: inline-block;
	padding: 12px 0;
	margin: -12px 0;      /* 見た目の位置は変えずにタップ領域だけ広げる */
}

.recruit-buttons__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
	color: #4d4d4d;
}

.recruit-buttons__fallback::before,
.recruit-buttons__fallback::after {
	content: "";
	flex: 0 1 64px;
	min-width: 20px;
	height: 1px;
	background: #4d4d4d;
	opacity: 0.35;
}

.recruit-buttons__fallback > span {
	flex: 0 0 auto;
}

.recruit .recruit-buttons__fallback a {
	font-weight: 700;
	color: #92214d;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------------------
 * D. 仕事の中身・先輩の声（note最新3件）
 *    白い帯の上に、枠なしで置く（サムネ＋題名＋日付）。
 *    スマホ：横並びの行。PC：3列。
 *    span はPCで inline に戻ると幅・比率が効かなくなるので display を明示する
 * ------------------------------------------------------------------ */
.recruit-note__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 24px;
}

.recruit .recruit-note__item {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #333333;
	text-decoration: none;
}

@media (hover: hover) {
	.recruit .recruit-note__item:hover .recruit-note__title {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}
}

.recruit-note__thumb {
	display: block;
	flex: 0 0 120px;
	width: 120px;
	aspect-ratio: 480 / 251;
	border-radius: 4px;
	overflow: hidden;
}

.recruit-note__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recruit-note__body {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.recruit-note__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.55;
	color: #333333;
}


.recruit-note__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	margin-top: 24px;
	padding: 8px;
	background: #ffffff;
	border: 1px solid #e6decb;
	border-radius: 8px;
}

.recruit .recruit-note__empty a {
	font-size: 15px;
	color: #92214d;
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * D-2. Instagram（採用アカウント開設まで仮画像）
 *      正方形3枚を横並び。note記事と形を変えて、読み物と写真を見分けられるようにする
 * ------------------------------------------------------------------ */
.recruit-ig__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-top: 24px;
}

/* 4:5。Instagram の縦長フィードに合わせている。
   1:1 に切ると、上の家紋と下のリード文が落ちてデザインが成立しない。 */
.recruit-ig__list li {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #e6decb;
}

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

.recruit-ig__list a {
	display: block;
	height: 100%;
}

/* 仮画像のあいだだけ：Instagram のアイコンを「仮」の文字の上に薄く重ねる。本番差し替え時にクラスごと外す */
.recruit-ig__ph {
	position: relative;
}

.recruit-ig__ph::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 24%;
	width: 18px;
	height: 18px;
	transform: translateX(-50%);
	background: url("images/recruit/icon-instagram-black.svg") center / contain no-repeat;
	opacity: 0.4;
	pointer-events: none;
}

/* ------------------------------------------------------------------
 * E. 応募・相談フォーム＋採用連絡先
 *    薄ピンクの全幅背景の上に直接置く（箱に入れない）。
 *    スマホ：見出し → ボタン → 電話 の縦積み。PC：3列。
 *    ページで一番大きい塗りボタン（高さ 56〜60px、文字 17〜18px）。カードの「詳細はこちら」より一回り大きい
 * ------------------------------------------------------------------ */
.recruit-contact__form {
	margin-top: 24px;
}

.recruit .recruit-contact__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	height: 56px;
	padding: 0 24px;
	background: #8d214d;
	border-radius: 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	color: #ffffff;
	text-decoration: none;
}

.recruit .recruit-contact__cta .recruit-arrow {
	width: 20px;
}

/* 640px以上は応募ボタンを全幅にしない（タブレットで幅いっぱいだと重い）。
   上の基本ルールと同じ詳細度なので、必ずこの後ろに置く */
@media (min-width: 640px) {
	.recruit .recruit-contact__cta {
		display: inline-flex;
		width: auto;
		min-width: 280px;
		padding: 0 32px;
	}
}

.recruit .recruit-contact__cta:active {
	background: #741537;
}

@media (hover: hover) {
	.recruit .recruit-contact__cta:hover {
		background: #741537;
	}
}

.recruit .recruit-contact__cta:focus-visible,
.recruit .recruit-contact__tel:focus-visible {
	outline: 3px solid #8d214d;
	outline-offset: 2px;
}

.recruit-contact__info {
	margin-top: 24px;
}

.recruit-contact__dept {
	font-size: 13px;
	line-height: 1.5;
	color: #5c5c5c;
}

/* 番号そのものをリンクにする。別途「電話をかける」ボタンは置かない
   （塗りボタンと枠線ボタンが並ぶと形が揃わず、主導線もぼやけるため） */
.recruit .recruit-contact__tel {
	display: inline-block;
	margin-top: 4px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.03em;
	color: #8d214d;
	text-decoration: none;
}

.recruit-contact__dept-sub {
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: #5c5c5c;
}

/* ------------------------------------------------------------------
 * PC（783px以上）
 *    幅 1000px。見出しの右端に出口リンク（note・Instagram）。連絡先は3列
 * ------------------------------------------------------------------ */
@media (min-width: 783px) {
	.recruit > .recruit-hero + .recruit-buttons {
		margin-top: 24px;           /* 見出しが中央揃えになったので写真から少し離す */
	}
	.recruit-hero {
		padding: 8px 0 24px;
	}
	.recruit {
		max-width: 1000px;
		margin: 0 auto;
		font-size: 16px;
	}

	.recruit > section + section {
		margin-top: 48px;
	}

	.recruit-note,
	.recruit-contact {
		padding: 52px 0 48px;
	}

	.recruit > .recruit-note + .recruit-ig {
		margin-top: 48px;
	}

	.recruit > .recruit-ig + .recruit-contact {
		margin-top: 40px;
	}

	.recruit-sec__head h2 {
		font-size: 28px;
	}

	.recruit-sec__desc {
		margin-top: 12px;
		font-size: 15px;
		max-width: 46em;
	}

	/* --- 見出しの右端に出口リンクを置く。
	       見出し（左）とリンク（右）を1行目、一覧を2行目に。DOM順は 見出し → 一覧 → リンク のまま --- */
	.recruit-note,
	.recruit-ig {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"head more"
			"list list";
		column-gap: 32px;
		align-items: start;
	}

	.recruit-note > .recruit-sec__head,
	.recruit-ig > .recruit-sec__head {
		grid-area: head;
	}

	.recruit-note__list,
	.recruit-ig__list {
		grid-area: list;
	}

	.recruit-note__more-wrap,
	.recruit-ig__more-wrap {
		grid-area: more;
		align-self: start;
		margin-top: -3px;           /* 44px のリンク行の中心を h2（28px × 1.4 ≒ 39px）の中心にそろえる */
		padding-left: 0;
	}

	.recruit .recruit-note__more,
	.recruit .recruit-ig__more {
		font-size: 15px;
	}

	/* --- のれん：3列。棒が上に 20px 出るぶん margin-top を多めに取る。
	       4つ目が来たら 2×2 に切り替わる。棒はカードごとに持っているので行ごとに1本になる --- */
	.recruit-buttons .recruit-sec__head h2::after {
		width: 36px;
		margin-top: 12px;
	}

	.recruit-btn-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		max-width: none;
		margin-top: 44px;
	}

	.recruit-btn-list:has(> :nth-child(4)) {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 44px;              /* 2行目の棒が1行目のカードに触れないように */
	}

	.recruit .recruit-btn {
		padding: 0 24px 24px;
	}

	/* 木の棒（2026-09-28 望月さん支給の のれん棒.png に差し替え）。
	   支給は 1200×40 の透過PNGで、両端 15px ほどが丸い端。中央は x 方向に一様なので、
	   中央の一片（noren-bar.png）を repeat-x で流し、行の両端だけ端の画像を重ねている。
	   画像自体に陰影が入っているので、CSSのグラデーションと下地の色は重ねない
	   （下地を敷くと、丸い端の透過部分が四角く塗り潰される）。

	   カードごとに持ち、左右に間隔の半分ずつはみ出して隣と突き合わせ、1本に見せる。
	   位置の基準はカードの枠線の内側なので、間隔 20px の半分 10px ＋枠線 1px ＋重ね 0.5px ＝ 11.5px。 */
	.recruit .recruit-btn::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: 3px;                  /* 布の上端の袋の中に通す。布に隠れ、のれんの間と両端だけ見える */
		left: -11.5px;
		right: -11.5px;
		height: 11px;
		background: url("images/recruit/noren-bar.png") center / auto 100% repeat-x;
	}

	/* 3列のとき：行の左端は 1・4・7番目、右端は 3・6番目と最後。
	   端の画像を重ねる（背景レイヤーは先に書いた方が手前） */
	.recruit .recruit-btn:nth-child(3n + 1)::before {
		left: -22px;
		background:
			url("images/recruit/noren-bar-l.png") left center / auto 100% no-repeat,
			url("images/recruit/noren-bar.png") center / auto 100% repeat-x;
	}

	.recruit .recruit-btn:nth-child(3n)::before,
	.recruit .recruit-btn:last-child::before {
		right: -22px;
		background:
			url("images/recruit/noren-bar-r.png") right center / auto 100% no-repeat,
			url("images/recruit/noren-bar.png") center / auto 100% repeat-x;
	}

	/* 行の左端かつ右端（1行に1枚だけのとき）は両端とも丸める */
	.recruit .recruit-btn:nth-child(3n + 1):last-child::before {
		background:
			url("images/recruit/noren-bar-l.png") left center / auto 100% no-repeat,
			url("images/recruit/noren-bar-r.png") right center / auto 100% no-repeat,
			url("images/recruit/noren-bar.png") center / auto 100% repeat-x;
	}

	/* 2列（4つ以上）のとき：行の左端は奇数番目、右端は偶数番目と最後。
	   3列用の指定をいったん戻してから付け直す */
	.recruit-btn-list:has(> :nth-child(4)) .recruit-btn::before {
		left: -11.5px;
		right: -11.5px;
		background: url("images/recruit/noren-bar.png") center / auto 100% repeat-x;
	}

	.recruit-btn-list:has(> :nth-child(4)) .recruit-btn:nth-child(odd)::before {
		left: -22px;
		background:
			url("images/recruit/noren-bar-l.png") left center / auto 100% no-repeat,
			url("images/recruit/noren-bar.png") center / auto 100% repeat-x;
	}

	.recruit-btn-list:has(> :nth-child(4)) .recruit-btn:nth-child(even)::before,
	.recruit-btn-list:has(> :nth-child(4)) .recruit-btn:last-child::before {
		right: -22px;
		background:
			url("images/recruit/noren-bar-r.png") right center / auto 100% no-repeat,
			url("images/recruit/noren-bar.png") center / auto 100% repeat-x;
	}

	/* 奇数番目かつ最後（4つ以上で最終行が1枚のとき）は両端とも丸める */
	.recruit-btn-list:has(> :nth-child(4)) .recruit-btn:nth-child(odd):last-child::before {
		background:
			url("images/recruit/noren-bar-l.png") left center / auto 100% no-repeat,
			url("images/recruit/noren-bar-r.png") right center / auto 100% no-repeat,
			url("images/recruit/noren-bar.png") center / auto 100% repeat-x;
	}

	/* 布。のれんには区分名を掲げる（店名を染め抜く感覚）。
	   ::before（布）は上から 118px。区分名はその中に収める */
	.recruit-btn__head {
		margin: -1px -25px 0;
		padding: 0 24px;
		color: #ffffff;
	}

	.recruit-btn__head::before {
		inset: 0 0 auto 0;
		height: 118px;
		background:
			linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)) 0 17px / 100% 1px no-repeat,      /* 袋の縫い目 */
			linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0)) 0 0 / 100% 17px no-repeat,
			linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.05)),
			url("images/recruit/noren.jpg") center / cover no-repeat,
			#8d214d;
		/* 切れ込みは幅 12px、高さ 30px */
		clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + 6px) 100%, 50% calc(100% - 30px), calc(50% - 6px) 100%, 0 100%);
	}

	/* 吊り輪は出さない。布が棒から直接下がる形にしている。
	   CSSの四角を並べるだけでは、布が棒に巻きつく折り返しの厚みと影が出せず、
	   貼り付けたように見えたため（2026-09-24）。望月さんに輪のPNGを依頼中で、
	   届いたらこの位置に <span> で重ねる。 */


	.recruit-btn__label {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 118px;          /* 布の高さ。区分名を布の中で天地中央に置く */
		padding: 0 4px 18px;        /* 下は切れ込み（30px）を避ける分 */
		font-size: 21px;
		line-height: 1.35;
		color: #ffffff;
	}

	.recruit-btn__jobs {
		margin-top: 26px;
		padding: 0;
		font-size: 15px;
	}

	.recruit-btn__jobs .job + .job {
		margin-top: 4px;        /* 職種どうしも少し離す */
	}

	.recruit-btn__jobs .job {
		display: block;             /* PCは1職種1行にして数えやすくする */
	}

	.recruit-btn__jobs .job:not(:last-child)::after {
		content: none;
	}

	.recruit-btn__foot {
		height: 50px;
		margin: 26px 0 0;
		padding: 0 18px;
	}

	.recruit-btn__more {
		font-size: 15px;
	}

	.recruit-btn__dest {
		font-size: 13px;
	}

	.recruit .recruit-buttons__fallback a {
	display: inline-block;
	padding: 12px 0;
	margin: -12px 0;      /* 見た目の位置は変えずにタップ領域だけ広げる */
}

.recruit-buttons__fallback {
		margin-top: 32px;
		font-size: 15px;
	}

	/* --- FAQ：見出しを左の列に、内容を右の列に --- */






	/* --- note：3列。写真は上、題名は下。枠は付けない --- */
	.recruit-note__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		margin-top: 28px;
	}

	.recruit .recruit-note__item {
		display: block;
	}

	.recruit-note__thumb {
		width: 100%;
		border-radius: 6px;
	}

	.recruit-note__body {
		padding: 12px 0 0;
	}

	.recruit-note__title {
		font-size: 15px;
		line-height: 1.6;
	}


	.recruit-ig__list {
		gap: 12px;
		margin-top: 28px;
	}

	.recruit-ig__ph::before {
		width: 24px;
		height: 24px;
	}

	/* --- 連絡先：見出し（左）｜フォームのボタン（中）｜電話（右）の3列。
	       783〜1099px は幅が足りないので、右側にボタンと電話を縦に積む --- */
	.recruit-contact {
		display: grid;
		grid-template-columns: 300px 1fr;
		grid-template-areas:
			"head form"
			"head info";
		column-gap: 48px;
		align-items: start;
	}

	.recruit-contact > .recruit-sec__head {
		grid-area: head;
	}

	.recruit-contact__form {
		grid-area: form;
		margin-top: 4px;
	}

	.recruit-contact__info {
		grid-area: info;
		margin-top: 20px;
	}

	.recruit-contact .recruit-sec__desc {
		padding-left: 0;
		max-width: none;
	}

	.recruit-contact .recruit-sec__head h2 {
		font-size: 26px;
	}

	.recruit .recruit-contact__cta {
		height: 60px;
		font-size: 18px;
	}

	.recruit .recruit-contact__tel {
		font-size: 30px;
	}
}

/* 783〜1099px：カードが狭いので区分名を少し小さく（「新卒・インターンシップ」が折れないように） */
@media (min-width: 783px) and (max-width: 1099px) {
	.recruit-btn__label {
		font-size: 21px;
	}
}

/* 1100px以上：連絡先を3列に。電話の列の左に細い線を1本 */
@media (min-width: 1100px) {
	.recruit-contact {
		grid-template-columns: 320px 1fr auto;
		grid-template-areas: "head form info";
		column-gap: 40px;
		align-items: center;
	}

	.recruit-contact__form {
		display: flex;
		justify-content: center;
		margin-top: 0;
	}

	.recruit-contact__info {
		margin-top: 0;
		padding-left: 32px;
		border-left: 1px solid #e6decb;
	}
}