/* 役：求人ページ（/recruit/番号/・single-recruit.php）の見た目。手本＝今の採用サイト V9.6 のトップ（線で区切る行・角のないピンクの釦・一覧の行）とコラム。
   旧テーマの黒い帯・ネオンの絵・色の帯は使わない。幅は SWELL の設定（記事の幅）のまま。文字の大きさと色は base.css の変数だけ。 */

/* ページの題 */
.tdr-job-head {
	margin: 0 var(--swl-pad_post_content, 0);
	padding: 0 0 28px;
	border-bottom: 1px solid var(--tdr-ink);
}
.tdr-job-title {
	margin: 0;
	font-size: var(--tdr-font-lg);
	font-weight: 700;
	line-height: 1.5;
	color: var(--tdr-ink);
	line-break: strict;
	overflow-wrap: anywhere;
}

/* 本文の入れ物（SWELL の .post_content）。節は 見出し→中身 の順に1列 */
.tdr-job > .tdr-job-body {
	margin-top: 0;
	line-break: strict;
	overflow-wrap: anywhere;
}
.tdr-job-body > .tdr-job-sec {
	margin: 0;
	padding: 56px 0 0;
}
.tdr-job-body .tdr-job-h {
	margin: 0 0 24px;
	padding: 0;
	font-size: var(--tdr-font-lg);
	line-height: 1.45;
}
.tdr-ph { display: inline-block; }
.tdr-nw { white-space: nowrap; }
.tdr-job-body .tdr-job-sec-body { margin: 0; min-width: 0; }

/* 文章の欄（ACF の文・引き継ぎ枠の文） */
.tdr-job-text { font-size: var(--tdr-font-md); line-height: 1.9; }
.tdr-job-text p { margin: 0 0 1em; }
.tdr-job-text > :last-child { margin-bottom: 0; }
.tdr-job-text ul,
.tdr-job-terms ul { margin: .4em 0 1em; padding-left: 1.3em; }
.tdr-job-text li,
.tdr-job-terms li { margin: .4em 0; line-height: 1.8; }
.tdr-job-text li::marker,
.tdr-job-terms li::marker { color: var(--tdr-pink); }
.tdr-job-text a { text-decoration: underline; text-underline-offset: 4px; }
.tdr-job-text strong,
.tdr-job-text b { font-weight: 700; }

/* 引き継ぎクラスの募集＝薄い面で囲む */
.tdr-job-takeover {
	padding: 28px 32px;
	background: var(--tdr-paper);
	background: color-mix(in srgb, var(--tdr-line) 30%, var(--tdr-paper));
	border-left: 3px solid var(--tdr-pink);
}

/* 募集要項＝線で区切る行（左に項目・右に中身） */
.tdr-job-terms { border-top: 1px solid var(--tdr-ink); }
.tdr-job-row {
	display: grid;
	grid-template-columns: minmax(0, 176px) minmax(0, 1fr);
	gap: 6px 28px;
	padding: 20px 0;
	border-bottom: 1px solid var(--tdr-line);
}
.tdr-job-row dt {
	margin: 0;
	font-size: var(--tdr-font-md);
	font-weight: 700;
	line-height: 1.8;
	color: var(--tdr-ink);
	word-break: keep-all;
}
.tdr-job-row dd {
	margin: 0;
	font-size: var(--tdr-font-md);
	line-height: 1.9;
	color: var(--tdr-ink);
}
.tdr-job-row dd > :last-child { margin-bottom: 0; }

/* 募集ステータス＝今の状態を濃く、もう一方は枠だけ（字は CSS で描く・読み上げない） */
.tdr-job-row .tdr-job-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tdr-job-status-on,
.tdr-job-status-off::before {
	display: inline-block;
	padding: 4px 14px;
	font-size: var(--tdr-font-sm);
	font-weight: 700;
	line-height: 1.6;
	border: 1px solid var(--tdr-pink);
}
.tdr-job-status-on { background: var(--tdr-pink); color: var(--tdr-white); }
.tdr-job-status-on.is-pause { background: var(--tdr-ink); border-color: var(--tdr-ink); }
.tdr-job-status-off::before {
	content: attr(data-label);
	border-color: var(--tdr-line);
	color: var(--tdr-muted);
	font-weight: 500;
}

