@charset "utf-8";
/*------------------------------------------------------------
	sustainability
------------------------------------------------------------*/
.pageTitle {
	margin-bottom: 14rem;
	background-image: url(../img/company/sustainability/page_title_bg.jpg);
}
#main .headLine02 {
	margin-bottom: 3.5rem;
	font-size: 3.6rem;
	line-height: 2;
}
#main .headLine02 .en {
	margin-bottom: -5rem;
	display: block;
	color: #fff;
	font-size: 12.4rem;
	line-height: 1;
	letter-spacing: 0;
}
#main .vision {
	margin-bottom: 15rem;
}
#main .vision p {
	line-height: 2.25;
	margin-bottom: 7rem;
}
#main .materiality {
	padding: 5.6rem 0 15rem;
	background: #F5F4F4;
}
#main .materiality .headLine02 {
	margin-bottom: 6.5rem;
	font-size: 3.2rem;
}
#main .materiality .pointList {
	gap: 3rem;
}
#main .materiality .pointList li {
	min-height: 26rem;
	padding: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	width: calc((100% - 6rem)/3);
	background-color: #fff;
	position: relative;
	text-align: center;
}
#main .materiality .pointList .num {
	position: absolute;
	left: 2rem;
	top: 0.9rem;
	color: #595757;
	font-size: 3.2rem;
	line-height: 1;
	letter-spacing: 0;
}
#main .materiality .pointList .listImg {
	margin: -5px 0 28px;
	width: 100%;
}
#main .materiality .pointList .listImg img {
	height: 8rem;
}
#main .materiality .pointList .txt {
	width: 100%;
	font-size: 2.4rem;
}
#main .group {
	padding: 13.5rem 0 10.3rem;
}
#main .group .headLine02 {
	margin-bottom: 7rem;
	font-size: 3.2rem;
	line-height: 1.8;
}
#main .group .inner {
	margin-bottom: 6.8rem;
	align-items: center;
}
#main .group .lBox {
	margin-right: 4rem;
	width: 40rem;
	position: relative;
}
#main .group .lBox:after {
	position: absolute;
	left: 30rem;
	width: 14rem;
	top: 50%;
	height: 1px;
	background-color: #343232;
	content: "";
}
#main .group .rBox {
	padding: 2.1rem 2.8rem 3rem;
	flex: 1;
	border: 1px solid #343232;
}
#main .group .rBox h4 {
	margin-bottom: 1.3rem;
	font-size: 2.4rem;
	letter-spacing: 0.1em;
	font-weight: 400;
	text-align: center;
}
#main .group .rBox .midTxt {
	text-align: center;
	line-height: 2;
	margin-bottom: 2.5rem;
}
#main .group .rBox .bgBox {
	background: #F5F4F4;
	padding: 1.1rem 2rem 2rem;
}
#main .group .rBox .bgBox .ttl {
	margin-bottom: 1.4rem;
	font-size: 2rem;
	line-height: 1.75;
	text-align: center;
}
#main .group .rBox .listBox .bgTtl {
	margin-right: 1rem;
	width: 11rem;
	color: #fff;
	line-height: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #595757;
}
#main .group .rBox .listBox .txtList {
	gap: 1rem;
	flex: 1;
}
#main .group .rBox .listBox .txtList li {
	padding: 0.6rem 0.5rem 1rem;
	width: calc((100% - 1rem)/2);
	line-height: 2;
	letter-spacing: 0.1em;
	text-align: center;
	background-color: #fff;
	border: 1px solid #595757;
}
#main .group .rBox .listBox02 {
	margin-top: 2rem;
}
#main .group .rBox .listBox02 .bgTtl {
	background: #2F4858;
}
#main .group .rBox .listBox02 .txtList li {
	padding: 0.8rem 0.5rem 1.4rem;
	width: calc((100% - 2rem)/3);
	color : #2F4858;
	line-height: 1.75;
}
#main .group .content > p {
	line-height: 2.25;
}
#main .bgSecBox {
	margin-bottom: 15rem;
	position: relative;
	height: 400lvh;
}
@media all and (max-width: 896px) {
	#main .bgSecBox {
		margin-bottom: 6rem;
		height: auto;
	}
}
#main .bgSecBox .stickyBox {
	position:sticky;
	top: 0;
	width: 100%;
	height: 100lvh;
}
#main .bgSec {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: clip-path 1s ease;
}
#main .bgSec.from-top {
    clip-path: inset(0 0 100% 0);
}
#main .bgSec.from-bottom {
    clip-path: inset(100% 0 0 0);
}
#main .bgSec.active {
	clip-path: inset(0 0 0 0);
}
@media all and (max-width: 896px) {
	#main .bgSecBox .stickyBox {
		position:relative;
		height: auto;
	}
	#main .bgSec {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		
	}
	#main .bgSec.from-top,
	#main .bgSec.from-bottom {
		clip-path: inset(0 0 0 0);
	}
}
#main .bgSec .foo {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
@media all and (max-width: 896px) {
	#main .bgSec .foo {
		position: relative;
		height: auto;
		aspect-ratio: 10/5;
	}
}
#main .bgSec .foo li {
	position: relative;
}
#main .bgSec .foo li:after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #343232;
	opacity: 0.5;
	content: "";
}
#main .bgSec .foo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.2);
}
#main .bgSec .foo li.on img {
	animation: zoomOut 6s linear forwards;
}
@keyframes zoomOut {
	from {
		transform: scale(1.2);
	}
	to {
		transform: scale(1);
	}
}
#main .bgSec .txtBox {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64rem;
	height: 64rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	transform: translate(-50%, -50%);
	color: #fff;
	z-index: 1;
}
#main .bgSec .txtBox .bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#main .bgSec .txtBox .bg svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
#main .bgSec .txtBox .bg svg [data-name="circle"] {
	stroke-width: 1;
	--circumference: 1614.78; /* 2 * π * 257 */
	stroke-dasharray: var(--circumference);
	stroke-dashoffset: calc(var(--circumference) * (1 - var(--scrollNum)));
}
/* #main .bgSec .txtBox .bg::before,
#main .bgSec .txtBox .bg::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
}
#main .bgSec .txtBox .bg::before {
	border: 1px solid rgba(255, 255, 255, 0.5);
}
#main .bgSec .txtBox .bg::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: conic-gradient(#fff 0% calc(var(--scrollNum) * 100%), transparent 0%);
    mask: radial-gradient(circle, transparent calc(50% - 0.5px), white calc(50% + 0.5px));
} */
#main .bgSec .txtBox .subBox {
	width: 100%;
	margin-bottom: 3rem;
	max-width: 50rem;
	position: relative;
	z-index: 1;
}
#main .bgSec .txtBox h3 {
	margin-bottom: 3.8rem;
	padding-bottom: 3.5rem;
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-align: center;
	border-bottom: 1px solid #fff;
}
#main .bgSec .txtBox h3 .en {
	margin-bottom: 1.5rem;
	display: block;
	font-size: 6rem;
	line-height: 1;
	letter-spacing: 0;
}
#main .bgSec .txtBox p {
	margin-bottom: 2.8rem;
	font-size: 1.8rem;
	line-height: 2;
	letter-spacing: 0.1em;
	text-align: center;
}
#main .bgSec .txtBox .txtList {
	margin: 0 1.7rem;
}
#main .bgSec .txtBox .txtList li {
	padding-left: 1em;
	font-size: 1.4rem;
	line-height: 2.57;
	letter-spacing: 0.1em;
	text-indent: -1em;
}
#main .bgSec.social .txtBox p {
	margin-bottom: 1.7rem;
}
@media all and (max-width: 896px) {
	.pageTitle .headLine01 .en {
		font-size: 6rem;
	}
	#main .headLine02 {
		margin-bottom: 2rem;
		font-size: 2.4rem;
		line-height: 1.75;
	}
	#main .headLine02 .en {
		margin-bottom: -4rem;
		font-size: 7.2rem;
	}
	#main .vision {
		margin-bottom: 6rem;
	}
	#main .vision p {
		line-height: 2;
		margin-bottom: 3rem;
	}
	#main .materiality {
		padding: 5.6rem 0;
	}
	#main .materiality .headLine02 {
		margin-bottom: 3rem;
		font-size: 1.9rem;
	}
	#main .materiality .pointList {
		gap: 1rem;
		display: block;
	}
	#main .materiality .pointList li {
		min-height: 15rem;
		width: auto;
	}
	#main .materiality .pointList li:not(:last-child) {
		margin-bottom: 2rem;
	}
	#main .materiality .pointList .num {
		font-size: 2rem;
	}
	#main .materiality .pointList .listImg {
		margin: -2px 0 10px;
	}
	#main .materiality .pointList .listImg img {
		height: 5rem;
	}
	#main .materiality .pointList .txt {
		font-size: 1.8rem;
	}
	#main .group {
		padding: 6rem 0;
	}
	#main .group .headLine02 {
		margin-bottom: 3rem;
		font-size: 1.9rem;
	}
	#main .group .inner {
		margin-bottom: 3rem;
		display: block;
	}
	#main .group .lBox {
		margin: 0 0 3rem;
		width: auto;
		text-align: center;
	}
	#main .group .lBox:after {
		left: 50%;
		width: 1px;
		top: 100%;
		height: 3rem;
	}
	#main .group .rBox {
		padding: 1.5rem;
	}
	#main .group .rBox h4 {
		font-size: 2rem;
	}
	#main .group .rBox .midTxt {
		line-height: 1.75;
	}
	#main .group .rBox .bgBox {
		padding: 1.1rem 1rem 2rem;
	}
	#main .group .rBox .bgBox .ttl {
		font-size: 1.8rem;
	}
	#main .group .rBox .listBox {
		display: block;
	}
	#main .group .rBox .listBox .bgTtl {
		margin: 0 0 1rem;
		width: auto;
	}
	#main .group .rBox .listBox .txtList {
		display: block;
	}
	#main .group .rBox .listBox .txtList li {
		width: auto !important;
		line-height: 1.75;
		padding: 0.6rem 0.5rem 1rem !important;
	}
	#main .group .rBox .listBox .txtList li:not(:last-child) {
		margin-bottom: 1rem;
	}
	#main .group .content > p {
		line-height: 1.75;
	}
	#main .bgSec {
		padding: 0 1.5rem 3rem;
	}
	#main .bgSec .foo li {
		aspect-ratio: 3/2;
	}
	#main .bgSec .phoList {
		margin-top: 1rem;
		gap: 1rem;
		justify-content: center;
	}
	#main .bgSec .phoList li {
		aspect-ratio: 3/2;
		width: calc((100% - 3rem)/4);
		cursor: pointer;
		position: relative;
	}
	#main .bgSec .phoList li:after {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #343232;
		opacity: 0.8;
		content: "";
	}
	#main .bgSec .phoList .on:after {
		opacity: 0.5;
	}
	#main .bgSec .phoList img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#main .bgSec .txtBox {
		margin-top: 3rem;
		position: static;
		width: auto;
		height: auto;
		display: block;
		transform: translate(0);
		color: #343232;
	}
	#main .bgSec .txtBox .bg {
		display: none;
	}
	#main .bgSec .txtBox .subBox {
		margin: 0 auto;
		max-width: inherit;
	}
	#main .bgSec .txtBox h3 {
		margin-bottom: 2rem;
		padding-bottom: 1.5rem;
		font-size: 1.6rem;
		border-color: #343232;
	}
	#main .bgSec .txtBox h3 .en {
		margin-bottom: 0.5rem;
		font-size: 3rem;
	}
	#main .bgSec .txtBox p {
		margin-bottom: 2rem;
		font-size: 1.4rem;
	}
	#main .bgSec .txtBox .txtList {
		margin: 0;
	}
	#main .bgSec .txtBox .txtList li {
		font-size: 1.2rem;
		line-height: 2;
	}
	#main .bgSec.social .txtBox p {
		margin-bottom: 1.7rem;
	}
}