@charset "UTF-8";

/* /en/sustainability/sc_products/

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



.sc_products{

	max-width: 1440px;

	margin: 0 auto;

	background-color: #7fcde7;

	

	overflow-x: hidden;

}



/* sec1 */

.sc_products .sec1{

	position: relative;

	z-index: 1;

}



.sc_products .sec1 .lead-box{

	padding: 2em 2rem;

	

	position: relative;

	z-index: 1;

}



.sc_products .sec1 .lead-box h2{

	color: #009C95;

	text-align: center;

	font-size: min(6vw,72px);

	margin-bottom: 0.2em;

}



.sc_products .sec1 .lead-box::after{

	content: " ";

	display: block;

	width: 40px;

	height: 40px;

	background-image :url("/en/sustainability/assets/images/sc_products/arrow_bottom.svg");

	background-size: contain;

	background-position: center;

	background-repeat: no-repeat;

	

	position: absolute;

	z-index: 0;

	top: calc(100% + 2em);

	left: 50%;

	

	animation: 1.2s alternate infinite ease-in-out 0s anim-fuwafuwa;

}

@keyframes anim-fuwafuwa {

	0% {

			-webkit-transform: translate(-50%, 0px);

			transform: translate(-50%, 0px);

	}

	100% {

			-webkit-transform: translate(-50%, -10px);

			transform: translate(-50%, -10px);

	}

}





@media screen and (min-width: 769px) { /* pc */

	div.sc_products .sec1 .lead-box{

		position: absolute;

		z-index: 2;

		top: 0;

		left: 0;

		width: 100%;

	}

	div.sc_products .sec1 .lead-box h2{

		font-size: min(5vw,72px);

	}

	div.sc_products .sec1 .lead-box::after{

		width: min(5vw,80px);

		height: min(6vw,80px);

		top: calc(100% + 2em);

	}

	

	div.sc_products .sec1 .lead-box .page-lead-box{

		padding: 0 10%;

	}

}





/* pin area */

.sc_products .pin-area-box{

	position: relative;

	/* 次のsecに文字がかかると消える（上に乗られる）

	z-index: 1;

	*/

}



/* pin list */

.sc_products ul.pin-list li a{

	display: block;

	background-image: url("/en/sustainability/assets/images/sc_products/icon_pin.svg");

	background-repeat: no-repeat;

	background-size: contain;

	background-position: center;

	width: min(5.5vw,78px);

	height: min(5.5vw,78px);

	

	position: absolute;

	z-index: 1;

}



.sc_products ul.pin-list li a .title{

	opacity: 0;

	

	width: 10em;

	height: 4em;

	

	display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

	-webkit-box-pack: center;

	-ms-flex-pack: center;

	justify-content: center;

	-webkit-box-align: center;

	-ms-flex-align: center;

	align-items: center;

	text-align: center;

	line-height: 1.4;



	background-color: #fff;

	border-radius: 50%;

	box-shadow: 04px 6px 4px 0px rgba(0, 0, 0, 0.25);

	

	position: absolute;

	z-index: 1;

	top: 100%;

	left: 50%;

	

	transition: all 0.3s ease-out;

}



.sc_products ul.pin-list li a h3.title-left{

	left: auto;

	right: 50%;

}



.sc_products ul.pin-list li a:hover .title{

	opacity: 1;

}



/* pin sec1 */

.sc_products a.modal01{ /* airplane */

	top: 56%;

	left: 71%;

}



.sc_products a.modal02{ /* orchard */

	top: 71.5%;

  left: 41.5%;

}

/* pin sec2 */

.sc_products a.modal03{ /* field */

	top: 14%;

  left: 81%;

}



.sc_products a.modal04{ /* office */

	top: 41%;

  left: 35.5%;

}



.sc_products a.modal05{ /* car */

	top: 55%;

  left: 74.5%;

}



.sc_products a.modal06{ /* restaurant */

	top: 90%;

  left: 50.5%;

}



.sc_products a.modal07{ /* school */

	top: 91%;

  left: 82%;

}

/* pin sec3 */

.sc_products a.modal08{ /* hospital */

	top: 56.6%;

  left: 57%;

}



