@charset "UTF-8";

/* --------------------------------------------------------
　基本設定
-------------------------------------------------------- */
#commons-header-wrapper{
opacity:0;
visibility:hidden;
transition:all .5s ease-in-out;
}
#commons-header-wrapper.is-active{
opacity:1;
visibility:visible;
}
@media all and (min-width:769px){
}
@media all and (max-width:768px){
}




/* --------------------------------------------------------
　ファーストビュー（キービジュアル・私たちについて）設定
-------------------------------------------------------- */
/*-- サイト背景エリア設定 --*/
#site-top-visual-wrapper{
width:100vw;
height:100vh;
position:relative;
z-index:0;
overflow:hidden;
}
#site-top-visual-wrapper > .bg-image-container{
top:0;
left:0;
width:100%;
height:100vh;
z-index:0;
}
#site-top-visual-wrapper > .bg-image-container > figure{
width:100%;
height:100%;
}
#site-top-visual-wrapper > .bg-image-container > figure > img{
width:100%;
height:100%;
object-fit:cover;
object-position:50% 0;
transform:scale(1.1);
}

/*-- サイトタイトルエリア設定 --*/
#site-top-visual-wrapper > .main-text-contents{
width:100%;
position:relative;
z-index:0;
}
#site-top-visual-wrapper > .main-text-contents > .title{
width:max-content;
position:absolute;
left:50%;
transform:translate(-50%,-50%);
mix-blend-mode:normal;
}
#site-top-visual-wrapper > .main-text-contents > .title > .text{
text-align:center;
color:#fff;
font-weight:600;
}

/*-- スクロールエリア設定 --*/
#site-top-visual-wrapper > .main-text-contents > .scroll{
position:absolute;
left:50%;
transform:translateX(-50%);
color:#fff;
font-weight:600;
}
#site-top-visual-wrapper > .main-text-contents > .scroll:before{
content:"";
border-radius:100%;
background:#fff;
display:block;
}
@media all and (min-width:769px){
	/*-- サイト背景エリア設定 --*/
	#site-top-visual-wrapper > .bg-image-container{
	position:fixed;
	}

	/*-- サイトタイトルエリア設定 --*/
	#site-top-visual-wrapper > .main-text-contents{
	height:100vh;
	}
	#site-top-visual-wrapper > .main-text-contents > .title{
	top:50%;
	}
	#site-top-visual-wrapper > .main-text-contents > .title > h1{
	width:600px;
	}
	#site-top-visual-wrapper > .main-text-contents > .title > .text{
	font-size:3.2rem;
	letter-spacing:.08em;
	margin:3rem auto 0 auto;
	}

	/*-- スクロールエリア設定 --*/
	#site-top-visual-wrapper > .main-text-contents > .scroll{
	bottom:7rem;
	letter-spacing:.2em;
	font-size:1.4rem;
	}
	#site-top-visual-wrapper > .main-text-contents > .scroll:before{
	margin:0 auto 3rem auto;
	width:.8rem;
	height:.8rem;
	}
}
@media all and (max-width:768px){
	/*-- サイト背景エリア設定 --*/
	#site-top-visual-wrapper,
	#site-top-visual-wrapper > .bg-image-container{
	height:calc(var(--vh, 1vh) * 100);
	}
	#site-top-visual-wrapper > .bg-image-container{
	position:fixed; 
	}

	/*-- サイトタイトルエリア設定 --*/
	#site-top-visual-wrapper > .main-text-contents{
	height:calc(var(--vh, 1vh) * 100);
	}
	#site-top-visual-wrapper > .main-text-contents > .title{
	top:calc(50% - 1rem);
	}
	#site-top-visual-wrapper > .main-text-contents > .title > h1{
	width:80vw;
	}
	#site-top-visual-wrapper > .main-text-contents > .title > .text{
	font-size:5vw;
	letter-spacing:.08em;
	margin:2rem auto 0 auto;
	}

	/*-- スクロールエリア設定 --*/
	#site-top-visual-wrapper > .main-text-contents > .scroll{
	bottom:3rem;
	letter-spacing:.2em;
	font-size:1.2rem;
	}
	#site-top-visual-wrapper > .main-text-contents > .scroll:before{
	margin:0 auto 2rem auto;
	width:.8rem;
	height:.8rem;
	}
}


