/* ============================================================
   ayumi.html（パーパス策定の歩み）新規追加スタイル [[ START ]]
   ============================================================ */

:root {
  --f-base: "Noto Sans JP", sans-serif;
  --f-gothic: "Yu Gothic Bold", "YuGothic-Bold", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  --f-serif: "EB Garamond", serif;
  --f-en: "Space Mono", "Noto Sans JP", monospace, sans-serif;
}



.dpAction {
  position: relative;
  overflow: hidden;
  background:  url(/sustainable/assets/img/hi_bg@2x.jpg) no-repeat center top / cover;
  padding: min(15.2671755725vw, 60px) 0 37.1501272265vw;
}
.dpAction::before {
  content: "";
  display: block;
  width: 952px;
  height: 1066px;
  background: url(/sustainable/assets/img/hi_light@2x.png) no-repeat 0 0 / cover;
  position: absolute;
  top: 0;
  left: 0;
  
}



.dpAction h1,
.dpAction h2,
.dpAction h3,
.dpAction h4 {
  padding: 0;
  border: none;
  background: none;
}

.dpAction_illust {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.dpAction_illust img {
  height: auto;
}

.dpAction_illust.is-show {
  opacity: 1;
}

.dpAction_illust-gull01 {
  top: 260px;
  right: 30px;
  width: min(20.356234097vw, 80px);
  animation: float-ayumi-gull01-sp 4s ease-in-out infinite;
}

.dpFeature .dpAction_illust-gull01 {
  top: 440px;
  right: 20px;
  z-index: 3;
}

.dpAction_illust-gull02 {
  top: 820px;
  left: 10px;
  width: min(26.972010178vw, 106px);
  z-index: 3;
  animation: float-ayumi-gull02-sp 2s ease-in-out infinite;
  animation-delay: 0.5s;
}

.dpAction_illust-cloud {
  top: 800px;
  right: -20px;
  width: min(23.918575064vw, 94px);
  height: auto;
  animation: float-ab03 4s ease-in-out infinite;
  animation-delay: 1s;
  z-index: 3;
}

.dpAction_illust-cloud2 {
  top: 150px;
  right: -20px;
  width: min(17.3027989822vw, 68px);
  height: auto;
  animation: float-ab03 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

.dpFeature .dpAction_illust-gull02,
.dpFeature .dpAction_illust-cloud {
  top: 1020px;
}

@keyframes float-ayumi-gull01 {
  0%, 100% {
    transform: scaleX(-1) translateY(0);
  }
  50% {
    transform: scaleX(-1) translateY(-30%);
  }
}
@keyframes float-ayumi-gull01-sp {
  0%, 100% {
    transform: scaleX(1) translateY(0);
  }
  50% {
    transform: scaleX(1) translateY(-30%);
  }
}
@keyframes float-ayumi-gull02 {
  0%, 100% {
    transform: scaleX(-1) translateY(0);
  }
  50% {
    transform: scaleX(-1) translateY(-25%);
  }
}
@keyframes float-ayumi-gull02-sp {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25%);
  }
}

.dpAction_head {
  position: relative;
  z-index: 2;
  text-align: left;
  padding: 0 0 min(15.2671755725vw, 60px);
}

.dpFeature .dpAction_head {
  padding-bottom: 30px;
}

.page_wrapper .dpAction_head_ttl {
  margin: 0;
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: min(8.1424936387vw, 32px);
  line-height: 1.5;
  color: #003656;
}

.dpAction_head_lead {
  margin: min(5.0890585242vw, 20px) 0 0;
  font-size: min(3.816793893vw, 15px);
  line-height: 2.1;
  color: #003656;
}

.dpAction_content {
  position: relative;
  z-index: 2;
  padding: min(17.811704835vw, 50px) 20px 0;
}

.dpFeature .dpAction_content {
  padding: min(12.72264631vw, 50px) 20px 0;
}

.dpAction_ttl,
.dpAction_ttl2 {
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: min(6.106870229vw, 24px);
  line-height: 1.6;
  color: #003656;
  text-align: center;
}

.dpAction_ttl2 {
  font-size: min(4.5801526718vw, 24px);
}

.dpAction_ttl span {
  display: block;
}

.dpAction_subttl {
  margin: min(3.0534351145vw, 12px) 0 0;
  font-size: min(4.5801526718vw, 18px);
  font-weight: 700;
  line-height: 1.6;
  color: #003656;
  text-align: center;
}

.dpAction_lead {
  margin: min(11.4503816794vw, 45px) 0 0;
  font-size: min(3.816793893vw, 15px);
  line-height: 2.13;
  color: #003656;
  text-align: center;
}

