/* =============================================================================
   下層｜ページヘッダー
   左右いっぱいの帯。中身だけコンテナの幅に収める
   ============================================================================= */

.hts-page-header {
	background: var(--hts-surface-tint);
	margin-bottom: var(--hts-block-gap);
	padding: clamp(56px, 5.5vw, 96px) 0 clamp(64px, 6.5vw, 112px);
}

.hts-page-header__inner {
	max-width: var(--hts-container);
	margin: 0 auto;
	padding: 0 var(--hts-container-pad);
}

/* 下層｜パンくず */
.hts-breadcrumb {
	margin: 0 0 var(--hts-stack-gap);
	color: var(--hts-muted);
	font-size: var(--hts-head-label-size);
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.hts-breadcrumb__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hts-breadcrumb a {
	color: var(--hts-muted);
	text-decoration: none;
}

.hts-breadcrumb a:hover,
.hts-breadcrumb a:focus-visible {
	color: var(--hts-accent-text);
}

.hts-breadcrumb [aria-current="page"] {
	color: var(--hts-ink);
}

.hts-breadcrumb__list li + li::before {
	content: "＞";
	margin: 0 0.55em;
	color: var(--hts-muted);
}

.hts-page-header__label {
	margin: 0 0 8px;
	color: var(--hts-accent-text);
	font-size: var(--hts-head-label-size);
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1;
}

.hts-page-header__title {
	margin: 0;
	color: var(--hts-ink);
	font-family: var(--hts-font-heading);
	font-size: var(--hts-head-title-size);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

.hts-page-header__lead {
	max-width: 40em;
	margin: var(--hts-stack-gap) 0 0;
	color: var(--hts-muted);
	font-size: calc(var(--hts-body-size) * 0.93);
	line-height: var(--hts-body-line-height);
	letter-spacing: var(--hts-body-letter-spacing);
}

.hts-page-header__inner > :last-child {
	margin-bottom: 0;
}

/* 下層｜本文 */
.hts-page__body {
	max-width: var(--hts-container);
	margin: 0 auto;
	padding: 0 var(--hts-container-pad) var(--hts-section-v-pad);
}

.hts-page__body p {
	line-height: var(--hts-body-line-height);
	letter-spacing: var(--hts-body-letter-spacing);
}

.hts-greeting p + p {
	margin-top: var(--hts-stack-gap);
}

/* ご挨拶｜署名 */
.hts-greeting__sign {
	margin-top: var(--hts-block-gap);
	text-align: right;
}

.hts-greeting__role,
.hts-greeting__name {
	display: block;
}

.hts-greeting__name {
	margin-top: 0.35em;
	font-family: var(--hts-font-heading);
	font-weight: 700;
	letter-spacing: 0.12em;
}

/* 会社概要｜一覧 */
.hts-company__list {
	display: grid;
	grid-template-columns: 8em minmax(0, 1fr);
	margin: 0;
}

.hts-company__list dt,
.hts-company__list dd {
	margin: 0;
	padding: 1.15em 0;
	border-bottom: 1px solid var(--hts-rule);
	line-height: 1.8;
}

.hts-company__list dt {
	font-weight: 500;
}

.hts-company__list dd {
	padding-left: 1.5em;
}

/* 会社概要｜導線 */
.hts-company__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hts-stack-gap) clamp(28px, 4vw, 48px);
	margin-top: var(--hts-block-gap);
}

.hts-company__links a {
	color: var(--hts-accent-text);
	font-weight: 500;
	text-decoration: none;
}

.hts-company__links a:hover,
.hts-company__links a:focus-visible {
	color: var(--hts-dark);
}