/* --------------------------------------------------------
　ABOUT US設定
-------------------------------------------------------- */
#site-top-about-us{
width:100%;
display:flex;
justify-content:center;
align-items:center;
}
#site-top-about-us > section{
height:max-content;
}
#site-top-about-us > section > h2{
margin:auto auto 0 auto;
padding:0 2rem;
width:100%;
}
#site-top-about-us > section > .btn{
padding:0 2rem;
}
@media all and (min-width:769px){
	#site-top-about-us{
	height:100vh;
	}
	#site-top-about-us > section{
	width:max-content;
	}
	#site-top-about-us > section > h2{
	font-size:4rem;
	line-height:1.6;
	text-align:center;
	}
	#site-top-about-us > section > h2 > br:nth-child(1),
	#site-top-about-us > section > h2 > br:nth-child(3){
	display:none;
	}
	#site-top-about-us > section > .btn{
	width:max-content;
	margin:4rem auto 0 auto;
	}
	#site-top-about-us > section > .btn > a{
	font-size:2.5rem;
	height:auto;
	display:block;
	text-align:center;
	border-bottom:1px solid #9f9f9f;
	padding:0 0 1rem 0;
	}
	#site-top-about-us > section > .btn > a:before{
	margin:0 auto 2rem auto;
	width:6rem;
	height:6rem;
	font-size:2rem;
	}
}
@media all and (max-width:768px){
	#site-top-about-us{
	height:70vh;
	}
	#site-top-about-us > section{
	width:80vw;
	}
	#site-top-about-us > section > h2{
	font-size:5.5vw;
	}
	#site-top-about-us > section > .btn{
	width:100%;
	margin:4rem auto 0 auto;
	}
	#site-top-about-us > section > .btn > a:before{
	order:2;
	}
}


