#suntory_contents {
  padding-bottom: 196px;
  background-repeat: no-repeat;
  background-position: center top 1616px;
  background-size: 3340px;
  background-image: url(../img/our_impact/bg_impact.svg);
}
#suntory_contents h1, #suntory_contents h2, #suntory_contents h3 {
  font-family: var(--fontfamily-georgia);
  font-weight: bold;
  font-style: italic;
}
#suntory_contents h1 {
  font-size: var(--fontsize-display-x-large);
  line-height: var(--lineheight-display-x-large);
}
#suntory_contents h2 {
  font-size: var(--fontsize-display-large);
  line-height: var(--lineheight-display-large);
}
#suntory_contents h3 {
  font-size: var(--fontsize-display-medium);
  line-height: var(--lineheight-display-medium);
}
@media screen and (min-width: 1165px) {
  #suntory_contents {
    background-image: url(../img/our_impact/bg_impact_pc.svg);
  }
}

#banner {
  background-repeat: no-repeat;
  background-position: center top -359px;
  background-size: 3174px;
  background-image: url(../img/our_impact/bg_banner.svg);
  text-align: center;
}
#banner h1 {
  max-width: 1023px;
  margin: 74px auto 0;
}
#banner p {
  display: block;
  max-width: 610px;
  margin: 40px auto 0;
}
#banner .footPrint {
  margin-top: 160px;
}
#banner .footPrint h2 {
  text-align: center;
  font-size: var(--fontsize-display-medium);
  line-height: var(--lineheight-display-medium);
}
#banner .footPrint h4, #banner .footPrint h5, #banner .footPrint .title, #banner .footPrint .num {
  font-family: var(--fontfamily-georgia);
  font-weight: bold;
  font-style: italic;
}
#banner .footPrint .globalCase {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin: 65px auto 0;
}
#banner .footPrint .globalCase P {
  margin: 0;
}
#banner .footPrint .globalCase .globalBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 108px;
  position: relative;
}
#banner .footPrint .globalCase .globalBox .num {
  font-size: var(--fontsize-display-x-large);
  line-height: var(--lineheight-display-x-large);
}
#banner .footPrint .globalCase .globalBox::before {
  content: "";
  position: absolute;
  left: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  top: 8px;
  width: 96px;
  height: 96px;
}
#banner .footPrint .globalCase .globalBox:first-child::before {
  background-image: url(../img/our_impact/global_icon1.svg);
}
#banner .footPrint .globalCase .globalBox:last-child.fadein {
  transition-delay: 0.2s;
}
#banner .footPrint .globalCase .globalBox:last-child::before {
  background-image: url(../img/our_impact/global_icon2.svg);
}
#banner .footPrint .globalCase + p {
  text-align: center;
  max-width: 615px;
  margin: 58px auto 0;
}

