@charset 'utf-8';

/*---------------------------------------------------------------------- */
/* Top Styles
------------------------------------------------------------------------ */

/* Utilities
---------------------------------------------------------- */

/* Section --------------------------------- */

.section {
	margin: 5rem 0;
}

.section-header {
	display: flex;
	flex-flow: column;
	gap: 1.5rem 0;
}

.section-header > .title {
	line-height: 1.6;
	color: var(--main-color);
	font-weight: 300;
	font-size: 3rem;
	text-transform: uppercase;
	letter-spacing: 0;
}

.section-header > .lead {
	line-height: 1.5;
	color: var(--hilight-color);
	font-weight: 700;
	font-size: 1.6rem;
}

.section-header > .txt {
	margin-top: .5rem;
	line-height: 1.8;
}

.section-header > .more > .btn {
	margin-top: 0;
}

.section-content {
	margin-top: 4.5rem;
}

/* Other --------------------------------- */

/* .index */

.index {
	display: flex;
	flex-flow: column;
	gap: 4rem 0;
}

.index > li {
	display: flex;
	flex-flow: column;
}

.index > li > .title {
	margin-top: 2rem;
	line-height: 1.7;
	font-size: 1.4rem;
	letter-spacing: .02em;
}

.index > li > .txt {
	margin-top: 1rem;
}

.index > li > .img {
	order: -1;
	clip-path: inset(0 0 round 1rem);
}


/* Layout
---------------------------------------------------------- */

/* #main --------------------------------- */

#main {
	margin-top: 0;
}

/* #main-header */

#main-header {
	position: relative;
	padding: 0 0 8rem 0;
	height: 40rem;
}

#main-header > .copy {
	display: flex;
	flex-flow: column;
	position: absolute;
	top: 10rem;
	left: 3rem;
	z-index: 1;
	font-weight: 700;
}

#main-header > .copy > .txt01 {
	line-height: 1.08;
	color: #d8d8d8;
	font-family: 'Afacad Flux', sans-serif;
	font-size: 3.7rem;
	letter-spacing: 0;
}

#main-header > .copy > .txt01 > .initial {
	color: #fff;
	font-family: inherit;
}

#main-header > .copy > .txt02 {
	margin-top: 2rem;
	line-height: 1.6;
	color: #fff;
	font-size: 1rem;
	letter-spacing: .05em;
}

#main-header > .slide {
	position: relative;
	z-index: -1;
	margin: 0;
	width: 100%;
	height: 100%;
}

#main-header > .slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 0;
}

@keyframes zoomIn {
	0% { transform: scale(1); }
	100% { transform: scale(1.1); }
}

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

#main-header > .badge {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 10.5rem;
}

#main-header > .scroll {
	position: absolute;
	bottom: 9.2rem;
	right: 2rem;
	line-height: 1;
	color: #fff;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

#main-header > .scroll::before,
#main-header > .scroll::after {
	position: absolute;
	right: 0;
	border-left: .1rem solid #fff;
	content: '';
}

#main-header > .scroll::before {
	top: -2rem;
	height: .8rem;
	transform: rotateZ(-45deg);
	transform-origin: 0 100%;
}

#main-header > .scroll::after {
	top: -4.2rem;
	height: 3rem;
}

#main-header > :is(.slide, .copy, .badge) {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 1.5s var(--ease-out-cubic), transform 1.5s var(--ease-out-cubic);
}

#main-header > .slide {
	transition: opacity 1.5s var(--ease-out-cubic), transform 1.5s var(--ease-out-cubic);
}

#main-header > .copy {
	transition: opacity 1.5s var(--ease-out-cubic) 1s, transform 1.5s var(--ease-out-cubic) 1s;
}

#main-header > .badge {
	transition: opacity 1.5s var(--ease-out-cubic) 2s, transform 1.5s var(--ease-out-cubic) 2s;
}

.loaded #main-header > :is(.slide, .copy, .badge) {
	opacity: 1;
	transform: translateY(0);
}

/* #main-content */

#main-content {
	margin-top: 0;
	padding-bottom: 0;
}

/* #section-weare */

#section-weare {
	margin: 4.5rem 0 6.5rem;
}

/* #section-renewal */

#section-renewal .section-header {
	position: relative;
}

#section-renewal .section-header > .title {
	margin: 2rem 0 0 2rem;
	line-height: 1.2;
	color: #fff;
}

#section-renewal .section-header > .lead {
	margin-top: 8.5rem;
}

#section-renewal .section-header > .img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	clip-path: inset(0 0 round .5rem);
}

/* #section-solution */

#section-solution {
	margin-left: -2rem;
	margin-right: -2rem;
	padding: 3.5rem 2rem;
	background: var(--bg-color01);
}

/* #section-recruit */

#section-recruit .section-header {
	gap: 2rem;
}

#section-recruit .section-header > .title {
	order: 0;
}

#section-recruit .section-header > .lead {
	order: 2;
	margin-top: 2rem;
}

#section-recruit .section-header > .txt {
	order: 4;
	margin-top: .5rem;
}

#section-recruit .section-header > .img {
	order: 1;
	margin-top: 1rem;
}

#section-recruit .section-header > .more {
	order: 5;
}

#section-recruit .section-header > .more > .btn {
	margin-top: 1rem;
}

/* #section-news */

#section-news {
	margin-bottom: 6rem;
}

#section-news .section-content {
	margin-top: 2.5rem;
}

#section-news .section-content > .more > .btn {
	margin-top: 3rem;
}





/*---------------------------------------------------------------------- */
/* 768px Tablet & PC Styles
------------------------------------------------------------------------ */