/* --------------------------------------------------------
　ブランドコンセプト設定
-------------------------------------------------------- */
.site-top-brand-contents{
width:100%;
/*--background:#e7e1d7;--*/
}
.site-top-brand-contents > .img > .big,
.site-top-brand-contents > .img > .small,
.site-top-brand-contents > .img > .middle{
overflow:hidden;
}
.site-top-brand-contents > .img > div{
overflow:hidden;
display:flex;
justify-content:center;
}
.site-top-brand-contents > .img > div > img{
object-fit:cover;
object-position:top center;
width:100%;
height:100%;
}
.site-top-brand-contents > .brand-info-contents > h3{
font-weight:600;
}
@media all and (min-width:769px){
	.site-top-brand-contents{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:0 5vw;
	min-width:calc(1400px - 4rem);
	margin:0 auto;
	}
	.site-top-brand-contents:not(#site-top-ampirula){
	padding-bottom:20rem;
	}
	.site-top-brand-contents#site-top-ampirula{
	margin-bottom:20rem;
	}
	.site-top-brand-contents.even > .brand-info-contents,
	.site-top-brand-contents.odd > .img{
	order:1;
	}
	.site-top-brand-contents.even > .img,
	.site-top-brand-contents.odd > .brand-info-contents{
	order:2;
	}
	.site-top-brand-contents > .img > .big,
	.site-top-brand-contents > .img > .small,
	.site-top-brand-contents > .img > .middle{
	aspect-ratio:1 / 1.3;
	}
	.site-top-brand-contents > .img > .big{
	width:100%;
	}
	.site-top-brand-contents > .img > .small{
	width:45%;
	margin:3rem 0 0 auto;
	}
	.site-top-brand-contents > .img > .middle{
	width:50%;
	margin:3rem 32% 0 auto;
	}
	.site-top-brand-contents.even > .img > .small{
	margin:3rem auto 0 0;
	}
	.site-top-brand-contents.even > .img > .middle{
	margin:3rem auto 0 32%;
	}
	.site-top-brand-contents > .brand-info-contents{
	position:sticky;
	top:0;
	height:max-content;
	padding:25vh 12rem 20rem 12rem;
	}
	.site-top-brand-contents > .brand-info-contents > h2 > .logo{
	margin:0 0 6rem 0;
	}
	.site-top-brand-contents > .brand-info-contents > h2 > #rogo-elfrank{
	width:350px;
	}
	.site-top-brand-contents > .brand-info-contents > h2 > #rogo-girl{
	width:230px;
	}
	.site-top-brand-contents > .brand-info-contents > h2 > #rogo-flolia{
	width:230px;
	}
	.site-top-brand-contents > .brand-info-contents > h2 > #rogo-lowo{
	width:230px;
	}
	.site-top-brand-contents > .brand-info-contents > h2 > #rogo-ampirula{
	width:320px;
	margin:0 0 3rem 0;
	}
	.site-top-brand-contents > .brand-info-contents > h3{
	font-size:2.5rem;
	margin-bottom:5rem;
	}
	.site-top-brand-contents > .brand-info-contents > .text{
	font-size:1.6rem;
	max-width:520px;
	}
	.site-top-brand-contents > .brand-info-contents > .text > p + p{
	margin-top:2rem;
	}
	.site-top-brand-contents > .brand-info-contents > a{
	margin:6rem 0 0 0;
	}
}
@media all and (max-width:768px){
	.site-top-brand-contents{
	/*--border-top:1px solid #e1dacf;
	padding:6rem 0 0 0;--*/
	}
	.site-top-brand-contents#site-top-elfrank{
	padding-top:8rem;
	}
	.site-top-brand-contents > .img > .big{
	aspect-ratio:1 / 1;
	position:relative;
	width:calc(100% - 6rem);
	margin:0 auto;
	border-radius:1rem;
	}
	.site-top-brand-contents > .img > .big > div{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:calc(100% - 6rem);
	text-align:center;
	}
	.site-top-brand-contents > .img > .big > div > span{
	color:#fff;
	margin-top:2rem;
	line-height:1;
	text-align:center;
	display:block;
	font-weight:600;
	font-size:1.2rem;
	}
	.site-top-brand-contents > .img > .big > .sub{
	position:absolute;
	bottom:2rem;
	left:50%;
	transform:translateX(-50%);
	width:calc(100% - 6rem);
	color:#fff;
	margin-top:2rem;
	line-height:1;
	font-size:.95rem;
	text-align:center;
	font-family: var(--font-family-en);
	letter-spacing: .2em;
	display:block;
	}
	.site-top-brand-contents > .img > .big > div > .logo{
	display:block;
	margin:0 auto;
	}
	.site-top-brand-contents > .img > .big > div > #rogo-elfrank{
	width:50vw;
	}
	.site-top-brand-contents > .img > .big > div > #rogo-girl{
	width:40vw;
	}
	.site-top-brand-contents > .img > .big > div > #rogo-flolia{
	width:40vw;
	}
	.site-top-brand-contents > .img > .big > div > #rogo-lowo{
	width:40vw;
	}
	.site-top-brand-contents > .img > .big > div > #rogo-ampirula{
	width:40vw;
	margin:0 auto 2rem auto;
	}
	.site-top-brand-contents > .brand-info-contents{
	padding:3rem 4rem 6rem 4rem;
	}
	.site-top-brand-contents#site-top-ampirula > .brand-info-contents{
	padding-bottom:10rem;
	}
	.site-top-brand-contents > .brand-info-contents > h3{
	font-size:1.6rem;
	margin-bottom:3rem;
	}
	.site-top-brand-contents > .brand-info-contents > .text{
	font-size:1.3rem;
	}
	.site-top-brand-contents > .brand-info-contents > .text > p + p{
	margin-top:2rem;
	display:none;
	}
	.site-top-brand-contents > .brand-info-contents > .text > p > br{
	display:none;
	}
	.site-top-brand-contents > .brand-info-contents > a{
	margin:3rem auto 0 0;
	padding:0;
	height:max-content;
	font-size:1.4rem;
	gap:0 1.5rem;
	}
	.site-top-brand-contents > .brand-info-contents > a.more-view-02:before{
	font-size:1.2rem;
	height:4rem;
	}
}