#data h2 {
  text-align: center;
  font-size: var(--fontsize-display-medium);
  line-height: var(--lineheight-display-medium);
}
#data h4, #data h5, #data .title, #data .num {
  font-family: var(--fontfamily-georgia);
  font-weight: bold;
  font-style: italic;
}
#data .mapCase {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/our_impact/global_map.svg);
  width: 100%;
  height: auto;
  aspect-ratio: 1133/592;
  position: relative;
  margin-top: 100px;
}
#data .mapCase .mapBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 260px;
  height: 260px;
  padding: 0 32px;
}
#data .mapCase .mapBox * {
  position: relative;
  text-align: center;
}
#data .mapCase .mapBox .title {
  font-size: var(--fontsize-display-small);
  line-height: 85%;
  border-bottom: 4px dotted var(--color-suntory-water);
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 4px;
  padding-top: 4px;
}
#data .mapCase .mapBox .num {
  font-size: 38px;
  line-height: 100%;
  transform: translateY(-6px);
}
#data .mapCase .mapBox .num:last-child {
  font-size: 28px;
  transform: translateY(-3px);
}
#data .mapCase .mapBox p:not(.num) {
  font-size: var(--fontsize-body-small);
  line-height: var(--lineheight-body-small);
}
#data .mapCase .mapBox::before {
  content: "";
  width: 260px;
  height: 260px;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.8);
  border: 8px solid var(--color-suntory-water);
  border-radius: 50%;
}
#data .mapCase .mapBox.europe {
  left: 0;
  top: 15.3%;
}
#data .mapCase .mapBox.asia {
  right: 50%;
  bottom: 5%;
}
#data .mapCase .mapBox.asia h4 {
  padding-bottom: 4px;
}
#data .mapCase .mapBox.japan {
  left: 42.2%;
  top: 5%;
}
#data .mapCase .mapBox.america {
  right: 0;
  bottom: 28%;
}
#data .mapCase .mapAttn {
  font-size: var(--fontsize-body-small);
  line-height: var(--lineheight-body-small);
  position: absolute;
  right: 0;
  bottom: -36px;
}
#data .Component-Basic-button_filled {
  margin: 24px auto 0;
}
#data .business {
  margin-top: 308px; /*margin-top: 208px;*/
  position: relative;
}
#data .business .factsheet {
  position: absolute;
  top: -270px;
  right: 0;
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#data .business .factsheet:hover .download {
  text-decoration: underline;
}
#data .business .factsheet .img {
  width: 188px;
  height: 188px;
  display: block;
}
#data .business .factsheet .txt {
  width: 190px;
  display: block;
  color: var(--color-midnight-blue);
}
#data .business .factsheet .txt .title {
  font-family: var(--fontfamily-alegreya);
  font-style: normal;
  font-size: var(--fontsize-body-large);
  line-height: var(--lineheight-body-large);
  margin: 0 0 20px 0;
  font-weight: bold;
}
#data .business .factsheet .txt .download {
  font-size: var(--fontsize-button);
  line-height: var(--lineheight-button);
  font-weight: bold;
  position: relative;
  padding-right: 28px;
  /*display: none;*/
}
#data .business .factsheet .txt .download::after {
  content: "";
  width: 24px;
  height: 24px;
  transform: translateY(-4px);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../component/common/img/icon_arrow_right.svg);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}
#data .business > p {
  margin: 24px auto 0;
  max-width: 612px;
  text-align: center;
}
#data .business .businessCase {
  margin-top: 116px;
  display: flex;
  justify-content: space-between;
}
#data .business .businessCase .businessGraph {
  width: 50%;
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/our_impact/business_graph.svg);
  transform: translateY(-48px);
  position: relative;
}
#data .business .businessCase .businessGraph p:not(.num) {
  font-size: 26px;
  text-align: center;
}
#data .business .businessCase .businessGraph h4 {
  margin-top: 4px;
  font-size: 72px;
  line-height: 100%;
}
#data .business .businessCase .businessGraph p.num {
  margin-top: 5px;
  font-size: 26px;
  line-height: 100%;
  font-family: var(--fontfamily-alegreya);
  font-style: normal;
}
#data .business .businessCase .businessGraph .graphNum {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
}
#data .business .businessCase .businessGraph .graphNum p.title {
  font-family: var(--fontfamily-georgia);
  font-weight: bold;
  font-style: italic;
  font-size: 61px;
  line-height: 100%;
}
#data .business .businessCase .businessGraph .graphNum p.title span {
  font-size: 48px;
}
#data .business .businessCase .businessGraph .graphNum p:not(.title) {
  font-size: 18px;
  font-weight: bold;
  padding-top: 3px;
}
#data .business .businessCase .businessGraph .graphNum.graphNum1 {
  left: 8px;
  top: 6px;
}
#data .business .businessCase .businessGraph .graphNum.graphNum1 p:not(.title) {
  transform: translate(-1px, -12px);
}
#data .business .businessCase .businessGraph .graphNum.graphNum2 {
  left: 0;
  bottom: 3px;
}
#data .business .businessCase .businessGraph .graphNum.graphNum3 {
  right: 3px;
  bottom: 3px;
}
#data .business .businessCase .businessBody {
  width: calc(50% - 40px);
}
#data .business .businessCase .businessBody .businessBox {
  padding: 0 10px 0 8px;
  margin-bottom: 40px;
  width: 100%;
}
#data .business .businessCase .businessBody .businessBox h4 {
  font-family: var(--fontfamily-alegreya);
  font-style: normal;
  font-size: var(--fontsize-body-large);
  line-height: var(--lineheight-body-large);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--color-suntory-water);
  padding-bottom: 6px;
}
#data .business .businessCase .businessBody .businessBox h4 span.businessBoxRight {
  transform: translateX(10px);
}
#data .business .businessCase .businessBody .businessBox ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
#data .business .businessCase .businessBody .businessBox ul li p {
  font-family: var(--fontfamily-alegreya);
  font-style: normal;
  font-weight: normal;
  font-size: var(--fontsize-body-large);
  line-height: var(--lineheight-body-large);
}
#data .business .businessCase .businessBody .businessBox ul li span.businessBoxRight {
  font-size: var(--fontsize-body-large);
  line-height: var(--lineheight-body-large);
  transform: translateX(10px);
  font-weight: bold;
}
#data .business .businessCase .businessBody .businessBox:first-child ul li p {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
#data .business .businessCase .businessBody .businessBox:first-child ul li p::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
#data .business .businessCase .businessBody .businessBox:first-child ul li:nth-child(1) p::before {
  background-color: var(--color-suntory-water);
}
#data .business .businessCase .businessBody .businessBox:first-child ul li:nth-child(2) p::before {
  background-color: var(--color-graph-gold);
}
#data .business .businessCase .businessBody .businessBox:first-child ul li:nth-child(3) p::before {
  background-color: var(--color-dark-water);
}
#data .business .businessCase .businessBody .businessAttn {
  font-size: var(--fontsize-body-small);
  line-height: var(--lineheight-body-small);
}
@media screen and (max-width: 1080px) {
  #data .mapCase .mapBox {
    transform-origin: center center;
    transform: scale(0.7);
  }
  #data .mapCase .mapBox.asia {
    right: 45%;
  }
}
@media screen and (max-width: 900px) {
  #data .mapCase .mapBox {
    transform-origin: center center;
    transform: scale(0.5);
  }
}