.dpAction_lead-sm {
  margin-top: 10px;
}

.dpFeature .dpAction_lead {
  margin-top: min(2.5445292621vw, 10px);
}

.dpAction_imgPlaceholder {
  margin: min(15.2671755725vw, 60px) 0 0;
  width: 100%;
  background-color: #DADEE0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.dpAction_imgPlaceholder_in,
.dpAction_imgPlaceholder_in img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .dpAction_imgPlaceholder {
    margin-top: 60px;
    aspect-ratio: 1728 / 460;
  }

}

.dpAction_section {
  margin: min(15.2671755725vw, 60px) 0 0;
}

.dpAction_section_ttl {
  font-size: min(4.5801526718vw, 18px);
  font-weight: 700;
  color: #003656;
  line-height: 1.6;
}

.dpAction_section_txt {
  margin: min(3.0534351145vw, 12px) 0 0;
  font-size: min(3.816793893vw, 15px);
  line-height: 2.13;
  color: #003656;
}
.dpFeature .dpAction_section {
  margin-top: 90px;
}
.dpFeature .dpAction_section-theme {
  margin-bottom: 100px;
}

.dpAction_divider {
  margin: min(10.1781170483vw, 40px) 0 0;
  border-top: 1px dotted #BFD0DF;
}

.dpAction_projects {
  position: relative;
  margin: min(15.2671755725vw, 60px) 0;
}

