@charset "UTF-8";
/* ========================================
   Activity Area — wave-white 2層マスク + 地図 + 凡例画像
   白背景 + wave-white 2層マスク（join-placemaking と同じパターン）
   上部の波形で前セクション(Intro cyan)からの遷移を表現
   セクションヘッダー: 共通 .column_heading + .section_header--dark を使用
   Figma PC: 588:1424, 588:1528 / SP: 799:2802, 799:2804
======================================== */
.about-activity-area .column_heading {
  align-items: flex-start;
  margin-bottom: 25px;
}

.about-activity-area {
  position: relative;
  background-color: #fff;
  -webkit-mask-image: url("../../../../assets/wave-white.svg"), linear-gradient(#000, #000);
  mask-image: url("../../../../assets/wave-white.svg"), linear-gradient(#000, #000);
  -webkit-mask-size: 1470px 76px, 100% calc(100% - 53px);
  mask-size: 1470px 76px, 100% calc(100% - 53px);
  -webkit-mask-position: left top, left 53px;
  mask-position: left top, left 53px;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.about-activity-area > * {
  position: relative;
  z-index: 2;
}

.about-activity-area__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 120px 0 160px;
}

.about-activity-area__description {
  font-size: 16px;
  font-weight: 700;
  line-height: 33px;
  color: #000;
  margin-top: 16px;
  margin-bottom: 40px;
}

.about-activity-area__content {
  display: flex;
  gap: 97px;
  align-items: center;
}

.about-activity-area__map {
  max-width: 666px;
}
.about-activity-area__map img {
  width: 100%;
  height: auto;
  display: block;
}

.about-activity-area__legend {
  max-width: 377px;
}

/* NOTE: このセクションのブレークポイントは 1080px（共通の 960px ではなく固有値） */
@media (max-width: 1080px) {
  .about-activity-area {
    -webkit-mask-size: 800px 55px, 100% calc(100% - 53px);
    mask-size: 800px 55px, 100% calc(100% - 53px);
  }
  .about-activity-area .column_heading {
    align-items: center;
    margin-bottom: 0;
  }
  .about-activity-area .title {
    text-align: center;
  }
  .about-activity-area__inner {
    padding: 42px 0 76px;
    max-width: 393px;
    margin: 30px auto 61px;
  }
  .about-activity-area__description {
    font-size: 14px;
    text-align: justify;
    padding: 0 17px;
    margin-top: 0;
  }
  .about-activity-area__content {
    flex-direction: column;
    gap: 26px;
  }
  .about-activity-area__map {
    max-width: 100%;
  }
  .about-activity-area__legend {
    max-width: 100%;
  }
}