#sustainability h2 { font-size: 3rem; font-weight: 700; text-align: center; width: 100%; }
#sustainability h2 span { display: inline-block; padding-left: 6.5rem; font-size: 100%; position: relative; }
#sustainability h2 span:before { content: ""; width: 5rem; height: 5rem; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

#intro { padding-top: 6rem; padding-bottom: 8rem; position: relative; }
#intro:after { content: ""; width: 100%; height: 22.5rem; background-color: rgba(233, 245, 243, 0.5); position: absolute; bottom: 0; left: 0; z-index: -1; }
#intro .l_con { display: flex; flex-wrap: wrap; }
#intro h2 { margin-bottom: 6.5rem; }
#intro h2 span:before { background: url(../images/sustainability/icon_sustainability.svg) 0 0 no-repeat; background-size: 100% auto; }
#intro .pic { width: 56rem; }
#intro .txt { width: 50rem; margin-left: auto; display: flex; flex-direction: column; }
#intro .txt p { font-size: 1.5rem; line-height: 2.1; padding-bottom: 3rem; }
#intro .txt ul { margin-top: auto; display: flex; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
#intro .txt ul li { width: 24rem; list-style: none; }
#intro .txt ul li a { display: block; position: relative; border-bottom: 0.1rem solid #BFBFBF; height: 6rem; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 1.4rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease; }
#intro .txt ul li a:before { content: ""; width: 0.8rem; height: 1.3rem; background: url(../images/common/arrow_g.svg) 0 0 no-repeat; background-size: 100% auto; position: absolute; right: 1.0rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease; }
#intro .txt ul li a:after { content: ""; width: 3rem; height: 0.1rem; background-color: #00BAA4; position: absolute; bottom: -0.1rem; right: 0; }
#intro .txt ul li a:hover { color: #00BAA4; border-color: #00BAA4; }
#intro .txt ul li a:hover:before { right: 0.5rem; }

#attempt { padding-top: 8rem; padding-bottom: 12rem; }
#attempt h2 { margin-bottom: 4rem; }
#attempt h2 span:before { background: url(../images/sustainability/icon_attempt.svg) 0 0 no-repeat; background-size: 100% auto; }
#attempt .txt_center { text-align: center; padding-bottom: 4rem; font-size: 1.5rem; letter-spacing: 0.04em; }
#attempt .attempt_inner { display: flex; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
#attempt .attempt_block { width: 37.2rem; }
#attempt .attempt_link { border: 0.1rem solid #EDEDED; position: relative; background-color: #fff; }
#attempt .attempt_link:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 2rem 2rem; border-color: transparent transparent #00BAA4 transparent; position: absolute; bottom: 0; right: 0; }
#attempt .attempt_link .pic { position: relative; overflow: hidden; }
#attempt .attempt_link .pic h4 { font-size: 2.0rem; letter-spacing: 0; line-height: 1; font-weight: 700; color: #fff; position: absolute; left: 3rem; bottom: 1.8rem; z-index: 2; }
#attempt .attempt_link .pic img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease; width: 100%; }
#attempt .attempt_link p { font-size: 1.5rem; letter-spacing: 0.04em; line-height: 2.13; padding: 3rem; padding-bottom: 5rem; }
#attempt .attempt_link:hover .pic img { transform: scale(1.1, 1.1); }

@media screen and (max-width: 767px) { #sustainability .l_con { padding-left: 2rem; padding-right: 2rem; }
  #sustainability h2 { font-size: 2rem; }
  #sustainability h2 span { padding-left: 4.0rem; }
  #sustainability h2 span:before { width: 3rem; height: 3rem; }
  #intro { padding-top: 3rem; padding-bottom: 4rem; }
  #intro:after { height: 16rem; }
  #intro h2 { margin-bottom: 3rem; }
  #intro .pic { width: 100vw; margin-left: -2rem; margin-right: -2rem; }
  #intro .txt { width: 100%; padding-top: 3rem; }
  #intro .txt p { font-size: 1.3rem; line-height: 1.78; padding-bottom: 2rem; }
  #intro .txt p:last-of-type { padding-bottom: 0; }
  #intro .txt ul { padding-top: 2rem; }
  #intro .txt ul li { width: 16rem; list-style: none; }
  #intro .txt ul li a { padding: 1.6rem 0; font-size: 1.2rem; }
  #intro .txt ul li a.narrow { padding: 1.1rem 0; line-height: 1.3; }
  #intro .txt ul li a:before { width: 0.7rem; height: 1.15rem; right: 0.6rem; }
  #intro .txt ul li a:after { width: 2rem; }
  #intro .txt ul li a:hover:before { right: 0.3rem; }
  #attempt { padding-top: 4rem; padding-bottom: 6rem; }
  #attempt h2 { margin-bottom: 2rem; }
  #attempt .txt_center { font-size: 1.3rem; padding-top: 2rem; }
  #attempt .attempt_inner { padding: 0; }
  #attempt .attempt_block { width: 100%; margin-bottom: 1rem; }
  #attempt .attempt_link { height: auto; }
  #attempt .attempt_link:after { border-width: 0 0 1.5rem 1.5rem; }
  #attempt .attempt_link .pic h4 { font-size: 1.6rem; left: 50%; bottom: auto; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; width: 100%; }
  #attempt .attempt_link p { font-size: 1.2rem; line-height: 1.75; padding: 1rem 1rem 2.5rem; } }