@charset "UTF-8";
/*===========================================================================

  style.css
  サイト固有の装飾スタイルをまとめます。
  汎用コンポーネントは components.css (.c-*) を使用してください。

  【命名ルール】
  接頭辞なし → このファイル（サイト固有）
  .c-        → components.css
  .l-        → layout.css
  .u-        → utility.css

===========================================================================*/

/*===========================================================================

　トップページ
	
===========================================================================*/

/* 共通
===========================================================================*/
.top-heading{
	text-align:center;
	font-size: clamp(var(--text-24), 5vw, var(--text-40));
	font-weight:700;
	line-height:1.6;
	margin-bottom: var(--s-10);
	}
	.top-heading span{
		display:block;
		color:var(--color-primary);
		font-size: clamp(var(--text-18), 5vw, var(--text-30));
		}
@media (min-width: 768px) {
.top-heading{
	margin-bottom: var(--s-15);
	}
}
@media (min-width: 1024px) {
}

/* メインビジュアル
===========================================================================*/
.mv {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 100%;
	height: 600px;
	padding: var(--s-8) var(--s-5);
	text-align: center;
}

/* 背景画像 */
.mv::before {
	content: "";
	position: absolute;
	inset: -20px;
	z-index: -1;
	background-image: url(../images/mv_bg_01.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: scale(1.06);
}

/* 表示領域に入ったら背景アニメーション開始 */
.mv.is-visible::before {
	animation: mv-bg 10s ease-out forwards;
}

@keyframes mv-bg {
	0% {
		transform: scale(1.06);
	}

	100% {
		transform: scale(1);
	}
}


/* キャッチコピー
===========================================================================*/
.mv__catch {
	position: relative;
	max-width: 1000px;
	font-size: var(--text-36); /*36*/
	font-weight: 900;
	font-style: italic;
	line-height: 1.45;
	letter-spacing: 0.02em;
	text-shadow:
	0 0 2px #fff,
	0 0 4px #fff,
	0 0 7px #fff,
	0 0 11px #fff,
	0 0 18px rgb(255 255 255 / 95%),
	0 0 26px rgb(255 255 255 / 80%);

	opacity: 0;
	transform: translateY(30px);
	filter: blur(5px);
}


/* 本文
===========================================================================*/
.mv__text {
	position: relative;
	max-width: 900px;
	margin-top: var(--s-6);
	font-size: var(--text-16);
	font-weight: 900;
	line-height: 2;
	letter-spacing: 0.02em;
	text-shadow:
	0 0 2px #fff,
	0 0 4px #fff,
	0 0 7px #fff,
	0 0 11px #fff,
	0 0 18px rgb(255 255 255 / 95%),
	0 0 26px rgb(255 255 255 / 80%);

	opacity: 0;
	transform: translateY(20px);
}


/* 表示領域に入ったらアニメーション開始
===========================================================================*/
.mv.is-visible .mv__catch {
	animation: mv-catch 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mv.is-visible .mv__text {
	animation: mv-text 0.9s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}


/* キャッチコピー */
@keyframes mv-catch {
	0% {
		opacity: 0;
		transform: translateY(30px);
		filter: blur(5px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}


/* 本文 */
@keyframes mv-text {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}


/* 768px以上
===========================================================================*/
@media (min-width: 768px) {
	.mv {
		height: 680px;
		padding-left: var(--s-8);
		padding-right: var(--s-8);
	}

	.mv__catch {
		font-size: var(--text-48); /*48*/
		line-height: 1.4;
	}

	.mv__text {
		margin-top: var(--s-7);
		font-size: var(--text-20); /*48*/
		line-height: 2;
	}
}


/* 1024px以上
===========================================================================*/
@media (min-width: 1024px) {
	.mv {
		height: 820px;
		padding-left: var(--s-10);
		padding-right: var(--s-10);
	}

	.mv__catch {
		max-width: 1200px;
		font-size: var(--text-72); /*72*/
		line-height: 1.4;
	}

	.mv__text {
		max-width: 1000px;
		margin-top: var(--s-8);
		font-size: 1.625rem; /*26*/
		line-height: 2;
	}
}


/* 動きを減らす設定
===========================================================================*/
@media (prefers-reduced-motion: reduce) {
	.mv::before {
		transform: scale(1);
	}

	.mv.is-visible::before {
		animation: none;
	}

	.mv__catch,
	.mv__text {
		opacity: 1;
		transform: none;
		filter: none;
	}

	.mv.is-visible .mv__catch,
	.mv.is-visible .mv__text {
		animation: none;
	}
}

/* STテックが選ばれる理由
===========================================================================*/
#section-about{
	background-image:url(../images/about_bg.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#f2f9ff;
	}
.p-about{
	margin-top:var(--s-10);
	}
.p-about__card{
	background-color:#fff;
	padding:var(--s-5);
	border-radius:var(--s-2);
	text-align:center;
	box-shadow: 0 0 3px rgb(0 0 0 / 30%);
	}
.p-about__card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	width: calc((100% - var(--s-5)) / 2);
	justify-self: center;
}
.p-about__images{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:var(--s-2);
	width: 100%;
	max-width: 70px;
	height: auto;
	}
.p-about__title{
	font-size: clamp(var(--text-18), 2.6vw, var(--text-22));
	font-weight:900;
	line-height:1.4;
	color: var(--color-primary);
	margin-bottom:var(--s-3);
	}
.p-about__text{
	font-size: clamp(var(--text-15), 2.02vw, var(--text-16));
	font-weight:500;
	text-align:left;
	}
@media (min-width: 768px) {
	.p-about {
		margin-top: var(--s-20);
	}
	.p-about__card {
		padding: var(--s-10) var(--s-5);
	}
	.p-about__card:last-child:nth-child(odd) {
		grid-column: auto;
		width: auto;
		justify-self: stretch;
	}
	.p-about__images{
		margin-bottom:var(--s-3);
		}
	.p-about__title{
		margin-bottom:var(--s-4);
		}
}
@media (min-width: 1024px) {
	}

/* 事業内容
===========================================================================*/
.section-business{
	background-color:#fff;
	}
.p-business{
	margin-top:var(--s-10);
	}
.p-business__card{
	}
.p-business__images{
	}
.p-business__title{
	border-left:4px solid var(--color-primary);
	font-size: clamp(var(--text-15), 2.02vw, var(--text-16));
	font-weight:600;
	padding-left:var(--s-3);
	margin-top:var(--s-2);
	}
@media (min-width: 768px) {
	.p-business {
		margin-top: var(--s-20);
	}
	.p-business__title{
		margin-top:var(--s-3);
		}
}
@media (min-width: 1024px) {
	}

/* 安心の7ステップ
===========================================================================*/
#section-step{
	background-image:url(../images/step_bg.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#fff;
	}
.p-step {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-5);
}
.p-step__card{
	width: calc((100% - var(--s-5)) / 2);
	position:relative;
	background-color:#fff;
	padding:var(--s-8) var(--s-4) var(--s-5);
	border-radius:var(--s-2);
	text-align:center;
	box-shadow: 0 0 3px rgb(0 0 0 / 30%);
	}
.p-step__num{
	position:absolute;
	top: calc(var(--s-5) * -1);
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	width:var(--s-10);
	height:var(--s-10);
	color:#fff;
	background-color:var(--color-primary);
	font-size:var(--text-16);
	font-weight:900;
	line-height:1;
	border-radius: 50%;
	}
.p-step__title{
	font-size:var(--text-16);
	line-height: 1.4;
	font-weight:900;
	color:var(--color-primary);
	margin-bottom:var(--s-3);
	}
.p-step__images{
	border-radius:var(--s-2);
	margin-bottom:var(--s-3);
	margin-left:auto;
	margin-right:auto;
	}
.p-step__text{
	font-size:var(--text-14);
	font-weight:500;
	text-align:left;
	}

@media (min-width: 768px) {
	.p-step {
		gap: var(--s-6);
	}
	.p-step__card {
		width: calc((100% - (var(--s-6) * 2)) / 3);
		padding: var(--s-10) var(--s-4);
	}
	.p-step__num{
		top: calc(var(--s-6) * -1);
		width:var(--s-12);
		height:var(--s-12);
		}
	.p-step__title{
		margin-bottom:var(--s-5);
		}
	.p-step__images{
		margin-bottom:var(--s-3);
		}
}
@media (min-width: 1024px) {
	.p-step {
		gap: var(--s-12);
	}
	.p-step__card {
		width: calc((100% - (var(--s-12) * 3)) / 4);
	}
}

/* 施工実績
===========================================================================*/
#section-achievement{
	}

/* 防水工事・改修工事スタッフ募集
===========================================================================*/
#section-recruit {
	position: relative;
	background-image: url(../images/recruit_bg_sp.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
}

.p-recruit {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


/* キャッチコピー
===========================================================================*/
.p-recruit__catch {
	font-size: clamp(2.25rem, 10vw, 3rem); /* 36〜48px */
	font-weight: 900;
	font-style: italic;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-shadow:
	0 0 2px #fff,
	0 0 4px #fff,
	0 0 7px #fff,
	0 0 11px #fff,
	0 0 18px rgb(255 255 255 / 95%),
	0 0 26px rgb(255 255 255 / 80%);
}


/* 「優遇！」強調
===========================================================================*/
.p-recruit__accent {
	display: inline-block;
}


/* タイピング
===========================================================================*/
.js-typing {
	visibility: hidden;
}

.js-typing.is-visible {
	visibility: visible;
}

/*
main.jsによって、
テキストが1文字ずつspanに変換される
*/
.js-typing > span {
	opacity: 0;
	display: inline-block;
}

.js-typing.is-visible > span {
	animation: recruit-typing 0.12s ease forwards;
}

@keyframes recruit-typing {
	0% {
		opacity: 0;
		transform: translateY(5px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}


/* 「優遇！」だけ最後に強調
===========================================================================*/
.js-typing.is-visible .p-recruit__accent {
	animation:
		recruit-typing 0.12s ease forwards,
		recruit-accent 0.45s ease-out forwards;
}

@keyframes recruit-accent {
	0% {
		opacity: 0;
		transform: scale(1.4);
	}

	65% {
		opacity: 1;
		transform: scale(0.95);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}


/* 募集タイトル
===========================================================================*/
.p-recruit__title {
	position: relative;
	z-index: 0;
	display: inline-block;
	margin-top: var(--s-5);
	padding: var(--s-2) var(--s-4);
	color: #fff;
	font-size: var(--text-20);
	font-weight: 900;
	line-height: 1.4;

	/* アニメーション初期状態 */
	opacity: 0;
	transform: translateX(-30px);
}

/* 青帯 */
.p-recruit__title::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-color: var(--color-primary);
	transform: skewX(-8deg);
}

/* 表示されたら左からスライド */
.p-recruit__title.is-visible {
	animation: recruit-title 0.6s 0.2s ease-out forwards;
}

@keyframes recruit-title {
	0% {
		opacity: 0;
		transform: translateX(-30px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}


/* 本文
===========================================================================*/
.p-recruit__text {
	margin-top: var(--s-5);
	font-weight: 600;
	line-height: 1.8;
	text-align: center;
	text-shadow:
	0 0 2px #fff,
	0 0 4px #fff,
	0 0 7px #fff,
	0 0 11px #fff,
	0 0 18px rgb(255 255 255 / 95%),
	0 0 26px rgb(255 255 255 / 80%);
}


/* 768px以上
===========================================================================*/
@media (min-width: 768px) {
	.p-recruit__catch {
		font-size: clamp(3rem, 7vw, 4rem); /* 48〜64px */
		line-height: 1.2;
	}

	.p-recruit__title {
		margin-top: var(--s-6);
		padding: var(--s-2) var(--s-7);
		font-size: var(--text-24);
	}

	.p-recruit__text {
		margin-top: var(--s-6);
		font-size: var(--text-18);
		line-height: 1.9;
	}
}


/* 1024px以上
===========================================================================*/
@media (min-width: 1024px) {
	#section-recruit {
		height: 820px;
		min-height: 0;
		padding-top: var(--s-35);
		padding-bottom: 0;
		background-image: url(../images/recruit_bg_pc.png);
		background-position: top center;
		background-size: cover;
	}

	.p-recruit__catch {
		font-size: 5.625rem; /* 90px */
	}

	.p-recruit__title {
		margin-top: var(--s-8);
		padding-left: var(--s-10);
		padding-right: var(--s-10);
		font-size: var(--text-36);
	}

	.p-recruit__text {
		margin-top: var(--s-8);
		font-size: 1.625rem; /* 26px */
		line-height: 2;
	}
}


/* 動きを減らす設定
===========================================================================*/
@media (prefers-reduced-motion: reduce) {
	.js-typing {
		visibility: visible;
	}

	.js-typing > span,
	.js-typing.is-visible > span,
	.js-typing.is-visible .p-recruit__accent {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.p-recruit__title {
		opacity: 1;
		transform: none;
	}

	.p-recruit__title.is-visible {
		animation: none;
	}
}


/* STテックで働く魅力
===========================================================================*/


/* 募集要項
===========================================================================*/
#section-guideline{
	background-color:#e0ebf6;
	}
.p-guideline {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
	margin-top: var(--s-10);
}
.p-guideline__card {
	overflow: hidden;
	background-color: #fff;
	border-radius: var(--s-2);
	box-shadow: 0 0 3px rgb(0 0 0 / 30%);
}
/* カード見出し */
.p-guideline__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-4);
	min-height: 80px;
	padding: var(--s-3) var(--s-4);
	background-color: var(--color-primary);
	color: #fff;
	font-size: clamp(var(--text-20), 2.86vw, var(--text-24));
	font-weight: 900;
	line-height: 1.3;
}
.p-guideline__heading img {
	width: var(--s-10);
	height: var(--s-10);
	object-fit: contain;
	flex-shrink: 0;
}
.p-guideline__body {
	padding: var(--s-4);
}
/* 通常リスト */
.p-guideline__list {
	font-size: clamp(var(--text-16), 2.34vw, var(--text-20));
	font-weight: 900;
}
.p-guideline__list li {
	position: relative;
	padding-left: var(--s-5);
}
/*.p-guideline__list li:not(:last-child) {
	margin-bottom: var(--s-2);
}*/
.p-guideline__list li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-primary);
	transform: translateY(-50%);
}
/* 給与 */
.p-guideline__salary p {
	font-size: clamp(var(--text-16), 2.34vw, var(--text-20));
	font-weight: 900;
	line-height: 1.4;
}

.p-guideline__salary p:not(:last-child) {
	margin-bottom: var(--s-2);
}

.p-guideline__salary-label {
	display: block;
	font-size: var(--text-12);
	font-weight: 600;
	line-height: 1;
}

.p-guideline__salary strong {
	color: var(--color-red);
	font-size: clamp(var(--text-24), 3.25vw, var(--text-30));
	font-weight: 900;
	letter-spacing: 0;
}

.p-guideline__salary strong small {
	font-size: var(--text-16);
}

.p-guideline__ability{
	border-left:2px solid var(--color-primary);
	font-size: var(--text-12);
	line-height: 1.2;
	font-weight: 600;
	padding-left: var(--s-2);
	margin-top: var(--s-2);
	}

/* 給与下部の補足 */
.p-guideline__note-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s-2);
	margin-top: var(--s-4);
	padding-top: var(--s-3);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-12);
	font-weight: 700;
}

