@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&family=Noto+Serif+JP:wght@300;400&display=swap');



.brandTitle1{
	margin: 0;
	padding: 0;
	font-size: 2em;
	line-height: 1em;
}


.brandNote1{
	font-size: 1.125em;
	line-height: 2em;
}



.brandHeader{
	padding-top: 2em;
	padding-bottom: 2em;
}




.hero{
	background: #F7F7F7;
	padding-block: 3.75rem;
}



/* new hero */
#mission-more:not(:checked) ~ .mission-more,
#mission-more:not(:checked) ~ .mission-toggle--off,
#mission-more:is(:checked) ~ .mission-toggle--on{
	display: none;
}
.mission-more{
	animation: g3-fadein 666ms ease;
}
.mission-toggle{
	text-align: center;
	color: #878686;
	
	display: flex;
	align-items: center;
	gap: .75em;
	
	width: fit-content;
	margin-inline: auto;
}
.mission-toggle::before{
	content: "";
	font-weight: bold;
	border: 3px solid;
	border-radius: 99em;
	display: grid;
	place-items: center;
	width: 2.15em;
	height: 2.15em;
}
* + .mission-toggle{
	margin-top: 2.875rem;
}
.mission-toggle--on::before{
	font-family: "Font Awesome 6 Free";
	content: "\f063";
}
.mission-toggle--off::before{
	font-family: "Font Awesome 6 Free";
	content: "\f062";
}
.big{
	font-size: 3em;
	font-weight: lighter;
}
@media (max-width: 768px){
	.big{
		font-size: 2.25em;
		font-weight: lighter;
	}
}

.hero-flowroot{
	display: flow-root;
}

.hero__mission{
	margin-block: 0;
}
* + .hero__mission{
	margin-top: 1.875rem;
}
* + .mission-more{
	margin-top: 1.875rem;
}
@media (min-width: 769px){
	.hero__mission:first-of-type{
		margin-top: 0;
	}
}



.movie_area{
	position: relative;
}
.movie_area video{
	width:100%;
}





.brandNotes{
	text-align: center;
	padding-top: 4em;
	padding-bottom: 4em;
}
.concept{}
.concept__title{
	font-size: 1.5em;
	font-weight: normal;
	text-align: center;
	
	display: grid;
	justify-items: center;
}
@media (max-width: 768px){
	.concept__logo{
		max-width: 70%;
	}
}



.mean{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
	gap: .875em;
}
@media (max-width: 768px){
	.mean{
		grid-template-columns: 1fr;
	}
}
.mean__section{
	text-align: center;
}
.mean__more:where(button){
	border: initial;
	padding: initial;
}
.mean__more{
	text-decoration: none;
	color: inherit;
	border-radius: .75em;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
	padding: 3em 1.5em;
}
.mean__section--natural .mean__more{
	background: #dfeeeb;
}
.mean__section--organic .mean__more{
	background: #e6eedf;
}
.mean__section--smart .mean__more{
	background: #eeebdf;
}
.mean__more > *{
	margin-block: 0;
}
.mean__more > * + *{
	margin-block-start: 2em !important;
}
.mean__title{
	font-size: 1em;
}
.mean__title-logo{
	height: 2em;
}
.mean__note{
	font-size: .875em;
}
.mean__photos:where(ul, ol){
	list-style: none;
	margin: 0;
	padding: 0;
}
.mean__photos{
	display: flex;
	justify-content: center;
	gap: .25em;
}
.mean__photo{}
.mean__trigger{
	cursor: pointer;
}
.mean__image{
	max-width: 100%;
	border-radius: .5em;
}

@media (max-width: 768px){
	.mean__photo{
		flex: 0 1 auto;
	}
}
.mean__more-button:where(button){
	background: initial;
	border: initial;
	padding: initial;
}
.mean__more-button{
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-block: auto !important;
}
.mean__more-button::before{
	content: "\f061";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	border: 2px solid;
	border-radius: 99em;
	width: 1.75em;
	height: 1.75em;
	display: grid;
	place-items: center;
}
html[lang="ja"] button.mean__more-button::before{
	font-family: "Font Awesome 6 Free" !important;
}