@media screen and (min-width: 768px), print {

/* Utilities
---------------------------------------------------------- */

/* Section --------------------------------- */

.section {
	margin: 10rem 0 15rem;
	padding: 0 9.4rem;
}

.section-header {
	gap: 0;
}

.section-header > .title {
	line-height: 1.2;
	font-weight: 300;
	font-size: 10rem;
}

.section-header > .lead {
	line-height: 1.65;
	font-weight: 700;
	font-size: 4rem;
	letter-spacing: .02em;
}

/* Other --------------------------------- */

/* .index */

.index {
	display: flex;
	flex-flow: row;
	gap: 0 2.3rem;
}

.index > li {
	width: calc(100% / 3);
}

.index > li > *:not(.img) {
	margin: 0 3rem;
}

.index > li > .title {
	margin-top: 4.5rem;
	line-height: 1.85;
	font-size: 2.6rem;
}

.index > li > .txt {
	margin-top: 1.5rem;
	padding-right: 4rem;
}

.index > li > .more > .btn {
	margin-top: 1.5rem;
}

/* Layout
---------------------------------------------------------- */

/* #main --------------------------------- */

/* #main-header */

#main-header {
	display: flex;
	flex-flow: column;
	padding: 0;
	width: 100%;
	min-height: 75rem;
	height: 100dvh;
	color: #fff;
}

#main-header > .copy {
	justify-content: center;
	left: 15.8rem;
	margin-top: -6rem;
	height: 100%;
}

#main-header > .copy > .txt01 {
	line-height: .97;
	font-size: 18rem;
}

#main-header > .copy > .txt02 {
	margin-top: 6.8rem;
	padding-left: 1rem;
	font-size: 3rem;
}

#main-header > .slide img {
	object-position: 50% 0;
}

#main-header > .badge {
	left: auto;
	right: 12rem;
	bottom: 12rem;
	margin-top: 0;
	width: 31.2rem;
	height: 39rem;
}

#main-header > .scroll {
	bottom: 4.2rem;
	right: 5.2rem;
	font-size: 1.8rem;
}

#main-header > .scroll::before {
	top: -3.5rem;
	height: 1.6rem;
}

#main-header > .scroll::after {
	top: -9.5rem;
	height: 7.5rem;
}

/* #main-content */

#main-content {
	padding: 0 2.6rem;
}

/* #section-weare */

#section-weare {
	margin: 10rem 0 15rem;
}

#section-weare .section-header {
	display: grid;
	grid-template-areas:
		'title lead'
		'title txt'
		'title more';
	grid-template-columns: 55.7rem auto;
}

#section-weare .section-header > .title {
	grid-area: title;
}

#section-weare .section-header > .lead {
	grid-area: lead;
	margin-top: 7.5rem;
}

#section-weare .section-header > .txt {
	grid-area: txt;
	margin-top: 3.5rem;
}

#section-weare .section-header > .more {
	grid-area: more;
	margin-top: 6rem;
}

/* #section-renewal */

#section-renewal {
	padding: 0;
}

#section-renewal .section-header {
	padding: 8.8rem 9.4rem 10.5rem;
	height: 96.6rem;
}

#section-renewal .section-header > .title {
	margin: 0;
}

#section-renewal .section-header > .lead {
	margin-top: 14.5rem;
	color: #fff;
}

#section-renewal .section-header > .txt {
	margin-top: 6.5rem;
	color: #fff;
}

#section-renewal .section-header > .more {
	margin-top: 5.5rem;
}

#section-renewal .section-content {
	margin-top: 2rem;
}

/* #section-solution */

#section-solution {
	margin: 0 -2.6rem;
	padding: 12.5rem 2.6rem 14rem;
}

#section-solution .section-header {
	display: grid;
	grid-template-columns: 57rem auto;
	padding: 0 9rem 0 9.4rem;
}

#section-solution .section-header > .txt {
	margin-top: 10.5rem;
}

#section-solution .section-content {
	margin-top: 5rem;
}

/* #section-recruit */

#section-recruit {
	margin: 12.5rem 0 18rem;
	padding-left: 0;
}

#section-recruit .section-header {
	display: grid;
	grid-template-areas:
		'img title'
		'img lead'
		'img txt'
		'img more';
	grid-template-columns: 67.7rem auto;
	grid-template-rows: auto auto auto 1fr;
	gap: 0 10.7rem;
}

#section-recruit .section-header > .title {
	grid-area: title;
	margin: -1rem 0 0 auto;
}

#section-recruit .section-header > .lead {
	grid-area: lead;
	margin-top: 17.5rem;
}

#section-recruit .section-header > .txt {
	grid-area: txt;
	margin-top: 4rem;
}

#section-recruit .section-header > .img {
	grid-area: img;
	margin-top: 0;
}

#section-recruit .section-header > .more {
	grid-area: more;
}

#section-recruit .section-header > .more > .btn {
	margin-top: 5rem;
}

/* #section-news */

#section-news {
	margin: 18rem 0 15rem 0;
}

#section-news .section-content {
	position: relative;
	margin-top: 2.5rem;
	padding-left: 34.5rem;
}

#section-news .section-content > .more {
	position: absolute;
	bottom: 0;
	left: 0;
}

}



/*---------------------------------------------------------------------- */
/* Print Styles
------------------------------------------------------------------------ */

@media print {

	#main-header {
		height: 100%;
	}

	#section-renewal .section-header {
		background: url(/wp/wp-content/themes/techno2026/images/top/img-renewal01.webp) no-repeat left top;
		background-size: 100%;
	}

	#section-renewal .section-header > .img {
		display: none;
	}

}