/* --------------------------------------------------------
　OUR BUSINESS設定
-------------------------------------------------------- */
#site-top-business{
width:100%;
height:100%;
background:#e7e1d7;
}
#site-top-business > .our-business-list{
flex-shrink:0;
}
#site-top-business > .our-business-list > nav > ul{
display:flex;
}
#site-top-business > .our-business-list > nav > ul > li{
flex-shrink:0;
background:#eeeae3;
}
#site-top-business > .our-business-list > nav > ul > li:nth-child(1) h3:before{
background:#c25353;
}
#site-top-business > .our-business-list > nav > ul > li:nth-child(2) h3:before{
background:#f59e0b;
}
#site-top-business > .our-business-list > nav > ul > li:nth-child(3) h3:before{
background:#81b15d;
}
#site-top-business > .our-business-list > nav > ul > li:nth-child(4) h3:before{
background:#87acc3;
}
#site-top-business > .our-business-list > nav > ul > li:nth-child(5) h3:before{
background:#3a838b;
}
#site-top-business > .our-business-list > nav > ul > li:nth-child(6) h3:before{
background:#777;
}
#site-top-business > .our-business-list > nav > ul > li{
position:relative;
}
#site-top-business > .our-business-list > nav > ul > li h3:before{
line-height:1;
content:attr(data-number);
font-family:var(--font-family-en);
pointer-events:none;
color:#fff;
width:max-content;
display:flex;
align-items:center;
justify-content:center;
}
#site-top-business > .our-business-list > nav > ul > li > .img{
display:flex;
align-items:center;
justify-content:center;
}
#site-top-business > .our-business-list > nav > ul > li > p{
color:#fff;
}

@media all and (min-width:769px){
	#site-top-business{
	margin:0 auto !important;
	padding:15rem 2rem 30rem 2rem !important;
	min-height:100vh;
	height:calc(100% + 15rem + 30rem) !important;
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	}
	#site-top-business > .commons-title{
	width:85vw;
	min-width:calc(1400px - 4rem);
	position:relative;
	margin:auto auto 6rem auto;
	padding:5rem 2rem 0 2rem;
	flex-shrink:0;
	}
	#site-top-business > .commons-title > a{
	position:absolute;
	bottom:0;
	right:2rem;
	}
	#site-top-business > .commons-title > a:before{
	order:2;
	}
	#site-top-business > .our-business-list{
	width:85vw;
	min-width:calc(1400px - calc(1.46rem * 2) - calc(2rem * 2));
	margin:0 auto auto auto;
	padding:0 calc(2rem + 1.46rem);
	flex-shrink:0;
	}
	#site-top-business > .our-business-list > nav > ul{
	gap:0 6rem;
	}
	#site-top-business > .our-business-list > nav > ul > li.child{
	width:1280px;
	display:grid;
	gap:0 6rem;
	grid-template-columns:660px 1fr;
	border-radius:2rem;
	overflow:hidden;
	}
	#site-top-business > .our-business-list > nav > ul > li > .img{
	}
	#site-top-business > .our-business-list > nav > ul > li > .img > svg{
	}
	#site-top-business > .our-business-list > nav > ul > li > .text{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:4rem 0;
	padding:0 4rem 0 0;
	}
	#site-top-business > .our-business-list > nav > ul > li h3{
	font-size:2.2rem;
	margin:auto auto 0 0;
	width:100%;
	}
	#site-top-business > .our-business-list > nav > ul > li h3:before{
	height:3.5rem;
	border-radius:2rem;
	margin-bottom:2rem;
	padding:0 2rem;
	font-size:1.6rem;
	}
	#site-top-business > .our-business-list > nav > ul > li > .text > p{
	width:100%;
	margin:0 auto auto 0;
	font-size:1.7rem;
	}

	#site-top-business > .our-business-list > a{
	margin-top:5rem;
	}
}
@media all and (max-width:768px){
	#site-top-business{
	padding:10rem 3rem 8rem 3rem;
	}
	#site-top-business > .commons-title{
	width:100%;
	margin-bottom:3rem;
	}
	#site-top-business > .our-business-list > nav > ul{
	width:100%;
	display:block;
	margin-bottom:4rem;
	}
	#site-top-business > .our-business-list > nav > ul > li.child{
	width:100%;
	border-radius:0 0 1rem 1rem;
	}
	#site-top-business > .our-business-list > nav > ul > li.child + li.child{
	margin-top:3rem;
	}
	#site-top-business > .our-business-list > nav > ul > li > .img{
	width:100%;
	margin:0 auto;
	padding:0;
	overflow:hidden;
	border-radius:1rem 1rem 0 0;
	}
	#site-top-business > .our-business-list > nav > ul > li > .img > svg{
	height:100%;
	}
	#site-top-business > .our-business-list > nav > ul > li > .text{
	padding:2rem 2rem 4rem 2rem;
	font-size:1.3rem;
	}
	#site-top-business > .our-business-list > nav > ul > li h3{
	font-size:1.7rem;
	margin-bottom:2rem;
	gap:0 1.5rem;
	text-align:center;
	}
	#site-top-business > .our-business-list > nav > ul > li h3:before{
	border-radius:3rem;
	margin:0 auto 2rem auto;
	padding:.5rem 2.3rem;
	font-size:1.2rem;
	}
	#site-top-business > .our-business-list > nav > ul > li > p{
	font-size:1.2rem;
	}
	#site-top-business > .our-business-list > nav > .navigation-button-area{
	display:none;
	}
}