#vision {
  margin-top: 200px;
}
#vision h2 {
  text-align: center;
}
#vision h2 + p {
  margin: 40px auto 0;
  text-align: center;
  max-width: 792px;
}
#vision .Component-Basic-button_filled {
  margin: 48px auto 0;
}
#vision .targetCase {
  margin-top: 120px;
}
#vision .targetCase h3 {
  text-align: center;
}
#vision .targetCase .targetFrame {
  display: flex;
  justify-content: space-between;
  margin: 28px auto 0;
  position: relative;
  max-width: 1036px;
}
#vision .targetCase .targetFrame .targetBox {
  width: 31%;
  padding: 23px 16px 0px;
  font-size: var(--fontsize-body-large);
  line-height: var(--lineheight-body-large);
  text-align: center;
  font-weight: bold;
  min-height: 118px;
}
#vision .targetCase .targetFrame .targetBox::after {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
#vision .targetCase .targetFrame .targetBox.targetBoxWater::after {
  width: 82px;
  height: 82px;
}
#vision .targetCase .targetFrame .targetBox.targetBoxGhg::after {
  width: 82px;
  height: 74px;
}
#vision .targetCase .targetFrame .targetBox.targetRecycle::after {
  width: 88px;
  height: 93px;
}
#vision .targetBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  left: 0px;
  top: 41px;
  border: 4px solid black;
  border-radius: 24px;
  position: relative;
}
#vision .targetBox::after {
  content: "";
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
#vision .targetBox.targetBoxWater {
  border-color: var(--color-suntory-water);
}
#vision .targetBox.targetBoxWater::after {
  background-image: url(../img/our_impact/icon_target_water.svg);
}
#vision .targetBox.targetBoxGhg {
  border-color: var(--color-target-purple);
}
#vision .targetBox.targetBoxGhg::after {
  background-image: url(../img/our_impact/icon_target_ghg.svg);
}
#vision .targetBox.targetRecycle {
  border-color: var(--color-target-green);
}
#vision .targetBox.targetRecycle::after {
  background-image: url(../img/our_impact/icon_target_recycle.svg);
}
#vision .tabHead {
  display: flex;
  margin-top: 110px;
  justify-content: center;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--color-suntory-water);
}
#vision .tabHead li a {
  padding-bottom: 15px;
  font-size: var(--fontsize-display-medium);
  line-height: var(--lineheight-display-medium);
  font-family: var(--fontfamily-georgia);
  font-weight: bold;
  font-style: italic;
  width: 200px;
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-midnight-blue);
  position: relative;
}
#vision .tabHead li.active a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  bottom: -4px;
  left: 0;
  background-color: var(--color-midnight-blue);
}
#vision .tabBody {
  margin: 0 auto 0;
  max-width: 1036px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}
