/* FOR front-page */
.hero {
	background-color: var(--color-main-color);
	height: 100dvh;
	width: 100%;
	position: relative;
	overflow-x: hidden;
	/* 動画が来るまでの対応　ヘッダーの文字を見やすくするためのグラデーション */

	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
        height: 25%;
        background: linear-gradient(178deg, #000000be 0%, rgba(0, 0, 0, 0.5) 20%, transparent 52%);
	}


	> div {
		position: inherit;
		display: grid;
		align-items: center;
		justify-items: end;
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/* background: linear-gradient(327deg, #000000be 15%, rgba(0, 0, 0, 0.5) 31%, transparent 45%); */
			background: radial-gradient(ellipse at top left, transparent 61.34%, rgba(0, 0, 0, 0.4) 73.95%, rgba(0, 0, 0, 0.7) 86.97%, #000000be);
			z-index: 1;
		}
		> div {
			padding-block-start: 21vh;
			position: absolute;
			width: fit-content;
			color: var(--color-white-color);
			z-index: 2;
			/* 画面幅に応じて右マージンを調整 */
			/* 600px以下: 0, 1440px以上: 13vw, その間は滑らかに変化 */
			margin-inline-end: clamp(0vw, 22.28vw - 133.7px, 13vw);
		}
	}

	figure {
		margin-block-end: 0;
		position: relative;
		top: 0;
	}

	.hero-block-visual img,
	.hero-block-visual video {
		width: 100dvw;
		height: 100dvh;
		object-fit: cover;
		display: block;
	}

	h2,
	p {
		font-weight: 400;
		letter-spacing: 3.60px;
		margin-block: 0;
	}

	h2 {
		/* 画面幅に応じてフォントサイズを調整 */
		/* 最小40px、最大90px、1920px幅で90pxになるように設定 */
		font-size: clamp(2.5em, 0.268em + 5.95vw, 5.625em);
		/* line-height: 2; */
		font-weight: normal;
	}

	p {
		font-size: clamp(1em, 0.107em + 2.38vw, 2.25em);
		line-height: 1;
		font-feature-settings: "palt";
		padding-inline-start: 0.3em;
	}

	@media(600px >=width) {
		> div {
			justify-items: center;

			> div {
				margin-inline: auto;
			}
		}

		h2,
		p {
			text-align: center;
			padding-inline-start: unset;
		}

		p {
			letter-spacing: unset;
		}
	}
}

.sky-shortcode__item {
	.sky-shortcode__thumb {
		img {
			width: 100%;
			object-fit: cover;
			object-position: center;
			display: block;
			aspect-ratio: 1 / 0.75;
		}
	}
}

