@charset "utf-8";
/* CSS Document */
/* ----------------------------

コンテンツ幅

---------------------------- */
.gs21-MainContents:has(#plastic-recycling__wrap) {
    max-width: 2000px;
    padding: 0;
}
.gs21-ContentsContainer .mel25-contents-width__1400:has(#plastic-recycling__wrap) {
    max-width: 100%;
}
#plastic-recycling__wrap {
	margin-top: 20px;
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/loopbg.jpg);
	background-size: 100% auto;
	padding-bottom: 100px;
}


/* ----------------------------

mv

---------------------------- */
.plastic-relay__title { display: none;}
#plastic-recycling__mv { margin: 0;padding: 0;box-sizing: border-box;}

/* --- 2. 動画を閉じ込める親セクション --- */
#plastic-recycling__mv,
.hero-section { position: relative; width: 100%;
  aspect-ratio: 16 / 9;  overflow: hidden; background-color: #000;
  margin: 0; padding: 0;}
.hero-section::after {
    content: "";
    background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/mv_flame.png);
    position: absolute; top: 0; left: 0; width: 100%;
    height: 100%; display: block; z-index: 9999; background-size: contain;}
.hero-content__title { display: none;}
.hero-content img {  max-width: 85%;}
.hero-content p { text-align: left; width: 85%; margin-top: 2%;font-size: clamp(11px, 1.5vw, 16px);line-height: 1.8;}

#bg-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
#player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border: 0;}
.hero-content { position: relative;  z-index: 2; /* 動画(z-index:1)より上に配置 */
  height: 100%; display: flex; flex-direction: column;  justify-content: center;
  align-items: center; color: #fff; text-align: center;
  background: rgba(0, 0, 0, 0.3); padding-top: 15%;}
.hero-content h1 { font-size: 3rem;  margin-bottom: 20px;  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);}
.main-content { position: relative;  z-index: 3; background: #fff;  padding: 80px 10% ; line-height: 1.8; color: #333;}

/* ----------------------------

plastic-recycle-nav

---------------------------- */
.contentsnav:has(.plastic-recycle-nav) {
	position: relative;
	margin: 0 !important;
	padding: 20px 0 0 0;
}
.contentsnav:has(.plastic-recycle-nav)::before {
	content: "";
	width: 100%;
	height: 300px;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/mitsubishi_element_grey.png) right 0 no-repeat;
	background-size: 50% auto;
	opacity: 0.8;
}

.plastic-recycle-nav { border: none;}
.plastic-recycle-nav .gs21-ContentsNav {margin: 0;border: none;padding: 0 16px;}
.plastic-recycle-nav ul { justify-content: center;}
.plastic-recycle-nav ul li { display: inline-block; width: auto; font-size: 0.8em;}
.plastic-recycle-nav ul li.gs21-ContentsNavListItem a.gs21-Link { color: #727171; padding: 10px;font-weight: 700;}
.plastic-recycle-nav ul li.gs21-ContentsNavListItem a.gs21-Link::before{display: none;}
.plastic-recycle-nav ul li.gs21-ContentsNavListItem a.gs21-Link:hover {background: none;color: #ff0000;font-weight: 700;border-bottom: 3px solid #ff0000;
padding-bottom: 5px;}

/* ----------------------------

sec-movie

---------------------------- */
#sec-movie .text:has(#plastic-recycling__movie-text) {
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/commingsoonBG.png) no-repeat;
	aspect-ratio: 16 / 9;background-size: contain;margin: 30px auto 0 auto;text-align: center;position: relative;
}
#movie {max-width: 1200px;width: 90%;margin: 80px auto 50px auto;}
#sec-movie .text:has(#plastic-recycling__movie-text) p {
	color: #ff0000;	font-size: clamp(16px, 2.1vw, 27px);
	position: absolute;top: 50%;left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;line-height: 1.5;font-weight: 600;margin: 0;
}
#sec-movie .text p b {margin-top: 20px;display: block;}
#plastic-recycling__left p {line-height: 2.1;font-weight: 600;position: relative;font-size: 1.0rem;}
#plastic-recycling__right {margin-top: 20px;}
#plastic-recycling__right .freehtml {
    width: 100%;
    position: relative;
    overflow: hidden;
}
#plastic-recycling__right .freehtml::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
#plastic-recycling__right .freehtml iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* ----------------------------