#vision .tabBody .tabContents {
  display: flex;
  flex-wrap: wrap;
  row-gap: 46px;
  -moz-column-gap: 24px;
       column-gap: 24px;
}
#vision .tabBody .tabContents .targetBox {
  padding: 23px 24px;
  width: calc((100% - 24px) / 2);
  min-height: 133px;
  gap: 6px;
}
#vision .tabBody .tabContents .targetBox p {
  text-align: center;
}
#vision .tabBody .tabContents .targetBox p:not(.title) small {
  font-size: var(--fontsize-body-small);
  line-height: var(--lineheight-body-small);
}
#vision .tabBody .tabContents .targetBox small {
  font-family: var(--fontfamily-alegreya);
  font-size: var(--fontsize-body-medium);
  line-height: var(--lineheight-body-medium);
  transform: translateY(-3px);
  display: inline-block;
  font-weight: bold;
  font-style: normal;
}
#vision .tabBody .tabContents .targetBox p.title {
  font-size: var(--fontsize-body-large);
  line-height: var(--lineheight-body-large);
  font-weight: bold;
}
#vision .tabBody .tabContents .targetBox p:not(.title) {
  font-size: var(--fontsize-body-small);
  line-height: var(--lineheight-body-small);
}
#vision .tabBody .tabContents .targetBox .textLL {
  font-size: var(--fontsize-display-medium);
  line-height: var(--lineheight-display-medium);
  font-weight: bold;
  font-family: var(--fontfamily-georgia);
  font-style: italic;
}
#vision .tabBody .tabContents .targetBox .textL {
  font-size: var(--fontsize-display-small);
  line-height: var(--lineheight-display-small);
  font-weight: bold;
  font-family: var(--fontfamily-georgia);
  font-style: italic;
}
#vision .tabBody .tabContents .targetBox .textM {
  font-size: 20px;
}
#vision .tabBody .tabContents .targetBox .textS {
  font-size: 16px;
}
#vision .tabBody .tabContents .targetBox ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
#vision .tabBody .tabContents .targetBox::after {
  top: 0;
  left: 17px;
  transform: translateY(-50%);
}
#vision .tabBody .tabContents .targetBox.targetBoxWater::after {
  width: 65.6px;
  height: 65.6px;
}
#vision .tabBody .tabContents .targetBox.targetBoxGhg::after {
  width: 65.6px;
  height: 59.2px;
}
#vision .tabBody .tabContents .targetBox.targetRecycle::after {
  width: 70.4px;
  height: 74.4px;
}
#vision .tabBody .tabContents:first-child .targetBoxWater:first-of-type p.title {
  max-width: 330px;
}
#vision .tabBody .tabContents:first-child .targetBoxWater:first-of-type p:not(.title) {
  max-width: 350px;
}
#vision .tabBody .tabContents:first-child .targetBoxWater:nth-of-type(2) p:not(.title) {
  max-width: 350px;
}
#vision .tabBody .tabContents:first-child .targetBoxGhg ul {
  width: 100%;
}
#vision .tabBody .tabContents:first-child .targetBoxGhg ul p:not(.title) {
  transform: translateY(6px);
}
#vision .tabBody .tabContents:first-child .targetBoxGhg ul li:first-child {
  text-align: right;
  width: 220px;
}
#vision .tabBody .tabContents:first-child .targetBoxGhg ul li:last-child {
  white-space: nowrap;
}
#vision .tabBody .tabContents:first-child .targetRecycle ul:first-child li:first-child {
  transform: translate(-6px, -5px);
}
#vision .tabBody .tabContents:first-child .targetRecycle ul:last-child {
  transform: translateY(-4px);
}
#vision .tabBody .tabContents:first-child .targetRecycle ul:last-child li {
  display: inline;
  text-align: center;
}
#vision .tabBody .tabContents:first-child .targetRecycle ul:last-child li p {
  display: inline;
}
#vision .tabBody .tabContents:first-child .targetRecycle ul:last-child li p small {
  display: inline-block;
  transform: translateY(-3px);
}
#vision .tabBody .tabContents:last-child .targetBox:nth-child(2) {
  gap: 2px;
}
#vision .tabBody .tabContents:last-child .targetBox:nth-child(3) {
  padding: 10px 32px;
}
#vision .tabBody .tabContents:last-child .targetBox:nth-child(3) p.title {
  max-width: 300px;
}
#vision .tabAttn {
  width: -moz-fit-content;
  width: fit-content;
  margin: 54px auto 0;
}