.dpAction_projects_item {
  position: relative;
  padding: min(5.0890585242vw, 20px) min(5.0890585242vw, 20px);
  background-image: url(/sustainable/assets/img/ayumi/ayumi03_01-sp@2x.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.dpAction_projects_item-02 {
  margin: min(7.6335877863vw, 30px) 0 0;
  background-image: url(/sustainable/assets/img/ayumi/ayumi03_02-sp@2x.jpg);
}

.dpAction_projects_pencil {
  position: absolute;
  z-index: 1;
  top: min(-5.0890585242vw, -20px);
  right: min(-1.2722646311vw, -5px);
  width: min(12.72264631vw, 50px);
  height: auto;
}

.dpAction_projects_pencil img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .dpAction_projects {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-top: 56px;
  }

  .dpAction_projects_item {
    flex: 1 1 0;
    padding: 30px;
    background-image: url(/sustainable/assets/img/ayumi/ayumi03@2x.jpg);
  }

  .dpAction_projects_item-02 {
    margin-top: 0;
    background-image: url(/sustainable/assets/img/ayumi/ayumi03@2x.jpg);
  }

  .dpAction_projects_pencil {
    top: -40px;
    left: 51%;
    right: auto;
    width: 100px;
    transform: translateX(-58%);
  }
}

.dpAction_badge {
  display: inline-block;
  background-color: #003656;
  color: #fff;
  padding: 5px 10px;
  font-size: min(4.0712468193vw, 16px);
  font-weight: 500;
  line-height: 1;
}

.dpAction_badgeSection_ttl {
  margin: min(5.0890585242vw, 20px) 0 0;
  font-size: min(4.5801526718vw, 18px);
  font-weight: 700;
  color: #003656;
  line-height: 1.6;
}

.dpAction_ttl2Area {
  margin: min(22.900763359vw, 90px) 0 0;
}

.dpAction_journeyVisual {
  margin: min(10.1781170483vw, 40px) 0 100px;
}

.dpAction_journeyVisual_img {
  display: block;
}

.dpAction_journeyVisual_img img {
  display: block;
  width: 100%;
  height: auto;
}

.dpAction_journeyVisual_inner {
  position: relative;
}

.dpAction_journeyVisual_btn {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dpAction_journeyVisual_btn:focus-visible {
  outline: 2px solid #40B0C0;
  outline-offset: 2px;
}

.dpAction_journeyVisual_btn-01,
.dpAction_journeyVisual_btn-02,
.dpAction_journeyVisual_btn-03,
.dpAction_journeyVisual_btn-04,
.dpAction_journeyVisual_btn-05,
.dpAction_journeyVisual_btn-06 {
  border-radius: 50%;
}

/* SP座標（ayumi10_smp.png基準） */
.dpAction_journeyVisual_btn-01 { left: 0.645%; top: 0.185%; width: 40.323%; height: 11.531%; }
.dpAction_journeyVisual_btn-02 { left: 0.645%; top: 22.417%; width: 40.323%; height: 11.531%; }
.dpAction_journeyVisual_btn-03 { left: 0.645%; top: 35.332%; width: 40.323%; height: 11.531%; }
.dpAction_journeyVisual_btn-04 { left: 0.645%; top: 48.247%; width: 40.323%; height: 11.531%; }
.dpAction_journeyVisual_btn-05 { left: 0.645%; top: 73.432%; width: 40.323%; height: 11.531%; }
.dpAction_journeyVisual_btn-06 { left: -1.613%; top: 87.546%; width: 44.516%; height: 12.823%; }

.dpAction_cta {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: 0 -20px;
  padding: min(12.213740458vw, 48px) min(5.0890585242vw, 20px);
  aspect-ratio: 348 / 627;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
}

.dpAction_cta_bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}

.dpAction_cta_bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dpAction_cta_badge {
  display: inline-block;
  background-color: #003656;
  color: #fff;
  padding: 5px;
  font-size: min(2.5445292621vw, 10px);
  font-weight: 700;
  line-height: 1;
}

.dpAction_cta_ttl {
  margin: min(3.0534351145vw, 12px) 0 0;
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: min(8.1424936387vw, 32px);
  color: #003656;
  line-height: 1.2;
}

.dpAction_cta_txt {
  margin: min(3.0534351145vw, 12px) 0 0;
  font-size: min(3.3078880407vw, 13px);
  font-weight: 700;
  line-height: 1.8;
  color: #003656;
}

/* “将来の夢”パーパス策定プロセスの図から開くモーダル（yume.htmlの.dpLinks_modal-interviewを流用） */
.dpLinks_modal-journey {
  background: transparent;
  overflow: visible;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.dpLinks_modal_head p {
  font-weight: 500;
}

.dpLinks_modal-journey .dpLinks_modal_journeyMain {
  display: flex;
  flex-direction: column;
  gap: min(5.0890585242vw, 20px);
  padding: min(11.4503816794vw, 45px) 0 0;
}

.dpLinks_modal-journey .dpLinks_modal_journeyMain_body {
  flex: 1 1 auto;
  min-width: 0;
}

.dpLinks_modal-journey .dpLinks_modal_journeyMain_ttl {
  font-weight: 700;
  font-size: min(4.5801526718vw, 18px);
  line-height: 1.6;
  color: #003656;
  border-bottom: none;
}

.dpLinks_modal-journey .dpLinks_modal_journeyMain_txt {
  margin-top: min(3.0534351145vw, 12px);
  font-size: min(3.8167938931vw, 15px);
  line-height: 2.13333333;
  color: #003656;
}

.dpLinks_modal-journey .dpLinks_modal_journeyMain_img {
  flex: 0 0 auto;
  width: min(38.167938931vw, 150px);
  margin: 0 auto;
}

.dpLinks_modal-journey .dpLinks_modal_journeyMain_img img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .dpAction_cta {
    margin-top: 40px;
    padding: 70px 90px;
    aspect-ratio: 1140 / 500;
  }

  .dpAction_cta_badge {
    padding: 8px 10px;
    font-size: 16px;
    letter-spacing: 0.14em;
  }

  .dpAction_cta_ttl {
    margin-top: 20px;
    font-size: 44px;
  }

  .dpAction_cta_txt {
    margin-top: 16px;
    font-size: 20px;
  }
}

.dpAction_back {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: min(10.1781170483vw, 40px) min(5.0890585242vw, 20px) 0;
}

.dpAction_back_btn {
  display: inline-block;
  background: linear-gradient(90deg, #7D869C 0%, #003656 100%);
  color: #fff;
  border-radius: 8px;
  padding: min(3.5623409669vw, 14px) min(6.106870229vw, 24px);
  font-size: min(3.0534351145vw, 12px);
  font-weight: 700;
  transition: opacity 0.2s;
}

.dpAction_back_btn:hover {
  opacity: 0.75;
}

@media screen and (min-width: 920px) {
  .dpLinks_modal-journey {
    max-width: 960px;
    width: 100%;
  }

  .dpLinks_modal-journey .dpLinks_modal_journeyMain {
    flex-direction: row;
    align-items: center;
    padding-top: 40px;
  }

  .dpLinks_modal-journey .dpLinks_modal_journeyMain_ttl {
    font-size: 18px;
  }

  .dpLinks_modal-journey .dpLinks_modal_journeyMain_txt {
    font-size: 15px;
    line-height: 2.133333;
  }

  .dpLinks_modal-journey .dpLinks_modal_journeyMain_img {
    flex: 0 0 150px;
    width: 150px;
    margin: 0;
  }

  .dpActions_container {
    max-width: 1200px;
    padding: 0;
  }
  .dpActions_content_in {
    max-width: 800px;
    margin: 0 auto;
  }

  .dpAction_content {
    padding-top: min(8.333333333vw, 100px);
  }

  .dpFeature .dpAction_content {
    padding: min(8.333333333vw, 100px) 20px 0;
  }


  .dpAction {
    padding: min(6.6666666667vw, 80px) 20px 18.0167824074vw;
  }

  .dpAction_illust-gull01 {
    top: 1%;
    right: calc(50% - 550px);
    width: min(11.7476851852vw, 203px);
    animation: float-ayumi-gull01 4s ease-in-out infinite;
  }

  .dpAction_illust-gull02 {
    top: 10%;
    left: calc(50% - 700px);
    width: min(20.16666666vw, 242px);
    animation: float-ayumi-gull02 2s ease-in-out infinite;
    animation-delay: 0.5s;
  }

  .dpAction_illust-cloud {
    top: 13%;
    right: calc(50% - 670px);
    width: min(16vw, 192px);
  }

  .dpAction_illust-cloud2 {
    top: calc(1% + 120px);
    right: calc(50% - 340px);
    width: min(14.25vw, 171px);
  }

  .dpFeature .dpAction_illust-gull01 {
    top: 70px;
    right: calc(50% - 600px);
  }

  .dpFeature .dpAction_illust-gull02 {
    top: 12%;
  }

  .dpFeature .dpAction_illust-cloud {
    top: 16%;
  }

  .dpFeature .dpAction_illust-cloud2 {
    top: calc(1% + 200px);
    right: calc(50% - 520px);
    z-index: 3;
  }

  .dpAction_head {
    padding: 0 0 min(2.5vw, 30px);
    max-width: 1200px;
    margin: 0 auto;
  }

  .dpAction_head .dpContainer {
    padding: 0;
  }

  .page_wrapper .dpAction_head_ttl {
    font-size: 40px;
    margin-bottom: 25px;
    line-height: 1;
  }

  .dpAction_head_lead {
    margin-top: 12px;
    font-size: 15px;
  }

  .dpAction_ttl {
    font-size: min(4.1666666667vw, 50px);
  }

  .dpAction_subttl {
    margin-top: 16px;
    font-size: 28px;
  }

  .dpAction_lead {
    margin-top: min(4.166666666vw, 50px);
    font-size: 15px;
  }

  .dpAction_lead-sm {
    margin-top: 10px;
  }

  .dpFeature .dpAction_lead {
    margin-top: min(1.6666666667vw, 20px);
  }

  .dpFeature .dpAction_lead-sm {
    margin-top: min(0.8333333333vw, 10px);
  }

  .dpAction_section {
    margin-top: min(5vw, 60px);
  }

  .dpFeature .dpAction_section {
    margin-top: 100px;
  }

  .dpAction_section_ttl {
    font-size: 18px;
  }

  .dpAction_section_txt {
    margin-top: 14px;
    font-size: 15px;
  }

  .dpFeature .dpAction_section-theme {
    margin: 160px auto;
  }

  .dpAction_divider {
    margin-top: 64px;
  }

  .dpAction_badge {
    font-size: 16px;
  }

  .dpAction_badgeSection_ttl {
    margin-top: 16px;
    font-size: 18px;
  }

  .dpAction_ttl2Area {
    margin-top: 96px;
  }

  .dpAction_ttl2 {
    font-size: 28px;
  }

  .dpAction_journeyVisual {
    margin: min(4.166666666vw, 50px) auto 120px;
    max-width: 1010px;
  }
  .dpAction_journeyVisual_btn {
    background-color: #fff;
    opacity: 0;
    transition: all .2s;
  }
  .dpAction_journeyVisual_btn:hover {
    opacity: 0.3;
  }
  /* PC座標（ayumi10.png基準） */
  .dpAction_journeyVisual_btn-01 { left: 0.297%; top: 0.732%; width: 14.158%; height: 34.878%; }
  .dpAction_journeyVisual_btn-02 { left: 17.129%; top: 0.732%; width: 14.158%; height: 34.878%; }
  .dpAction_journeyVisual_btn-03 { left: 33.960%; top: 0.732%; width: 14.158%; height: 34.878%; }
  .dpAction_journeyVisual_btn-04 { left: 50.792%; top: 0.732%; width: 14.158%; height: 34.878%; }
  .dpAction_journeyVisual_btn-05 { left: 67.624%; top: 0.732%; width: 14.158%; height: 34.878%; }
  .dpAction_journeyVisual_btn-06 { left: 84.653%; top: -1.220%; width: 15.644%; height: 38.780%; }

  .dpAction_back {
    padding-top: 64px;

  }

  .dpAction_back_btn {
    padding: 20px 40px;
    font-size: 15px;
  }

  .dpAction_back_btn:hover {
    opacity: 0.75;
  }
}
/* ============================================================
   ayumi.html（パーパス策定の歩み）新規追加スタイル [[ END ]]
   ============================================================ */


/* ============================================================
   feature.html（“将来の夢”実現に向けた環境と社会への挑戦）新規追加スタイル [[ START ]]
   ※ .dpAction / .dpAction_illust / .dpAction_head / .dpAction_ttl / .dpAction_lead /
     .dpAction_section / .dpAction_divider / .dpAction_cta / .dpAction_back / .dpActions_*
     は ayumi.html の共通スタイルをそのまま流用しています。
   ============================================================ */

.dpFeature_eyebrow {
  display: block;
  margin: 0 auto 15px;
  padding-bottom: 5px;
  width: fit-content;
  font-weight: 500;
  font-size: 14px;
  color: #003656;
  border-bottom: 1px solid #003656;
  text-align: center;
}

/* --- ベン図（EGP / ESP） --- */
.dpFeature_venn {
  max-width: 480px;
  margin: min(5.0890585242vw, 20px) auto min(25.445292621vw, 100px);
}

.dpFeature_venn img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- EGP / ESP 大見出し --- */
.dpFeature_programTtl {
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: min(6.106870229vw, 24px);
  line-height: 1.5;
  color: #003656;
  text-align: center;
}

/* --- ロードマップ図（EGP / ESP） --- */
.dpFeature_roadmap {
  margin: min(6.106870229vw, 24px) 0 0;
}

.dpFeature_roadmap img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 重点テーマカード --- */
.dpFeature_cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(2.5445292621vw, 10px);
  margin: min(3.8167938931vw, 15px) 0 0;
}

.dpFeature_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
  color: #fff;
  text-align: center;
  border-radius: 5px;
}

