@charset "UTF-8";

/*
========================================

	/about/sustainability/css/sus_add.css
 
========================================
*/

/*sdgs

#gr_contents div.sus_section div#s01 {背景画像を上下に
	background-size:640px 6px;
	background-image: url(/about/sustainability/img/bg_line_sdgs.svg),url(/about/sustainability/img/bg_line_sdgs.svg);
	background-repeat: repeat-x, repeat-x;
	background-position:
		top center,
		bottom center;
  }
  @media (min-width: 1024px) {

	#gr_contents div.sus_section div#s01 {
		background-size:960px 9px;
	}

  }*/

#gr_contents div.sdgs dl dd {
  position: relative;
  display: block;
  margin: 0 0 1rem 0;
  padding-left: 24px;
}

#gr_contents div.sdgs dl dd::after {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 8px;
  left: 0;
  display: inline-block;
  content: "";
  border: 2px solid #1d4ed8; /*輪郭*/
  opacity: 0.5;
  background: #fff;
  background-size: 16px 16px;
}

.contents_item a {
  border: 0;
}

/*benefit*/

#gr_contents div#s01 {
  margin-top: 64px;
}

#gr_contents div.benefit_type {
  margin-top: -16px;
  margin-bottom: -16px;
  position: relative;
  width: 500%;
}

#gr_contents div.benefit_type h3 {
  position: relative;
  padding: 0.25rem calc(0.5rem + 10px);
  color: #fff;
  text-shadow: 1px 1px #7088bf;
  max-width: fit-content;
  min-width: 180px;
  min-height: 44px;
  font-style: oblique;
  line-height: 1.5;
  z-index: -2;
}

#gr_contents div.benefit_type h3 span.text {
  display: block;
  position: absolute;
  z-index: 2;
  font-weight: 700;
  margin-bottom: 0;
}

#gr_contents div.benefit_type span.num {
  color: rgba(112, 136, 191, 0.25); /*#7088bf;*/
  font-style: oblique;
  letter-spacing: 0;
  font-size: 220%;
  font-weight: 700;
  display: block;
  position: absolute;
  top: 0;
  right: 0.5rem;
  z-index: -1;
  margin-top: -10px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.5rem;
  opacity: 0.5;
}

#gr_contents div.benefit_type h3.ppl {
  /*background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); 
  background-image: linear-gradient(to top, #a7a6cb 0%, #8989ba 52%, #8989ba 100%);
  background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
  background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%); */
  background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%); /*★*/
}

#gr_contents div.benefit_type h3.pnk {
  background-image: linear-gradient(120deg, #f49bd9 0%, #f49bd9 40%, #bddafb 100%); /*★*/
}
#gr_contents div.benefit_type span.num.pnk {
  background-image: linear-gradient(-120deg, #f49bd9 0%, #f49bd9 40%, #bddafb 100%); /*★*/
}

#gr_contents div.benefit_type h3.org {
  /*background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);*/
  background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); /*★*/
}

#gr_contents div.benefit_type h3.yel {
  background-image: linear-gradient(120deg, #ade670 0%, #fcefa0 100%); /*★*/
}
#gr_contents div.benefit_type span.num.yel {
  background-image: linear-gradient(-120deg, #ade670 0%, #fcefa0 100%); /*★*/
}

#gr_contents div.benefit_type h3.lmn {
  background-image: linear-gradient(120deg, #64b3f4 0%, #64b3f4 40%, #d6f4b6 100%); /*★*/
}
#gr_contents div.benefit_type span.num.lmn {
  background-image: linear-gradient(-120deg, #64b3f4 0%, #64b3f4 40%, #d6f4b6 100%); /*★*/
}

#gr_contents div.benefit_type h3.grn {
  /*background-image: linear-gradient(60deg, #96deda 0%, #50c9c3 100%); */
  background-image: linear-gradient(-225deg, #b7f8db 0%, #50a7c2 100%); /*★*/
}