@media (max-width: 999px) {
	.hts-page-header {
		padding: 32px 0 40px;
	}

	.hts-breadcrumb__list {
		flex-wrap: wrap;
	}

	.hts-company__list {
		grid-template-columns: 1fr;
	}

	.hts-company__list dt {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.hts-company__list dd {
		padding-top: 0.35em;
		padding-left: 0;
	}
}

/* 下層｜投稿本文 */
.hts-page__body--entry {
	max-width: 42em;
}

.hts-page__body--entry h2 {
	font-size: clamp(19px, 1.8vw, 23px);
	margin: 48px 0 16px;
}

.hts-page__body--entry > *:first-child {
	margin-top: 0;
}

.hts-page__body--entry h3 {
	font-size: 17px;
	margin: 32px 0 12px;
}

.hts-page__body--entry p {
	margin: 0 0 1.2em;
}

.hts-page__body--entry ul {
	list-style: disc;
	padding-left: 1.4em;
	margin: 0 0 1.2em;
}

.hts-page__body--entry li {
	margin-bottom: 8px;
}

.hts-page__body--entry li::marker {
	color: var(--hts-accent);
}

.hts-page__body--entry a {
	color: var(--hts-accent-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hts-page__body--entry > *:last-child {
	margin-bottom: 0;
}

/* 送信完了｜禁則は効かせ、折り返す位置は幅にまかせる。
   意図した改行は markup の .hts-br-sp（狭い画面だけ出る改行）で作る。
   word-break: keep-all は空白で語を区切る言語向けの値で、日本語では
   段落がまるごと1語として扱われ、画面からはみ出すため使わない。 */
.hts-thanks {
	line-break: strict;
}

@media (max-width: 999px) {
	.hts-page__body--entry h2 {
		margin-top: 36px;
	}
}

/* 採用情報｜先輩社員の声 */
.hts-voice {
	padding: clamp(56px, 5.5vw, 96px) var(--hts-container-pad) clamp(64px, 6.5vw, 112px);
}

.hts-voice__inner {
	max-width: 880px;
	margin-top: 32px;
	margin-right: auto;
	margin-left: auto;
}

.hts-voice__profile {
	margin: 0;
	padding: 20px 24px;
	background: var(--hts-surface-tint);
	border-radius: var(--hts-radius-md);
}

.hts-voice__profile dd {
	margin: 0;
	color: var(--hts-ink);
	font-size: 15px;
	line-height: 1.9;
}

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

.hts-voice__profile li + li {
	margin-top: 4px;
}

/* 採用情報｜注記 */
.hts-voice__note {
	margin: 8px 0 0;
	color: var(--hts-muted);
	font-size: 12px;
}

/* 採用情報｜質問と答え */
.hts-voice__qa {
	margin-top: 0;
}

.hts-voice__qa + .hts-voice__qa {
	margin-top: 32px;
}

.hts-voice__qa h3 {
	margin: 0;
	color: var(--hts-dark);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
}

.hts-voice__qa p {
	max-width: 42em;
	margin: 10px 0 0;
	color: var(--hts-ink);
	font-size: 15px;
	line-height: 1.9;
}

.hts-voice__qa p + p {
	margin-top: 12px;
}

@media (min-width: 768px) {
	.hts-voice__profile {
		display: grid;
		grid-template-columns: 5.5em minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 10px;
		align-items: start;
	}

	.hts-voice__profile dt {
		margin: 0;
	}
}

@media (max-width: 767px) {
	.hts-voice__profile dt {
		margin: 12px 0 2px;
		color: var(--hts-muted);
		font-size: 13px;
	}

	.hts-voice__profile dt:first-child {
		margin-top: 0;
	}

	.hts-voice__profile dd {
		margin: 0;
	}
}

/* お問い合わせ｜電話とフォーム */
.hts-contact {
	padding: clamp(56px, 5.5vw, 96px) var(--hts-container-pad) 0;
}

/* お問い合わせ｜中身の枠
   電話とフォームを同じ幅の列にする。見出しだけ中央に浮かせない。 */
.hts-contact__inner {
	max-width: 48em;
	margin-right: auto;
	margin-left: auto;
}

/* お問い合わせ｜フォームの面
   中身は電話と同じ列。背景だけ画面の端まで伸ばす。 */
.hts-contact__form {
	margin-top: var(--hts-block-gap);
	margin-right: calc(var(--hts-container-pad) * -1);
	margin-left: calc(var(--hts-container-pad) * -1);
	padding: 48px var(--hts-container-pad) 56px;
	background: var(--hts-surface-tint);
}

/* お問い合わせ｜電話の案内の一文 */
.hts-contact__note {
	margin: 24px 0 0;
	color: var(--hts-ink);
	font-size: var(--hts-body-size);
	line-height: 1.9;
}

/* お問い合わせ｜電話とFAX */
.hts-contact__tel {
	display: grid;
	grid-template-columns: 4em minmax(0, 1fr);
	align-items: baseline;
	row-gap: 10px;
	margin: 20px 0 0;
}

.hts-contact__tel dt {
	margin: 0;
	color: var(--hts-muted);
	font-size: 13px;
	letter-spacing: 0.04em;
}

.hts-contact__tel dd {
	margin: 0;
	color: var(--hts-ink);
	font-family: var(--hts-font-heading);
	font-size: 20px;
	letter-spacing: 0.04em;
}

.hts-contact__tel dd a {
	color: inherit;
	text-decoration: none;
}

.hts-contact__tel dd a:hover,
.hts-contact__tel dd a:focus-visible {
	color: var(--hts-accent-text);
}

/* お知らせ｜一覧 */
.hts-news {
	padding: clamp(56px, 5.5vw, 96px) var(--hts-container-pad) clamp(64px, 6.5vw, 112px);
}

.hts-news__inner {
	max-width: 880px;
	margin-top: 32px;
	margin-right: auto;
	margin-left: auto;
}

.hts-news__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hts-news__item {
	padding: 24px 0;
	border-bottom: 1px solid var(--hts-rule);
}

.hts-news__date {
	color: var(--hts-muted);
	font-size: 13px;
	letter-spacing: 0.04em;
}

.hts-news__cat {
	margin-left: 12px;
	color: var(--hts-muted);
	font-size: 13px;
}

.hts-news__title {
	display: block;
	margin-top: 6px;
	color: var(--hts-ink);
	font-size: 16px;
	line-height: 1.7;
	text-decoration: none;
}

.hts-news__title:hover,
.hts-news__title:focus-visible {
	color: var(--hts-accent-text);
}

.hts-news__empty {
	margin: 0;
	color: var(--hts-muted);
	font-size: 15px;
}

.hts-news__pager {
	margin-top: 48px;
	text-align: center;
}

/* お知らせ｜一覧（広い画面）
   日付とカテゴリを左、題名を右に置く。子が3つなので列を指定する。 */
@media (min-width: 768px) {
	.hts-news__item {
		display: grid;
		grid-template-columns: 8em minmax(0, 1fr);
		column-gap: 16px;
		align-items: start;
	}

	.hts-news__date,
	.hts-news__cat {
		grid-column: 1;
	}

	.hts-news__cat {
		margin-top: 12px;
		margin-left: 0;
	}

	.hts-news__title {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0;
	}
}

/* お問い合わせ｜フォーム */
.hts-form {
	margin-top: 32px;
}

/* お問い合わせ｜項目
   上下の余白と点線で、設問を1行ずつ分ける。
   説明の位置は HTML では上のものと下のものがある。並び順で、いつも入力欄の下に出す。 */
.hts-form__field {
	display: flex;
	flex-direction: column;
	padding: 16px 0;
	border-bottom: 1px dotted var(--hts-rule);
}

.hts-form__field:first-child {
	border-top: 1px dotted var(--hts-rule);
}

.hts-form__field label,
.hts-form__label {
	display: block;
	margin-bottom: 8px;
	color: var(--hts-muted);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* お問い合わせ｜必須の印はラベルの上に置く
   正本の HTML では印が文字のあとにあるので、並び順で上に出す。
   左の余白には置かない。ラベルの文字は全項目で左端が揃う。
   「>」で直下だけを指す。ラジオの選択肢も label なので、
   子孫で書くと選択肢まで縦積みになる。 */
.hts-form__field > label,
.hts-form__field > .hts-form__label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.hts-form__label {
	margin-top: 0;
}

/* お問い合わせ｜必須・任意 */
.hts-form__req {
	order: -1;
	display: inline-block;
	padding: 0 3px 1px;
	border-radius: var(--hts-radius-md);
	background: var(--hts-accent-text);
	color: var(--hts-bg);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

/* 任意の印は出さない。必須だけを示せば、残りは任意と分かる。
   正本の HTML には span が残っているので、ここで隠す。 */
.hts-form__opt {
	display: none;
}

/* お問い合わせ｜補足
   説明は項目名より小さく、入力例より一段下げる。
   入力欄の下に置く。正本では上にある項目もあるので、並び順で下へ出す。 */
.hts-form__note {
	order: 2;
	margin: 8px 0 0;
	color: var(--hts-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.8;
}

/* お問い合わせ｜入力の包み
   CF7 が出す固定のクラスで、こちらでは改名できない。
   説明より前に出す。正本では説明が上にある項目もある。 */
.hts-form .wpcf7-form-control-wrap {
	display: block;
	order: 1;
}

/* お問い合わせ｜入力欄 */
.hts-form input[type="text"],
.hts-form input[type="email"],
.hts-form input[type="tel"],
.hts-form select,
.hts-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--hts-rule);
	border-radius: var(--hts-radius-md);
	background: var(--hts-bg);
	color: var(--hts-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
}

.hts-form textarea {
	min-height: 8em;
	resize: vertical;
}

/* お問い合わせ｜入力欄の幅
   内容の長さに合わせる。id は正本（contact-form.md 5章）が
   <label for> のために振っているもので、こちらでは増やしていない。 */
.hts-form #your-name,
.hts-form #ruby {
	max-width: 20em;
}

.hts-form #your-email {
	max-width: 28em;
}

.hts-form #your-tel {
	max-width: 14em;
}

.hts-form #add_nam {
	max-width: 9em;
}

.hts-form #how-did {
	max-width: 26em;
}