.sc_products a.modal09{ /* house */

	top: 80%;

  left: 58%;

}

/* pin sec4 */

.sc_products a.modal10{ /* shinkansen */

	top: 9%;

  left: 47%;

}



.sc_products a.modal11{ /* factory */

	top: 11.5%;

  left: 24.5%;

}



.sc_products a.modal12{ /* walker */

	top: 39%;

  left: 59.5%;

}



/* pin sec5 */

.sc_products a.modal13{ /* ship */

	top: 75%;

  left: 49%;

}

/* pin sec6 */

.sc_products a.modal14{ /* sealant */

	top: 25.6%;

  left: 26.4%;

}

.sc_products ul.pin-list li a.modal14{ /* 重なりfix */

	z-index: 3;

}

.sc_products ul.pin-list li a.modal14 .title {

	left: calc(50% - 4em);

}



.sc_products a.modal15{ /* contact-lens */

	top: 38%;

  left: 52%;

}

.sc_products ul.pin-list li a.modal15{ /* 重なりfix */

	z-index: 2;

}

.sc_products ul.pin-list li a.modal15 .title {

	left: calc(50% - 4em);

}



.sc_products a.modal16{ /* plastic-window */

	top: 50%;

  left: 72%;

}



.sc_products a.modal17{ /* air-conditioner */

	top: 50%;

  left: 20%;

}



.sc_products a.modal18{ /* led */

	top: 63%;

  left: 23%;

}



.sc_products a.modal19{ /* electronics */

	top: 92%;

  left: 50.5%;

}

/* pin sec7 */

.sc_products a.modal20{ /* lcdtv */

	top: -5%;

  left: 17%;

}



.sc_products a.modal21{ /* water */

	top: -2.5%;

  left: 56%;

}



.sc_products a.modal22{ /* garden-hose */

	top: 19.5%;

  left: 61.8%;

}



.sc_products a.modal23{ /* pipe */

	top: 47%;

  left: 29%;

}



@media screen and (min-width: 769px) { /* pc */

	div.sc_products ul.pin-list li a.modal14 .title {

		left: calc(50%);

	}

	div.sc_products ul.pin-list li a.modal15 .title {

		left: calc(50%);

	}

}





/* modal content */

.modal-content{

	text-align: left;

	

	position: relative;

	z-index: 1;

}



.remodal-close + .pc-scroll-wrapper,

.remodal-close + .modal-content{ /* 最初のmodal-content, SP時 x button 被らないように */

	margin-top: 16px;

}



.modal-content + .modal-content{ /* 複数時 */

	margin-top: 80px;

}



.modal-content + .modal-content::before{

	content: " ";

	display: block;

	border-top: 1px solid #dddddd;

	width: 100%;

	height: 1px;

	position: absolute;

	top: -40px;

	left: 0;

	z-index: 0;

}



.modal-content .flex-box01{ /* icon, text */

	display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

	

	-webkit-box-pack: justify;

	-ms-flex-pack: justify;

	justify-content: space-between;

	

	margin-bottom: clamp(16px, 8vw, 24px);

}



.modal-content .flex-box01 .icon-box{

	-ms-flex-preferred-size: calc((176/740) * 100%);

	flex-basis: calc((176/740) * 100%);

}



.modal-content .flex-box01 .detail-box{

	-ms-flex-preferred-size: calc((524/740) * 100%);

	flex-basis: calc((524/740) * 100%);

}



.modal-content .flex-box01 .detail-box .sdgs-list{

	margin: 0 0 16px;

	padding: 0;

}

.modal-content .flex-box01 .detail-box .sdgs-list li{

	display: inline-block;

	width: min(10vw,80px);

	margin-right: 4px;

}



.modal-content .flex-box02{ /* img */

	display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

	

	-webkit-box-pack: justify;

	-ms-flex-pack: justify;

	justify-content: space-between;

	-ms-flex-wrap: wrap;

  flex-wrap: wrap;

	column-gap: 2%;

}



.modal-content .flex-box02 .item-box{

	-ms-flex-preferred-size: 49%;

	flex-basis: 49%;

	

	text-align: center;

}



