@charset "UTF-8";

#Top .wrapper {
	padding-bottom: var(--space9);
}

/* ヘッダー */
#header-block .header__logo {
	opacity: 1;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

#header-block.scroll-nav .header__logo {
	opacity: 1;
}


/*******************************/
/* スライダー */
/*******************************/

@-webkit-keyframes zoomOut {
	0% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes zoomOut {
	0% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
	animation: zoomOut 5s linear 0s 1 normal both;
	-webkit-animation: zoomOut 5s linear 0s 1 normal both;
}

#mv-block {
	position: relative;
	top: calc(var(--header_height) * -1);
	margin-bottom: calc(var(--header_height) * -1);
}

/* Swiper設定 */
#mv-block .swiper-wrapper {
	height: 100vh;
	height: 100dvh;
}	

#mv-block .swiper-wrapper::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/mv/mv_human-top.svg) no-repeat right top / contain;
	z-index: 10;
}

#mv-block .swiper-wrapper::after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 28vw;
	height: 20vw;
	background: url(../img/top/mv/mv_human-bottom.svg) no-repeat right bottom / contain;
	z-index: 10;
}

#mv-block .swiper-wrapper .slide-img {
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right top;
}

#mv-block .swiper-wrapper .slide-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right top;
}

/*******************************/
/* スライダー end */
/*******************************/

/* MVタイトル */
#mv-block .mv__title {
	min-width: min(300px, 80%);
	max-width: 80%;
	position: absolute;
	top: max(calc(var(--header_height) * 1.2), 11.3vw);
	left: 14.8vw;
	z-index: 1;
}

#mv-block .mv__title .mv__line {
	/* font-size: clamp(30px, 4.8vw, 60px); */
	background-color: var(--color_white);
}

/* #mv-block .mv__title .mv__line .line_text.big-text {
		font-size: clamp(30px, 4.8vw, 60px);
}

#mv-block .mv__title .mv__line .line_text.small-text {
	font-size: clamp(18px, 3.3vw, 24px);
} */

#mv-block .mv__title .mv__sub {
	width: 100%;
	margin-top: clamp(18px, 3.3vw, 20px);
}

#mv-block .mv__title .mv__sub img {
	width: 100%;
}

#mv-block .mv__comment {
	display: inline-block;
	width: fit-content;
	max-width: 90%;
	position: absolute;
	left: max(15px, 1.3vw);
	bottom: 20px;
	z-index: 1;
	background-color: var(--color_white);
	padding: 5px 10px;
	line-height: 1.4;
}

/*******************************/
/* ポイント start */
/*******************************/
.point-block.wrapper {
	margin-bottom: 0;
}

.point-block .cont-ttl {
	margin-bottom: var(--space5);
}

.point-list {
	background-color: var(--color_grey01);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-radius: var(--radius1);
}