.dpFeature_cards-egp .dpFeature_card {
  background-color: #5E9B7A;
  padding: 10px;
}

.dpFeature_cards-esp .dpFeature_card {
  background-color: #DF8C58;
}

.dpFeature_card_ttl {
  font-weight: 700;
  font-size: min(3.816793893vw, 15px);
  line-height: 1.33;
  min-height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dpFeature_card_pict {
  display: block;
  width: min(20.356234097vw, 80px);
  height: auto;
  margin: 0 auto 7px;
}

.dpFeature_cards-egp .dpFeature_card_pict {
  margin: 5px auto 0;
}

/* --- 行動計画へのリンクボタン --- */
.dpFeature_btnGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: min(7.6335877863vw, 30px) 0 0;
}

.dpFeature_btn {
  display: block;
  width: auto;
  min-width: 200px;
  max-width: 360px;
  min-height: 55px;
  background: linear-gradient(90deg, #7D869C 0%, #003656 100%);
  color: #fff;
  border-radius: 8px;
  padding: min(2.5445292621vw, 10px) 0;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dpFeature_btn:hover {
  opacity: 0.75;
}

@media screen and (min-width: 768px) {
  .dpFeature_eyebrow {
    font-size: min(1.5vw, 18px);
  }
  .dpFeature_venn {
    max-width: 800px;
    margin-bottom: 120px;
  }

  .dpFeature_programTtl {
    font-size: min(4.1666666667vw, 50px);
    
  }

  .dpFeature_cards {
    gap: min(11.6666666667vw, 20px);
    margin: min(2.5vw, 30px) auto min(6.6666666667vw, 80px);
  }

  .dpFeature_cards-egp {
    grid-template-columns: repeat(4, 1fr);
  }

  .dpFeature_cards-esp {
    grid-template-columns: repeat(3, 1fr);
  }

  .dpFeature_card {
    padding: 24px 16px;
    border-radius: 10px;
  }

  .dpFeature_card_ttl {
    font-size: 17px;
    line-height: 1.47;
  }

  .dpFeature_card_pict {
    width: 110px;
    margin: 20px auto 0;
  }

  .dpFeature_cards-egp .dpFeature_card {
    padding: 20px 10px 10px;
  }

  .dpFeature_cards-egp .dpFeature_card_pict {
    margin: 0 auto;
  }

  .dpFeature_btn {
    font-size: 13px;
    padding: 18px;
    min-width: 360px;
  }
}
/* ============================================================
   feature.html（“将来の夢”実現に向けた環境と社会への挑戦）新規追加スタイル [[ END ]]
   ============================================================ */