@charset "UTF-8";

/*====================================================================
communityPage
====================================================================*/

.communityPage .secHead__ttl {
  background-image: url(../images/community/header.jpg);
}

.communityPage .siteHeader {
  margin: 0 auto;
}

.communityPage .secMessage {
  margin: 0 0 130px;
  padding: 0;
}

.communityPage .secMessage h3 {
  margin: 50px 0;
  letter-spacing: 0.2em;
  font-size: 37px;
  font-weight: 500;
}

.communityPage .secMessage__area {
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.communityPage .secMessage p {
  margin: 0;
  letter-spacing: 0.2em;
  font-size: 22px;
  line-height: 2.8;
}

.communityPage .secMessage__photo {
  width: 430px;
}

.communityPage .secSdgs h3, .communityPage .secSdgs02 h3 {
  margin: 0 0 40px 0;
  letter-spacing: 0.2em;
  font-size: 32px;
  font-weight: 400;
}

.communityPage .secSdgs__box {
  position: relative;
  width: 100%;
  background-color: #f2f2f2;
  margin-bottom: 68px;
  padding: 30px 40px 40px;
}

.communityPage .secSdgs__box h4 {
  margin: 0 0 20px 0;
  letter-spacing: 0.1em;
  font-size: 28px;
  font-weight: 400;
}

.communityPage .secSdgs__box p {
  margin: 0 0 50px 0;
  letter-spacing: 0.2em;
  font-size: 17px;
  line-height: 1.8;
}

.communityPage .secSdgs__box__inner {
  display: flex;
  align-items: end;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}

.communityPage .secSdgs__box__inner .Sdgs_icon {
  width: 274px;
}

.communityPage .secSdgs__box__inner .Sdgs_icon02 {
  width: 468px;
}

.communityPage .secSdgs__box__inner .Sdgs_photo {
  width: 535px;
}

.communityPage .secSdgs__box__inner .Sdgs_photo02{
  width: 352px;
}

.communityPage .secSdgs02 {
  margin: 130px 0;
}

.communityPage .secSdgs02 h3 {
  margin: 0 0 30px 0;
}

.communityPage .secSdgs02 p {
  margin: 0 0 70px 0;
  letter-spacing: 0.2em;
  font-size: 20px;
}

.communityPage .secSdgs02 .secSdgs__box {
  margin-bottom: 0;
}

.communityPage .secSdgs__box__inner02 {
  display: flex;
  align-items: start;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 60px;
}

.communityPage .secSdgs__box__inner02:last-child {
  margin-bottom: 0;
}

.communityPage .secSdgs__box__inner02 dt{
  width: 22%;
  margin-top: 3px;
  letter-spacing: 0.2em;
  font-size: 30px;
}

.communityPage .secSdgs__box__inner02 dd{
  width: 78%;
  font-size: 23px;
  letter-spacing: 0.1em;
  line-height: 2.2;
}

@media screen and (max-width: 768px) {
  .communityPage .secMessage {
    margin: 0 0 10vw;
  }
  
  .communityPage .secMessage h3 {
    margin: 5vw 0;
    letter-spacing: 0.05em;
    font-size: 16px;
  }
  
  .communityPage .secMessage p {
    /*font-size: 12px;*/
    font-size: clamp(12px, 2vw, 16px);
    line-height: 1.9;
    letter-spacing: 0.07em;
    width: 50%;
  }
  
  .communityPage .secMessage__photo {
    width: 46%;
  }
  
  .communityPage .secSdgs h3, .communityPage .secSdgs02 h3 {
    margin: 0 0 4vw 0;
    letter-spacing: 0.1em;
    font-size: 16px;
  }
  
  .communityPage .secSdgs__box {
    margin-bottom: 7vw;
    padding: 4.5vw;
  }
  
  .communityPage .secSdgs__box h4 {
    margin: 0 0 2vw 0;
    letter-spacing: 0.1em;
    font-size: 15px;
  }

  .communityPage .secSdgs__box p {
    margin: 0 0 5vw 0;
    letter-spacing: 0.1em;
    font-size: 12px;
    line-height: 1.8;
  }
  
  .communityPage .secSdgs__box__inner, .communityPage .secSdgs__box__inner02 {
    display: block;
  }
  
  .communityPage .secSdgs__box__inner .Sdgs_icon {
    width: 58.381%;
  }

  .communityPage .secSdgs__box__inner .Sdgs_icon02 {
    width: 100%;
  }

  .communityPage .secSdgs__box__inner .Sdgs_photo {
    width: 100%;
    margin-bottom: 4vw;
  }

  .communityPage .secSdgs__box__inner .Sdgs_photo02 {
    width: 65.822%;
    margin-bottom: 4vw;
  }
  
  .communityPage .secSdgs02 {
    margin: 10vw 0;
  }
  
  .communityPage .secSdgs02 p {
    margin: 0 0 7vw 0;
    font-size: 13px;
    letter-spacing: 0.1em;
    line-height: 1.8;
  }
  
  .communityPage .secSdgs02 .secSdgs__box {
    padding: 4.5vw;
  }
  
  .communityPage .secSdgs__box__inner02 {
    margin-bottom: 10vw;
  }
  
  .communityPage .secSdgs__box__inner02 dt {
    width: 100%;
    margin: 0 0 3vw;
    font-size: 15px;
  }

  .communityPage .secSdgs__box__inner02 dd {
    width: 100%;
    font-size: 13px;
    line-height: 2.0;
  }
}