/* --------------------------------------------------------
　サスティナビリティー事業設定
-------------------------------------------------------- */
/*-- 画面ピン留めエリア --*/
#site-top-sustainability .vertical-pin-box .bg-layer > .img{
width:100%;
height:100%;
filter:brightness(1);
margin:0 auto;
transition:.3s ease-in-out;
display:grid;
gap:.5rem;
}
#site-top-sustainability .vertical-pin-box .bg-layer.is-animated > .img{
transform:scale(1);
filter:brightness(.6);
transition:.3s ease-in-out;
gap:0;
}
#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure{
position:relative;
overflow:hidden;
width:100%;
height:100%;
}
#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure > img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}
#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure.change > img:nth-child(1) {
animation:fade1 6s infinite;
}
#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure.change > img:nth-child(2) {
animation:fade2 6s infinite;
}
@keyframes fade1{
	0%,45%{opacity:1;}
	50%,95%{opacity:0;}
	100%{opacity:1;}
}
@keyframes fade2{
	0%,45%{opacity:0;}
	50%,95%{opacity:1;}
	100%{opacity:0;}
}
#site-top-sustainability .vertical-pin-box .bg-layer > .cacth{
position:absolute;
top:calc(50% - 3rem);
left:50%;
transform:translate(-50%,-50%);
height:max-content;
z-index:1;
opacity:1;
transition:all .3s ease-in-out;
}
#site-top-sustainability .vertical-pin-box .bg-layer.is-animated > .cacth{
opacity:0;
}
#site-top-sustainability .vertical-pin-box .bg-layer > .cacth > h2{
line-height:1;
font-family:var(--font-family-en);
color:#fff;
filter:drop-shadow(0 0 2px rgba(0,0,0,.1));
}
#site-top-sustainability .vertical-pin-box .bg-layer > .cacth > h2 > span{
display:block;
}