.p-guideline__note-list li {
	position: relative;
	padding-left: var(--s-5);
}

.p-guideline__note-list li::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--color-primary);
	font-size: var(--text-18);
	font-weight: 900;
	line-height: 1;
}

/* 勤務時間
==========*/
.p-guideline__card--time .p-guideline__body {
	display: flex;
	align-items: center;
	justify-content: center;
}

.p-guideline__time {
	text-align: center;
	font-weight: 900;
}

.p-guideline__time strong {
	display: block;
	color: var(--color-primary);
	font-size: clamp(var(--text-24), 4vw, var(--text-30));
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: 0;
}

.p-guideline__time span {
	display: block;
	margin-top: var(--s-2);
	font-size: clamp(var(--text-16), 2.21vw, var(--text-18));
}

/* 休日
==========*/
.p-guideline__card--holiday .p-guideline__body {
	display: flex;
	align-items: center;
	justify-content: center;
}

.p-guideline__holiday {
	text-align: center;
	font-size: clamp(var(--text-18), 2.6vw, var(--text-24));
	font-weight: 900;
	line-height: 1.5;
}

/* 待遇・福利厚生
==========*/
.p-guideline__card--benefits .p-guideline__list{
	font-size:var(--text-16);
	}

/* 求める人材
==========*/
.p-guideline__card--person{
	}
.p-guideline__card--person .p-guideline__body {
	position: relative;
	background-image:url(../images/guideline_bg.png);
	background-repeat:no-repeat;
	background-position:bottom right;
	background-size:cover;
	text-shadow:
	0 0 1px #fff,
	0 0 2px #fff,
	0 0 2px #fff,
	0 0 3px #fff,
	0 0 3px #fff,
	0 0 4px #fff,
	0 0 5px #fff,
	0 0 6px #fff,
	0 0 8px rgb(255 255 255 / 95%),
	0 0 10px rgb(255 255 255 / 80%);
}

.p-guideline__lead {
	margin-bottom: var(--s-5);
	color: var(--color-primary);
	font-size: clamp(var(--text-20), 3vw, var(--text-30));
	font-weight: 900;
	line-height: 1.4;
}

.p-guideline__lead span {
	font-size: 1.15em;
}

/* チェックリスト */
.p-guideline__check-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-2);
	font-weight: 900;
	font-size: clamp(var(--text-16), 2.21vw, var(--text-18));
}

.p-guideline__check-list li {
	position: relative;
	padding-left: var(--s-8);
}

.p-guideline__check-list li::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0;
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-primary);
}

.p-guideline__check-list li::after {
	content: "";
	position: absolute;
	top: 0.1em;
	left: 7px;
	width: 8px;
	height: 14px;
	border-right: 2px solid var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	transform: rotate(45deg);
}
@media (min-width: 768px) {
	.p-guideline {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--s-5);
		margin-top: var(--s-20);
	}

	.p-guideline__heading {
		min-height: 90px;
		padding: var(--s-3) var(--s-5);
	}

	.p-guideline__heading img {
		width: var(--s-12);
		height: var(--s-12);
	}

	.p-guideline__body {
		padding: var(--s-5);
	}

	.p-guideline__check-list {
		/*grid-template-columns: repeat(2, max-content);*/
		gap: var(--s-2) var(--s-8);
	}

}
@media (min-width: 1024px) {
	.p-guideline {
		grid-template-columns: repeat(4, 1fr);
	}

	/* 下段 */
	.p-guideline__card--benefits {
		grid-column: span 1;
	}

	.p-guideline__card--person {
		grid-column: span 3;
	}

	/* 上段4カードの高さを揃える */
	.p-guideline__card--job,
	.p-guideline__card--salary,
	.p-guideline__card--time,
	.p-guideline__card--holiday {
		display: flex;
		flex-direction: column;
	}

	.p-guideline__card--job .p-guideline__body,
	.p-guideline__card--salary .p-guideline__body,
	.p-guideline__card--time .p-guideline__body,
	.p-guideline__card--holiday .p-guideline__body {
		flex: 1;
	}

	.p-guideline__card--job .p-guideline__body {
		display: flex;
		align-items: center;
	}

	.p-guideline__card--person .p-guideline__body {
		min-height: 200px;
		padding: var(--s-8);
	}

	.p-guideline__card--person .p-guideline__body {
		background-size:contain;
	}

	.p-guideline__check-list {
		grid-template-columns: repeat(2, max-content);
		column-gap: var(--s-10);
	}
}