#gr_contents div.benefit_type h3.blu {
  /*background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
  background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%); */
  background-image: linear-gradient(120deg, #64b3f4 0%, #64b3f4 40%, #c2e9fb 100%); /*★*/
}
#gr_contents div.benefit_type span.num.blu {
  background-image: linear-gradient(-120deg, #64b3f4 0%, #64b3f4 40%, #c2e9fb 100%); /*★*/
}

#gr_contents div.benefit_type h3.red {
  background-image: linear-gradient(120deg, #ff6b95 0%, #ff6b95 40%, #fcd0aa 100%); /*★*/
}
#gr_contents div.benefit_type span.num.red {
  background-image: linear-gradient(-120deg, #ff6b95 0%, #ff6b95 40%, #fcd0aa 100%); /*★*/
}

#gr_contents div.benefit_type h3.nvy {
  background-image: linear-gradient(to top, #6a85b6 0%, #bac8e0 100%);
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
  background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
  background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
  background-image: linear-gradient(-225deg, #cbbacc 0%, #2580b3 100%);
  background-image: linear-gradient(-225deg, #7085b6 0%, #87a7d9 50%, #def3f8 100%); /**/
  background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%); /*★*/
  background-blend-mode: lighten;
}

#gr_contents div.benefit_type h3.pale {
  /*background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);*/
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /*★*/
}

#gr_contents div.benefit_type h3::before {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 100%;
  height: 100%;
  content: "";
  border: 1px solid #7088bf;
}

#gr_contents div.benefit_type img {
  /*position: absolute;
	z-index: 2;*/
  width: 100%;
  height: auto;
  max-width: 144px;
  margin: 0 auto;
  /*border: 1px solid #c33;*/
}

@media (min-width: 1024px) {
  #gr_contents div.benefit_type {
    margin-top: -30px;
    margin-bottom: -30px;
    position: relative;
    width: 500%;
  }

  #gr_contents div.benefit_type h3 {
    padding: 0.6rem calc(0.5rem + 10px) 0.5rem calc(0.5rem + 10px);
    min-width: 360px;
    min-height: 64px;
  }

  #gr_contents div.benefit_type span.num {
    font-size: 450%;
    font-weight: 700;
    font-style: oblique;
    letter-spacing: 0;
    top: -70%;
    right: 1.5rem;
    margin-top: 0;
  }

  #gr_contents div.benefit_type h3::before {
    border: 1px solid #7088bf;
  }

  #gr_contents div.benefit_type img {
    max-width: 240px;
    margin: 0 auto 16px;
  }
}

div.section.benefit table.table_list {
  margin-left: -15%;
  width: 115%;
}

div.section.benefit table.table_list th {
  border-color: #7088bf;
  border: 0;
  display: block;
  width: 100%;
  padding-left: 0.5rem;
  padding-bottom: 0;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); /*-----16px-20px*/
  font-weight: 700;
}

div.section.benefit table.table_list tr:first-child th {
  border-top: 1px solid #7088bf;
  padding-top: 2rem;
}

div.section.benefit table.table_list th {
  padding-top: 1.5rem;
}

div.section.benefit table.table_list td {
  border-color: #7088bf;
  border-top: 0;
  display: block;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

div.section.benefit table.table_list td ul li {
  margin-left: 1rem;
  list-style-position: outside;
}

div.section.benefit table.table_list td ul li::marker {
  color: #7088bf;
  font-size: 1rem;
}

@media (min-width: 1024px) {
  #gr_contents div#s01 {
    margin-top: 80px;
  }

  div.section.benefit table.table_list th {
    display: table-cell;
    width: 25%;
    border-bottom: 1px solid #7088bf;
    padding-top: 0;
    padding-left: 2rem;
    vertical-align: middle !important;
  }

  div.section.benefit table.table_list td {
    display: table-cell;
    width: 75%;
    border-top: 1px solid #7088bf;
    border-left: 1px dashed #7088bf;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  div.section.benefit table.table_list tr:first-child th {
    padding-top: 0;
  }
}