#values {
  margin-top: 311px;
}
#values .inner {
  display: flex;
  gap: 28px;
  justify-content: space-between;
}
#values .contsHead {
  width: calc((100% - 28px) / 2);
}
#values .contsHead h2 {
  text-align: left;
  font-size: var(--fontsize-display-x-large);
  line-height: var(--fontsize-display-x-large);
}
#values .contsHead p {
  max-width: 365px;
}
#values .contsHead .Component-Basic-button_filled {
  margin-top: 40px;
}
#values .contsBody {
  width: calc((100% - 28px) / 2);
}
#values .contsBody .card {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 40px;
}
#values .contsBody .card .cardVisual {
  width: calc((100% - 24px) / 2);
  height: auto;
  aspect-ratio: 294/147;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 24px;
}
#values .contsBody .card .cardBody {
  width: calc((100% - 24px) / 2);
}
#values .contsBody .card .cardBody .title {
  font-weight: bold;
  font-size: var(--fontsize-body-x-large);
  line-height: var(--lineheight-body-x-large);
  margin-bottom: 16px;
}
#values .contsBody .card:first-child {
  margin-top: 0;
}

#related {
  margin-top: 160px;
}
#related h2 {
  font-size: var(--fontsize-display-medium);
  line-height: var(--lineheight-display-medium);
  text-align: center;
}
#related .cardCase {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
}
#related .cardCase .card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc((100% - 48px) / 3);
  height: auto;
  aspect-ratio: 400/160;
  background: var(--color-white);
  border-radius: 24px;
  box-shadow: 0px 0px 12px var(--color-shadow);
  padding: 0 40px;
}
#related .cardCase .card p {
  font-size: var(--fontsize-body-x-large);
  line-height: var(--lineheight-body-x-large);
  color: var(--color-midnight-blue);
  font-weight: bold;
  padding-right: 20px;
}
#related .cardCase .card .Component-Basic-button_div_arrow::after {
  background-image: url(../../component/common/img/icon_open_newtab.svg);
}

#stories {
  margin-top: 160px;
}