.modal-content .flex-box02 .item-box:nth-child(n + 3){

	margin-top: 48px;

}



.modal-content .flex-box02 .item-box .text-place{

	background-color: #009C95;

	color: #fff;

	border-radius: 4px;

	text-align: center;

	padding: 0.2em;

	

	display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

	-webkit-box-pack: center;

	-ms-flex-pack: center;

	justify-content: center;

	-webkit-box-align: center;

	-ms-flex-align: center;

	align-items: center;

}



.modal-content .flex-box02 .item-box figcaption{

	font-size: 1.25em;

	font-weight: bold;

	min-height: 3em;

	margin: 8px 0;

}



@media screen and (min-width: 769px) { /* pc */

	div.pc-scroll-wrapper{

		max-height: 484px;

		overflow: auto;

		padding-right: 8px; /* scroll bar, firefoxでかぶる */

	}

	button.remodal-close + .pc-scroll-wrapper,

	button.remodal-close + .modal-content{ /* 最初のmodal-content, SP時 x button 被らないように */

		margin-top: 0;

	}

	

	div.modal-content .flex-box02 .item-box{

		-ms-flex-preferred-size: 49%;

		flex-basis: 49%;

	}

	div.modal-content .flex-box02 .item-box:nth-child(2){

		margin-top: 0;

	}

	

	.remodal-close{

		transition: all 0.3s ease-out;

	}

	.remodal-close:hover{

		opacity: 0.8;

	}

}



/* modal innner num */

.modal-content ul.inner-num-list{

	position: absolute;

	z-index: 0;

	top: 0;

	right: 0;

}



.modal-content ul.inner-num-list li{

  display: inline-flex;

	-webkit-box-pack: center;

	-ms-flex-pack: center;

	justify-content: center;

	-webkit-box-align: center;

	-ms-flex-align: center;

	align-items: center;

	

	width: 1.6em;

  height: 1.6em;

  border-radius: 50%;

  text-align: center;

  box-sizing: border-box;

	

	color: #fff;

	background-color: rgb(0 156 149 / 0.1);

}



.modal-content ul.inner-num-list li.active{

	background-color: #009C95;

}



.modal-content ul.inner-num-list li + li{

	margin-left: 0.5em;

}



/* modal inner img single */

.modal-content .single-img-box{

	max-width: 264px;

	margin: 0 auto;

}



/* modal inner img flex */

.modal-content ul.inner-flex-list{

	display:-webkit-box;

  display:-ms-flexbox;

  display:flex;

	

	column-gap: 1%;

}



.modal-content ul.inner-flex-list li{

	flex: 1;

	text-align: center;

}



.modal-content ul.inner-flex-list li .caption-bottom{

	margin-top: 8px;

}



/* modal content common */

.modal-content .display-ib{

	display: inline-block;

}



/* modal content each */

@media screen and (min-width: 769px) { /* pc */

	div.modal04 .inner-flex-list,

	div.modal11 .inner-flex-list,

	div.modal12 .inner-flex-list,

	div.modal19 .inner-flex-list{

		padding-top: 10%;

	}

}





/* remodal custom */

.remodal-wrapper .remodal-close{

	left: auto;

	right: 0;

}

.remodal-close:before {

    font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;

    font-size: 25px;

    line-height: 35px;

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    width: 35px;

    content: "\00d7";

    text-align: center;

}



@media screen and (min-width: 769px) { /* pc */

	div.remodal-wrapper .remodal-close{

		width: 90px;

		height: 100px;

		

		background-image: url("/en/sustainability/assets/images/sc_products/icon_close_pc_e.svg");

		background-repeat: no-repeat;

		background-size: contain;

		background-position: center;

	}

	div.remodal-wrapper .remodal-close:before {

		content: "";

    width: 0;

		height: 0;

		display: none;

	}

}



.remodal-wrapper .remodal {

	border-radius: 16px;

	padding: min(4%,40px);

}

@media only screen and (min-width: 641px) {

  div.remodal-wrapper .remodal {

     max-width: 920px;

  }

}



@media screen and (min-width: 769px) { /* pc */

	div.remodal-wrapper .remodal {

		border-radius: 16px;

		padding-right: 100px;

	}

}