@charset "utf-8";





/* header ----------------- */

.header_inner .main_navigation > li.nav-1 > a {

    color: rgb(208,18,27);

}



.header_inner .main_navigation > li.nav-1 > a::before {

    background-image: url(../../common/images/arrow_bottom_r.svg);

}











.label-domestic_beverage {

  padding-top: 30px;

  background-repeat: no-repeat;

  background-image: url(/sustainability/images/label-domestic_beverage.png);

  background-position: left top;

}



.label-oversea_beverage {

  padding-top: 30px;

  background-repeat: no-repeat;

  background-image: url(/sustainability/images/label-overseas_beverage.png);

  background-position: left top;

}





html[lang="en"] .label-domestic_beverage {

  padding-top: 30px;

  background-repeat: no-repeat;

  background-image: url(/en/sustainability/images/label-domestic_beverage.png);

  background-position: left top;

}



html[lang="en"] .label-oversea_beverage {

  padding-top: 30px;

  background-repeat: no-repeat;

  background-image: url(/en/sustainability/images/label-overseas_beverage.png);

  background-position: left top;

}







._inarrowbox {

  display: block;

  position: relative;

}

._inarrowbox > li {

  display: flex;

  flex-direction: row;

  align-items: flex-end;

  border: 2px rgb(153,153,153) solid;

  margin-bottom: 4px;

}

._inarrowbox > li > span {

  display: block;

}

._inarrowbox > li > .text {

  width: 75%;

}

._inarrowbox > li > .text > span {

  display: block;

  position: relative;

  min-height: 88px;

  padding: 16px 48px 16px 16px;

  background-color: rgb(222,222,222);

  line-height: 1.5;

}

._inarrowbox > li > .text > span::before,

._inarrowbox > li > .text > span::after {

  display: block;

  position: absolute;

  right: -32px;

  top: 0;

  width: 32px;

  height: 100%;

  content: '';

}

._inarrowbox > li > .text > span::before {

  background-color: rgb(255,255,255);

}

._inarrowbox > li > .text > span::after {

  background:

    linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgb(222,222,222) 50.5%) no-repeat top left/100% 50%,

    linear-gradient(to top left, rgba(255,255,255,0) 50%, rgb(222,222,222) 50.5%) no-repeat bottom right/100% 50%;

}

._inarrowbox > li > .text > span .title {

  display: block;

  font-size: 137.5%;

  font-weight: 700;

}

._inarrowbox > li > .text > span .text_body {

  display: block;

  margin-top: 8px;

  padding-left: 2em;

}

._inarrowbox > li > .per {

  width: 25%;

  padding-right: 16px;

  font-size: 137.5%;

}

._inarrowbox > li > .per > span {

  font-size: 200%;

  font-weight: 700;

}



._inarrowbox > li.per_title {

  display: flex;

  flex-direction: row;

  justify-content: center;

  width: 25%;

  margin-bottom: 8px;

  margin-left: auto;

  border-style: none;

  line-height: 1.2;

  font-size: 13px;

}

._inarrowbox > li.per_title > span {

  border-radius: 32px;

  padding: 8px 12px;

  background-color: rgb(249,237,215);

}



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

  ._inarrowbox > li.per_title {

    width: 140px;

  }

  ._inarrowbox > li > .text {

    width: calc(100% - 120px);

  }

  ._inarrowbox > li > .text > span {

    padding: 8px 12px 8px 8px;

    min-height: 77px;

  }

  ._inarrowbox > li > .text > span .title {

  }

  ._inarrowbox > li > .text > span .text_body {

    padding-left: 1em;

  }

  ._inarrowbox > li > .per {

    width: 120px;

  }

}