sec-interview

---------------------------- */
#sec-interview {margin-top: 100px;padding-top: 100px; position: relative;}
#sec-interview::before {
	content: "";
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/recyclingmark.png) no-repeat right bottom;
	width: 31%;
	height: 31%;
	display: block;
	background-size: contain;
	position: absolute;
	top: calc(-15% + 40px);
	left: -1%;
	min-width: 250px;
	min-height: 250px;
}
#sec-interview > .title {
    background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/arrow_red2.png) no-repeat right center;
    background-size: 90% auto;
    min-height: 30px;
    position: relative;
    padding: 0 16px;
}
#sec-interview > .title h2.cmp-title__text {
	max-width: 1200px;	margin: 0 auto;	text-align: right;	font-size: 0.8rem;	color: #ffffff;	padding-top: 4px;	position: relative;}
#sec-interview > .title h2.cmp-title__text::before {
	content: "";
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/interviewmovie.png) no-repeat right bottom;
	background-size: contain;
	width: 70%;
	height: 60px;
	position: absolute;
	right: 0;
	bottom: 30px;
}
html:lang(en) #sec-interview > .title h2.cmp-title__text {text-indent: -9999px;text-align: left;}

#sec-interview > .container {
	max-width: 1200px;
	width: 90%;
	margin: 80px auto 40px auto;
}
#interview__col2 {margin-bottom: 140px;}
#interview__col2 .text {align-self: center;}
#interview__col2 .text p {line-height: 2.1;font-weight: 600;position: relative;font-size: 1.0rem;}
#interview__col2 .freehtml {
    position: relative;
    width: 100%;
    overflow: hidden;
}
#interview__col2--movie {position: relative;}
#interview__col2--movie::before {
    content: "";
    width: 100%;
    height: calc(100% - 4px);
    display: block;
    background: #ff0000;
    position: absolute;
    top: 20px;
    left: 16px;
    z-index: 0;
}
#interview__col2 .freehtml::after {
    content: "";
    width: 100%;
    height: calc(100% - 4px);
    display: block;
    background: #ff0000;
    position: absolute;
    top: 20px;
    left: 16px;
    z-index: -1;
}
#interview__col2 .freehtml::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
#interview__col2--movie .freehtml iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#interview__col2--movie .embed {position: relative;	z-index: 2;}
#interview__col2--movie .embed .cmp-embed {
    position: relative;
    overflow: hidden;
    width: 100%;
}
#interview__col2--movie .embed .cmp-embed::before {
    content: "";
    padding-top: 56.25%;
    display: block;
}
#interview__col2--movie .embed .cmp-embed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

#sec-interview .cmp-container--3col {
	background: #ffffff;
	padding: 40px 4%;
	box-sizing: border-box;
	position: relative;
}
#sec-interview .cmp-container--3col::after {
	content: "";
	display: block;
	position: absolute;
	top: -58px;
	left: 0;
	width: 70%;
	height: 60px;
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/speakers.png) no-repeat 0 0;
	background-size: contain;
}
#interview__col3 .title h3.cmp-title__text {
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/interview.png) no-repeat center right;
	background-size: contain;
	color: #8b09f1;
	font-size: 0.9rem;
	height: 30px;
	font-weight: 700;
}
#interview__col3 .image { margin-top: 0;}
#interview__col3 .title h4.cmp-title__text {
	color: #4b4b4b;
	font-size: 1.2rem;
	font-weight: 800;
	min-height: 4.2em;
}
#interview__col3 .text p { color: #4b4b4b; font-weight: 700; font-size: 0.9rem;}
#interview__col3 .title h5.cmp-title__text { font-size: 1.3rem; color: #4b4b4b;}


