@charset "UTF-8";

/* --------------------------------------------------------
　キービジュアル設定
-------------------------------------------------------- */
.commons-page-title-wrap > .bg-image-container{
position:relative;
}
.commons-page-title-wrap > .bg-image-container > figcaption{
position:absolute;
color:#fff;
}
@media all and (min-width:769px){
	.commons-page-title-wrap > .bg-image-container > figcaption{
	font-size:1.4rem;
	bottom:3rem;
	right:1rem;
	}
}
@media all and (max-width:768px){
	.commons-page-title-wrap > .bg-image-container{
	aspect-ratio:1 / .8;
	}
	.commons-page-title-wrap > .bg-image-container > img{
	object-fit:cover;
	object-position:50% 50%;
	width:100%;
	height:100%;
	}
	.commons-page-title-wrap > .bg-image-container > figcaption{
	font-size:1.1rem;
	bottom:2rem;
	right:1rem;
	}
}




/* --------------------------------------------------------
　流動文言エリア設定
-------------------------------------------------------- */
#flows-marquee-wrap{
overflow:hidden;
width:100%;
}
#flows-marquee-wrap > .marquee-track{
display:flex;
width:max-content;
}
#flows-marquee-wrap > .marquee-track > .marquee-content{
font-family:var(--font-family-en);
color:#e7e1d7;
font-weight:600;
text-transform:uppercase;
white-space:nowrap;
padding:0 2.5vw;
line-height:1;
}
@keyframes marquee-loop {
	0% {
	transform:translateX(0);
	}
	100% {
	transform:translateX(-50%);
	}
}
@media all and (min-width:769px){
	#flows-marquee-wrap > .marquee-track > .marquee-content{
	font-size:7.5vw;
	letter-spacing:.02em;
	}
	#flows-marquee-wrap{
	padding:6rem 0 7rem 0;
	}
	#flows-marquee-wrap > .marquee-track{
	animation:marquee-loop 50s linear infinite;
	}
}
@media all and (max-width:768px){
	#flows-marquee-wrap > .marquee-track > .marquee-content{
	font-size:20vw;
	}
	#flows-marquee-wrap{
	padding:2rem 0;
	}
	#flows-marquee-wrap > .marquee-track{
	animation:marquee-loop 80s linear infinite;
	}
}

/* --------------------------------------------------------
　CONCEPT設定
-------------------------------------------------------- */
#about-concept-wrap > .concept-img > figure{
height:max-content;
overflow:hidden;
}
@media all and (min-width:769px){
	#about-concept-wrap{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:0 10rem;
	padding:0 0 20rem 0;
	min-width:1400px;
	}
	#about-concept-wrap > .concept-img{
	min-width:550px;
	}
	#about-concept-wrap > .concept-img > figure:nth-child(1){
	width:93%;
	border-radius:0 1.5rem 1.5rem 0;
	margin:0 auto auto 0;
	}
	#about-concept-wrap > .concept-img > figure:nth-child(2){
	width:45%;
	border-radius:1.5rem;
	margin:13% 0 0 19%;
	}
	#about-concept-wrap > .concept-img > figure:nth-child(3){
	width:65%;
	border-radius:1.5rem;
	margin:22% 0 0 auto;
	}
	#about-concept-wrap > .concept-main{
	width:580px;
	height:max-content;
	position:sticky;
	top:18rem;
	}
	#about-concept-wrap > .concept-main > .text{
	padding-left:1.46rem;
	}
	#about-concept-wrap > .concept-main > .text > p{
	font-weight:500;
	margin-top:4rem;
	}
}
@media all and (max-width:768px){
	#about-concept-wrap{
	display:flex;
	flex-wrap:wrap;
	}
	#about-concept-wrap > .concept-img{
	order:2;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:stretch;
	padding-bottom:12rem;
	}
	#about-concept-wrap > .concept-img > figure{
	border-radius:.8rem;
	}
	#about-concept-wrap > .concept-img > figure:nth-child(1){
	width:70%;
	margin:0 12% 0 auto;
	}
	#about-concept-wrap > .concept-img > figure:nth-child(2){
	width:40%;
	margin:8% 3% 0 5%;
	}
	#about-concept-wrap > .concept-img > figure:nth-child(3){
	width:47%;
	margin:26% 5% 0 0;
	}
	#about-concept-wrap > .concept-main{
	padding:2rem 2rem 6rem 2rem;
	order:1;
	width:100%;
	}
	#about-concept-wrap > .concept-main > .text{
	padding-left:1.46rem;
	}
	#about-concept-wrap > .concept-main > .text > p{
	font-weight:500;
	margin-top:3rem;
	}
}