.point-list__item {
	padding: 40px 30px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.point-list__item + .point-list__item {
	position: relative;
    }

.point-list__item + .point-list__item::before {
	content: "";
	position: absolute;
	display: block;
	width: clamp(3px, 0.5vw, 6px);
	height: calc(100% - 2em);
	top: 1em;
	bottom: 1em;
	left: 0;
	/* 破線を作る */
	background: url(../img/top/round-line-vertical.svg) repeat-y left top / contain;
	z-index: 2;
}

.point-list__text {
	line-height: 1.4;
}

.point-list__item-icon {
	display: grid;
	width: 100%;
	max-height: 200px;
	margin-top: var(--space3);
}

.point-block .point-list__item-icon img {
	width: 100%;
	height: min(100%, 200px);
	object-fit: contain;
}

.point-block.js-inview.is-show .point-list__item .point-list__item-icon img {
	animation: bounce 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.point-block.js-inview.is-show .point-list__item:nth-of-type(1) img {
	animation-delay: 0.2s;
}
.point-block.js-inview.is-show .point-list__item:nth-of-type(2) img {
	animation-delay: 0.3s;
}
.point-block.js-inview.is-show .point-list__item:nth-of-type(3) img {
	animation-delay: 0.4s;
}
.point-block.js-inview.is-show .point-list__item:nth-of-type(4) img {
	animation-delay: 0.5s;
}

@keyframes bounce {
	0% {
	  opacity: 0;
	  transform: scale(0.3);
	}
  
	20% {
	  transform: scale(1.1);
	}
  
	40% {
	  transform: scale(0.9);
	}
  
	60% {
	  opacity: 1;
	  transform: scale(1.03);
	}
  
	80% {
	  transform: scale(0.97);
	}
  
	to {
	  opacity: 1;
	  transform: scale(1);
	}
  }

/* promo-block --------------- */

.promo-block.wrapper {
	margin-top: 0;
	margin-bottom: 0;
}

.promo-block {
	padding-block: clamp(50px, 8.4vw, 120px);
}

.promo-block .cont-ttl {
	text-align: left;
	margin-bottom: var(--space5);
}

.promo-block .cont-ttl .sub-text {
	background-color: var(--color_white);
	padding: 0 2px;
}

.promo-text {
	margin-top: var(--space3);
}


/* declaration-block --------------- */
.declaration-block.wrapper {
	position: relative;
	padding-block: min(8.4vw, 120px);
	margin-top: 0;
	margin-bottom: 0;
	background-color: var(--color_white);
}

.declaration-block::after {
	position: absolute;
	content: "";
	display: block;
	top: 0;
	right: 0;
	width: 50%;
	height: calc(100% + var(--radius3));
	background-color: var(--color_grey01);
	border-radius: 0 var(--radius3) 0 0;
	z-index: -1;
}

.declaration-block .container {
	position: relative;
	z-index: 1;
}

.declaration-block .container::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateY(-100%);
	opacity: 0;
	width: clamp(74px, 11.6vw, 200px);
	height: clamp(63px, 10.4vw, 177px);
	z-index: 2;
	background: url(../img/top/illust_declaration.svg) no-repeat left bottom / contain;
}

.declaration-block.js-inview.is-show .container::before {
	animation: bounceIn 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes bounceIn {
	0% {
	  opacity: 0;
	  transform: translate(-50%, -100%) scale(0.3);
	}
  
	20% {
	  transform: translate(-50%, -100%) scale(1.1);
	}
  
	40% {
	  transform: translate(-50%, -100%) scale(0.9);
	}
  
	60% {
	  opacity: 1;
	  transform: translate(-50%, -100%) scale(1.03);
	}
  
	80% {
	  transform: translate(-50%, -100%) scale(0.97);
	}
  
	to {
	  opacity: 1;
	  transform: translate(-50%, -100%) scale(1);
	}
  }



.declaration-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space6);
}

.declaration-list__text {
	margin-top: var(--space2);
}

/* 遮熱ってどれも一緒？ ---------- */

.table-block.wrapper {
	padding-block: min(8.4vw, 120px);
	margin-top: 0;
	margin-bottom: 0;
}

.table-block .cont-ttl {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: left;
	gap: 0.3em;
	margin-bottom: var(--space5);
}

.table-block .cont-ttl figure {
	width: 2em;
	height: 2em;
}



/* company-block --------------- */

.company-block.wrapper {
	margin-block: 0;
	padding-block: min(8.4vw, 120px);
}

.company-block .cont-ttl h2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.company-block .cont-ttl .sub-text {
	position: relative;
}

.company-block .cont-ttl .sub-text:first-of-type::after {
	content: "";
	position: absolute;
	display: block;
	width: 2em;
	height: 1.5em;
	right: -2em;
	top: -0.5em;
	background: url(../img/top/deco_star.svg) no-repeat right top / contain;
	z-index: -1;
}

.company-list {
	width: min(930px, 62vw);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--space5) var(--space4);
}

.company-list__item {
	max-width: 280px;
	display: grid;
	grid-template-rows: auto 1fr;
	justify-items: center;
	align-items: flex-start;
	gap: var(--space1);
}

.company-list__item figure {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: contain;
	object-position: center;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--color_grey01);
}

