/*Base*/
@charset "UTF-8";

.windowpic{
text-align: center;
	margin:0px 0 20px;
}
/* モーダルCSS */
.modalArea{
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
	background: rgb(76, 131, 37, 0.2);
}

.modalBg02 {
  width: 100%;
  height: 100%;
	background: rgb(185, 230, 251, 0.3);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 50%;
  max-width: 90%;
  max-height: 85%;
  overflow-y:scroll;
  padding: 20px 40px;
  background-color: #fff;
	border-radius:15px;
}

.modalWrapper::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/* スクロールの背景の設定 */
.modalWrapper::-webkit-scrollbar-track {
  border-radius: 15px;
  box-shadow: 0 0 4px #aaa inset;
}
/* スクロールのつまみ部分の設定 */
.modalWrapper::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background: #4c8325;
}

.closeModal {
  position: absolute;
  top: 0rem;
  right: 1rem;
	font-size:3em;
  cursor: pointer;
}



/* 以下ボタンスタイル */


#openModal06, #openModal07, #openModal08, #openModal09, #openModal10, #openModal11, #openModal12, #openModalA, #openModalB, #openModalC, #openModalD, #openModalE, #openModalF, #openModalG, #openModalH{
  cursor: pointer;
}


#sdgs-window hr{
	border-top: 1px solid #36b449;
	border-bottom: 0px;
	margin:0px 0 30px;
	}



#sustainability #detailcontents .head-title h4{
	border:0px;
	margin:0px;
	font-size:1.4em;
	color:#333;
	font-weight:bold;
	border-bottom:  0px;
	color:#235420;
}

h4 .subt{
	font-size:0.8em;
	margin-left:15px;
	font-weight:normal;
	color:#333;
}



#sdgs-window .mainlead{
	text-align:justify;
	font-size:1.0em;
	line-height:33px;
}

#sdgs-window .mainlead ul{
	margin:10px 0 0 -28px;
}

#sdgs-window .mainlead ul .small{
	font-size:0.9em;
	line-height:26px;
	margin-bottom:16px;
	width:90%;
}
	
#sdgs-window .mainlead .red{
	color:#c23d32;
	font-weight:bold;
}


#sdgs-window .mainpic{
	margin:15px 0 20px ;
	text-align:center;
	}


/*製品ボタン*/

a.btn--red.btn--cubic {
	font-weight:normal;
	color:#168a0e;
	font-size:1em;
	border-bottom: 5px solid #168a0e;
	padding:5px 40px;
	border-top:1px solid#ccc;
	
}

a.btn--red.btn--cubic:hover {
  margin-top: 3px;
	border-top:0px solid#ccc;
	border-bottom: 2px solid #168a0e;
	text-decoration:none;
}

a.btn--radius {
  border-radius: 10vh;
}



@media only screen and (max-width: 768px) {
.modalWrapper {
  width: 85%;
  padding: 40px 30px 20px 30px;
}

}


@media screen and (max-width: 640px) {
.modalWrapper {
  width: 80%;
  padding: 20px 20px 20px 20px;
}

#modalArea .head-window,
#modalArea06 .head-window{
	display: flex;
	justify-content:space-between;
	height:80px;
}





#modalArea06 .head-title h4,#modalArea07 .head-title h4{
	font-size:1.0em;
	margin-top:5px;
	line-height:22px;
}



#sdgs-window .mainlead{
	line-height:26px;
}

#sdgs-window hr{
	margin:35px 0 20px;
	}

#sdgs-window{
	margin-top:0px;
}

#sdgs-window .mainpic img{
	width:100%;
	height:auto;
	}

}


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

/*sdgs-obi*/



#modalArea06 .head-title h4{
	font-size:0.9em;
}

}


/*pict effect*/



@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }