@charset "UTF-8";
/* CSS Document */
/*-------------------------------*/

/* INDEX */

/*------------------------------*/
/* ================================

about / ハウステップについて

================================ */
#about {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;

	row-gap: 3.8em;
}
.about__lead {
	text-align: center;
	margin-inline: auto;
}
.about__txt {
	text-align: center;
	margin-inline: auto;
	margin-top: -0.3em;
}
/* ------
画像 ／ スライダーは、asset>css>option>slider>slider-about.cssを参照 */
@media (max-width: 559px) {
	#about {
		row-gap: 3.5em;
	}
	.about__txt br {
		display: none;
	}
	.about__txt {
		text-align: justify;
	}
	.about__photos {
		margin-top: -0.3em;
	}
}



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

BUSINESS / 事業内容

================================ */
/* ------------
タイトル / テキスト */
.ib__headline--en {
	font-family: var(--alphabet);
	font-weight: 800;
	font-size: var(--txt-xl);
	line-height: 1.1;
}
.ib__headline--en .core {
	color: var(--color-main);
}
.ib__headline--en .custom {
	color: var(--color-accent);
}
.ib__headline--jp {
	font-size: var(--txt-md);
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 1.1;
	margin-top: 0.2em;
}
.ib__txt {
	line-height: 1.56;
}
@media (min-width: 960px) {
	.ib-item:nth-child(even) {
	margin-top: var(--gutter-reg);
	}
	.ib-item:last-child {
		margin-bottom: var(--gutter-reg);
	}
	.ib-item + .ib-item {
		margin-top: var(--section-inner-gutter);
	}
	/* ------------
	グリッド設定 / レイアウト調整 */
	.ib-item:nth-child(even) {
		display: grid;
		grid-template-areas:
		"photo	headline"
		"photo	txt"
		"photo	button";
		grid-template-rows: 1fr auto 1fr;
		grid-template-columns: 1fr calc(448rem / 16);
		margin-right: var(--head-match-space);
	}
	.ib-item:nth-child(odd) {
		display: grid;
		grid-template-areas:
		"headline	photo"
		"txt		photo"
		"button		photo";
		grid-template-rows: 1fr auto 1fr;
		grid-template-columns: calc(448rem / 16) 1fr;
		margin-left: var(--head-match-space);
	}
	.ib__photo {
		grid-area: photo;
		align-self: center;
	}
	.ib__headline {
		grid-area: headline;
		align-self: flex-end;

		position: relative;
		z-index: 1;
	}
	.ib__txt {
		grid-area: txt;
		margin-top: 1.9em;
		position: relative;
		z-index: 1;
	}
	.ib__button {
		grid-area: button;
		margin-top: 3em;
		align-self: flex-start;
	}
	.ib-item:nth-child(even) .ib__photo {
		margin-right: calc(0px - var(--gutter-var-xl));
	}
	.ib-item:nth-child(odd) .ib__photo {
		margin-left: calc(0px - var(--gutter-var-xl));
	}
	/* ------------
	画像 */
	.ib__photo {
		min-height: calc(400rem / 16);
		position: relative;

		display: -webkit-box;

		display: -ms-flexbox;

		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		justify-items: flex-end;
	}
	.ib__photo--core {
		overflow: hidden;
		-webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
		        clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
	}
	.ib__photo img {
		display: block;
		height: auto;
		position: relative;
		z-index: 1;

		margin-top: auto;
	}
	.ib__photo--core img {
		width: max(
			700px,
			min(50%, 668px)
		);
		max-width: 120%;
		-webkit-transform: translateY(-2%);
		        transform: translateY(-2%);
		margin-right: 10%;
		margin-left: auto;
	}
	.ib__photo--custom img {
		width: max(
			700px,
			min(50%, 668px)
		);
		max-width: 110%;
		margin-right: 0;
		margin-left: 2%;
	}
	.ib__photo::before {
		content: "";
		display: inline-block;
		width: 100%;
		height: 90%;

		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 0;
	}
	.ib__photo--core::before {
		background-color: var(--color-main-pale);
		-webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
		        clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
	}
	.ib__photo--custom::before {
		background-color: var(--color-accent-pale);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
		        clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
	}
}
@media (max-width: 959px) {
	/* ------------
	レイアウト */
	.ib-item {
		width: var(--flexible-width);
		margin-inline: auto;

		display: -webkit-box;

		display: -ms-flexbox;

		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 3em 0;
	}
	.ib-item:nth-child(even) {
		margin-top: var(--gutter-xl);
	}
	.ib-item + .ib-item {
		margin-top: var(--section-inner-gutter);
	}
	.ib__photo {
		margin-top: -1em;
	}
	.ib__txt {
		margin-top: 0.8em;
	}
	/* ------------
	画像 */
	.ib__photo {
		position: relative;
	}
	.ib__photo img {
		display: block;
		height: auto;
		position: relative;
		z-index: 1;
		margin-inline: auto;
	}
	.ib__photo--core img {
		width: 102%;
		-webkit-transform: translateY(5%) translateX(-1%);
		        transform: translateY(5%) translateX(-1%);
	}
	.ib__photo--custom img {
		width: 102%;
		-webkit-transform: translateY(5%) translateX(-2.5%);
		        transform: translateY(5%) translateX(-2.5%);
	}
	.ib__photo::before {
		content: "";
		display: inline-block;
		width: calc(100vw - var(--gutter-var-xl));
		height: 90%;

		position: absolute;
		bottom: 0;
	}
	.ib__photo--core::before {
		background-color: var(--color-main-pale);
		-webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
		        clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
		left: calc(0px - var(--head-match-space));
	}
	.ib__photo--custom::before {
		background-color: var(--color-accent-pale);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
		        clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
		left: 0;
	}
}



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