/* コラム・ほかの求人＝線で区切る一覧（採用トップの一覧と同じ形） */
.tdr-job-body .tdr-job-links {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--tdr-ink);
}
.tdr-job-body .tdr-job-links li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--tdr-line);
	line-height: 1.7;
}
.tdr-job-body .tdr-job-links li::marker { content: none; }
.tdr-job-body .tdr-job-links a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20px;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	color: var(--tdr-ink);
	font-weight: 500;
	text-decoration: none;
}
.tdr-job-body .tdr-job-others a { grid-template-columns: 22px minmax(0, 1fr) 20px; gap: 14px; }
.tdr-job-body .tdr-job-links a:hover .tdr-job-link-text {
	color: var(--tdr-pink);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.tdr-job-link-text {
	font-size: var(--tdr-font-md);
	line-break: strict;
	overflow-wrap: anywhere;
}
/* コラムの題に文節の箱（.ph）があるときは、箱の切れ目でだけ折る（旧求人ページと同じ） */
.tdr-job-link-text:has(.ph) { word-break: keep-all; }
.tdr-job-link-text .ph { display: inline-block; text-decoration: inherit; }
.tdr-job-link-text .nowrap { white-space: nowrap; }

/* 線の絵 */
.tdr-icon {
	width: 20px;
	height: 20px;
	stroke: var(--tdr-pink);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tdr-icon--job { width: 22px; height: 22px; stroke-width: 1.5; }

/* 応募の流れ＝番号付きの段（番号は CSS で描く）。段の字は「・」と改行の所でだけ折る */
.tdr-job-flow-note { margin: 0; font-size: var(--tdr-font-md); line-height: 1.9; }
.tdr-job-body .tdr-job-steps {
	list-style: none;
	counter-reset: tdr-step;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
}
.tdr-job-body .tdr-job-steps li {
	counter-increment: tdr-step;
	margin: 0;
	padding: 16px 14px 18px;
	border-top: 2px solid var(--tdr-pink);
	background: var(--tdr-paper);
	background: color-mix(in srgb, var(--tdr-line) 30%, var(--tdr-paper));
	font-size: var(--tdr-font-md);
	font-weight: 700;
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.tdr-job-body .tdr-job-steps li::marker { content: none; }
.tdr-job-body .tdr-job-steps li::before {
	content: counter(tdr-step, decimal-leading-zero);
	display: block;
	margin-bottom: 6px;
	font-family: var(--tdr-num);
	font-size: var(--tdr-font-sm);
	font-weight: 700;
	color: var(--tdr-pink);
}

/* 応募の釦（角のないピンク・右に矢印） */
.tdr-job-body .tdr-job-apply { margin: 32px 0 0; }
.tdr-job-body .tdr-job-btn {
	display: inline-grid;
	grid-template-columns: minmax(0, 1fr) 20px;
	align-items: center;
	gap: 28px;
	min-width: 360px;
	min-height: 60px;
	padding: 12px 24px;
	background: var(--tdr-pink);
	border: 1px solid var(--tdr-pink);
	color: var(--tdr-white);
	font-size: var(--tdr-font-md);
	font-weight: 700;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s;
}
.tdr-job-body .tdr-job-btn:hover {
	color: var(--tdr-white);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -10px var(--tdr-ink);
}
.tdr-job-btn .tdr-icon { stroke: var(--tdr-white); }

/* この求人の要点（ページのいちばん上。契約・報酬・勤務地・応募の受け方と応募の釦。中身は求人の欄から。2026-10-16） */
.tdr-job-body > .tdr-job-sum { padding-top: 32px; }
.tdr-job-sum .tdr-job-row { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); padding: 14px 0; }
.tdr-job-sum .tdr-job-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 24px; }
.tdr-job-sum .tdr-job-jump { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--tdr-font-sm); }
.tdr-job-sum .tdr-job-jump a { color: var(--tdr-pink); text-decoration: underline; text-underline-offset: 4px; }
/* 募集を休んでいる求人の案内（2026-10-17）：「次のとおりです。」と、募集中の求人の一覧の上の線の間をあける */
.tdr-job-paused .tdr-job-links { margin-top: 16px; }

/* スマホ：項目と中身を縦に・段は1列・釦は横いっぱい */
@media (max-width: 599px) {
	.tdr-job-body > .tdr-job-sum { padding-top: 22px; }
	.tdr-job-sum .tdr-job-row { grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; }
	.tdr-job-head { padding-bottom: 22px; }
	.tdr-job-body > .tdr-job-sec { padding-top: 44px; }
	.tdr-job-body .tdr-job-h { margin-bottom: 18px; }
	.tdr-job-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; }
	.tdr-job-takeover { padding: 20px 16px; }
	/* 枠の一覧は、土台の tdr_rc_takeover_html がかたまり（曜日と時間・校舎・時期など）ごとに style で折り返しを止めている。
	   スマホでは最後のかたまり「早ければ、契約が決まった週か次の週から」が1行より長いので、そのかたまりだけ箱にして次の行へ送り、箱の中で折り返す */
	/* !important を残す理由：土台の HTML（Google の求人情報の説明と同じ物）が、かたまりごとに style 属性で white-space:nowrap を書いている。style 属性に勝てるのはこれだけ（外すと 390・360 で最後のかたまりが箱の中で折り返さなくなることを測って確かめた） */
	.tdr-job-takeover .tdr-takeover li > span:last-child { display: inline-block; max-width: 100%; white-space: normal !important; }
	.tdr-job-body .tdr-job-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.tdr-job-body .tdr-job-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; padding: 14px 16px; }
	.tdr-job-body .tdr-job-steps li::before { margin: 0; }
	.tdr-job-body .tdr-job-btn { display: grid; width: 100%; min-width: 0; }
}
/* 指で触る端末：求人ページの上の飛び先のリンク（「募集要項を見る」など・高さ27px）を44pxへ。透明な余白と同じだけの負の余白（見た目は変えない）。2026-10-27 */
@media (hover: none) and (pointer: coarse) {
	.tdr-job-sum .tdr-job-jump a { padding-block: 9px; margin-block: -9px; }
}