/* ----------------------------

sec-making

---------------------------- */
#sec-making {	margin-top: 100px;	padding-top: 100px;}
#sec-making > .title {
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/arrow_perple.png) no-repeat right center;
	background-size: 90% auto;
	min-height: 30px;
	position: relative;
}
#sec-making > .title h2.cmp-title__text {
	max-width: 1200px;
	margin: 0 auto;
	font-size: 0.8rem;
	color: #ffffff;
	padding-top: 4px;
	position: relative;
	text-align: center;
}
#sec-making > .title h2.cmp-title__text::before {
	content: "";
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/makingmovie.png) no-repeat center bottom;
	background-size: contain;
	width: 70%;
	height: 60px;
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
}
html:lang(en) #sec-making > .title h2.cmp-title__text {text-indent: -9999px;}
#making__col3lead {	margin: 0 auto;	max-width: 1200px;	width: 90%;}
#making__col3lead .image {    max-width: 1000px;    width: calc(60% - 15px);}
#making__col3lead .text {    align-self: center;    width: calc(40% - 15px);}
#making__col3lead .text {	align-self: center;}
#making__col3lead .text p {	font-weight: 600;	line-height: 2;	font-size: 1.1rem;}
#making__col3movie {	max-width: 1200px;	margin: 80px auto 40px auto;	width: 90%;}
#making__col3movie .embed .cmp-embed {	position: relative;	overflow: hidden;}
#making__col3movie .embed .cmp-embed::before {	content: "";	display: block;	padding-top: 178%;}
#making__col3movie .embed iframe {margin: 0 auto;display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;object-fit: cover;}
#making__col3movie .freehtml {width: 100%;overflow: hidden;position: relative;}
#making__col3movie .freehtml::before {content: "";display: block;padding-top: 180%;}
#making__col3movie .freehtml iframe {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;object-fit: cover;}


/* ----------------------------

sec-plastic-recicle

---------------------------- */
#sec-plastic-recicle {margin-top: 90px;padding-top: 120px;}
#sec-plastic-recicle > .title {
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/arrow_red.png) no-repeat 0 center;
	background-size: 90% auto;
	min-height: 30px;
	position: relative;
	width: 100%;
}
#sec-plastic-recicle > .title h2.cmp-title__text {
	max-width: 1000px;
	margin: 0 auto;
	font-size: 0.8rem;
	color: #ffffff;
	padding-top: 4px;
	position: relative;
	text-align: center;
}
#sec-plastic-recicle > .title h2.cmp-title__text::before {
	content: "";
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/plasticrecycling.png) no-repeat center bottom;
	background-size: contain;
	width: 70%;
	height: 100px;
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
}
#recycling__wrap {position: relative;max-width: 1000px;margin: 0 auto 30px auto;width: 90%;}
.text-box1 {position: absolute;top: 13%;right: 4%;color: #ffffff;background: #ff0000;padding: 8px 16px;font-size: 0.9rem;}
.text-box2 {position: absolute;bottom: 10%;right: 3%;color: #ffffff;background: #ff0000;padding: 8px 16px;font-size: 0.9rem;}
#modal1 {
	top: 59.5%;	right: 6%;
	background: #ff0000 url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/open_withe.png) 96% center no-repeat;
	border-radius: 0;	font-size: 1.4rem;
	padding: 1% 5% 1.5% 2%;
	color: #ffffff;	width: 34%;
	background-size: 30px auto;
}
#modal1 .small {font-size: 1rem;}
#modal1:hover { background-color: #cc0000;}
#modal2 { top: 7.5%; left: 21%;}
#modal3 { top: 24%; left: 21%;}
#modal4 { top: 37%; left: 21%;}
#modal5 { top: 55%; left: 21%;}
#modal6 { top: 71%; left: 21%;width: 4rem;}
#modal7 { top: 90%; left: 21%; width: 4rem;}
html:lang(en) #modal6,
html:lang(en) #modal7{ width: 8rem;  text-align: left;}
#modal8 {
    background: #8b09f1 url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/open_withe.png) 96% center no-repeat;
    background-size: 20px auto;
    border-radius: 0;
    padding: 16px 43px 16px 16px;
    color: #ffffff;
}
#modal8:hover {background-color: #6c0bb9;}
.wrap__modal-btn {
    max-width: 1000px;
    width: 90%;
    margin: 40px auto 80px auto;
    display: flex;
    justify-content: end;
}