/* @media(600px >=width) {
	.entry-content > *:not(.hero) {
		padding-inline: 1em;
	}
} */
.page-index {
	h3 {
		font-size: 1.25em;
		letter-spacing: 0.12em;
		font-weight: 800;
		margin-block-start: 0;
		color: var(--color-headline-color);
		font-family: "Ysabeau Infant", sans-serif;
	}

	h3::first-letter {
		color: var(--color-accent-color);
	}

	.headline-lead-block {
		/* font-size: clamp(1.125em, 0.794em + 0.88vw, 1.5em); */
		font-size:1.5em;
		font-family: var(--font-family-base_mincho);
		font-feature-settings: "palt";
		font-weight: normal;
		letter-spacing: 0.12em;
		line-height: 2;
		margin-block: 1.5em;
		color: var(--color-headline-color);

		@media(600px <=width) {
			white-space: nowrap;
		}
	}

	.wp-block-group.concept-home {
		.headline-lead-block {
			margin-block: 0 clamp(2rem, 0.5em + 4vw, 4em);
			color: var(--color-headline-color);
			font-family: var(--font-family-base_mincho);
		}
	}

	.headline-lead-block ~ p {
		line-height: 2.4;
		width: clamp(26em, 17.111rem + 13.89vw, 31em);
		margin-block-start: 0;
		letter-spacing: 0.1em;
		color: var(--color-text);
	}

	.grid > div {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* align-items: center; */
		margin-inline: auto;
		max-width: 100em;
		margin-block-start: var(--block-scale);
		gap: clamp(1.5em, -2.421em + 5.14vw, 3.75em);

		> div {
			width: fit-content;
			justify-self: end;
			align-self: center;
			padding-inline: 1em 6.25em;
		}
	}

	/* top feature */
	.feature-home > div {
		grid-template-columns: 1fr 0.7fr;
		max-width: unset;

		> div {
			width: fit-content;
			justify-self: start;
			padding-inline: 0 start;
			grid-column: 2/3;
			grid-row: 1/2;
			margin-inline-start: 3em;
		}

		> figure {
			grid-column: 1/2;
			grid-row: 1/2;
		}

		img {
			height: 100%;
			width: 100%;
			aspect-ratio: 1 / 0.609;
			object-fit: cover;
		}
	}

	/* top service */
	.service-home > div {
		grid-template-columns: 1fr 1.8fr;

		h4 {
			margin-block: 0.025em;
		}

		.headline-sublead-block {
			margin-block-end: 2.5em;
			font-size: 0.75em;
		}

		> div:nth-child(1) {
			width: fit-content;
			justify-self: start;
			padding-inline-end: unset;

			@media(width <=1024px) {
				.headline-lead-block ~ p {
					width: 25.25em;
				}
			}
		}

		.tiles {
			padding-inline-end: unset;

			p {
				text-align: center;
			}

			p:nth-child(1) {
				font-size: 0.875em;
				font-weight: 600;
				letter-spacing: 0.12em;
				margin-block: 0;
			}

			p:nth-child(2) {
				font-size: clamp(1.2em, 0.555em + 1.01vw, 1.5em);
				letter-spacing: clamp(0em, -0.033em + 0.09vw, 0.05em);
				font-feature-settings: "palt";
				margin-block: 0.5em 0.1em;
			}
			p:nth-child(3) {
				align-self: start;
                margin-block: 0;
                font-size: 0.75em;
			}

			figure::before {
				content: "";
				background-color: rgba(56, 54, 54, 0.65);
				position: absolute;
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;
				z-index: 1;
			}

			> div {
				display: grid;
				gap: 1.25em;
				grid-template-columns: repeat(2, clamp(18.75em, 4.45em + 22.32vw, 31.25em));
				grid-template-rows: repeat(2, auto);
			}
		}

		.tile > div {
			position: relative;

			img,
			a {
				transition: all 1s linear(0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1);
			}

			a {
				display: grid;
				place-content: center;
			}

			img {
				display: block;
			}

			figure {
				overflow: hidden;
				position: relative;
			}

			&:hover {
				a {
					color: var(--color-dark-color);
				}

				img {
					transform: scale(1.1);
				}
			}

			> div {
				position: absolute;
				width: 100%;
				color: var(--color-white-color);
				z-index: 2;
				/* display: grid; */
				height: 100%;
			}

			> div > div {
				display: grid;
				height: 100%;
				grid-template-rows: subgrid;
			}
		}
	}

	/* top works */
	.works-home > div {
		grid-template-columns: 1fr 0.6fr;
		gap: 10em;

		> div {
			padding-inline-end: unset;
		}

		.headline-lead-block ~ p {
			width: 35em;
			letter-spacing: 0.1em;
		}

		> p {
			width: fit-content;
			align-self: center;
		}
	}

	.product_item-home {
		padding-block: 1.438em;
	}

	.faq-home,
	.product_item-home {
		background-color: var(--color-main-color);
	}

	/* faq */
	.faq-home {
		padding-block: 4.5em 2em;

		p.viewlink {
			margin-inline: auto 0;
		}

		/* br 削除 */
		h3 ~ p br {
			display: none;
		}

		> div {
			width: 57em;
			margin-inline: auto;

			> h3,
			> p {
				text-align: center;
			}

			h3 {
				color: var(--color-accent-color)
			}

			p {
				color: var(--color-dark-color);
				margin-block: 2em 5.5em;
				letter-spacing: 0.1em;
			}
		}
	}

	/* news, shop */
	.news-home,
	.product_item-home {
		> div {
			width: 100%;
			max-width: 910px;
			margin-inline: auto;
			margin-block-start: calc(var(--block-scale) / 2);
		}

		h3,
		.headline-lead-block {
			text-align: center;
		}

		.headline-lead-block {
			font-size: 1.125em;
		}

		.sky-shortcode__list {
			list-style: none;
			margin: 0;
			padding: 0;
		}
	}

	/* news */
	.news-home {
		padding-block-end: 7em;

		.headline-lead-block {
			margin-block-end: 3.28em;
		}

		.sky-shortcode__list {
			display: grid;
			gap: 2em;
		}

		.sky-shortcode__item {
			border-top: 1px solid var(--color-dark-color);
			padding-block-start: 2em;
			padding-inline: 2em;
		}

		.sky-shortcode__item:nth-last-of-type(1) {
			border-bottom: 1px solid var(--color-dark-color);
			padding-block-end: 2em;
		}

		.sky-shortcode__item a {
			display: flex;
			align-items: center;
			gap: 2em 3em;
		}

		time {
			color: var(--color-accent-color)
		}

		.sky-shortcode__thumb {
			aspect-ratio: 1 / 0.663;
			max-width: 170px;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.sky-shortcode__meta {
			display: flex;
			flex-direction: column-reverse;
			padding-block-end: 1.5em;

			p {
				margin-block: 0.15em 0;
				line-height: 1;
			}
		}

		p.viewlink {
			margin-inline: auto 0;
			width: fit-content;
			padding-block-start: 1em;
		}
	}

	/* shop */
	.product_item-home {
		background-color: var(--color-main-color);
		color: var(--color-dark-color);
		padding-block-end:4em;

		h3 {
			color: var(--color-accent-color);
		}

		.headline-lead-block {
			color: var(--color-dark-color);
			margin-block: 1em;
		}

		.sky-shortcode__list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1.5em;
			margin-block-start: 2.5em;
		}

		.sky-shortcode__thumb {
			aspect-ratio: 258 /303;
			overflow: hidden;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		p.viewlink {
			width: fit-content;
			margin-inline: auto;
		}
	}

	/* access */
	.access-home {
		> div {
			column-gap: clamp(3em, -13.078em + 25.1vw, 7em);
		}

		.group-logo {
			/* background-color: var(--color-main-color);
			color: var(--color-accent-color);
			padding-inline: unset; */
			width: clamp(18.75em, -2.034em + 55.42vw, 33.438em);
			aspect-ratio: 4 / 3;
			display: grid;
			place-content: center;
			img{
				max-width: 174px;
				display: block;
				margin-inline: auto;
			}
		}

		svg {
			display: block;
			width: 100%;
			height: auto;
			margin-inline: auto;
			aspect-ratio: 4 / 3;
		}

		h3,
		.headline-lead-block {
			margin-block-start: 0;
		}

		h3 {
			margin-block-end: 0.9em;
		}

		.access-p-block {
			line-height: 1.8;
			letter-spacing: 0.2em;
			margin-block-end: 2em;
		}
	}

	/* スライドショー */
	.carousel-home {
		margin-block: 8em var(--block-scale);
	}

	.slide02-home {
		width: 100%;
		overflow: hidden;
		margin-block: 4em 7.3em;

		.swiper-wrapper {
			margin-block-end: 4em;
		}

		.swiper-slide {
			aspect-ratio: 1 / 0.75;
			box-sizing: border-box;

			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
		}

		.swiper-horizontal > .swiper-pagination-bullets,
		.swiper-pagination-bullets.swiper-pagination-horizontal {
			bottom: unset;
		}

		/* ページネーションの見た目調整 */
		.swiper-pagination {
			position: relative;
			display: flex;
			gap: 0.65em;
			justify-content: center;
			align-items: center;
		}

		.swiper-pagination-bullet {
			width: clamp(0.7em, 0.632em + 0.18vw, 0.85em);
			height: clamp(0.7em, 0.632em + 0.18vw, 0.85em);
			background: var(--color-text);
			opacity: 1;
		}

		.swiper-pagination-bullet-active {
			background: var(--color-accent-color);
			width: clamp(1em, 0.773em + 0.61vw, 1.5em);
			height: clamp(1em, 0.773em + 0.61vw, 1.5em);
		}
	}

	@media(width <=1024px) {
		.wp-block-group.grid > div {
			padding-inline: unset;

			> div {
				padding-inline: unset;
				justify-self: start;
			}
		}

		.concept-home,
		.feature-home,
		.service-home,
		.access-home,
		.works-home,
		.news-home,
		.product_item-home {
			> div {
				margin-inline: auto;
				width: fit-content;
				grid-template-columns: minmax(500px, 85vw);
				grid-template-rows: repeat(2, auto);
				gap: 1em;
			}
		}

		.access-home {

			.group-logo,
			section {
				margin-inline: auto;
			}
		}

		.grid.concept-home > div {
			grid-template-columns: minmax(500px, 85vw);
		}

		.grid.feature-home > div {
			grid-template-columns: 1fr;
		}

		.grid.access-home > div,
		.grid.service-home > div,
		.grid.works-home > div {
			grid-template-columns: minmax(500px, 85vw);
			padding-inline: 1em;

			> div {
				padding-inline: unset;
			}
		}

		.feature-home > div {
			> figure {
				grid-column: 1 / 2;
				grid-row: 2 / 3;
			}

			> div {
				grid-column: 1 / 2;
				grid-row: 1 / 2;
			}
		}

		/* faq */
		.faq-home > div {
			width: unset;

			.faq-details {
				max-width: 50em;
				margin-inline: auto;
			}
		}

		/* top service */
		.service-home > div {
			.tiles {
				> div {
					grid-template-columns: repeat(2, 1fr);
				}
			}
		}

		/* top news */
		.news-home {
			> div {
				width: 100%;
			}

			.sky-shortcode__item a {
				column-gap: 3em;
			}
		}
	}

	@media(width <=600px) {
		.headline-lead-block ~ p {
			width: unset;
		}

		.grid.concept-home > div,
		.grid.works-home > div {
			grid-template-columns: 100%;

			h3,
			h4,
			p {
				width: fit-content;
				white-space: unset;
			}
		}

		.grid.access-home > div,
		.grid.service-home > div,
		.grid.works-home > div {
			grid-template-columns: 1fr;
			padding-inline: unset;
		}

		.service-home > div {
			& .tiles {
				> div {
					grid-template-columns: 1fr;
				}
			}
		}

		.faq-home {
			h3 ~ p br {
				display: block;
			}

			> div .faq-details {
				max-width: 90%;
			}
		}
	}

	@media(1024px < width <=1440px) {
		.grid.concept-home > div {

			img,
			video {
				height: 100%;
				min-height: 380px;
				width: 100%;
				object-fit: cover;
				padding-inline-end: 1em;
			}

			> div {
				padding-inline-end: clamp(0em, -12.5em + 15.63vw, 6.25em);
			}
		}
	}
}

/* horizontal auto scroll */
.carousel,
.carousel-home {
	/* margin: clamp(3em, 0.679em + 6.19vw, 6.25em) auto; */
	width: 100%;
	display: flex;
	overflow-x: auto;
	gap: 1em;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}

	.group {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1em;
		animation: spin 120s linear infinite;
	}

	.card {
		width: clamp(18.75em, 13.973em + 12.74vw, 25.438em);
		aspect-ratio: 4 / 2.7;
		align-content: center;

		img {
			display: block;
			/* aspect-ratio: 4 / 3; */
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}
}

@keyframes spin {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

@media(1024px >=width) {
	.page-index {

		.service-home > div,
		.works-home > div {
			> div:nth-child(1) {
				.headline-lead-block ~ p {
					width: 100%;
				}
			}
		}

		.feature-home {
			figure ~ div {
				margin-inline: unset;
				justify-self: start;
			}

			h4.headline-lead-block {
				width: 100%;
			}
		}

		.access-home {
			svg {
				width: clamp(12.5em, 3.656em + 23.58vw, 18.75em);
			}
		}

		.news-home {
			.sky-shortcode__item a {
				display: grid;
				row-gap: 1.5em;
				justify-items: center
			}
		}
		.product_item-home {
			.headline-lead-block{
				text-align: unset;
			}
			.sky-shortcode__list{
				grid-template-columns: unset;
				justify-items: center
			}
			.sky-shortcode__thumb {
				width:clamp(18.75em, 5.483em + 35.38vw, 28.125em);
			}
		}
	}
}