/*****************************************************************************
CSS only for blueaction
*****************************************************************************/

img {
  max-width: 100%;
  height: auto;
}
picture {
  display: block;
}
.Container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .Container {
    margin: auto 20px;
  }
}
.Container > *:last-child {
  margin-bottom: 0;
}

/* Mv
-----------------------------------------*/
.Mv {
  text-align: center;
}
@media screen and (max-width: 1200px) {
  .Mv {
    padding-top: 66px;
  }
}
.Mv img {
  width: 100%;
  max-width: none;
}
@media screen and (max-width: 1200px) {
  .Mv img {
    width: auto;
    max-width: 100%;
  }
}

/* SecTitle
---------------------------------------- */
.SecTitle {
  display: block;
  text-align: center;
  text-transform: uppercase;
}
.SecTitle__main {
  margin-block: var(--leading-trim);
  font-family: var(--font-type01);
  font-size: clamp(56px, 4.16666vw, 80px);
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .SecTitle__main {
    font-size: 53px;
  }
}
.SecTitle__sub {
  margin-top: 23px;
  color: var(--color-primary01);
  font-size: clamp(14px, .9375vw, 18px);
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .SecTitle__sub {
    margin-top: 13px;
    font-size: 14px;
  }
}
.SecTitle--white > .SecTitle__main,
.SecTitle--white > .SecTitle__sub {
  color: var(--color-primary03);
}

/* MascotImg
---------------------------------------- */
.MascotImg {
  position: absolute;
}
.MascotImg--01 {
  top: 167px;
  right: -51px;
  width: min(351px, 18.28125vw);
}
@media screen and (max-width: 767px) {
  .MascotImg--01 {
    top: 33px;
    right: -4.5vw;
    width: 26vw;
  }
}
.MascotImg--02 {
  bottom: -14px;
  left: 35px;
  width: min(275px, 14.32291vw);
}
@media screen and (max-width: 767px) {
  .MascotImg--02 {
    width: 24vw;
  }
}
.MascotImg--03 {
  right: 4px;
  bottom: -31px;
  width: min(221px, 11.51041vw);
}
@media screen and (max-width: 767px) {
  .MascotImg--03 {
    right: 0;
    bottom: -25px;
    width: 23vw;
  }
}
.MascotImg--04 {
  top: -2.70833vw;
  left: 5.78125vw;
  width: min(292px, 15.20833vw);
}
@media screen and (max-width: 767px) {
  .MascotImg--04 {
    top: 68px;
    left: 5px;
    width: 22vw;
  }
}
.MascotImg--05 {
  right: -13.90625vw;
  bottom: calc(-7.5vw - 160px);
  width: min(289px, 15.05208vw);
}
@media screen and (max-width: 1600px) {
  .MascotImg--05 {
    right: 0;
    bottom: calc(-7.5vw - 240px);
  }
}
@media screen and (max-width: 767px) {
  .MascotImg--05 {
    right: 13px;
    bottom: -155px;
    width: 22vw;
  }
}

/* Concept
---------------------------------------- */
.Concept {
  position: relative;
  padding: 150px 18.28125vw 90px;
}
@media screen and (max-width: 767px) {
.Concept {
    padding: 120px 0 70px;
  }
}
@media screen and (max-width: 767px) {
  .Concept__inner {
    margin: 0 20px;
  }
}
.Concept__text {
  margin-top: 54px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Concept__text {
    font-size: 18px;
    text-align: left;
  }
}

/* Mission
---------------------------------------- */
.Mission {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 30px 110px;
  border-radius: 40px;
  background-color: var(--color-secondary03);
}
@media screen and (max-width: 1440px) {
  .Mission {
    margin: 0 20px;
  }
}
@media screen and (max-width: 767px) {
  .Mission {
    padding: 90px 30px 30vw;
  }
}
.Mission__title {
  text-align: center;
}
.Mission__title h3 img {
  width: 77%;
  margin: 0 auto;
}
.Mission__title p {
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .Mission__title p {
    margin-top: 18px;
  }
}
.Mission__title p img {
    width: 20%;
  }
@media screen and (max-width: 767px) {
  .Mission__title p img {
    width: 52%;
  }
}

.Mission__list {
  max-width: 1060px;
  margin: 77px auto 0;
}
@media screen and (max-width: 1060px) {
  .Mission__list {
    margin: 54px auto 0;
  }
}
.Mission__list li:nth-child(2) {
  margin-left: 60px;
}
@media screen and (max-width: 767px) {
  .Mission__list li:nth-child(2) {
    margin-left: 0;
  }
}
.Mission__list li:nth-child(3) {
  margin-left: 120px;
}
@media screen and (max-width: 767px) {
  .Mission__list li:nth-child(3) {
    margin-left: 0;
  }
}
.Mission__list li:nth-child(4) {
  margin-left: 180px;
}
@media screen and (max-width: 767px) {
  .Mission__list li:nth-child(4) {
    margin-left: 0;
  }
}