.company-list__item figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.company-block.js-inview.is-show .company-list__item:nth-of-type(1) figure img {
	animation: zoomIn 1s 0.2s ease forwards;
}
.company-block.js-inview.is-show .company-list__item:nth-of-type(2) figure img {
	animation: zoomIn 1s 0.3s ease forwards;
}
.company-block.js-inview.is-show .company-list__item:nth-of-type(3) figure img {
	animation: zoomIn 1s 0.4s ease forwards;
}
.company-block.js-inview.is-show .company-list__item:nth-of-type(4) figure img {
	animation: zoomIn 1s 0.5s ease forwards;
}
.company-block.js-inview.is-show .company-list__item:nth-of-type(5) figure img {
	animation: zoomIn 1s 0.6s ease forwards;
}
.company-block.js-inview.is-show .company-list__item:nth-of-type(6) figure img {
	animation: zoomIn 1s 0.7s ease forwards;
}
@keyframes zoomIn {
	from {
	  opacity: 0;
	  transform: scale(0.9);
	}

	50% {
		opacity: 0;
		transform: scale(0.9);
	}

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

.company-list__text {
	text-align: center;
	line-height: 1.6;
}

/* strength-block --------------- */

.strength-block.wrapper {
	padding-block: min(8.4vw, 120px);
	position: relative;
	border-radius: 0;
	padding-top: 0;
	margin-top: var(--space9);
	margin-bottom: 0;
}

.strength-block.wrapper::before {
	content: "";
	position: absolute;
	top: -10.85vw;
	left: 0;
	width: 100%;
	height: 10.9vw;
	background: url(../img/top/bg_round.svg) no-repeat left bottom / contain;
}

.strength-block .sub-text {
	width: min(61vw, 554px);
}


/* construction-block --------------- */

.construction-block.wrapper {
	padding-block: min(8.4vw, 120px);
	margin: 0;
	overflow: hidden;
}

.construction-inner__circle-bg {
	position: relative;
}

.construction-list::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	z-index: 1;
	width: 100vw;
	height: 4.63vw;
	background: url(../img/top/bg_round_white02.svg) no-repeat left bottom / cover;
}

.construction-block .cont-ttl {
	display: flex;
	justify-content: center;
}

.construction-block .cont-ttl .sub-text {
	position: relative;
}

.construction-block .cont-ttl .sub-text:first-of-type::after {
	content: "";
	position: absolute;
	display: block;
	width: 2em;
	height: 1.5em;
	right: -2em;
	top: -0.5em;
	background: url(../img/top/deco_star.svg) no-repeat right top / contain;
	z-index: -1;
}

.construction-list {
	margin-inline: calc(50% - 50vw);
	display: flex;
	position: relative;
	top: 0
}

.construction-list__link {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	aspect-ratio: 2/3;
}

.construction-list__item {
	width: 100%;
	height: 100%;
}

.construction-list__figure {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.construction-list__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: grayscale(0) brightness(1);
	transform: scale(1.05);
	transition: var(--transition_primary);
}
.construction-list__link:hover .construction-list__figure img {
	filter: grayscale(1) brightness(0.8);
	transform: scale(1);
}

/* .construction-list__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space1);
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
} */

.construction-list__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space1);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	}

/* 丸の中に「矢印」を入れる */
.circle-arrow {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1em;
	height: 1em;
	padding: 1.5em;
	border: 2px solid var(--color_white);
	border-radius: 50%;
	overflow: hidden;
}
.circle-arrow .arrow {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	transition: var(--transition_primary);
}

.construction-list__item .circle-arrow .arrow:nth-of-type(1) {
	transform: translate(-50%, -50%);
}
.construction-list__item .circle-arrow .arrow:nth-of-type(2) {
	transform: translate(-150%, -50%);
}

.construction-list__item:hover .circle-arrow .arrow:nth-of-type(1) {
	transform: translate(150%, -50%);
}
.construction-list__item:hover .circle-arrow .arrow:nth-of-type(2) {
	transform: translate(-50%, -50%);
}

.circle-arrow .arrow svg .cls-1,
.circle-arrow .arrow svg .cls-2 {
	fill: none;
	stroke: #fff;
	stroke-width: 2px;
}

.circle-arrow .arrow svg .cls-1 {
	stroke-linecap: square;
	stroke-dasharray: 1 0;
}

/* 施工実績 works-block --------------- */

.works-block.wrapper {
	margin-top: 0;
	padding-bottom: 11vw;
}

.works-block.wrapper::after {
	/* position: absolute;
	height: 10.85vw;
	height: 16vw;
	bottom: -15.5vw; */
	display: none;
}