/*-- スクロールエリア --*/
#site-top-sustainability .vertical-wrapper{
color:#fff;
}
#site-top-sustainability .vertical-wrapper > .vertical-content > .main-visual{
filter:contrast(1.1) brightness(1.1);
overflow:hidden;
}
#site-top-sustainability .vertical-wrapper > .vertical-content > .main-visual > video{
object-fit:cover;
object-position:top center;
width:100%;
height:100%;
}
#site-top-sustainability .vertical-wrapper > .vertical-content > .main-text > p{
font-weight:600;
}
@media all and (min-width:769px){
	/*-- スクロール量設定 --*/
	#site-top-sustainability.scroll-vertical-view-all{
	height:4000px;
	}

	/*-- 画面ピン留めエリア --*/
	#site-top-sustainability .vertical-pin-box .bg-layer > .img{
	min-width:calc(1400px - 4rem);
	grid-template-columns:.20fr .20fr .20fr .40fr;
	gap:.5rem;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure:nth-child(4){
	grid-row:span 2;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .cacth{
	text-align:center;
	width:max-content;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .cacth > h2{
	font-size:8rem;
	letter-spacing:.08em;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .cacth > h2 > span{
	font-size:3rem;
	margin:2rem auto 0 auto;
	letter-spacing:.05em;
	}

	/*-- スクロールエリア --*/
	#site-top-sustainability .vertical-wrapper{
	margin:calc((4000px / 3.2) - 15rem) auto 0 auto;
	padding-bottom:15rem;
	color:#fff;
	}
	#site-top-sustainability .vertical-wrapper > .vertical-content{
	display:grid;
	grid-template-columns:1fr .9fr;
	grid-auto-rows:auto;
	width:calc(1400px - 4rem);
	gap:0 10rem;
	align-items:center;
	padding:0 2rem;
	}
	#site-top-sustainability .vertical-wrapper > .vertical-content > .main-visual{
	aspect-ratio:5 / 6.5;
	}
	#site-top-sustainability .vertical-wrapper > .vertical-content > .main-text > h2{
	font-size:4rem;
	}
	#site-top-sustainability .vertical-wrapper > .vertical-content > .main-text > p{
	font-size:2rem;
	margin-top:6rem;
	}
	#site-top-sustainability .vertical-wrapper > .vertical-content > .main-text > p.brand-data{
	margin-top:6.5rem;
	font-size:1.2rem;
	letter-spacing:.13em;
	}
}
@media all and (max-width:768px){
	/*-- スクロール量設定 --*/
	#site-top-sustainability.scroll-vertical-view-all{
	height:3600px;
	display:block;
	}

	/*-- 画面ピン留めエリア --*/
	#site-top-sustainability .vertical-pin-box .bg-layer > .img{
	height:100%;
	grid-template-columns:repeat(3,1fr);
	grid-template-rows:1fr .5fr .5fr;
	gap:.3rem;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure:nth-child(1){
	order:2;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure:nth-child(2){
	order:3;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure:nth-child(3){
	order:4;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure:nth-child(4){
	order:1;
	grid-column:span 3;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure:nth-child(5){
	order:5;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure:nth-child(6){
	order:6;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure:nth-child(7){
	order:7;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .img > figure > img{
	object-position:50% 10%;
	filter:brightness(.8);
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .cacth{
	text-align:center;
	top:calc(50% - 5vh);
	width:100%;
	padding:0 3rem;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .cacth > h2{
	font-size:10vw;
	line-height:1;
	}
	#site-top-sustainability .vertical-pin-box .bg-layer > .cacth > h2 > span{
	font-size:1.8rem;
	margin:1.5rem auto 0 auto;
	color:#edf9ff;
	}


	/*-- スクロールエリア --*/
	#site-top-sustainability .vertical-wrapper{
	margin:calc((3600px / 2) - 15rem) auto 0 auto;
	padding-bottom:15rem;
	}
	#site-top-sustainability .vertical-wrapper > .vertical-content{
	width:75vw;
	margin:0 auto;
	}
	#site-top-sustainability .vertical-wrapper > .vertical-content > .main-visual{
	aspect-ratio:5 / 6;
	}
	#site-top-sustainability .vertical-wrapper > .vertical-content > .main-text > h2{
	font-size:5.75vw;
	margin-top:4rem;
	}
	#site-top-sustainability .vertical-wrapper > .vertical-content > .main-text > p{
	margin-top:4rem;
	width:100%;
	font-size:1.4rem;
	font-weight:400;
	}
	#site-top-sustainability .vertical-wrapper > .vertical-content > .main-text > p.brand-data{
	margin-top:6rem;
	font-size:1.0rem;
	text-align:center;
	line-height:1.3;
	letter-spacing:.08em;
	}
}


/* --------------------------------------------------------
　お知らせ設定
-------------------------------------------------------- */
#site-top-topics{
width:100%;
}
#site-top-topics > div > .topics-list > ul{
display:grid;
}
#site-top-topics > div > .topics-list > ul > li{
display:grid;
opacity:1;
transition:.5s ease-in-out;
}
#site-top-topics > div > .topics-list > ul > li > figure{
aspect-ratio:3 / 2;
width:100%;
overflow:hidden;
position:relative;
}
#site-top-topics > div > .topics-list > ul > li > figure > img{
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
}
#site-top-topics > div > .topics-list > ul > li > .info-text-box > .data{
line-height:1;
}
#site-top-topics > div > .topics-list > ul > li > .info-text-box > .info-txt{
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
}
#site-top-topics > div > .topics-list > ul > li > .info-text-box > .info-txt > a{
text-decoration:underline;
margin:auto .5rem;
}

