@charset "utf-8";

/* sustainable用css */
.color_red {
  color: #ac000c;
}
.bg_red {
  background-color: #ac000c;
}

.sdgs {
  background-color: #fff3de;
}
/* container */
.sdgs_container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 4%;
  padding-left: 4%;
}
.sdgs_container.-full {
  padding-right: 0;
  padding-left: 0;
}
.sdgs_container.-mainlead{
  max-width: 320px;
}
@media (min-width: 1120px) {
  .sdgs_container {
    padding-right: 0;
    padding-left: 0;
  }
}
@media (min-width: 480px){
  .sdgs_container.-mainlead {
    max-width: 960px;
  }
}
@media (min-width: 768px) {
  .sdgs_container {
    max-width: 1120px;
  }
  .sdgs_container.-md {
    max-width: 960px;
  }
  
}
@media (min-width: 1120px){
  .sdgs_container.-footnav{
    width: 800px;
  }
}

/* hero */
.sdgs_hero {
  padding-right: 4%;
}
@media (min-width: 768px) {
  .sdgs_hero {
    padding-right: 0;
  }
}

/* heading */
.sdgs_subheading {
  font-weight: 700;
  font-size: clamp(13px, 3vw, 22px);
  color: #ac000c;
}
.sdgs_lv1heading {
  font-weight: 700;
  font-size: clamp(20px, 3vw, 40px);
  color: #ac000c;
  letter-spacing: 3px;
}
.sdgs_lv1heading.-top {
  font-size: clamp(33px, 3vw, 55px);
  line-height: 1.3;
}
.sdgs_lv2heading {
  padding: 1rem 0;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 25px);
  text-align: center;
  color: #fff;
  background-color: #ac000c;
  min-height: 77px;
}
@media (min-width: 768px) {
  .sdgs_lv1heading{
    letter-spacing: 5px;
  }
  .sdgs_lv2heading {
    padding: 2rem 0;
  }
}

/* intro */
.sdgs_intro {
  font-weight: 500;
  font-size: clamp(15px, 2vw, 23px);
  line-height: 1.8;
}
.sdgs_intro.-top {
  font-size: clamp(16px, 2vw, 24px);
  letter-spacing: 2px;
}

/* text */
.sdgs_text {
  font-size: clamp(15px, 3vw, 21px);
  line-height: 1.8;
}

/* button */
.sdgs_btn {
  display: inline-block;
  padding: .7em 2.5em;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: solid 2px #707070;
  border-radius: 50px;
  transition: .4s;
}
.sdgs_btn.-white {
  padding: .5em 2.5em;
  font-size: clamp(18px, 3vw, 22px);
  color: #fff;
  border: solid 2px #fff;
}
.sdgs_btn.-white:active,
.sdgs_btn.-white:focus,
.sdgs_btn.-white:hover {
  color: #000;
  background: #fff;
}
.sdgs_btn.-red {
  color: #ac000c;
  border: solid 2px #ac000c;
}
.sdgs_btn.-red:active,
.sdgs_btn.-red:focus,
.sdgs_btn.-red:hover {
  color: #fff;
  background: #ac000c;
}
.sdgs_btn.-red_rev {
  color: #fff;
  background: #ac000c;
  border: solid 2px #ac000c;
}
.sdgs_btn.-red_rev:active,
.sdgs_btn.-red_rev:focus,
.sdgs_btn.-red_rev:hover {
  color: #ac000c;
  background: inherit;
}
@media (min-width: 768px) {
  .sdgs_btn {
    min-width: 520px;
    padding: .5em 2.5em;
  }
  .sdgs_btn:active,
  .sdgs_btn:focus,
  .sdgs_btn:hover {
    color: #fff;
    background: #707070;
  }
  .sdgs_btn.-circle {
    width: 150px;
    min-width: auto;
    height: 150px;
    border-radius: 50%;
  }
  .circle_btn_text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 1.6rem;
  }
}
@media (min-width: 1040px) {
  .sdgs_btn.-circle {
    width: 178px;
    height: 178px;
;
  }
}
@media (max-width: 767px) {
  .sdgs_btn {
    width: 100%;
  }
}
.sdgs_btn_arrow {
  position: relative;
}
.sdgs_btn_arrow::after {
  content: "";
  position: absolute;
  top: 35%;
  right: 7%;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);
}
.sdgs_btn_arrow.-down::after {
  transform: rotate(135deg);
}

@media (min-width: 768px) {
  .sdgs_btn_arrow::after {
    top: 40%;
    width: 11px;
    height: 11px;
  }
  .sdgs_btn_arrow.-down::after {
    top: auto;
    bottom: 15%;
    left: 50%;
  }
  .sdgs_btn_arrow.-right::after{
    top: auto;
    bottom: 15%;
    left: 47%;
  }
}

/* scroll */
.sdgs_scroll {
  margin-bottom: -.7rem;
  font-size: clamp(13px, 3vw, 18px);
}

/* nav */
.sdgs_nav {
  position: relative;
  margin-bottom: 5rem;
  /* width: clamp(200px, 50%, 1000px); */
}
@media (min-width: 768px) {
  .sdgs_nav {
    margin-bottom: 10rem;
  }
}
.sdgs_nav_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media (min-width: 900px) {
  .sdgs_nav_wrap {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}
.sdgs_nav:hover {
  opacity: .7;;
}
.sdgs_nav_text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 24px);
  text-align: center;
  color: #fff;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.sdgs_nav_arrow {
  display: block;
  margin: 8% auto 0;
}


.sdgs_subnav_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.sdgs_subnav_item {
  margin: 2% 0;
}
@media (min-width: 768px) {
  .sdgs_subnav_item {
    margin: .5%;
  }
}


/* safety */
.sdgs_safety {
  padding-top: 4rem;
  padding-bottom: 4rem;
  color: #fff;
  background-image: url(../img/lp/sustainable/safetybg_sp.jpg);
  background-size: cover;
}
.sdgs_safety_heading {
  font-weight: 700;
  font-size: clamp(18px, 3vw, 22px);
}
.sdgs_safety_lead {
  margin-top: 3rem;
;
  font-weight: 500;
  font-size: clamp(15px, 3vw, 18px);
}
.sdgs_safety_logo {
  width: 172px;
  margin-right: auto;
  margin-bottom: 3rem;
;
  margin-left: auto;
}
@media (min-width: 768px) {
  .sdgs_safety {
    background-image: url(../img/lp/sustainable/safetybg_pc.jpg);
  }
  .sdgs_safety_lead {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
  }
  .sdgs_safety_logo {
    width: 100%;
  }
}


/* box */
.sdgs_box2 > div + p {
  margin-left: 5%;
  font-size: clamp(13px, 3vw, 16px);
}
.sdgs_box2 {
  width: 100%;
}
@media (min-width: 768px) {
  .sdgs_box1 {
    max-width: 60%;
  }
  .sdgs_box2 {
    width: 35%;
  }
}
@media (max-width: 767px) {
  .sdgs_box1 {
    margin-bottom: 4rem;
  }
  .sdgs_box2 img {
    width: 140px;
  }
}

/* list */
.sdgs_list {
  font-weight: 700;
  font-size: clamp(18px, 3vw, 23px);
  color: #ac000c;
}

/* card */
.sdgs_card_item{
  width:calc((100% - 1.5rem) / 2);
  max-width: 510px;
}
.sdgs_card_item > .sdgs_text{
  line-height: 1.6;
}
@media (min-width: 768px){
  .sdgs_card_item > img + *{
    margin-top:2rem;
  }
}
@media (max-width: 480px){
  .sp-f-sm{
    font-size: 1.3rem;
  }
}