/* 会社概要
===========================================================================*/
.p-ceo{
	background-color: #fff;
	border-radius: var(--s-2);
	box-shadow: 0 0 3px rgb(0 0 0 / 30%);
	padding:var(--s-4);
	}
.p-ceo__title{
	color:#fff;
	background-color:var(--color-primary);
	font-size: clamp(var(--text-18), 2.47vw, var(--text-20));
	font-weight:900;
	text-align:center;
	border-radius: var(--s-2);
	padding:var(--s-2);
	margin-bottom:var(--s-4);
	}
.p-ceo__grid{
	display:flex;
	gap:var(--s-4);
	}
.p-ceo__images{
	flex-shrink: 0;
	}
.p-ceo__body{
	}
.p-ceo__list{
	font-size:var(--text-14);
	font-weight:900;
	margin-bottom:var(--s-2);
	}
.p-ceo__text{
	font-size:var(--text-14);
	}
.p-ceo__name{
	text-align:right;
	font-weight:500;
	margin-top:var(--s-2);
	}
/* 代表メッセージ */
.p-ceo--message .p-ceo__images{
	width:35%;
	}
	.p-ceo--message .p-ceo__text{
		line-height:2;
		}
/* 代表者の保有資格 */
.p-ceo--license .p-ceo__images{
	width:35%;
	}

@media (min-width: 768px) {
	.p-ceo{
		padding:var(--s-5);
		}
	.p-ceo__title{
		margin-bottom:var(--s-5);
		}
	.p-ceo__grid{
		gap:var(--s-5);
		}
	.p-ceo__list{
		margin-bottom:var(--s-3);
		}
	.p-ceo__name{
		margin-top:var(--s-3);
		}
	/* 代表メッセージ */
	.p-ceo--message .p-ceo__images{
		width:30%;
		}
	/* 代表者の保有資格 */
	.p-ceo--license .p-ceo__images{
		width:40%;
		}
}
@media (min-width: 1024px) {
}