@media all and (min-width:769px){
	#site-top-topics > div{
	width:85vw;
	min-width:calc(1400px - 4rem);
	margin:0 auto;
	padding:20rem 2rem 18rem 2rem;
	display:grid;
	grid-template-columns:700px 1fr;
	grid-template-rows:auto 1fr;
	justify-content:center;
	gap:0 4rem;
	}
	#site-top-topics > div > .commons-title > .sub{
	font-size:3rem;
	}
	#site-top-topics > div > .commons-title > .main{
	font-size:1.6rem;
	}

	/*-- 画像付き：PICK UP お知らせ --*/
	#site-top-topics > div > .topics-list{
	grid-row:span 2;
	}
	#site-top-topics > div > .topics-list > ul{
	}
	#site-top-topics > div > .topics-list > ul > li{
	margin-bottom:2rem;
	grid-template-columns:auto 28.5714285714%;
	gap:0 8.1632653061%;
	}
	#site-top-topics > div > .topics-list > ul > li > figure{
	margin-bottom:2rem;
	border-radius:1.5rem;
	}
	#site-top-topics > div > .topics-list > ul > li > .info-text-box > .data{
	margin-top:2.5rem;
	}
	#site-top-topics > div > .topics-list > ul > li > .info-text-box > .info-txt{
	}

	/*-- 詳しくはこちらボタン --*/
	#site-top-topics > div > a{
	margin-top:5.5rem;
	}
}
@media all and (max-width:768px){
	#site-top-topics{
	margin:0 auto;
	padding:8rem 0;
	}
	#site-top-topics > div > .commons-title{
	margin-bottom:3rem;
	padding:0 3rem;
	}
	#site-top-topics > div > .commons-title > .sub{
	font-size:2.4rem;
	margin-bottom:1rem;
	}
	#site-top-topics > div > .commons-title > .main{
	font-size:1.45rem;
	}

	/*-- 画像付き：PICK UP お知らせ --*/
	#site-top-topics > div > .topics-list{
	padding:0 3rem;
	}
	#site-top-topics > div > .topics-list > ul{
	border-bottom:1px solid #c3c3c3;
	}
	#site-top-topics > div > .topics-list > ul > li{
	padding-top:2rem;
	margin-bottom:2rem;
	grid-template-columns:auto 35%;
	gap:0 2rem;
	border-top:1px solid #c3c3c3;
	}
	#site-top-topics > div > .topics-list > ul > li > figure{
	margin-bottom:2rem;
	border-radius:1rem;
	}
	#site-top-topics > div > .topics-list > ul > li > .info-text-box > .data{
	margin-top:2.5rem;
	font-size:1.2rem;
	}
	#site-top-topics > div > .topics-list > ul > li > .info-text-box > .info-txt{
	font-size:1.3rem;
	}

	/*-- 詳しくはこちらボタン --*/
	#site-top-topics > div > a{
	margin:5rem auto 0 2rem;
	}
}