/* 役：全ページ共通の枠（ヘッダー・ナビ・足元・パンくず）。SWELL の部品の見た目の差分だけを書く（構造は変えない）。
   手本＝今の採用サイト V9.6 の site-header（高さ64px・上に固定・下に線・ロゴ横に「インストラクター採用サイト」・角のないピンクのエントリー釦）と footer。 */

/* ヘッダー */
.l-header,
.l-fixHeader {
	background: color-mix(in srgb, var(--tdr-paper) 98%, transparent); /* 地の色をわずかに透かす（V9.6 と同じ） */
	border-bottom: 1px solid var(--tdr-line);
	box-shadow: none;
}
.l-header__inner,
.l-fixHeader__inner { min-height: 64px; }
/* ロゴの箱＝高さは SWELL の設定（--logo_size_pc・--logo_size_sp）のまま。画像と文字を横に並べる */
.l-header .c-headLogo__link,
.l-fixHeader .c-headLogo__link {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 0; /* SWELL はリンクに上下10pxを足すが、高さは SWELL の設定のロゴの大きさで決めるので外す */
}
/* ヘッダーの高さ＝ロゴ48px＋上下8px＝64px（V9.6 と同じ） */
.l-header.-series .l-header__logo { padding-top: 8px; padding-bottom: 8px; }
.l-header .c-headLogo__img,
.l-fixHeader .c-headLogo__img {
	height: 100%;
	width: auto;
	max-width: none;
	flex-shrink: 0;
}
/* ロゴの横の「インストラクター採用サイト」（SWELL 本体のキャッチフレーズは検索の題にも使うため書き換えない） */
.c-headLogo__link::after {
	content: "インストラクター採用サイト";
	font-size: var(--tdr-font-md);
	line-height: 1.35;
	font-weight: 500;
	color: var(--tdr-ink);
	white-space: nowrap;
}
@media (max-width: 959px) {
	.l-header__inner { min-height: 64px; }
	.c-headLogo__link::after {
		content: "インストラクター\A採用サイト";
		white-space: pre;
		font-size: var(--tdr-font-sm);
	}
}
.c-gnav > .menu-item > a {
	font-weight: 700;
	color: var(--tdr-ink);
	padding: 0 12px;
}
/* SWELL はメニューの字（.ttl）を14pxにするので、注記の段（15px）にそろえる */
.c-gnav > .menu-item > a .ttl { font-size: var(--tdr-font-sm); }
/* 末尾の「エントリー」＝角のない釦（上下の真ん中に置く） */
.c-gnav > .menu-item.tdr-nav-entry {
	display: flex;
	align-items: center;
}
.c-gnav > .menu-item.tdr-nav-entry > a {
	background: var(--tdr-pink);
	color: var(--tdr-white);
	padding: 12px 18px;
	margin-left: 16px;
	height: auto;
	align-self: center;
}
.c-gnav > .menu-item.tdr-nav-entry > a::after { content: none; }
.c-gnav > .menu-item.tdr-nav-entry > a .ttl::after { content: " →"; }

/* スマホのヘッダーの「応募」釦（SWELL のカスタムボタン。色は SWELL の設定 custom_btn_bg）。
   SWELL の既定はロゴの高さの正方形に10pxの字なので、今の本番と同じ「印＋応募」の横並びの釦にし、字を注記の段にそろえる */
.l-header__customBtn {
	width: auto;
	height: 40px;
	align-self: center;
}
.l-header__customBtn .c-iconBtn {
	flex-wrap: nowrap;
	gap: 6px;
	padding: 0 12px;
}
.l-header__customBtn .c-iconBtn__label {
	display: inline;
	width: auto;
	font-size: var(--tdr-font-sm);
	font-weight: 700;
	white-space: nowrap;
	transform: none;
}
/* 幅の狭いスマホでも、ロゴ・ロゴの横の字・応募・メニューを1行に収める（字は小さくしない）。
   389px以下＝応募の釦は字だけ（印を外す）。359px以下＝ロゴの横は「採用サイト」だけ */
@media (max-width: 389px) {
	.l-header__customBtn .c-iconBtn__icon { display: none; }
}
@media (max-width: 359px) {
	.c-headLogo__link::after { content: "採用サイト"; }
}

/* スマホの開閉メニュー */
.p-spMenu__inner { background: var(--tdr-paper); }
.p-spMenu .c-spnav a,
.p-spMenu .c-widget__title.-spmenu { font-size: var(--tdr-font-sm); } /* SWELL の既定は14px前後（「MENU」の見出しも同じ） */
.p-spMenu .menu-item.tdr-nav-entry > a {
	background: var(--tdr-pink);
	color: var(--tdr-white);
	margin-top: 12px;
}