.Mission__item + .Mission__item {
  margin-top: 16px;
}
.Mission__item {
  display: grid;
  grid-template-columns: 167px 1fr;
  align-items: center;
  width: 83%;
  padding: 28px 49px 25px;
  border-radius: 20px;
  background-color: var(--color-primary03);
}
@media screen and (max-width: 767px) {
  .Mission__item {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 25px 30px 22px;
    border-radius: 10px;
  }
}
.Mission__category {
  margin-top: -10px;
  font-family: var(--font-type01);
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .Mission__category {
    font-size: 26px;
  }
}
.Mission__category span {
  color: var(--color-primary01);
  font-size: 64px;
}
@media screen and (max-width: 767px) {
  .Mission__category span {
    font-size: 52px;
  }
}
.Mission__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .Mission__text {
    margin-top: 14px;
    font-size: 16px;
  }
}
.Mission__lead {
  font-size: 20px;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .Mission__lead {
    font-size: 18px;
  }
}

/* Gallery
---------------------------------------- */
.Gallery {
  padding: 160px 0 70px;
}
@media screen and (max-width: 767px) {
  .Gallery {
    padding: 64px 0 30px;
  }
}
.Gallery__wrapper {
  padding-block: 30px 80px;
}
.Gallery__item {
  max-width: 360px;
}

.Gallery__list li:nth-child(6n-4) {
  margin-top: 40px;
}
.Gallery__list li:nth-child(6n-3) {
  margin-top: -30px;
}
.Gallery__list li:nth-child(6n-2) {
  margin-top: 80px;
}
.Gallery__list li:nth-child(6n-1) {
  margin-top: 10px;
}
.Gallery__list li:nth-child(6n) {
  margin-top: 42px;
}

.Gallery__item img {
  border-radius: 20px;
}
@media screen and (max-width: 767px) {
  .Gallery__item img {
    border-radius: 10px;
  }
}

/* Filter
-----------------------------------------*/
.Filter {
  position: relative;
  margin-top: 68px;
  padding-right: 11.5625vw;
}
@media screen and (max-width: 767px) {
  .Filter {
    margin-top: 56px;
    padding-right: 23vw;
  }
}
.Filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.Filter__item {
  position: relative;
}
.Filter__item label {
  display: inline-block;
  width: 100%;
  border: 2px solid var(--color-primary02);
  border-radius: 19px;
  padding: 3px 38px 4px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .Filter__item label {
    padding: 3px 25px 4px;
    font-size: 15px;
  }
}
.Filter__item input[type="radio"]:checked + label,
.Filter__item input[type="radio"]:focus + label {
  color: var(--color-primary03);
  background-color: var(--color-primary02);
}
.Filter__item input {
  position: absolute;
  left: 0;
  opacity: 0;
}