WORKS / 施工事例

================================ */
/* スライダーはslider-index-works.css参照 */
.index-works__slider {
	margin-top: 3.8em;
}
#index-works .button__container {
	margin-top: 3em;
}


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

BLOG / ブログ一覧
リストは
assets>css>post>post-list.cssを参照

================================ */
#index-blog .post-list {
	margin-top: calc(3.8em - var(--gutter-var-md));
}
#index-blog .button {
	margin-top: 3em;
}
@media (max-width: 559px) {
    #index-blog .post-list {
		margin-top: calc(3.5em - var(--gutter-var-xl));
    }
}




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

RECRUIT / リクルート

================================ */
#recruit {
	position: relative;
	padding-block: var(--section-inner-gutter);
}
#recruit::before {
	content: "";
	display: block;
	width: 70%;
	height: 100%;
	background-color: var(--color-main-thin);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
	        clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);

	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}
.recruit__photo img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
@media (min-width: 960px) {
	.recruit__inner {
		display: grid;
		grid-template-areas:
		"photo	headline"
		"photo	text"
		"photo	button";
		grid-template-rows: 1fr auto 1fr;
		grid-template-rows: auto auto auto;
		grid-template-columns: 1fr minmax(calc(320rem / 16), 0.7fr);
		gap: 0 var(--gutter-var-11x);
		place-content: center;
	}
	.recruit__headline {
		grid-area: headline;
		align-self: flex-end;
	}
	.recruit__txt {
		grid-area: text;
		align-self: center;
		margin-block: 3em;
	}
	.recruit__button {
		grid-area: button;
		align-self: flex-start;
	}
	.recruit__photo {
		grid-area: photo;
		align-self: stretch;
	}
	.recruit__photo {
		display: block;
		margin-left: calc(0px - var(--gutter-var-8x));
	}
}
@media (max-width: 959px) {
	#recruit::before {
		width: 80%;
	}
	.recruit__inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 3em;
	}
	.recruit__txt {
		grid-area: text;
	}
	.recruit__photo {
		display: block;
		width: calc(100% + var(--gutter-var-8x));
		margin-left: calc(0px - var(--gutter-var-8x));
	}
}
@media (max-width: 559px) {
	#recruit::before {
		width: 90%;
	}
	.recruit__headline {
		text-align: center;
	}
	.recruit__headline::before {
		left: calc(50% - calc(var(--headline-border) / 2));
		-webkit-transform: translateX(-50%);
		        transform: translateX(-50%);
	}
	.recruit__headline::after {
		left: calc(50% + calc(var(--headline-border) / 2));
		-webkit-transform: translateX(-50%);
		        transform: translateX(-50%);
	}
	.recruit__button {
		-ms-flex-item-align: center;
		    align-self: center;
	}
}


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

CONTACT / お問い合わせ

================================ */
#contact {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 2.5em 0;
}
.contact__tel {
	display: inline-block;
	font-family: var(--number);
	font-weight: 700;
	font-size: var(--txt-7x);
	line-height: 1;
	margin-top: 0.2em;
}
.contact__tel .unit {
	font-size: calc(var(--txt-7x) * 0.7);
}
@media (max-width: 559px) {
	.contact__tel {
		margin-top: 0.5em;
	}
	#contact {
		gap: 1.5em 0;
	}
}