/* パンくず＝「採用トップ / コラム」（地の帯は SWELL の設定 hide_bg_breadcrumb で切ってある。家の印・矢印の飾りは使わない） */
/* 上の余白＝24px（V9.6 と同じ）。SWELL は地の帯が無いときの上の余白を .p-breadcrumb:not(.-bg-on) で12pxにするので、同じ書き方で替える */
.p-breadcrumb:not(.-bg-on) { padding-top: 24px; }
.p-breadcrumb__text,
.p-breadcrumb__text a { color: var(--tdr-muted); font-size: var(--tdr-font-sm); }
.p-breadcrumb .icon-home::before { content: none; }
.p-breadcrumb__item::after {
	content: "/";
	font-family: inherit;
	-webkit-clip-path: none;
	clip-path: none;
	background: none;
	border: 0;
	transform: none;
	width: auto;
	height: auto;
	margin: 0 .7em;
	color: var(--tdr-line);
}
/* 記事のページ（.single）は SWELL が最後の項目（そのページの題）の字を隠すので、手前の区切りも出さない */
.single .p-breadcrumb__item:nth-last-child(2)::after { content: none; }

/* ページ送り（検索結果・一覧）の数字。SWELL の既定は14px・13pxなので注記の段にそろえる */
.c-pagination .page-numbers,
.c-pagination__dot { font-size: var(--tdr-font-sm); }

/* 足元＝ロゴ・コピーライト（左）とリンク（右）を1行に。スマホはロゴの右にコピーライトとリンクを縦に（V9.6 の footer と同じ並び）。
   SWELL の足元の構造（ウィジェット欄＋l-footer__foot）はそのまま使い、並べ方だけ変える。 */
.l-footer {
	background: var(--tdr-paper);
	border-top: 1px solid var(--tdr-line);
	color: var(--tdr-ink);
}
.l-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	max-width: calc(var(--tdr-measure) + var(--swl-pad_container, 32px) * 2);
	margin: 0 auto;
	padding: 28px var(--swl-pad_container, 32px) 32px;
}
.l-footer__widgetArea { padding: 0; margin: 0; }
.l-footer__widgetArea .l-container { padding: 0; max-width: none; }
.l-footer__widgetArea .c-widget { margin: 0; }
.tdr-foot-logo { margin: 0; }
.l-footer__foot { flex: 1 1 auto; padding: 0; background: none; }
.l-footer__foot .l-container {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 28px;
	padding: 0;
	max-width: none;
}
.l-footer__nav { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 28px; margin: 0; padding: 0; }
.l-footer__nav li a,
.l-footer__nav li:first-child a {
	border: 0;
	padding: 0;
	font-size: var(--tdr-font-sm);
	color: var(--tdr-ink);
}
.l-footer__nav .tdr-nav-external a::after { content: " →"; }
/* SWELL は .l-footer .copyright を12px・中央にするので、同じ強さの書き方で注記の段・左揃えにする */
.l-footer .copyright { margin: 0; text-align: left; font-size: var(--tdr-font-sm); color: var(--tdr-ink); }
@media (max-width: 959px) {
	.l-footer__inner { padding: 24px var(--swl-pad_container, 16px) 28px; }
	.l-footer__foot .l-container { flex-direction: column-reverse; align-items: flex-start; }
}

/* スタジオの場所（足元の上の帯＝SWELL の「フッター直前」のウィジェット。中身は inc/16-studios.php の [tdr_studios]。トップでは中身を出さない）。
   3校の住所と駅からの分数を、足元と同じ色と字の3段で並べる。左右の余白は SWELL の .l-container（本文と同じ）。地図の印は Lucide の map-pin。 */
.w-beforeFooter { margin: 0; padding: 0; background: var(--tdr-paper); }
.w-beforeFooter .c-widget { margin: 0; }
.tdr-studios { max-width: var(--tdr-measure); margin: 0 auto; padding: 36px 0 32px; border-top: 1px solid var(--tdr-line); }
.tdr-studios__title { margin: 0 0 16px; padding: 0; border: 0; background: none; font-size: var(--tdr-font-md); font-weight: 700; line-height: 1.6; color: var(--tdr-ink); }
.tdr-studios__title::before, .tdr-studios__title::after { content: none; }
.tdr-studios__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 40px; margin: 0; padding: 0; list-style: none; }
.tdr-studio { margin: 0; padding: 0; }
.tdr-studio__name { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: var(--tdr-font-md); font-weight: 600; line-height: 1.6; color: var(--tdr-ink); }
.tdr-studio__name::before { content: ""; flex: none; width: 1.1em; height: 1.1em; background: var(--tdr-pink); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.tdr-studio__address, .tdr-studio__access { margin: 0; font-size: var(--tdr-font-sm); line-height: 1.75; color: var(--tdr-muted); }
.tdr-studio__address a { color: inherit; text-decoration: underline; text-decoration-color: var(--tdr-line); text-underline-offset: 3px; }
.tdr-studio__address a:hover { color: var(--tdr-ink); text-decoration-color: currentColor; }
.tdr-studios__nw { white-space: nowrap; }
@media (max-width: 959px) {
	.tdr-studios { padding: 28px 0 24px; }
	.tdr-studios__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* 上下の移動で読み上げの位置を移した先（見出し・節。scroll.js が tabindex="-1" を付ける）には枠を出さない（押せる物ではないため。WebKit は枠を出す） */
:where([tabindex="-1"]):focus { outline: none; }