@charset "UTF-8";


@media all {
	:root {
		--fv-duration: 21.02s;
		--fv-delay-1: -.75s;
		--fv-delay-2: 6.25s;
		--fv-delay-3: 13.25s;
	}

	.main-section-ttl {
		padding-left: .5em;
		border-left: 4rem solid var(--main-color);
		line-height: 1.429;
	}
	.tate {writing-mode: vertical-rl;}
	.inner-section-ttl {
		position: relative;
		z-index: 10;
		font-weight: 600;
		line-height: 1.6;
	}
	.inner-section-ttl + .inner-section-content {
		margin-top: 2em;
	}
	.inner-section-content {
		position: relative;
		z-index: 10;
	}
	.inner-section-content p {
		line-height: 2.667;
		font-feature-settings: "palt";
		text-align: justify;
	}
	.content-notice {
		margin-top: 2em;
		color: var(--main-color);
	}

	/* sp & tab*/
	@media (max-width: 1024px) {
		.site-header-logo img {
			filter: drop-shadow(0 0 3rem #fff);
			transition: filter .3s;
		}
		.nav-active .site-header-logo img {
			filter: drop-shadow(0 0 0 #fff);
		}

		/* sp */
		@media only screen and (max-width: 767px) {
			.main-section-ttl {font-size: 14rem;}
			.inner-section + .inner-section {margin-top: 60rem;}
			.inner-section-ttl {font-size: 26rem;}
			.inner-section-content p {font-size: 15rem; line-height: 2.133;}
			.inner-section-content .content-notice {
				margin-top: 1;
				font-size: 11rem;
			}
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.main-section-ttl {font-size: 14rem;}
		.inner-section-ttl {font-size: 30rem;}
		.content-notice {font-size: 11rem;}

		@media (max-width: 1024px) {
			.main-section-inner {
				margin: 0 auto;
				padding: 0 20rem;
				width: calc(100% - 40rem);
				max-width: 900rem;
			}
			
		}
	}
}

/* .main-visual */
@media all {
	.main-visual {position: relative;}


	.main-visual-video {
		position: absolute;
		top: 0;
		height: 100%;
		background-color: #f6f6f6;
	}
	.mv-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: left top;
	}

	.main-visual-ttl {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		row-gap: 24rem;
		font-family: var(--serif);
		font-weight: 600;
		color: var(--main-color);
	}

	.mv-ttl-label {
		display: inline-block;
		padding: .3em .4em;
		background-color: #fff;
		line-height: 1;
	}

	.mv-ttl-large {
		background: center / contain no-repeat url(../img/home/kakko.svg);
		margin: 0 .25em;
	}

	.mv-ttl-txt-slide {
		position: relative;
		display: inline-block;
		width: 3.25em;
		height: 1em;
	}

	.mv-ttl-txt-slide-item {
		position: absolute;
		left: .5em;
		opacity: 0;
		display: block;
		width: 2.5em;
		width: 2.84625em;
		height: 100%;
		line-height: 1;
	}
	.video_start .mv-ttl-txt-slide-item {
		animation: textslide var(--fv-duration) ease var(--fv-delay-1) infinite;
	}
	.video_start .mv-ttl-txt-swipe-item {
		animation: textswipe var(--fv-duration) ease var(--fv-delay-1) infinite;
	}
	.video_start .mv-ttl-txt-slide-item:nth-child(2),
	.video_start .mv-ttl-txt-swipe-item:nth-child(2) {
		animation-delay: var(--fv-delay-2);
	}
	.video_start .mv-ttl-txt-slide-item:nth-child(3),
	.video_start .mv-ttl-txt-swipe-item:nth-child(3) {
		animation-delay: var(--fv-delay-3);
	}
	@keyframes textslide {
		0% {top: 60%; opacity: 0;}
		5% {top: 60%; opacity: 0;}
		10% {top: 0%; opacity: 1;}
		31% {top: 0%; opacity: 1;}
		38% {opacity: 0;}
		39% {top: -70%;opacity: 0;}
	}

	.mv-ttl-label.a-center {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: .275em .4em;
	}
	.mv-ttl-txt-swipe {
		position: relative;
		display: inline-block;
		margin-left: .5em;
		width: 6.0em;
		height: 1em;
	}
	.mv-ttl-txt-swipe-item {
		position: absolute;
		left: 0;
		display: block;
		width: 0%;
		height: 100%;
		overflow: hidden;
		white-space: nowrap;
		letter-spacing: 0.025em;
		transition: width .5s;
	}
	.mv-ttl-txt-swipe-item .narrow {
		display: inline-block;
		margin-left: -.175em;
		letter-spacing: -.05em;
		transform: scaleX(.875);
	}
	.mv-ttl-txt-swipe-item .shi {
		display: inline-block;
		margin-left: -.125em;
	}
	@keyframes textswipe {
		0% {width: 0%;}
		8% {width: 0%;}
		15% {width: 100%;}
		30% {width: 100%;}
		38% {width: 0%;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.main-visual {
			width: 100%;
			height: 740rem;
		}
		.main-visual-video {
			width: 1208rem;
			left: max(calc(50% - 408rem), 232rem);
		}
		.main-visual-ttl {
			left: calc(50% - 531rem);
			left: 109rem;
			top: 287rem;
			left: 109rem;
			font-size: 36rem;
		}

		.mv-ttl-large {
			font-size: 65rem;
		}
		
		/* pc */
		@media (min-width: 1025px) {
			#home .site-header {
				top: -90rem;
				transition: .5s;
			}
	
			#home .site-header.active {
				top: 0rem;
			}
	
			.main-visual-logo-nav {
				position: absolute;
				z-index: 10;
				top: 0;
				left: 0;
				margin: 0 auto;
				width: 100%;
				height: 80rem;
			}
			.main-visual-logo {
				position: absolute;
				top: 16rem;
				left: 40rem;
			}
	
			.main-visual-logo img {
				width: 152rem;
			}
	
			.main-visual-nav {
				position: absolute;
				top: 17.5rem;
				right: 40rem;
				width: 760rem;
				height: 45rem;
				font-size: 14rem;
			}
			.main-visual-nav .site-header-nav-item:not(.contact) > a {
				color: #fff;
				text-shadow: 0 3rem 5rem rgba(0,0,0,.4);
			}
			.main-visual-nav .site-header-nav-item:not(.contact) > a::after {background-color: #fff;}

		}
		/* tab */
		@media (max-width: 1024px) {
			.main-visual {height: 640rem;}
			.mv-video {object-fit: contain;}
		}
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.main-visual {
			width: 100%;
			height: calc(100vh - 120rem);
			transition: height .05s;
		}
		.main-visual-video {
			left: 0;
			width: 100vw;
		}
		.main-visual-ttl {
			display: none;
			bottom: 120rem;
			left: 0rem;
			row-gap: 15rem;
			font-size: 25rem;
		}
		.mv-ttl-txt-slide-item {left: .375em;}
		.mv-ttl-large {
			font-size: 43rem;
		}
		.mv-ttl-label {
			font-weight: 500;
			letter-spacing: -.1em;
		}

	}
}

/* scrolldown */
@media all {
	.scroll {
		position: absolute;
		writing-mode: vertical-rl;
		text-align: right;
		font-family: var(--serif);
		font-weight: 600;
		font-size: 10rem;
		color: var(--main-color);
		letter-spacing: .2em;
	}
	.scroll span {
		display: inline-block;
		padding-right: .5em;
		scale: .9;
		transform-origin: left bottom;
	}
	.scrolldown {
		width: 2rem;
		height: 110rem;
		position: relative;
		background: transparent;
		animation: scrollDown5 1.5s ease infinite;
		border-radius: 100%;
		margin: 0 auto;
	}

	.scrolldown::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(var(--main-color-0), var(--main-color), var(--main-color-0));
	}

	@keyframes scrollDown5 {
		0% {
			transform-origin: top;
			transform: scaleY(0);
		}

		45% {
			transform-origin: top;
			transform: scaleY(1);
		}

		55% {
			transform-origin: bottom;
			transform: scaleY(1);
		}

		100% {
			transform-origin: bottom;
			transform: scaleY(0);
		}
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.scroll {
			bottom: 0rem;
			left: 8rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.scroll {
			bottom: 0;
			left: calc(50% - 547rem);
			left: 98rem;
		}
	}
}


/* news */
@media all {
	.news-section-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		background-color: #fff;
	}
	.news-section-ttl {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		text-align: center;
	}

	.news-item {line-height: 1;}
	.news-item + .news-item {margin-top: 14rem;}
	.news-item a {
		display: inline-flex;
		align-items: center;
		max-width: 100%;
	}
	.news-date,
	.news-cat {color: var(--main-color);}
	.news-date {
		margin-right: .75em;
		padding-right: .75em;
		border-right: var(--max1px) solid var(--main-color);
		line-height: 1;
	}
	.news-cat {
		margin-right: .75em;
		min-width: 6.5em;
	}
	.news-ttl {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.news-button {flex-shrink: 0;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.main-section {
			margin-top: 80rem;
			padding: 0 16rem;
		}

		.news-section {
			margin-top: 50rem;
		}
		.news-section-inner {
			position: relative;
			padding: 16rem 12rem 16rem 0;
			width: 100%;
			box-shadow: 0 2rem 8rem rgba(0,0,0,.1);
		}
		.news-list {
			padding-left: 49rem;
			width: 100%;
		}
		.news-item a {
			flex-wrap: wrap;
		}
		.news-date,
		.news-cat {font-size: 11rem;}
		.news-ttl {
			margin-top: .25em;
			width: 100%;
			font-size: 13rem;
		}
		.news-button {display: none;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.news-section {height: 116rem;width: 100%;}
		.news-section-inner {
			position: absolute;
			z-index: 1;
			top: -20rem;
			right: max(80rem, 6.25vw);
			width: calc(100% - 160rem);
			max-width: 810rem;
			box-shadow: 0 3rem 10rem rgba(0,0,0,.1);
		}

		.news-list {
			padding-left: 59rem;
			width: calc(100% - 170rem);
		}
		.news-date,
		.news-cat {font-size: 12rem;}
		.news-ttl {font-size: 14rem;}
		
		.news-button {margin: 0 50rem;}

		/* tab */
		@media (max-width: 1024px) {
			.news-section-inner {
				right: 20rem;
				width: calc(100% - 292rem);
			}
			.news-list {width: calc(100% - 120rem);}
			.news-button {margin: 0 25rem;}
		}
	}
}

/* intro-section */
@media all {
	.quality-video {width: 100%;}
	.quality-img-notice {
		font-size: 11rem;
		font-weight: 100;
		color: #9baea7;
		text-align: center;
	}
	.viewmore {position: relative;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.main-section-header + .inner-section {
			margin-top: 25rem;
		}
		.introduction-viewmore,
		.comparison-viewmore,
		.consider-viewmore,
		.design-viewmore {
			position: relative;
			margin: 0 auto;
			padding-top: 100rem;
			width: 160rem;
		}
		.nowind-img {
			margin: 20rem auto 0;
			width: 75%;
		}
		.healthy-img,
		.newsystem-img,
		.plan-img {
			margin-top: 20rem;
			width: 75%;
		}
		.newsystem-img {margin-left: auto;}
		.introduction-viewmore img,
		.comparison-viewmore img,
		.consider-viewmore-img img {
			position: absolute;
			top: -40rem;
			right: -110rem;
			width: 100%;
		}
		.comparison-viewmore img {
			right: auto;
			left: -110rem;
		}

		.healthy-img {margin-top: 120rem;}
		.introduction-viewmore .button {
			transform: translateY(-360rem);
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.intro-section {
			margin-top: 240rem;
		}
		.intro-section-inner {
			margin: 0 auto;
			width: 100%;
			max-width: 1040rem;
		}

		.quality-section {
			margin-top: 25rem;
		}
		.quality-img {
			position: absolute;
			z-index: 1;
			top: -240rem;
			left: 49%;
			width: 66%;
			max-width: 660rem;
			aspect-ratio: 1;
		}
		.quality-img-notice {margin-top: -30rem;}

		/* tab */
		@media (max-width: 1024px) {
			.intro-section {margin-top: 100rem;}
			.quality-img {
				top: -120rem;
				left: auto;
				right: -100rem;
				width: 500rem;
			}
			.inner-section-ttl,
			.inner-section-content p {text-shadow: 0 0 2rem #fff;}
		}

		.nowind-section {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			margin: 160rem auto 0;
			width: 100%;
			max-width: 1040rem;
		}
		.healthy-section {margin-top: 80rem;}
		.nowind-ttl,
		.nowind-content,
		.healthy-ttl,
		.healthy-content {width: 540rem;}
		.nowind-img {
			position: absolute;
			z-index: 1;
			top: -70rem;
			left: -260rem;
			width: 630rem;
		}
		.healthy-img {
			position: absolute;
			z-index: 1;
			top: -40rem;
			left: calc(50% + 160rem);
			width: 340rem;
		}

		/* tab */
		@media (max-width: 1024px) {
			.nowind-section {margin-top: 180rem;}
			.nowind-ttl,
			.nowind-content {
				width: 430rem;
			}
			.nowind-img {
				overflow: hidden;
				top: -40rem;
				left: calc(50% - 650rem);
				left: -20rem;
				width: calc(90% - 380rem);
				height: 380rem;
			}
			.nowind-img img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: -140rem top;
			}
		}

		.introduction-viewmore {
			position: relative;
			display: flex;
			justify-content: center;
			padding: 60rem 100rem 0 20rem;
		}
		.introduction-viewmore-img {
			position: absolute;
			z-index: 1;
			top: -200rem;
			left: calc(50% + 390rem);
			width: 210rem;
		}
		/* tab */
		@media (max-width: 1024px) {
			.healthy-content {max-width: 65%;}
			.introduction-viewmore-img {
				left: auto;
				right: -20rem;
			}
		}
	}
}

/* comparison-section */
@media all {

	/* sp */
	@media only screen and (max-width: 767px) {
		.comparison-section-inner {
			padding-bottom: 80rem;
		}
		.newsystem-img {margin-top: 120rem;}
		.comparison-viewmore .button {transform: translateY(-350rem);}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.comparison-section {margin-top: 240rem!important;}
		.comparison-section-inner {
			margin: 0 auto;
			padding: 0 20rem 80rem;
			width: 100%;
			max-width: 1040rem;
		}

		.newsystem-section {
			margin-top: 25rem;
		}
		.newsystem-img {
			position: absolute;
			top: -170rem;
			right: -240rem;
			width: 630rem;
		}

		.comparison-viewmore {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin: 0 auto;
			width: 100%;
		}
		.comparison-viewmore-img {
			margin-left: 120rem;
			width: 340rem;
		}

		/* tab */
		@media (max-width: 1024px) {
			.comparison-section-inner {
				padding-left: 50rem;
			}
			.newsystem-img {
				position: absolute;
				top: -50rem;
				right: -30rem;
				width: calc(100% - 350rem);
				height: 400rem;
			}
			.newsystem-img img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: right -80rem top 0rem;
			}
			.comparison-viewmore {
				justify-content: flex-start;
				padding-left: 150rem;
				min-width: 780rem;
			}
		}
	}
}

/* design-section */
@media all {
	.design-viewmore a {margin-left: auto;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.design-viewmore {padding-top: 30rem;}
		.plan-img {margin-top: 100rem;}
		.consider-viewmore .button {transform: translateY(-360rem);}

		.carousel {
			margin-top: 65rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.design-images {margin-top: 100rem;}
		.design-section {
			margin: 100rem auto 0;
			padding: 0 20rem;
			max-width: 840rem;
		}
		.simple-section {
			margin-top: 25rem;
			display: flex;
			justify-content: space-between;
		}
		.simple-ttl {flex-shrink: 1;}
		.inner-section-ttl + .simple-content {margin-top: 0;}

		.design-viewmore {margin-top: 40rem;}


		.carousel {
			margin-top: 65rem;
		}

		/* tab */
		@media (max-width: 1024px) {
			.simple-ttl {width: 400rem;}
		}
	}
}

/* comparison-section */
@media all {
	.carousel {
		position: relative;
		z-index: 1;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.consider-section {
			margin-top: 50rem;
			padding: 40rem 16rem 90rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.consider-section {
			margin-top: 80rem;
			padding: 120rem 0 180rem;
		}
		.consider-section-inner {
			margin: 0 auto;
			padding: 0 20rem 0;
			width: 100%;
			max-width: 1040rem;
		}

		.plan-section {
			margin-top: 25rem;
		}
		.plan-img {
			position: absolute;
			top: -80rem;
			right: -280rem;
			width: 560rem;
		}

		.consider-viewmore {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin: -80rem auto 0;
			width: 100%;
		}
		.consider-viewmore-button {margin-top: 70rem;}
		.consider-viewmore-img {
			margin-left: 80rem;
			margin-right: 40rem;
			width: 340rem;
		}

		/* tab */
		@media (max-width: 1024px) {
			.consider-section-inner {
				padding-left: 50rem;
			}
			.plan-img {
				position: absolute;
				top: 30rem;
				right: -50rem;
				width: calc(100% - 350rem);
				height: 380rem;
			}
			.plan-img img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: right -80rem top 0rem;
			}
			.consider-viewmore {
				justify-content: flex-start;
				padding-left: 240rem;
				min-width: 780rem;
			}
			.consider-viewmore-img {
				margin-left: 60rem;
				margin-right: 0;
				width: 300rem;
			}
		}
	}
}

/* bg-gradient */
@media all {

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.before-gradient {margin-top: 150rem;}
		.after-gradient {margin-bottom: 150rem;}
		.before-gradient::before,
		.after-gradient::after {
			height: 150rem;
		}
	}
}



/* template-section */
@media all {
	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}