.hts-form input[type="text"]:focus-visible,
.hts-form input[type="email"]:focus-visible,
.hts-form input[type="tel"]:focus-visible,
.hts-form select:focus-visible,
.hts-form textarea:focus-visible {
	outline: 2px solid var(--hts-accent);
	outline-offset: 2px;
	border-color: var(--hts-accent);
}

/* お問い合わせ｜入力例
   欄の中の例は、打ち込んだ文字より小さくグレーにする。
   欄そのものの文字は 16px のまま（スマホで拡大されるため）。 */
.hts-form input[type="text"]::placeholder,
.hts-form input[type="email"]::placeholder,
.hts-form input[type="tel"]::placeholder,
.hts-form textarea::placeholder {
	color: var(--hts-muted);
	font-size: 14px;
	font-weight: 400;
}

/* お問い合わせ｜ラジオ */
.hts-form .wpcf7-radio {
	display: grid;
	gap: 12px;
}

.hts-form .wpcf7-list-item {
	margin: 0;
}

/* 選択肢は入力欄より小さくする。項目名と同じ 14px。 */
.hts-form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0;
	color: var(--hts-ink);
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.hts-form .wpcf7-list-item input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--hts-accent);
}

@media (min-width: 768px) {
	.hts-form .wpcf7-radio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* お問い合わせ｜プライバシーポリシー */
.hts-form__privacy {
	margin: 32px 0 0;
	color: var(--hts-muted);
	font-size: 13px;
	line-height: 1.9;
}

.hts-form__privacy a {
	color: var(--hts-accent-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* お問い合わせ｜ボタンの並び
   正本は「戻って修正する」の次が「送信する」。column のまま下に送信が来る。column-reverse は上下を入れ替えるので使わない。 */
.hts-form__actions:not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

@media (max-width: 767px) {
	.hts-form__actions:not([hidden]) {
		flex-direction: column;
	}

	.hts-form__input .hts-form__actions:not([hidden]) .hts-form__btn {
		width: 100%;
	}

	.hts-form__submit .hts-form__actions:not([hidden]) .hts-form__btn:not(.hts-form__btn--back),
	.hts-form__submit .hts-form__btn--back:not([hidden]) {
		width: 100%;
	}
}

/* お問い合わせ｜ボタン
   「戻って修正する」も hts-form__btn を持つので、hidden のあいだは display を当てない。
   送信は input なので、appearance が無いと iOS が既定の見た目に戻す。 */
.hts-form__btn:not([hidden]) {
	display: inline-flex;
}

.hts-form__btn {
	align-items: center;
	justify-content: center;
	/* 指で押す面を確保するため、高さは残す。 */
	min-height: 52px;
	padding: var(--hts-btn-pad);
	border: 0;
	border-radius: var(--hts-radius-md);
	background: var(--hts-dark);
	color: var(--hts-bg);
	font-family: inherit;
	font-size: var(--hts-btn-font);
	font-weight: 500;
	letter-spacing: 0.04em;
	cursor: pointer;
	appearance: none;
}

.hts-form__btn:hover,
.hts-form__btn:focus-visible {
	background: var(--hts-accent);
}

.hts-form__btn:focus-visible {
	outline: 2px solid var(--hts-accent);
	outline-offset: 2px;
}

/* お問い合わせ｜戻って修正する
   送信すると同じ高さのボタン。面は持たず、枠だけで分ける。 */
.hts-form__btn--back {
	padding: var(--hts-btn-pad);
	border: 1px solid var(--hts-dark);
	background: var(--hts-bg);
	color: var(--hts-dark);
	text-decoration: none;
}

.hts-form__btn--back:hover,
.hts-form__btn--back:focus-visible {
	border-color: var(--hts-accent);
	background: var(--hts-bg);
	color: var(--hts-accent-text);
}

/* お問い合わせ｜送信中
   CF7 が出す固定のクラスで、こちらでは改名できない。既定の左右マージンは flex の中で隙間になる。 */
.hts-form .wpcf7-spinner {
	margin: 0;
	align-self: center;
}

/* お問い合わせ｜確認画面 */
.hts-form__confirm:not([hidden]) {
	display: block;
	margin-top: 8px;
}

.hts-form__lead {
	margin: 0 0 20px;
	color: var(--hts-ink);
	font-size: 15px;
}

.hts-form__table {
	width: 100%;
	border-top: 1px solid var(--hts-rule);
	border-collapse: collapse;
}

.hts-form__table th,
.hts-form__table td {
	padding: 14px 0;
	border-bottom: 1px solid var(--hts-rule);
	text-align: left;
	vertical-align: top;
	font-size: 15px;
	line-height: 1.9;
}

.hts-form__table th {
	color: var(--hts-muted);
	font-size: 13px;
	font-weight: 500;
}

/* お問い合わせ｜確認の値
   改行をそのまま見せる。 */
.hts-form__table td {
	color: var(--hts-ink);
	white-space: pre-wrap;
}

@media (min-width: 768px) {
	.hts-form__table th {
		width: 20em;
		padding-right: 24px;
	}

	.hts-form__submit .hts-form__actions:not([hidden]) {
		align-items: stretch;
	}

	.hts-form__submit .hts-form__actions:not([hidden]) .hts-form__btn:not(.hts-form__btn--back),
	.hts-form__submit .hts-form__btn--back:not([hidden]) {
		flex: 1 1 0;
		min-height: 56px;
		padding: 16px 24px;
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.hts-form__table tr {
		display: block;
	}

	.hts-form__table th {
		display: block;
		border-bottom: 0;
		padding-bottom: 0;
	}

	.hts-form__table td {
		display: block;
		padding-top: 4px;
	}
}

/* お問い合わせ｜エラー */
.hts-form__error:not([hidden]) {
	display: block;
	margin: 20px 0 0;
	padding: 14px 16px;
	border-radius: var(--hts-radius-md);
	background: var(--hts-surface-tint);
	color: var(--hts-ink);
	font-size: 14px;
	line-height: 1.8;
}

/* お問い合わせ｜CF7 のエラー
   CF7 が出す固定のクラスで、こちらでは改名できない。既定の枠は外し、面の色で見せる。 */
.hts-form .wpcf7-not-valid-tip {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.7;
}

.hts-form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 0;
	border-radius: var(--hts-radius-md);
	background: var(--hts-surface-tint);
	font-size: 14px;
	line-height: 1.8;
}

/* お問い合わせ｜広い画面は左にラベル・右に入力欄
   1列目を固定幅にするのは、項目ごとに別の grid になるため。
   auto にすると項目ごとに列の幅が変わり、ラベルの左端が揃わない。
   ラベルは「>」で直下だけを指す。ラジオの選択肢も label なので、
   子孫で書くと選択肢まで1列目に飛ぶ。 */
@media (min-width: 768px) {
	.hts-form__field {
		display: grid;
		grid-template-columns: 180px minmax(0, 1fr);
		column-gap: 24px;
		align-items: start;
		padding: 30px 0;
	}

	.hts-form__field > label,
	.hts-form__field > .hts-form__label {
		grid-column: 1;
		margin-bottom: 0;
	}

	.hts-form__field > *:not(label):not(.hts-form__label) {
		grid-column: 2;
	}

	.hts-form__field > .hts-form__note {
		margin-top: 8px;
		margin-bottom: 0;
	}

	/* 確認画面へは、入力欄と同じ幅にする。 */
	.hts-form__input .hts-form__actions:not([hidden]) {
		width: calc(100% - 180px - 24px);
		margin-left: calc(180px + 24px);
	}

	.hts-form__input .hts-form__actions:not([hidden]) .hts-form__btn {
		width: 100%;
	}
}

/* お問い合わせ｜狭い画面は必須と項目名を1行にする
   必須・項目名・入力欄の3段だと縦に長くなる。
   「>」で直下だけを指す。ラジオの選択肢も label なので、
   子孫で書くと選択肢まで横並びになる。 */
@media (max-width: 767px) {
	.hts-form__field > label,
	.hts-form__field > .hts-form__label {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}
}