/* --------------------------------------------------------
　会社概要設定
-------------------------------------------------------- */
#about-company-wrap{
background:#e7e1d7;
}
#about-company-wrap > .vertical-title > .rogo{
width:max-content;
margin:0;
padding:0;
writing-mode:vertical-rl;
line-height:.8;
color:#eeeae3;
white-space:nowrap;
letter-spacing:.05em;
}
#about-company-wrap > .vertical-title .rogo,
#about-company-wrap > .vertical-title .en{
font-family:var(--font-family-en);
font-weight:600;
}
#about-company-wrap > .company-info > dl{
margin:0 auto;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:stretch;
}
#about-company-wrap > .company-info > dl .pointer-none{
pointer-events:none;
}
#about-company-wrap > .company-info > dl > dt{
font-weight:600;
}
#about-company-wrap > .company-info > dl > dt > span{
display:flex;
align-items:center;
gap:0 1rem;
}
#about-company-wrap > .company-info > dl > dt > span:before{
content:"";
display:block;
transform:rotate(45deg);
width:.8rem;
height:.8rem;
background:#c2a853;
}
#about-company-wrap > .company-info > dl > dd > a{
color:#c2a853;
text-decoration:underline;
font-weight:600;
}

@media all and (min-width:769px){
	#about-company-wrap{
	display:flex;
	justify-content:space-between;
	align-items:stretch;
	flex-wrap:wrap;
	padding:20rem 0;
	}
	#about-company-wrap > .vertical-title{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:stretch;
	width:22rem;
	}
	#about-company-wrap > .vertical-title > .rogo{
	font-size:14rem;
	letter-spacing:.05em;
	white-space:nowrap;
	}
	#about-company-wrap > .vertical-title > h2{
	line-height:1;
	margin-top:1.2rem;
	writing-mode:vertical-rl;
	}
	#about-company-wrap > .vertical-title > h2 > span.en{
	font-size:6rem;
	}
	#about-company-wrap > .vertical-title > h2 > span.jp{
	font-size:2.4rem;
	margin-top:3rem;
	}
	#about-company-wrap > .company-info{
	flex:1;
	padding:8rem 9rem;
	}
	#about-company-wrap > .company-info > dl{
	width:900px;
	}
	#about-company-wrap > .company-info > dl > dt{
	width:250px;
	}
	#about-company-wrap > .company-info > dl > dd{
	width:calc(100% - 250px);
	}
	#about-company-wrap > .company-info > dl > dt,
	#about-company-wrap > .company-info > dl > dd{
	padding:4rem 0;
	border-bottom:1px solid #c0c0c0;
	}
}
@media all and (max-width:768px){
	#about-company-wrap{
	position:relative;
	overflow:hidden;
	}
	#about-company-wrap > .vertical-title > .rogo{
	font-size:25vh;
	position:absolute;
	top:-2vh;
	right:-2vh;
	z-index:0;
	}
	#about-company-wrap > .vertical-title > h2{
	position:relative;
	z-index:1;
	padding:12rem 13vh 0 3.46rem;
	display:flex;
	align-items:center;
	gap:0 1.2rem;
	line-height:1;
	}
	#about-company-wrap > .vertical-title > h2 > span.en{
	font-size:2.8rem;
	color:#c2a853;
	letter-spacing:.0248em;
	}
	#about-company-wrap > .vertical-title > h2 > span.jp{
	font-size:.8em;
	}
	#about-company-wrap > .company-info{
	position:relative;
	z-index:1;
	padding:2rem calc(2rem + 1.46rem) 12rem calc(2rem + 1.46rem);
	}
	#about-company-wrap > .company-info > dl > dt,
	#about-company-wrap > .company-info > dl > dd{
	width:100%;
	}
	#about-company-wrap > .company-info > dl > dt{
	padding-top:3rem;
	margin-bottom:1rem;
	}
	#about-company-wrap > .company-info > dl > dd{
	border-bottom:1px solid #c0c0c0;
	padding-bottom:3rem;
	}
}

