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

/* INDEX */

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

about

================================ */
/* ------------------
ラベル */
.index-about__label-wrapper {
	--index-about-label-em: 11.5;
	margin-left: var(--head-match-space);
}
.index-about__label {
	--fluid-label-size: calc(calc(100vw - var(--head-match-space)) / var(--index-about-label-em));
	/* min: 25px, just size , max: 118px */
	font-size: clamp(1.563rem, var(--fluid-label-size), 7.375rem);
	font-weight: 700;
	font-family: var(--alphabet);
	color: var(--color-primary);
	white-space: nowrap;
	letter-spacing: normal;
	line-height: 1;
}
/* ------------------
インナー */
.index-about__inner {
	margin-top: 2em;
}
.index-about__headline {
	--fluid-about-headline-size: calc(50vw / 16);
	/* min: 20px, just size , max: 25px */
	font-size: clamp(1.2rem, var(--fluid-about-headline-size), 1.875rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.1em;
	color: var(--color-secondary);
}
/* アイテム */
.index-about__item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 2.5em var(--gutter-var-lg);

	--index-about-item-width: max(
		336px,
		calc(50% - var(--gutter-var-lg))
	);
	width: calc(100% - var(--gutter-var-xl));
	margin-top: var(--gutter-xl);
}
.index-about__item:nth-child(odd) {
	margin-left: auto;
}
/* 画像 */
.index-about__photo {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	width: var(--index-about-item-width);
	max-width: 100%;
	height: auto;
}
.index-about__photo img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
/* テキスト */
.index-about__txt-inner {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	width: var(--index-about-item-width);
	max-width: 100%;
}
.index-about__subhead {
	/* min: 18px, max: 25px */
	font-size:clamp(1.125rem, calc(0.95rem + 0.875vw), 1.563rem);
	font-weight: 700;
	color: var(--color-bk);
	line-height: 1.35;
	letter-spacing: 0.1em;
}
.index-about__txt {
	margin-top: 2.15em;
}
@media (max-width: 559px) {
	.index-about__item {
		margin-top: var(--gutter-md);
	}
	.index-about__inner {
		margin-top: 1.5em;
	}
	.index-about__subhead {
		letter-spacing: 0.02em;
	}
	.index-about__txt {
		margin-top: 1.25em;
	}
}



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

得意なこと

================================ */
.strengths__container {
	position: relative;
}
.strengths__container::before {
	content: "";
	display: block;
	width: 100%;
	height: calc(100% - 10em);
	background-color: var(--color-primary-pale);
	-webkit-clip-path: polygon(0 14%, 100% 0%, 100% 86%, 0% 100%);
	        clip-path: polygon(0 14%, 100% 0%, 100% 86%, 0% 100%);

	position: absolute;
	bottom: 5em;
	left: 0;
	right: 0;
	z-index: -1;
}
.strengths__headline {
	font-size: var(--txt-xl);
	font-weight: 700;
	color: var(--color-secondary);
	text-align: center;
}
@media (max-width: 959px) {
	.strengths__container::before {
		height: calc(100% - 16em);
		-webkit-clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0% 100%);
		        clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0% 100%);
	}
}
@media (max-width: 559px) {
	.strengths__container::before {
		height: calc(100% - 12em);
		-webkit-clip-path: polygon(0 4%, 100% 0%, 100% 96%, 0% 100%);
		        clip-path: polygon(0 4%, 100% 0%, 100% 96%, 0% 100%);
	}
}
/* ---------------
アイテム */
.strengths-list {
	counter-reset: strengths-number;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 2.5em var(--gutter-var-md);

	margin-top: 5em;
}
@media (max-width: 559px) {
	.strengths-list {
		margin-top: 2.5em;
	}
}
.strengths-list__item {
	position: relative;
	border: 2px solid var(--color-primary-pale);
	border-radius: 16px;
	padding: max(1.5em, var(--gutter-var-sm)) max(1em, var(--gutter-var-xs));
	background-color: var(--color-base);
	width: max(
		180px,
		calc(calc(100% / 4) - var(--gutter-var-md))
	);
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}
.strengths-list__item::before {
	content: counter(strengths-number, decimal-leading-zero);
	counter-increment: strengths-number;

	font-size: var(--txt-md);
	font-family: var(--number);
	font-weight: 500;
	color: var(--color-white);
	width: 2.9em;
	height: 2.9em;
	background-color: var(--color-secondary);
	border-radius: 100%;

	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;
	position: absolute;
	top: -1em;
	left: -1em;
}
/* -----------
インナーコンテンツ */
.strengths-list__inner {
	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-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 1.5em var(--gutter-var-lg);
}
.strengths-list__fig {
	display: block;
}
.strengths-list__fig img {
	display: block;
	width: 180px;
	margin-inline: auto;
	max-width: 100%;
	height: auto;
}
.strengths-list__heading {
	font-size: var(--txt-reg);
	font-weight: 700;
	color: var(--color-secondary);
	letter-spacing: 0.02em;
	line-height: 1.35;
}
.strengths-list__desc {
	margin-top: 1em;
}
.strengths-list__dd {
	font-size: var(--txt-reg);
	line-height: 1.5;
}
.strengths-list__dd.etc {
	font-size: var(--txt-sm);
	text-align: right;
}
/* ---------------
コンテナー設定 */
.strengths-list__container {
	container-type: inline-size;
	container-name: strengths-desc-inner;
}
@container strengths-desc-inner (min-width: 264px) {
	.strengths-list__inner {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
	.strengths-list__fig {
		width: 50%;
		-webkit-box-flex: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
	}
	.strengths-list__dl {
		width: 50%;
		-webkit-box-flex: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
	}
	.strengths-list__fig img {
		margin-left: auto;
		margin-right: 0;
	}
}

/* ================================
得意なこと その2 */
.strengths-other {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 2.5em var(--gutter-var-md);
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;

	margin-top: 5em;
}
.strengths-other__wrapper {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	width: max(
		252px,
		calc(50% - var(--gutter-var-md))
	);
	max-width: 100%;
	border: 2px solid var(--color-primary-pale);
	border-radius: 16px;
	background-color: var(--color-base);
	overflow: hidden;
}
.strengths-other__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	-o-object-fit: cover;
	   object-fit: cover;
}
.strengths-other__txt-wrapper {
	padding: 2.5em max(1em, var(--gutter-var-reg));
}
.strengths-other__heading {
	font-size: var(--txt-lg);
	font-weight: 700;
	line-height: 1.35;
}
.strengths-other__txt {
	margin-top: 1.25em;
}
/* ------------
リード */
.strengths-other-lead__wrapper {
	width: 100%;
	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;

	margin-top: 2em;
}
.strengths-other__lead {
	color: var(--color-white);
	font-size: var(--txt-md);
	font-weight: 500;
	text-align: center;
	background-color: var(--color-secondary);
	border-radius: 8px;

	width: 100%;
	padding: 1em max(1em, var(--gutter-var-reg));
}

/* ================================
ボタン */
.strengths__container .button__container {
	margin-top: 5em;
}


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

POST
* post要素は assets > css > post > post-list.cssを参照
* sliderは assets > css > option > slider > slider-pots.cssを参照

================================ */
.index-news__container {
	padding-left: var(--head-match-space);
}
.index-news__headlines {
	gap: 1em 2.5em;
}
.index-news__container .post__slider {
	margin-top: 4em;
}
@media (max-width: 559px) {
	.index-news__container .post__slider {
		margin-top: 0;
	}
}