/* Project
---------------------------------------- */
.Project__wrapper {
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .Project__wrapper {
    margin-top: 34px;
  }
}
.Card {
  display: grid;
  grid-template-columns: repeat(3, calc((100% - 60px) / 3));
  gap: 42px 30px;
}
@media screen and (max-width: 767px) {
  .Card {
    grid-template-columns: repeat(2, calc((100% - 15px) / 2));
    gap: 22px 15px;
  }
}
.Card__wrapper {
  display: grid;
  gap: 20px 0;
}
@media screen and (max-width: 767px) {
  .Card__wrapper {
    gap: 10px 0;
  }
}
.Card__text {
  grid-row: 2;
  display: flex;
  flex-direction: column;
}
.Card__title {
  order: 2;
  margin-top: 13px;
  font-size: 22px;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .Card__title {
    font-size: 18px;
  }
}
.Card__title span {
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  .Card__title span {
    font-size: 12px;
  }
}
.Card__category {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.Card__category img {
  width: 55px;
}
@media screen and (max-width: 767px) {
  .Card__category img {
    width: 35px;
  }
}
.Card__detail {
  order: 3;
  margin-top: 8px;
}
.Card__detail p {
  margin-bottom: .75em;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .Card__detail p {
    font-size: 14px;
    line-height: 1.6;
  }
  .Card__detail > .Btn01 {
    padding-inline: 35px;
  }
}
.Card__detail > *:last-child {
  margin-bottom: 0;
}
.Card__img {
  grid-row: 1;
  border-radius: 20px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .Card__img {
    border-radius: 10px;
  }
}

.Message {
  padding: 80px 0;
}
@media screen and (max-width: 767px) {
  .Message {
    padding: 50px 0;
  }
}
.Message__title {
  font-size: 36px;
  font-weight: 800;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Message__title {
    font-size: 28px;
  }
}
.Message__text {
  margin-top: 34px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Message__text {
    font-size: 14px;
  }
}
.Message__img {
  margin-block: 56px;
  padding-inline: 30px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Message__img {
    padding-inline: 20px;
  }
}

/* Report
---------------------------------------- */
.Report {
  padding: 105px 0 160px;
}
@media screen and (max-width: 1600px) {
  .Report {
    padding: 105px 0 240px;
  }
}
@media screen and (max-width: 767px) {
  .Report {
    padding: 75px 0 115px;
  }
}
.Report__list {
  display: grid;
  grid-template-columns: repeat(2, calc((100% - 20px) / 2));
  gap: 20px;
  position: relative;
  z-index: 1;
  margin-top: 55px;
  background-color: var(--color-primary03);
}
@media screen and (max-width: 767px) {
  .Report__list {
    grid-template-columns: 1fr;
    gap: 15px 0;
    margin-top: 40px;
  }
}
.Report__link {
  display: grid;
  grid-template-columns: 37% 1fr;
  gap: 0 30px;
  height: 100%;
  padding: 18px 27px 18px 18px;
  border: 2px solid #000;
  border-radius: 20px;
}
@media screen and (max-width: 767px) {
  .Report__link {
    grid-template-columns: 35% 1fr;
    gap: 0 13px;
    padding: 15px 24px 15px 15px;
    border-radius: 10px;
  }
}

a.Report__link:is(:link, :visited) {
  color: #000;
  text-decoration: none;
}
a.Report__link:is(:hover, :focus, :active) {
  color: #000;
  text-decoration: none;
  opacity: .8;
}

.Report__text {
  order: 2;
  padding-top: 9px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .Report__text {
    padding-top: 0;
    font-size: 15px;
    line-height: 1.6;
  }
}
.Report__date {
  position: relative;
  margin-bottom: 3px;
  padding-right: 1.5em;
  font-family: var(--font-type01);
  font-size: 16px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .Report__date {
    font-size: 13px;
  }
}
.Report__date.IconArrow02::after {
  right: 0;
  width: 1.5em;
  height: 1.5em;
}

.Report__img {
  order: 1;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / .71;
}
@media screen and (max-width: 767px) {
  .Report__img {
    border-radius: 10px;
  }
}
.Report__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Partner
---------------------------------------- */
.Partner {
  position: relative;
  z-index: 1;
  padding: 180px 0 190px;
  border-radius: 40px;
  background-color: var(--color-secondary02);
}
@media screen and (max-width: 767px) {
  .Partner {
    padding: 130px 0 120px;
  }
}

.LogoList {
  display: grid;
  gap: 30px;
  padding-block: 40px;
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .LogoList {
    gap: 12px;
    padding-block: 20px;
  }
}
.LogoList li {
  text-align: center;
}
.LogoList li:only-child {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .LogoList li:only-child {
    grid-column: auto;
  }
}
.LogoList a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  padding-inline: 8px;
  border-radius: 20px;
  background-color: var(--color-primary03);
}
@media screen and (max-width: 767px) {
  .LogoList a {
    padding-inline: 5px;
    border-radius: 10px;
  }
}

.LogoList a:hover  { opacity: .8 }
.LogoList a:focus  { opacity: .8 }
.LogoList a:active { opacity: .8 }

.LogoList__company {
  display: flex;
  align-items: center;
  justify-content: center;
}
.LogoList__icon {
  display: inline-block;
  position: absolute;
  top: 15px;
  right: 15px;
  width: 21px;
  height: 21px;
  filter: invert(37%) sepia(78%) saturate(7497%) hue-rotate(215deg) brightness(107%) contrast(101%);
}
@media screen and (max-width: 767px) {
  .LogoList__icon {
    top: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
  }
}

.LogoList--col2 {
  grid-template-columns: repeat(2, calc((100% - 30px) / 2));
}
@media screen and (max-width: 767px) {
  .LogoList--col2 {
    grid-template-columns: 1fr;
    padding-inline: 25px;
  }
}
.LogoList--col2 a {
  padding-block: 10px;
}
@media screen and (max-width: 767px) {
  .LogoList--col2 a {
    padding-block: 8px;
  }
}

.LogoList--col3 {
  grid-template-columns: repeat(3, calc((100% - 30px * 2) / 3));
}
@media screen and (max-width: 767px) {
  .LogoList--col3 {
    grid-template-columns: repeat(2, calc((100% - 12px) / 2));
  }
}
.LogoList--col3 a {
  padding-block: 5px;
}
@media screen and (max-width: 767px) {
  .LogoList--col3 a {
    padding-block: 10px;
  }
}

/* Sdgs
---------------------------------------- */
.Sdgs {
  overflow: hidden;
  padding-bottom: 240px;
  background-image: url('/blueaction/assets/img/bg_footer.png');
  background-repeat: no-repeat;
  background-position: center bottom -3px;
  background-size: 100%;
}
@media screen and (max-width: 1200px) {
  .Sdgs {
    padding-bottom: 200px;
    background-size: 125%;
  }
}
@media screen and (max-width: 767px) {
  .Sdgs {
    padding-bottom: 170px;
    background-position: left -284px bottom -3px;
    background-size: auto 140px;
  }
}
.Footer {
  background-color: #fff;
}