/* --------------------------------------------------------
　SDGs設定
-------------------------------------------------------- */
#about-sustainability-wrap{
background:#5ba27a;
color:#fff;
}

/*-- メインタイトル設定 --*/
#about-sustainability-wrap > .title{
margin:0 auto;
}
#about-sustainability-wrap > .title > h2 > span{
color:#9fd9b9;
line-height:1;
font-weight:700;
letter-spacing:.078em;
font-family:var(--font-family-en);
display:block;
}

/*-- スライドエリア設定 --*/
#about-sustainability-wrap > .loop-slider{
overflow:hidden;
width:100%;
}
#about-sustainability-wrap > .loop-slider > .loop-track{
display:flex;
width:max-content;
animation:loop-animation 60s linear infinite;
}
#about-sustainability-wrap > .loop-slider > .loop-track > figure{
box-sizing:border-box;
overflow:hidden;
}
#about-sustainability-wrap > .loop-slider > .loop-track > figure > img,
#about-sustainability-wrap > .loop-slider > .loop-track > figure > video{
width:100%;
height:100%;
object-fit:cover;
object-position:top center;
display:block;
}
@keyframes loop-animation {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(-50%); /* 2セットあるうちのちょうど半分（1セット分）左に流れたらループ */
	}
}

/*-- メインコンテンツ設定 --*/
#about-sustainability-wrap > .active-context-contents{
margin:auto;
}
#about-sustainability-wrap > .active-context-contents > h3{
text-align:center;
}
#about-sustainability-wrap > .active-context-contents > h3 > span{
line-height:1;
font-weight:700;
letter-spacing:.078em;
font-family:var(--font-family-en);
display:block;
margin:auto;
opacity:.5;
}
#about-sustainability-wrap > .active-context-contents > ul > li{
background:#fff;
color:#212121;
}
#about-sustainability-wrap > .active-context-contents > ul > li > .img{
background:#e7e1d7;
}
#about-sustainability-wrap > .active-context-contents > ul > li > .img > figure{
display:flex;
align-items:center;
justify-content:center;
}
#about-sustainability-wrap > .active-context-contents > ul > li > .text > h4{
color:#3e665d;
}
@media all and (min-width:769px){
	#about-sustainability-wrap{
	padding:20rem 0;
	}

	/*-- メインタイトル設定 --*/
	#about-sustainability-wrap > .title{
	min-width:calc(1400px - 4rem);
	width:85vw;
	margin:0 auto 10rem auto;
	padding:0 2rem;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	position:relative;
	}
	#about-sustainability-wrap > .title > h2{
	font-size:3.8rem;
	}
	#about-sustainability-wrap > .title > h2 > span{
	font-size:1.8rem;
	margin-bottom:2rem;
	}
	#about-sustainability-wrap > .title > .sub{
	font-size:1.8rem;
	}

	/*-- スライドエリア設定 --*/
	#about-sustainability-wrap > .loop-slider > .loop-track > figure{
	width:600px;
	padding:0 1rem;
	aspect-ratio:1 / 1;
	}

	/*-- メインコンテンツ設定 --*/
	#about-sustainability-wrap > .active-context-contents{
	margin-top:10rem;
	width:75vw;
	min-width:calc(1400px - 4rem);
	padding:0 2rem;
	}
	#about-sustainability-wrap > .active-context-contents > h3{
	font-size:3.5rem;
	}
	#about-sustainability-wrap > .active-context-contents > h3 > span{
	font-size:1.6rem;
	}
	#about-sustainability-wrap > .active-context-contents > p{
	font-size:1.8rem;
	text-align:center;
	margin:4rem auto 0;
	}
	#about-sustainability-wrap > .active-context-contents > ul{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:0 2rem;
	margin:4rem auto 0;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li{
	border-radius:2rem;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li > .img{
	border-radius:2rem 2rem 0 0;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li > .img > figure{
	aspect-ratio:1 / 1;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li > .img > figure > svg{
	width:80%;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li > .text{
	padding:4rem 3rem;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li > .text > h4{
	font-size:2.0rem;
	text-align:center;
	line-height:1;
	margin-bottom:2rem;
	}
}
@media all and (max-width:768px){
	#about-sustainability-wrap{
	padding:12rem 0;
	}

	/*-- メインタイトル設定 --*/
	#about-sustainability-wrap > .title{
	padding:0 3rem;
	}
	#about-sustainability-wrap > .title > h2{
	font-size:2.5rem;
	}
	#about-sustainability-wrap > .title > h2 > span{
	font-size:1.4rem;
	margin-bottom:1rem;
	}
	#about-sustainability-wrap > .title > .sub{
	margin-top:3rem;
	}
	#about-sustainability-wrap > .title > .sub > br{
	display:none;
	}

	/*-- スライドエリア設定 --*/
	#about-sustainability-wrap > .loop-slider{
	margin-top:4rem;
	}
	#about-sustainability-wrap > .loop-slider > .loop-track > figure{
	width:80vw;
	padding:0;
	aspect-ratio:1 / 1.1;
	}

	/*-- メインコンテンツ設定 --*/
	#about-sustainability-wrap > .active-context-contents{
	margin-top:4rem;
	padding:0 3rem;
	}
	#about-sustainability-wrap > .active-context-contents > h3{
	font-size:2.0rem;
	}
	#about-sustainability-wrap > .active-context-contents > h3 > span{
	font-size:1.4rem;
	}
	#about-sustainability-wrap > .active-context-contents > p{
	margin:3rem auto 0;
	}
	#about-sustainability-wrap > .active-context-contents > p > br{
	display:none;
	}
	#about-sustainability-wrap > .active-context-contents > ul{
	margin-top:4rem;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li{
	border-radius:1rem;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li + li{
	margin-top:4rem;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li > .img{
	border-radius:1rem 1rem 0 0;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li > .img > figure{
	aspect-ratio:1 / .7;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li > .img > figure > svg{
	width:60%;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li > .text{
	padding:3rem 2rem;
	}
	#about-sustainability-wrap > .active-context-contents > ul > li > .text > h4{
	font-size:1.8rem;
	text-align:center;
	line-height:1;
	margin-bottom:2rem;
	}
}

/* --------------------------------------------------------
　沿革・歴史設定
-------------------------------------------------------- */
#about-history-wrap > .hisitory-main-contents > .history-section > .box,
#about-history-wrap > .hisitory-main-contents > .history-section > .box > .year{
position:relative;
}
#about-history-wrap > .hisitory-main-contents > .history-section > .box:after{
content:"";
display:block;
width:0;
height:100%;
position:absolute;
top:0;
border-left:2px solid #cdc3b0;
z-index:1;
}
#about-history-wrap > .hisitory-main-contents > .history-section > .box > .year:after{
content:"";
display:block;
border:4px solid #c2a853;
background:var(--main-bg-color);
position:absolute;
z-index:2;
}
#about-history-wrap > .hisitory-main-contents > .history-section > .box > .year > .en{
font-family:var(--font-family-en);
font-weight:700;
}
#about-history-wrap > .hisitory-main-contents > .history-section > .box > .year > .jp{
display:block;
color:#888;
font-weight:600;
}
#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content > li > p{
position:relative;
}
#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content > li > p:after{
content:"";
display:block;
border-radius:100%;
position:absolute;
background:#c2a853;
z-index:1;
}
@media all and (min-width:769px){
	#about-history-wrap{
	width:75vw;
	min-width:calc(1280px - 4rem);
	padding:20rem 2rem;
	margin:0 auto;
	display:grid;
	grid-template-columns:40rem 1fr;
	gap:0 9rem;
	}
	#about-history-wrap > .history-nav-contents{
	position:sticky;
	top:18rem;
	height:max-content;
	}
	#about-history-wrap > .history-nav-contents > nav{
	padding-top:4rem;
	padding-left:1.46rem;
	}
	#about-history-wrap > .history-nav-contents > nav > ul > li > .nav-item{
	font-size:2.2rem;
	display:block;
	padding:5px 0;
	color:#131313;
	text-decoration:none;
	opacity:.5;
	transition:opacity .4s ease;
	}
	#about-history-wrap > .history-nav-contents > nav > ul > li > .nav-item.is-active{
	opacity:1;
	font-weight:bold;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box{
	display:grid;
	grid-template-columns:30rem 1fr;
	align-items:flex-start;
	gap:0 5rem;
	padding-top:2.5rem;
	padding-bottom:15rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box:after{
	left:22rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section:first-child > .box:first-child:after{
	top:5rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section:last-child > .box:last-child:after{
	height:5rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .year:after{
	width:1.8rem;
	height:1.8rem;
	top:2.5rem;
	left:21.25rem;
	border-radius:9px;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .year > .en{
	font-size:5rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .year > .jp{
	font-size:1.3rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content{
	padding-top:1.5rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content > li{
	margin-bottom:4rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content > li > p{
	font-size:1.8rem;
	padding-left:1.9rem;
	font-weight:600;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content > li > p:after{
	width:.8rem;
	height:.8rem;
	top:1.3rem;
	left:0;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content > li > figure{
	width:100%;
	border-radius:1.5rem;
	overflow:hidden;
	margin-bottom:1rem;
	}
}
@media all and (max-width:768px){
	#about-history-wrap{
	padding:12rem 3rem;
	}
	#about-history-wrap > .history-nav-contents{
	margin-bottom:4rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box{
	padding-top:2.5rem;
	padding-bottom:4rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box:after{
	left:.5rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section:first-child > .box:first-child:after{
	top:5rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section:last-child > .box:last-child:after{
	height:5rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .year{
	padding-left:3rem;
	display:flex;
	align-items:center;
	gap:0 1rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .year:after{
	width:1.5rem;
	height:1.5rem;
	top:1rem;
	left:-.15rem;
	border-radius:9px;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .year > .en{
	font-size:2.3rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .year > .jp{
	font-size:1.3rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content{
	padding-top:3rem;
	padding-left:3rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content > li{
	margin-bottom:2rem;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content > li > p{
	font-size:1.4rem;
	padding-left:1.9rem;
	font-weight:600;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content > li > p:after{
	width:.8rem;
	height:.8rem;
	top:.75rem;
	left:0;
	}
	#about-history-wrap > .hisitory-main-contents > .history-section > .box > .content > li > figure{
	border-radius:1.5rem;
	overflow:hidden;
	margin-bottom:1.5rem;
	}
}

/* --------------------------------------------------------
　基本設定
-------------------------------------------------------- */
@media all and (min-width:769px){
}
@media all and (max-width:768px){
}



/* --------------------------------------------------------
　基本設定
-------------------------------------------------------- */
@media all and (min-width:769px){
}
@media all and (max-width:768px){
}

/* --------------------------------------------------------
　基本設定
-------------------------------------------------------- */
@media all and (min-width:769px){
}
@media all and (max-width:768px){
}

/* --------------------------------------------------------
　基本設定
-------------------------------------------------------- */
@media all and (min-width:769px){
}
@media all and (max-width:768px){
}

/* --------------------------------------------------------
　基本設定
-------------------------------------------------------- */
@media all and (min-width:769px){
}
@media all and (max-width:768px){
}

/* --------------------------------------------------------
　基本設定
-------------------------------------------------------- */
@media all and (min-width:769px){
}
@media all and (max-width:768px){
}