@media (min-width: 769px){
	.mean__more:is(:hover) .mean__note,
	.mean__more:is(:hover) .mean__photos,
	.mean__more:not(:hover) .mean__more-button{
		display: none;
	}
	.mean__more:hover{
		color: #fff;
	}
	.mean__section--natural .mean__more:hover{
		background: #7c9ea5;
	}
	.mean__section--organic .mean__more:hover{
		background: color-mix(in srgb, black 12%, #E6EEDF);
	}
	.mean__section--smart .mean__more:hover{
		background: color-mix(in srgb, black 12%, #EEEBDF);
	}
	.mean__more:hover .mean__title-logo{
		filter: invert(1);
	}
}
@media (max-width: 768px){
	.mean__more-button{
		display: none;
	}
}

.mean__modal{
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	color: #fff;
	background-color: rgba(0,0,0,.5);
	-webkit-backdrop-filter: blur(.25em);
	backdrop-filter: blur(.25em);

	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	
	opacity: 0;
	visibility: hidden;
	
	transition-property: visibility opacity;
	transition-duration: 186ms;
	transition-timing-function: ease-out;
}
.mean__modal.js-gallery--active{
	visibility: visible;
	opacity: 1;
}



.gallery{
	position: fixed;
	left: -200vw;
	width: 100vw;
}
.gallery:is(.js-gallery--active){
	position: static;
	left: auto;
	width: auto;
	animation: kf-fadein 186ms ease-out both;
}
.gallery__items:where(ul, ol){
	margin: 0;
	padding: 0;
	list-style: none;
}
.gallery__items{
	container-type: inline-size;
}
.gallery__item{
	box-sizing: border-box;
	border-radius: 1.875em;
	overflow: hidden;
	padding: 2.5em;
	
	display: grid;
	grid-template-areas: "header header" "content content";
	gap: 1rem;
}
.gallery__item--natural{
	background: color-mix(in srgb, transparent 10%, #7C9EA5);
}
.gallery__item--organic{
	/* background: color-mix(in srgb, transparent 10%, #E6EEDF); */
	background: color-mix(in srgb, black 12%, #E6EEDF);
}
.gallery__item--smart{
	/* background: color-mix(in srgb, transparent 10%, #EEEBDF); */
	background: color-mix(in srgb, black 12%, #EEEBDF);
}
@container (width < 769px){
	.gallery__figure{
		flex-flow: column;
	}
}
.gallery__close-button:where(button){
	border: initial;
	background: initial;
	padding: initial;
}
.gallery__close-button{
	line-height: 1;
	font-weight: bold;
	font-size: 2em;
	width: 1.25em;
	height: 1.25em;
	
	border: 3px solid;
	border-radius: 99em;
	
	grid-area: header;
	align-self: start;
	justify-self: end;
	z-index: 1;
}
.gallery__category{
	grid-area: header;
	text-align: center;
}
.gallery__category > *{
	filter: invert(1);
}
.gallery__category > img{
	display: revert !important;
}
.gallery__figure:where(ul, ol){
	margin: 0;
	padding: 0;
}
.gallery__figure{
	display: flex;
	align-items: center;
	gap: 1em 2em;
}
.gallery__image{
	flex: 0 1 auto;
	max-width: 50%;
	border-radius: .75em;
}
.gallery__caption{
	flex:  1 1 auto;
	font-size: 1.125em;
	line-height: 2em;
}

.gallery__caption a.g-link{
	display:block;
	border:1px solid #ffffff;
	color:#ffffff;
	border-radius:3px;
	text-decoration:none;
	font-size:0.75em;
	padding:2%;
	width:50%;
	text-align:center;
	margin-top: 1.5em;
}
@media (max-width: 768px){
	.gallery__caption a.g-link{
		width:80%;
		text-align:center;
	}
	.gallery__image{
		width: 100%;
		max-width: none;
	}
}

.gallery__caption a.g-link:hover{
	background:#ffffff;
	color:#666666;
}

.galleryPager{
	margin: 0;
	padding: 0;
	list-style: none;

	margin-top: 1em;

	display: flex;
	justify-content: center;

	margin-left: -1em;
}
.galleryPager__page{
	margin-left: 1em;
	flex: 0 1 auto;
}
.galleryPager__label{
	cursor: pointer;
	display: block;
}

.gallery_tab__object{
	display: block;
	pointer-events: none;
	width: 100px;
}

.mean__close:where(button){
	width: 100%;
}
.mean__close{
	cursor: default !important;
	position: absolute;
	z-index: -1;
	inset: 0;
	border: 0;
	
	color: #fff;
	background-color: transparent;
	
	display: grid;
	align-items: start;
	justify-items: end;
	padding: 1em;
}

.gallery .slick-arrow{
	cursor: pointer;

	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;

	color: #fff;
	border: 1px solid;
	border-top-color: transparent;
	border-left-color: transparent;
	background-color: transparent;

	width: 2em;
	height: 2em;
	overflow: hidden;
	text-indent: -999em;
}
.gallery .slick-prev{
	left: 1.75em;
	transform: rotate(135deg);
}
.gallery .slick-next{
	right: 1.75em;
	transform: rotate(-45deg);
}
.gallery .slick-track{
	display: flex;
	align-items: center;
}
.gallery .slick-slide{
	float: none;
}
.gallery .slick-dots{
	display: none !important;
}



.origin{
	padding-top: 4em;
	padding-bottom: 4em;
}
.origin__title{
	font-weight: normal;
	text-align: center;
	background:
		linear-gradient(currentcolor, currentcolor) no-repeat left top .5em / min(9em, 18vw) 1px,
		linear-gradient(currentcolor, currentcolor) no-repeat right bottom .5em / min(9em, 18vw) 1px,
		linear-gradient(currentcolor, currentcolor) no-repeat left min(3.25em, 3.25vw) top / 1px 2.5em,
		linear-gradient(currentcolor, currentcolor) no-repeat right min(3.25em, 3.25vw) bottom / 1px 2.5em;
	max-width: fit-content;
	margin-inline: auto;
	padding: 2em min(6.25em, 9.375vw);
}
.origin__note{
	font-size: 1.25em;
	line-height: 2em;
}



/* project */
.project{
	--bg1-color: #6CA9D4;
	--bg1-size: 20%;
	--bg1-offset-x: 35%;
	--bg1-offset-y: 35%;
	
	--bg2-color: #C8C53C;
	--bg2-size: 40%;
	--bg2-offset-x: 45%;
	--bg2-offset-y: 45%;
	
	background:
		radial-gradient(
			circle closest-side,
			color-mix(in srgb, var(--bg1-color), transparent 50%),
			color-mix(in srgb, var(--bg1-color), transparent 100%)
		) no-repeat var(--bg1-offset-x) var(--bg1-offset-y) / var(--bg1-size) var(--bg1-size),
		radial-gradient(
			circle closest-side,
			color-mix(in srgb, var(--bg2-color), transparent 50%),
			color-mix(in srgb, var(--bg2-color), transparent 100%)
		) no-repeat var(--bg2-offset-x) var(--bg2-offset-y) / var(--bg2-size) var(--bg2-size);
	
	&:where(.project--pattern1){
		--bg1-size: 40%;
		--bg1-offset-x: -10%;
		--bg1-offset-y: 50%;
		--bg2-size: 20%;
		--bg2-offset-x: 12.5%;
		--bg2-offset-y: 25%;
	}
	&:where(.project--pattern2){
		--bg1-size: 40%;
		--bg1-offset-x: 110%;
		--bg1-offset-y: 35%;
		--bg2-size: 20%;
		--bg2-offset-x: 85%;
		--bg2-offset-y: 60%;
	}
	&:where(.project--pattern3){
		--bg1-size: 40%;
		--bg1-offset-x: 40%;
		--bg1-offset-y: 60%;
		--bg2-size: 20%;
		--bg2-offset-x: 60%;
		--bg2-offset-y: 40%;
	}
}

@media (max-width: 768px){
	.sitewidth--project{
		max-width: 85%;
		padding-left: 0;
	}
}

.project__ttl{
	font-size: 2em;
	font-weight: normal;
	font-family: "Noto Serif JP", serif;
	
	display: grid;
	max-width: fit-content;
	
	&::before{
		content: "";
		width: 1em;
		aspect-ratio: 1;
		background: url(./img2025/icon-project.svg) no-repeat center / contain;
		translate: -25% 0;
	}
	
	&:where(.project__ttl--even){
		margin-left: auto;
	}
}
.project__ttl--odd{}

/* projet > list */
.project-list{
	
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: min(3.125em, 5vw);
	
	&:where(ul, ol){
		list-style: none;
		padding-left: 0;
	}
	
	& > *{
		box-shadow: 0 .25em 1.875em .625em rgb(0 0 0 / .1);
		border-radius: .5em;
		background: white;
	}
}
.project-list__permalink{
	color: inherit;
	text-decoration: none;
	display: block;
	
	&::after{
		line-height: 1.5;
		font-size: .75em;
		text-align: right;
		display: block;
		margin: 0 1rem 1rem;
	}
	&:any-link::after{
		content: "more";
	}
	&:hover::after{
		text-decoration: underline;
	}
}
@media (max-width: 768px){
	.project-list__permalink:after{
		font-size: 1em;
	}
}
.project-list__photo{}
.project-list__image{
	width: 100%;
	object-fit: cover;
	aspect-ratio: 3/2;
	border-radius: .5rem .5rem 0 0;
}
.project-list__body{
	line-height: 1.875;
	padding: 1em;
	
	& > *{
		margin-block: 0;
	}
	& > * + *{
		margin-top: .5rem;
	}
}
.project-list__ttl{
	font-size: 1.125em;
	text-align: center;
}
.project-list__note{
	font-size: .75em;
}
@media (max-width: 768px){
	.project-list__note{
		font-size: 1em;
	}
}
.project-list__more{
	font-size: .75em;
	padding: 0;
	background: 0;
	border: 0;
	
	display: block;
	margin-left: auto;
	
	&:where(:any-link:hover *){
		text-decoration: underline;
	}
}



/* history */
.history{
	background: #FBF7EB;
	padding-block: 3.75rem;
}

/* @media (max-width: 768px){
	.sitewidth--history{
		max-width: 85%;
		padding-inline: 0;
	}
} */

.history__title{
	font-size: 2em;
	font-weight: normal;
	font-family: "Noto Serif JP", serif;
	
	display: grid;
	max-width: fit-content;
	
	&::before{
		content: "";
		width: 1.5em;
		aspect-ratio: 1;
		background: url(./img2025/icon-history.svg) no-repeat center / contain;
		translate: -25% 0;
	}
}

.history-list{}

/* slider */
.history-slider{
	position: relative;
	z-index: 0;
	
	&:where(ul, ol){
		list-style: none;
		padding-left: 0;
	}
	
	&::before{
		content: "";
		border-top: clamp(20px, 3.75vw, 36px) solid;
		border-image: linear-gradient(#E3E3E3 0 0) 1 fill / 1 / 0 100vw;
		display: block;
		position: absolute;
		inset: clamp(150px, 21vw, 240px) 0 auto;
		
	}
}

.history-slider__title{
	font-size: 2em;
	font-weight: normal;
	margin: 0 calc(2.3125rem + 1rem) 1em;
	
	display: flex;
	align-items: center;
	gap: 1rem;
	
	&::after{
		content: "";
		flex: 1 1 0;
		border-top: 1px solid;
	}
}

.history-slider:where(.slick-slider){
	position: relative;
	z-index: 0;
	
	& :where(.slick-arrow){
		text-indent: -9em;
		overflow: hidden;
		
		background: initial;
		border: initial;
		margin: 0;
		padding: 0;
		
		width: 2.3125rem;
		height: 2.3125rem;
		
		position: absolute;
		z-index: 1;
	}
	& :where(.slick-prev){
		inset: 0 auto auto 0;
		background: url(./img2025/icon-arrow-back.svg) no-repeat center / contain;
	}
	& :where(.slick-next){
		inset: 0 0 auto auto;
		background: url(./img2025/icon-arrow-next.svg) no-repeat center / contain;
	}
}

.text-jump{
	font-size: 1.484375em;
}

@media (max-width: 768px){
	.scroller > img{
		/* max-width: 640px; */
		/* max-width: 800px; */
		max-width: 960px;
	}
}