@media screen and (max-width: 767px) {
  #suntory_contents {
    background-position: center top -20px; /*calc(-120px + 80px)*/
    background-size: 1707px;
    background-image: url(../img/our_impact/bg_impact_sp.svg);
  }
  #banner {
    background-image: none;
  }
  #banner h1, #banner p {
    width: 100%;
    text-align: left;
  }
  #banner h1 {
    margin: 32px auto 0px;
  }
  #banner p {
    margin: 16px auto 0;
  }
  #banner .footPrint {
    margin-top: 120px;
  }
  #banner .footPrint p {
    text-align: center;
  }
  #banner .footPrint .globalCase {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 53px;
  }
  #banner .footPrint .globalCase + p {
    margin-top: 75px;
  }
  #banner .footPrint .globalCase .globalBox {
    width: 283px;
  }
  #banner .footPrint .globalCase .globalBox:first-child::before {
    top: -15px;
  }
  #banner .footPrint .globalCase .globalBox:last-child.fadein {
    transition-delay: 0s;
  }
  #banner .footPrint .globalCase .globalBox:last-child::before {
    top: 9px;
  }
  #data .mapCase {
    margin-top: 40px;
    padding-top: 508px;
    background-position: center bottom;
  }
  #data .mapCase .mapBox {
    width: 180px;
    height: 180px;
    transform: scale(1);
  }
  #data .mapCase .mapBox .title {
    padding-bottom: 4px;
    margin-bottom: 1px;
    padding-top: 2px;
  }
  #data .mapCase .mapBox p:not(.title, .num) {
    padding-top: 0px;
    margin-top: -3px;
  }
  #data .mapCase .mapBox .num {
    font-size: var(--fontsize-display-small);
    line-height: 90%;
    transform: translateY(-4px);
  }
  #data .mapCase .mapBox .num:first-of-type {
    transform: translateY(1px);
  }
  #data .mapCase .mapBox .num:nth-of-type(4) {
    margin-bottom: 5px;
  }
  #data .mapCase .mapBox .num:last-child {
    font-size: var(--fontsize-display-small);
  }
  #data .mapCase .mapBox.europe {
    left: auto;
    right: 0;
    top: 20%;
  }
  #data .mapCase .mapBox.asia {
    right: 0;
    bottom: auto;
    top: 60%;
  }
  #data .mapCase .mapBox.asia .title {
    font-size: 20px;
    padding-bottom: 4px;
  }
  #data .mapCase .mapBox.japan {
    left: 0;
    top: 0;
  }
  #data .mapCase .mapBox.america {
    right: auto;
    left: 0;
    bottom: auto;
    top: 40%;
  }
  #data .mapCase .mapBox::before {
    width: 180px;
    height: 180px;
    border-width: 4px;
    background: var(--color-white);
  }
  #data .mapCase .mapAttn {
    width: 100%;
    text-align: center;
    bottom: -22px;
  }
  #data .Component-Basic-button_filled {
    margin: 60px auto 0;
  }
  #data .business {
    margin-top: 308px; /*margin-top: 157px;*/
    position: relative;
  }
  #data .business .factsheet {
    position: absolute;
    top: -270px;
    right: 0;
    width: auto;
  }
  #data .business .factsheet:hover {
    text-decoration: none;
  }
  #data .business .factsheet .img {
    width: 96px;
    height: 96px;
  }
  #data .business .factsheet .txt {
    width: 153px;
    display: block;
  }
  #data .business .factsheet .txt .title {
    font-size: var(--fontsize-body-medium);
    line-height: var(--lineheight-body-medium);
    margin: 0 0 10px 0;
  }
  #data .business > p {
    text-align: center;
    padding-bottom: 40px;
  }
  #data .business > p br {
    display: none;
  }
  #data .business .businessCase {
    flex-direction: column;
    margin-top: 41px;
    gap: 0px;
  }
  #data .business .businessCase .businessGraph {
    aspect-ratio: 343/374;
    background-image: url(../img/our_impact/business_graph_sp.svg);
    width: 100%;
  }
  #data .business .businessCase .businessGraph h4 {
    font-size: var(--fontsize-display-x-large);
    line-height: var(--lineheight-display-x-large);
  }
  #data .business .businessCase .businessGraph p.num {
    margin-bottom: 34px;
  }
  #data .business .businessCase .businessBody {
    width: 100%;
  }
  #data .business .businessCase .businessBody .businessBox {
    padding: 0;
  }
  #data .business .businessCase .businessBody .businessBox h4 span, #data .business .businessCase .businessBody .businessBox ul li span.businessBoxRight {
    transform: translateX(0);
  }
  #data .business .businessCase .businessBody .businessBox:first-child ul li p::before {
    width: 24px;
    height: 24px;
  }
  #data .business .businessCase .businessBody .businessBox ul li p, #data .business .businessCase .businessBody .businessBox ul li span.businessBoxRight {
    font-size: var(--fontsize-body-medium);
    line-height: var(--lineheight-body-medium);
  }
  #data .business .Component-Basic-button_filled {
    margin: 40px auto 0;
  }
  #vision {
    margin-top: 160px;
  }
  #vision h2 + p {
    margin-top: 24px;
  }
  #vision .targetCase {
    margin-top: 120px;
  }
  #vision .targetCase .targetFrame {
    flex-direction: column;
    gap: 50px;
    align-items: center;
  }
  #vision .targetCase .targetFrame .targetBox {
    width: 100%;
    min-height: 99px;
    padding: 17px 16px 0px;
  }
  #vision .targetCase .targetFrame .targetBox::after {
    top: -10px;
  }
  #vision .targetCase .targetFrame .targetBox.targetRecycle {
    padding: 33px 16px 27px;
  }
  #vision .Component-Basic-button_filled {
    margin-top: 24px;
  }
  #vision .tabHead {
    margin-top: 133px;
    margin-bottom: 15px;
    padding: 0 28px;
    justify-content: space-between;
  }
  #vision .tabHead li {
    width: -moz-fit-content;
    width: fit-content;
  }
  #vision .tabHead li a {
    width: 78px;
    height: 40px;
    transition-duration: var(--anim-duration);
  }
  #vision .tabHead li.active a {
    width: 200px;
  }
  #vision .tabBody .tabContents {
    row-gap: 42px;
    flex-direction: column;
  }
  #vision .tabBody .tabContents .targetBox {
    padding: 24px;
    width: 100%;
  }
  #vision .tabBody .tabContents .targetBox .textLL {
    font-size: var(--fontsize-display-x-large);
    line-height: var(--lineheight-display-x-large);
  }
  #vision .tabBody .tabContents .targetBox .textL {
    font-size: var(--fontsize-display-large);
    line-height: var(--lineheight-display-large);
  }
  #vision .tabBody .tabContents .targetBox::after {
    top: -6px;
  }
  #vision .tabBody .tabContents:first-child .targetBox:nth-child(1) {
    padding: 24px 12px;
  }
  #vision .tabBody .tabContents:first-child .targetBox:nth-child(1) p.title {
    max-width: 300px;
  }
  #vision .tabBody .tabContents:first-child .targetBox:nth-child(2) {
    padding: 24px 12px;
  }
  #vision .tabBody .tabContents:first-child .targetBox:nth-child(2) p:not(.title) {
    max-width: 260px;
  }
  #vision .tabBody .tabContents:first-child .targetBox:nth-child(3) p.title:first-child {
    width: 210px;
  }
  #vision .tabBody .tabContents:first-child .targetBoxGhg ul {
    flex-direction: column;
  }
  #vision .tabBody .tabContents:first-child .targetBoxGhg ul p:not(.title) {
    transform: translateY(0);
  }
  #vision .tabBody .tabContents:first-child .targetBoxGhg ul li:first-child {
    width: 100%;
  }
  #vision .tabBody .tabContents:first-child .targetRecycle ul:first-child {
    flex-direction: column;
    margin-bottom: 8px;
  }
  #vision .tabBody .tabContents:first-child .targetRecycle ul:first-child li:first-child {
    transform: translateY(0);
  }
  #vision .tabBody .tabContents:first-child .targetRecycle ul:last-child li {
    max-width: 210px;
  }
  #vision .tabBody .tabContents:last-child .targetBox:nth-child(3) {
    padding: 10px 16px;
  }
  #vision .tabBody .tabContents:last-child .targetBox:nth-child(3) p:not(.title):last-child {
    width: 260px;
  }
  #vision .tabBody .tabContents:last-child .targetBoxGhg p:not(.title) {
    width: 190px;
  }
  #values {
    margin-top: 214px;
  }
  #values .inner {
    flex-direction: column;
  }
  #values .contsHead {
    width: 100%;
  }
  #values .contsHead h2 {
    line-height: 110%;
  }
  #values .contsHead p {
    margin-top: 18px;
  }
  #values .contsHead .Component-Basic-button_filled {
    margin-top: 16px;
  }
  #values .contsBody {
    width: 100%;
  }
  #values .contsBody .card {
    flex-direction: column;
  }
  #values .contsBody .card .cardVisual {
    width: 100%;
  }
  #values .contsBody .card .cardBody {
    width: 100%;
  }
  #related {
    margin-top: 64px;
  }
  #related h2 {
    font-size: var(--fontsize-display-medium);
    line-height: var(--lineheight-display-medium);
  }
  #related .cardCase {
    flex-direction: column;
    margin-top: 24px;
  }
  #related .cardCase .card {
    width: 100%;
    aspect-ratio: 343/120;
    padding: 0 32px 0 24px;
  }
  #stories {
    margin-top: 163px;
  }
}