@charset "utf-8";



#main_box {

  /* margin-top: 72px;*/

  line-height: 2.0;

}



/* side_menu ----------------- */

#side_box .side_menu .menu_grp_c.grp31 {

}

li.btn310 {

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

  border-bottom-color: rgb(204,204,204) !important;

}

#side_box .side_menu li.btn310 > a {

  pointer-events:none;

  cursor: auto;

}

#side_box .side_menu li.btn310 > a::after {

  display: none;

}











/* contents ---- */

#main_box .img-label > img {

    width: 235px;

}

.layout_1 .all_box {

  padding-right: 0;

  padding-left: 0;

}

.layout_1 #main_box {

  width: 100%;

  max-width: 1150px;

  margin-right: auto;

  margin-left: auto;

  padding-right: 0;

  padding-left: 0;

}

#main_box .main_inner {

  padding-right: 0;

  padding-left: 0;

}



.titlebox_eco_concept {

  position: relative;

  padding-top: calc(400 / 1150 * 100%);

  background-image: url(../images/main-pc.jpg);

  background-size: contain;

  background-repeat: no-repeat;

  overflow: hidden;

}

.titlebox_eco_concept > span {

  display: block;

  position: absolute;

}

.titlebox_eco_concept::before {

  /*

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 115px;

  height: 30px;

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

  background-repeat: no-repeat;

  content: '';

  */

}

html[lang='en'] .titlebox_eco_concept::before {

  width: 235px;

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

}



/* ---- box01 ---- */

.box01 {

  background-color: rgb(88,137,4);

  background-image: url(../images/bg.jpg);

  background-repeat: no-repeat;

  background-position: center top;

  color: rgb(255,255,255);

}

#main_box .box01 .ttl_s, #main_box .box02 .ttl_s, #main_box .box04 .ttl_s {

    margin-top: 0;

    margin-bottom: 0;

    padding-top: 12px;

    padding-left: 32px;

    padding-bottom: 12px;

    background-color: rgb(67,122,0);

    border-bottom: 4px rgb(133,199,4) solid;

    color: #fff;

}



.box01 > div {

  padding: 32px;

}



.box01 .note,.box04 .note {

  font-size: 77%;

}



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

  .titlebox_eco_concept {

    padding-top: calc(500 / 750 * 100%);

    background-image: url(../images/main-sp.jpg);

  }

  #main_box .box01 .ttl_s {

    padding-left: 16px;

  }

  .box01 > div {

    padding: 16px;

  }

}







.box02_00 {

  display: flex;

  justify-content: space-between;

}

.box02_00 > div {

  position: relative;

  width: 33%;

  border: 3px rgb(137,200,16) solid;

  border-radius: 27px;

  padding: 16px 8px;

}

.box02_00 > div > .title {

  position: absolute;

  top: -8px;

  left: 50%;

  transform: translate3d(-50%, 0, 0);

  width: 120px;

  margin-top: -16px;

  border-radius: 50%;

  background-color: rgb(137,200,16);

  font-weight: 700;

  color: rgb(255,255,255);

  padding: 5px 8px;

  text-align: center;

}

.box02_00 > div > .title::before {

  position: absolute;

  top: -32px;

  left: 50%;

  transform: translate3d(-50%, 0, 0);

  width: 58px;

  height: 36px;

  background-image: url(../images/icon_eco.png);

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center top;

  content: '';

}

.box02_00 > div > .image {

  padding-top: 24px;

  padding-bottom: 16px;

}

.box02_00 > div > .note {

  font-size: 10px;

  line-height: 1.3;

}





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

  .box02_00 {

    flex-wrap: wrap;

    margin-top: 16px;

    padding-right: 16px;

    padding-left: 16px;

  }

  .box02_00 > div {

    width: 100%;

    margin-top: 60px;

  }



}



.box03 {

  padding-right: 32px;

  padding-left: 32px;

}



.box03 .banner {

  width: 100%;

  max-width: 998px;

  margin-right: auto;

  margin-left: auto;

}

.box03 .banner > a {

  display: block;

  border: 1px #ccc solid;

}



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

.box03 {

  padding-right: 16px;

  padding-left: 16px;

}

}



.box04 .lede {

    font-weight: 700;

    color: rgb(67,122,0);

}



.box04 .img {

    width: 100%;

    max-width: 850px;

    margin-left: auto;

    margin-right: auto;

}



.box04_01 {

    border: 2px solid;

    border-color: rgb(67,122,0); 

    padding: 10px;

}



.box04_01 ul li {

    list-style-type:disc;

    margin-left: 30px;

    font-weight: 700;

    line-height: 2rem;

    margin-top: 10px;

}

.box04_01 ul li:first-child {

    margin-top: 0px;

}





.sdg_box {

  max-width: 794px;

  margin-right: auto;

  margin-left: auto;

  border: 5px solid rgb(204,204,204);

  border-radius: 32px;

  padding: calc( 24 / 760 * 100%) 0 calc( 16 / 760 * 100%);

}

.sdg_box .sdg_item {

  display: flex;

  flex-direction: row;

  justify-content: center;

  width: calc( 760 / 794 * 100% );

  max-width: 760px;

  margin-right: auto;

  margin-left: auto;

  margin-bottom: 8px;

}

.sdg_box .sdg_item .image {

  width: 126px;

}

.sdg_box .sdg_item .note {

  width: calc( 100% - 126px );

  padding-left: calc( 40 / 760 * 100% );

  padding-right: calc( 24 / 760 * 100% );

}

.sdg_box .sdg_item .note h5 {

  width: 100%;

  font-size: 16px;

  font-weight: 700;

  margin-top: -4px;

  margin-bottom: 4px;

}

.sdg_box .sdg_item .text {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  flex-wrap: wrap;

  width: 100%;

}

.sdg_box .sdg_item .text .sdg_num {

  display: block;

  width: 43px;

}

.sdg_box .sdg_item .text .sdg_text {

  display: block;

  width: calc( 100% - 44px );

}





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

  .sdg_box {

    border-radius: 16px;

    border-width: 3px;

  }

  .sdg_box .sdg_item .image {

    width: 63px;

  }

  .sdg_box .sdg_item .note {

    width: calc( 100% - 63px );

    padding-left: calc( 16 / 760 * 100% );

    padding-right: calc( 12 / 760 * 100% );

  }

  .sdg_box .sdg_item .note h5 {

    font-size: 14px;

  }

}