.works-swiper {
	overflow: hidden;
	padding-top: var(--space4);
	margin-right: calc(50% - 50vw);
	position: relative;
}

.works-link {
	display: block;
	width: 100%;
}

.works-category {
	display: inline-block;
	color: var(--color_white);
	background-color: var(--color01);
	padding: 0 0.2em;
}

.swiper-button-next,
.swiper-button-prev {
	width: 2em;
	height: 2em;
	top: 50%;
	opacity: 0;
}

.works-swiper:hover .swiper-button-next,
.works-swiper:hover .swiper-button-prev {
	opacity: 1;
}

/* 遮熱の豆知識 blog-block --------------- */

.blog-block.wrapper {
	padding-block: min(8.4vw, 120px);
	position: relative;
	border-radius: 0;
	padding-top: 0;
	margin-top: var(--space9);
	margin-bottom: 0;
}

.blog-block.wrapper::before {
	content: "";
	position: absolute;
	top: -10.8vw;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 10.87vw;
	background: url(../img/top/bg_round_white01.svg) no-repeat center bottom / cover;
	/* padding-inline: var(--size1); */
}

.blog-block.wrapper .container {
	margin-inline: auto;
}

.blog-list {
	display: flex;
	gap: var(--space4); /* スキマ調整 */
	justify-content: center;
	flex-wrap: wrap;
  }
  .blog-item {
	max-width: calc((100% - var(--space4) * 2) / 3);
	background: #fff;
	display: flex;
	flex-direction: column;
  }
  .blog-category {
	font-size: 0.9em;
	color: var(--color_white);
	background-color: var(--color01);
	padding: 0.2em 0.7em;
  }
  .blog-date {
	font-size: 0.9em;
	text-align: right;
  }

  .blog-content {
	display: flex;
	justify-content: space-between;
	gap: 1em;
  }



/* メディアクエリ start --------------- */

@media screen and (max-width: 1050px) {
	.point-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.point-list__item:nth-child(3)::before {
		display: none;
	}

	.point-list__item:nth-child(3)::after,
	.point-list__item:nth-child(4)::after {
		content: "";
		position: absolute;
		display: block;
		height: clamp(3px, 0.5vw, 6px);
		width: calc(100% - 2em);
		top: 0;
		left: 1em;
		right: 1em;
		/* 破線を作る */
		background: url(../img/top/round-line-horizontal.svg) repeat-x left center / contain;
		z-index: 2;
	}
}


/* スマートフォン用 */
@media screen and (max-width: 768px) {
	#mv-block .swiper-wrapper::before {
		top: calc(var(--header_height) * 0.5);
	}

	#mv-block .swiper-wrapper::after {
		width: 54vw;
		height: 32vw;
	}

	.blog-list {
		gap: 24px;
	}

	#mv-block .swiper-wrapper .slide-img img {
		object-position: 60% 50%;
	}

	.blog-list {
		flex-direction: column;
		align-items: center;
	}

	.blog-item {
		max-width: calc((100% - var(--space4)) / 2);
	}

}

@media screen and (max-width: 480px) {
	#mv-block .mv__title .mv__sub {
		width: 100%;
		/* height: 54px; */
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	#mv-block .swiper-wrapper::after {
		right: 30px;
		bottom: 40px;
	}

	#mv-block .mv__comment {
		bottom: 10px;
		left: revert;
		right: 10px;
	}
	.point-list__text span {
		font-size: 15px;
	}

	.point-list__item {
		padding: 1.5em 1em 1em;
	}

	.declaration-block .cont-ttl--jp .fs36 {
		font-size: 16px;
	}

	.promo-block .small-text.fs36 {
		font-size: 16px;
	}

	.strength-block .sub-text {
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}

	.strength-block .link-btn__unit.align-right {
		justify-content: center;
	}

	.sp-small-text {
		font-size: 16px;
	}

	.construction-list__text .fs24 {
		font-size: 14px;
		line-height: 1.4;
		white-space: nowrap;
	}

	.construction-list__item .circle-arrow {
		padding: 1.1em;
	}

	.blog-item {
		max-width: 100%;
	}

	.fs24.letter-sp_s.fw_bold.lh15.mb02 {
		font-size: 20px;
	}

}