/* ----------------------------

modal

---------------------------- */
.open-btn {
	padding: 0 27px 0 0;
	font-size: 1.0rem;
	font-weight: bold;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin: 16px;
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/open_perple.png) center right no-repeat;
	background-size: 20px auto;
	position: absolute;
}
.open-btn:hover { color: #ff0000;}
.close-btn {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 1.6rem;
	border: none;
	cursor: pointer;
	transition: transform 0.3s ease;
	width: 30px;
	height: 30px;
	background: url(/global/sharehouse/our-stories/articles/focus/plastic-recycling/closed_white.png) no-repeat;
	background-size: contain;
}
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.modal.active {
	display: flex;
	opacity: 1;
	pointer-events: auto;
}
.modal-content {
	padding: 1rem;
	border-radius: 10px;
	width: 80vw;
	max-width: 500px;
	position: relative;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.3s ease;
	color: #fff;
text-align: left;
}
.modal.active .modal-content {	animation: fadeInScale 0.4s ease forwards;}
.modal-content p {margin-top: 20px;line-height: 1.6;}

@keyframes fadeInScale {
		0% {
				opacity: 0;
				transform: scale(0.8);
		}
		100% {
				opacity: 1;
				transform: scale(1);
		}
}


/* ----------------------------

sec-link

---------------------------- */
#sec-link {max-width: 1200px;width: 90%;margin: 50px auto;padding-top: 50px;}
#sec-link .button.cmp-button--border-black.cmp-button--icon-arrow a {flex-direction: revert;}




@media screen and (max-width: 980px) {

}/* end980 */



@media screen and (max-width: 767px) {
/* ----------------------------

mv 767px

---------------------------- */
.hero-content { padding-top: 2%;}
.hero-content p { line-height: 1.3;}

/* ----------------------------

sec-movie

---------------------------- */
#movie {margin: 30px auto 30px auto;}
	/*
#sec-movie .text:has(#plastic-recycling__movie-text) p {font-size: clamp(16px, 4.1vw, 27px);}
*/

/* ----------------------------

sec-interview 767px

---------------------------- */
#sec-interview {margin-top: 50px;padding-top: 70px;}
#sec-interview > .title {	background-size: auto 100%;	background-position: 10px center;	padding: 0 20px;}
#sec-interview > .title h2.cmp-title__text::before {right: 2%;height: 30px;width: 90%;}
#sec-interview::before {top: 59px;left: 4%;min-height: 180px;min-width: 180px;height: auto;}
#sec-interview .cmp-container--3col::after {top: -28px;height: 30px;}
#interview__col2 .text p {    font-size: 1.0rem;}

/* ----------------------------

sec-making 767px

---------------------------- */
#sec-making {margin-top: 50px;padding-top: 70px;}
#sec-making > .title {
	background-size: auto 100%;
	background-position: 10px center;
	padding: 0 20px;
}
#sec-making > .title h2.cmp-title__text::before {width: 80%;height: 60px;}
#making__col3lead .image { width: 100%;}
#making__col3lead .text { width: 100%;text-align: center;}
#making__col3movie {max-width: 60%;}
	
/* ----------------------------

sec-plastic-recicle 767px

---------------------------- */
#sec-plastic-recicle {margin-top: 50px;padding-top: 50px;}
#sec-plastic-recicle > .title {background-size: auto 100%;background-position: calc(100% - 10px) center;}
#sec-plastic-recicle > .title h2.cmp-title__text::before {height: 50px;width: 82%;bottom: 47px;}
#modal1 {top: 59.5%;right: -1%;font-size: 1rem;width: 54%;background-size: 20px auto;padding: 1.5% 7% 1.5% 2%;}
html:lang(en) #modal1 {top: 57%; line-height: 1;}
html:lang(en) #modal1 .small {font-size: 0.7rem;line-height: 1;}
.text-box1,
.text-box2{	padding: 4px 8px;	font-size: 0.7rem;	font-weight: 600;}
.open-btn {margin: 0;}
html:lang(en) #sec-plastic-recicle > .title h2.cmp-title__text {	padding: 4px 8px;	line-height: 1.2;}


	
}/* end767*/