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

/* INDEX */

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

ABOUT / キュービックシステムについて

================================ */
#about {
	margin-left: var(--head-match-space);
	container-type: inline-size;
}

/* -----------
リード */
.about__lead-wrapper {
	margin-right: var(--gutter-var-8x);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;

	margin-top: 6.3em;
}
.about__lead-wrapper::after {
	content: "";
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	display: block;
	width: auto;
	height: 2px;
	background-color: var(--color-main);

	margin-right: calc(0px - var(--gutter-var-8x));
}
.about__lead {
	padding-right: 1em;
}
@media (max-width: 959px) {
	.about__lead-wrapper {
		margin-top: 3.8em;
	}
}
@media (max-width: 559px) {
	.about__lead {
		letter-spacing: normal;
	}
}

/* -----------
インナー */
.about__inner {
	margin-right: var(--gutter-var-8x);
	/* margin-block: 3.8em; */
	margin-top: 3.8em;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	    -ms-flex-direction: row-reverse;
	        flex-direction: row-reverse;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 3.8em var(--gutter-var-common-lg);
}
.about__txt-box {
	width: max(
		calc(336rem / 16),
		min(calc(50% - var(--gutter-var-common-lg)), calc(448rem / 16))
	);
	max-width: 100%;

	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__slider {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	width: 50%;
	max-width: calc(896rem / 16);
}
@container (max-width: 952px) {
	.about__inner {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.about__txt-box {
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
	.about__slider,
	.about__txt-box {
		-webkit-box-flex: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
		width: 100%;
		max-width: none;
	}
}
@media (max-width: 559px) {
	.about__inner {
		/* margin-block: 1.9em; */
		margin-top: 1.9em;
		gap: 1.9em var(--gutter-var-common-lg);
	}
	.about__txt-box {
		row-gap: 1.9em;
	}
}


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

ループスライダー
スライダーはassets->css->option->slider->slider-loop.cssを参照

================================ */
.loop-slider__wrapper {
	margin-top: 6.3em;
}
@media (max-width: 559px) {
	.loop-slider__wrapper {
		margin-top: 3.8em;
	}
}


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

CASE / 導入事例
スライダーはassets->css->option->slider->slider-case.css
投稿カードはassets->css->post->case-list.cssを参照

================================ */
.index-case__lead {
	text-align: center;
	margin-block: 3.8em;
}
/* -------
ボタン */
.index-case__button-container {
	margin-top: 3.8em;
}
@media (max-width: 559px) {
	.index-case__lead {
		margin-block: 1.9em;
	}
	/* -------
	ボタン */
	.index-case__button-container {
		margin-top: 1.9em;
	}
}


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

DOWNLOAD / ダウンロード
スライダーはassets->css->option->slider->slider-download.css

================================ */
.dl__slider {
	margin-top: 3.8em;
}
.index-dl__lead {
	text-align: center;
	margin-block: 3.8em;
}
@media (max-width: 559px) {
	.dl__slider {
		margin-top: 1.9em;
	}
	.index-dl__lead {
		margin-block: 1.9em;
	}
}


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

ONLINE SHOP / オンラインショップ

================================ */
.shop__container {
	padding: 3.8em var(--gutter-var-common-reg);
	border: 4px solid var(--color-main-pale);
	border-radius: 16px;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 3.8em var(--gutter-var-common-reg);
}
.shop__container .headline {
	width: 100%;
}
.shop__thumb {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	width: 50%;
}
.shop__thumb img {
	width: 100%;
	height: auto;
	-o-object-fit: cover;
	   object-fit: cover;
}
.shop__txt-wrapper {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	width: max(
		calc(224rem / 16),
		calc(50% - var(--gutter-var-common-reg))
	);
	max-width: 100%;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
.shop__button {
	margin-top: 3.8em;
	margin-inline: auto;
}
@media (min-width: 1240px) {
	.shop__container {
		padding: 3.8em var(--gutter-var-common-lg);
		gap: 3.8em var(--gutter-var-common-lg);
	}
	.shop__txt-wrapper {
		width: max(
			calc(224rem / 16),
			calc(50% - var(--gutter-var-common-lg))
		);
	}
}
@media (max-width: 559px) {
	.shop__container {
		padding: 2.2em var(--gutter-var-common-reg);
		gap: 1.9em var(--gutter-var-common-reg);
	}
	.shop__button {
		margin-top: 1.9em;
	}
}


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

NEWS / お知らせ
投稿カードはassets->css->post->news-list.cssを参照

================================ */
#index-news .news-list ,
.index-news__button-container {
	margin-top: 3.8em;
}
@media (max-width: 559px) {
	#index-news .news-list ,
	.index-news__button-container {
		margin-top: 1.9em;
	}
}


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

RECRUIT / 採用情報

================================ */
@media (min-width: 769px) {
	.index-recruit__inner {
		display: grid;
		grid-template-areas:
		"headline	photo"
		"text		photo";
		grid-template-columns: minmax(calc(280rem / 16), calc(50% - var(--gutter-var-common-lg))) 1fr;
		grid-template-rows: auto 1fr;
		gap: 3.8em var(--gutter-var-common-lg);
	}
	.index-recruit__headline {
		grid-area: headline;
	}
	.index-recruit__photo {
		grid-area: photo;
	}
	.index-recruit__txt-wrapper {
		grid-area: text;
	}
}
.index-recruit__photo {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}
.index-recruit__photo img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: 45% center;
	   object-position: 45% center;
}
.index-recruit__txt-wrapper {
	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: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 3.8em;
}
.index-recruit__txt {
	color: var(--color-white);
}
@media (max-width: 768px) {
	.index-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: 3.8em var(--gutter-var-common-lg);
	}
}
@media (max-width: 559px) {
	.index-recruit__inner {
		gap:1.9em var(--gutter-var-common-lg);
	}
	.index-recruit__txt-wrapper {
		gap:1.9em;
	}
}


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

 FOLLOW US / SNS

================================ */
.sns__list {
	--sns-icon-size: clamp(2.625rem, calc(2.075rem + 2.75vw), 4rem); /* min: 42px, max: 64px */

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: calc(var(--sns-icon-size) / 1.5);

	margin-top: 3.8em;
}
.sns__icon a {
	width: var(--sns-icon-size);
	height: var(--sns-icon-size);

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.sns__icon img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;

	-o-object-fit: contain;

	   object-fit: contain;
}
@media (max-width: 559px) {
	.sns__list {
		margin-top: 1.9em;
	}
}