@charset "UTF-8";

:root {
  --CorporateColor-MUFG_Red: #E60000;
  --CorporateColor-MUFG_Gray: #5A5A5A;
  --SupportColor-Gray: #333;
  --SupportColor-LightGray: #DCDCDC;
  --SupportColor-White: #FFF;
  --SupportColor-Black: #000;

  --FontSize-2XS: 1.0rem;
  --FontSize-XS : 1.2rem;
  --FontSize-S  : 1.4rem;
  --FontSize-M  : 1.6rem;
  --FontSize-L  : 1.8rem;
  --FontSize-XL : 2.0rem;
  --FontSize-2XL: 2.2rem;
  --FontSize-3XL: 2.4rem;
  --FontSize-4XL: 2.6rem;
  --FontSize-5XL: 2.8rem;
  --FontSize-6XL: 3.2rem;
  --FontSize-7XL: 3.4rem;
  --FontSize-8XL: 3.6rem;
  --FontSize-9XL: 3.8rem;
  --FontSize-10L: 4.0rem;
  --FontSize-11L: 4.8rem;
  --FontSize-12L: 6.0rem;
  --FontSize-13L: 10.0rem;

  --Radius-S  : 8px;
  --Radius-M  : 16px;
  --Radius-L  : 24px;
  --Radius-XL : 80px;

  --Margin-XXS: 4px;
  --Margin-XS : 8px;
  --Margin-S  : 12px;
  --Margin-M15: 15px;
  --Margin-M  : 16px;
  --Margin-ML : 18px;
  --Margin-L  : 20px;
  --Margin-XL : 24px;
  --Margin-2XL: 28px;
  --Margin-3XL: 32px;
  --Margin-4XL: 40px;
  --Margin-45L: 50px;
  --Margin-5XL: 60px;
  --Margin-6XL: 80px;
  --Margin-67L: 90px;
  --Margin-7XL: 100px;
  --Margin-8XL: 120px;
  --Margin-9XL: 200px;

}

@counter-style phase-numbers {
  system: fixed;
  symbols:
    url("/lp/new_corporate_uniform/imgs/story_phase_01.svg")
    url("/lp/new_corporate_uniform/imgs/story_phase_02.svg")
    url("/lp/new_corporate_uniform/imgs/story_phase_03.svg")
    url("/lp/new_corporate_uniform/imgs/story_phase_04.svg")
    url("/lp/new_corporate_uniform/imgs/story_phase_05.svg")
    url("/lp/new_corporate_uniform/imgs/story_phase_06.svg")
    url("/lp/new_corporate_uniform/imgs/story_phase_07.svg")
    url("/lp/new_corporate_uniform/imgs/story_phase_08.svg")
    url("/lp/new_corporate_uniform/imgs/story_phase_09.svg");
  suffix: " ";
}

/* -------------------- common -------------------- */

html {
  scroll-behavior: smooth;
}

main {
  display: flex;
  justify-content: center;
  color: var(--CorporateColor-MUFG_Gray);
}

#design-content .images .img,
#story .phase .step .staff,
#story .phase .step .graphics .diagram img,
#story .phase .step .branch .visual img,
#sustainable-challenge .graph {
  display: block;
}

video::-webkit-media-controls-picture-in-picture-button {
  display: none;
}

#whole_wrap {
  max-width: 1200px;
  width: 100%;
  margin: 0 var(--Margin-M15);
}
@media screen and (max-width: 767px) {
  #whole_wrap {
    margin: 0 var(--Margin-ML);
  }
}

.red {
  color: var(--CorporateColor-MUFG_Red);
}

.redbox {
  background-color: var(--CorporateColor-MUFG_Red);
  padding: var(--Margin-XS) var(--Margin-M);
}

.pc { display: block; }
.sp { display: none; }

#purpose-and-design,
#story,
#voices-of-our-team,
#sustainable-challenge {
  margin-top: var(--Margin-9XL);
  scroll-margin-top: 100px;
}

#purpose-and-design .title,
#story .title,
#voices-of-our-team .title,
#sustainable-challenge .title {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

#purpose-and-design .title .main,
#story .title .main,
#voices-of-our-team .title .main,
#sustainable-challenge .title .main {
  font-size: var(--FontSize-10L);
  color: var(--SupportColor-Gray);
}

#purpose-and-design .title .sub,
#story .title .sub,
#voices-of-our-team .title .sub,
#sustainable-challenge .title .sub {
  font-size: var(--FontSize-L);
  color: var(--CorporateColor-MUFG_Red);
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .redbox {
    padding: var(--Margin-XS) var(--Margin-S);
  }
  .pc { display: none; }
  .sp { display: block; }
  #purpose-and-design,
  #story,
  #voices-of-our-team,
  #sustainable-challenge {
    margin-top: var(--Margin-8XL);
  }
  #purpose-and-design .title .main,
  #story .title .main,
  #voices-of-our-team .title .main,
  #sustainable-challenge .title .main {
    font-size: var(--FontSize-5XL);
    text-align: center;
  }
}


/* -------------------- #uniform -------------------- */

#uniform {
  margin-top: var(--Margin-5XL);
}

#uniform .mv {
  border-radius: var(--Radius-XL) var(--Radius-XL) var(--Radius-XL) 0;
  filter: drop-shadow(0px 0px #FFF);
  width: 100%;
}

#uniform .title {
  width: 100%;
}

#uniform .title .main {
  margin-top: var(--Margin-4XL);
}

@media screen and (max-width: 767px) {
  #uniform .mv {
    border-radius: var(--Radius-L) var(--Radius-L) var(--Radius-L) 0;
  }
  #uniform .title .main {
    margin-top: var(--Margin-2XL);
  }
}

/* -------------------- #key-message -------------------- */

#key-message {
  border-radius: var(--Radius-L);
  border: 1px solid var(--CorporateColor-MUFG_Red);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Margin-6XL);

  margin: var(--Margin-6XL) 0;
  padding: var(--Margin-8XL) var(--Margin-M15);
}

#key-message .title {
  color: var(--CorporateColor-MUFG_Gray);
  font-size: var(--FontSize-12L);
  letter-spacing: 10.8px;
  text-align: center;
}

#key-message .title .sentence {
  display: inline-block;
  transform: translateX(3.0rem);
}

#key-message .title .punct {
  display: inline-block;
  transform: translateX(-0.5rem);
}

#key-message .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--Margin-3XL);
}

#key-message .content p {
  color: var(--SupportColor-Gray);
  font-size: var(--FontSize-XL);
  line-height: 2.1;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #key-message {
    border-radius: var(--Radius-M);
    gap: var(--Margin-45L);
    margin: var(--Margin-45L) 0 74px;
    padding: var(--Margin-67L) var(--Margin-ML) var(--Margin-5XL);
  }
  #key-message .title .sentence {
    transform: translateX(2.5rem);
  }
  #key-message .title {
    font-size: var(--FontSize-6XL);
    letter-spacing: 7.36px;
  }
  #key-message .title::before {
    width: 60px;
    height: 60px;

    top: -30px;
    left: 50%;
  }
  #key-message .content p {
    font-size: var(--FontSize-M);
    text-align: unset;
  }
}


/* -------------------- #sub-navigation -------------------- */

#sub-navigation {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--Margin-M);

  position: sticky;
  top:0;
  background-color: var(--SupportColor-White);
  padding: var(--Margin-M) 0;
  width: 100%;
  z-index: 100;
}

#sub-navigation .anchor {
  display: flex;
  align-items: center;
  color: var(--SupportColor-Gray);
  font-size: var(--FontSize-L);
  position: relative;
  text-decoration: none;
  margin: var(--Margin-XS) 0;
}

#sub-navigation .anchor .arrow {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/lp/new_corporate_uniform/imgs/arrow_down.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 8px;
}

#sub-navigation .divider {
  display: block;
  width: 1px;
  height: 24px;
  background: var(--SupportColor-LightGray);
  margin: var(--Margin-XS) 0;
}


@media screen and (max-width: 767px) {
  #sub-navigation {
    flex-direction: column;
    align-items: center;
    gap:var(--Margin-M15);
    position: unset;
  }
  #sub-navigation .anchor {
    font-size: var(--FontSize-M);
  }
  #sub-navigation .divider {
    display: none;
  }
}

/* -------------------- #purpose-and-design -------------------- */

#purpose-and-design .content {
  margin-top: var(--Margin-8XL);
}

#purpose-and-design .content .textarea {
  display: flex;
  gap: var(--Margin-4XL);
}

#purpose-and-design .content .textarea .point {
  font-size: var(--FontSize-7XL);
  font-weight: 600;
  flex: 0 0 242px;
}

#purpose-and-design .content .textarea .detail {
  font-size: var(--FontSize-XL);
  line-height: 2.0;
  flex: 1;
}

#purpose-content {
  background-image: url("/lp/new_corporate_uniform/imgs/purpose.svg");
  background-size: 600px 153px;
  background-repeat: no-repeat;
  background-position: 0 50px;
}

#design-content {
  background-image: url("/lp/new_corporate_uniform/imgs/design.svg");
  background-size: 499px 159px;
  background-repeat: no-repeat;
  background-position: 0 50px;
}

#purpose-and-design .content .images {
  margin-top: var(--Margin-4XL);
  position: relative;
  width: 100%;
}

#purpose-and-design .content .images {
  display: grid;
}

#purpose-and-design .content .images > * {
  grid-area: 1 / 1;
}

#purpose-and-design .content .images .caption {
  position: relative;
  align-self: center;
  z-index: 1;

  font-size: var(--FontSize-3XL);
  font-weight: 600;
  color: var(--SupportColor-White);
  line-height: 2.5;
  letter-spacing: 1.2px;
  width: fit-content;
}

#purpose-and-design .content .images .caption.left {
  left: var(--Margin-4XL);
}

#purpose-and-design .content .images .caption.right {
  justify-self: end;
  right: var(--Margin-4XL);
}

#purpose-and-design .content .images .img {
  border-radius: var(--Radius-M);
  max-width: 920px;
  width: 100%;
}

#purpose-and-design .content .images .img.right {
  margin-left: auto;
}

#purpose-and-design .content .images .img.left {
  margin-right: auto;
}

@media screen and (max-width: 767px) {
  #purpose-and-design .content {
    margin-top: var(--Margin-3XL);
    padding-top: var(--Margin-L);
  }
  #purpose-content,
  #design-content {
    background-position: unset;
  }
  #purpose-and-design .content .textarea {
    flex-direction: column;
    gap: var(--Margin-2XL);
  }
  #purpose-and-design .content .textarea .point {
    font-size: var(--FontSize-3XL);
    flex: unset;
  }
  #purpose-and-design .content .textarea .detail {
    font-size: var(--FontSize-M);
  }
  #purpose-and-design .content .images .caption {
    font-size: var(--FontSize-M);
    line-height: 3.0;
    align-self: end;
  }
  #purpose-and-design .content .images:nth-of-type(2),
  #purpose-and-design .content .images:last-of-type {
    height: calc(100vw * 800 / 1840 + 58px);
  }
  #purpose-and-design .content .images {
    width: 100%;
    height: calc(100vw * 800 / 1840 + 105px);
  }
  #purpose-and-design .content .images .caption.left {
    left: unset;
  }
  #purpose-and-design .content .images .caption.right {
    right: unset;
  }
  #purpose-and-design .caption .redbox:has(+ .pc) {
    padding-right: 0;
  }
  #purpose-and-design .caption .pc + .redbox {
    padding-left: 0;
  }
}

/* -------------------- #story -------------------- */

#story .phase {
  list-style: none;
  counter-reset: item;
  margin-top: var(--Margin-8XL);
}

#story .phase .step {
  counter-increment: item;
  position: relative;
  padding: 8px 0 80px 172px;
  overflow: hidden;
}

#story .phase .step::before {
  content: "";
  position: absolute;
  left: 0;
  width: 132px;
  height: 116px;
  background-size: contain;
  background-repeat: no-repeat;
}

#story .phase .step:nth-child(1)::before { background-image: url("/lp/new_corporate_uniform/imgs/story_phase_01.svg"); }
#story .phase .step:nth-child(2)::before { background-image: url("/lp/new_corporate_uniform/imgs/story_phase_02.svg"); }
#story .phase .step:nth-child(3)::before { background-image: url("/lp/new_corporate_uniform/imgs/story_phase_03.svg"); }
#story .phase .step:nth-child(4)::before { background-image: url("/lp/new_corporate_uniform/imgs/story_phase_04.svg"); }
#story .phase .step:nth-child(5)::before { background-image: url("/lp/new_corporate_uniform/imgs/story_phase_05.svg"); }
#story .phase .step:nth-child(6)::before { background-image: url("/lp/new_corporate_uniform/imgs/story_phase_06.svg"); }
#story .phase .step:nth-child(7)::before { background-image: url("/lp/new_corporate_uniform/imgs/story_phase_07.svg"); }
#story .phase .step:nth-child(8)::before { background-image: url("/lp/new_corporate_uniform/imgs/story_phase_08.svg"); }
#story .phase .step:nth-child(9)::before { background-image: url("/lp/new_corporate_uniform/imgs/story_phase_09.svg"); }

#story .phase .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 126px;
  left: 30px;
  width: 8px;
  height: 3000px;
  background-image: url("/lp/new_corporate_uniform/imgs/phase_tree.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

#story .phase .step h3 {
  font-size: var(--FontSize-7XL);
  font-weight: 600;
  color: var(--CorporateColor-MUFG_Red);
  line-height: 1.4;
  padding-top: 20px;
}

#story .phase .step p {
  font-size: var(--FontSize-XL);
  color: var(--SupportColor-Black);
  margin-top: var(--Margin-4XL);
  line-height: 2.0;
}

#story .phase .step .staff {
  border-radius: var(--Radius-M);
  margin-top: var(--Margin-4XL);
}

#story .phase .step .graphics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--Margin-4XL);
  margin-top: var(--Margin-4XL);
  width: 100%;
}

#story .phase .step .graphics .diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
}

#story .phase .step .graphics .diagram figcaption {
  font-size: var(--FontSize-XL);
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid var(--CorporateColor-MUFG_Red);
  width: fit-content;
  padding: 0 8px;
}

#story .phase .step .sub_caption {
  font-size: var(--FontSize-3XL);
  font-weight: 600;
  color: var(--CorporateColor-MUFG_Red);
  margin-top: 0;
}

#story .phase .step .sub_caption::before,
#story .phase .step .sub_caption::after {
  content: "～";
}

#story .phase .step .branch {
  max-width: 1028px;
  width: 100%;
  height: 440px;
  margin-top: var(--Margin-4XL);
}

#story .phase .step .visual {
  border-radius: var(--Radius-M);
  max-width: 1028px;
  width: 100%;
  height: 400px;
  background-image: url("/lp/new_corporate_uniform/imgs/story_04_facade.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 90% 50%;

  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: end;
}

#story .phase .step .branch .visual .alternation {
  font-size: var(--FontSize-S);
  color: var(--SupportColor-Gray);
  position: relative;
  top: 40px;
  right: 90px;
}

#story .phase .step .branch .visual .appear {
  position: relative;
  top: 40px;
  right: 48px;
  width: 275px;
  height: 316px;
}

@media screen and (max-width: 767px) {
  #story .phase .step {
    padding-left: 56px;
    padding-bottom: 40px;
  }
  #story .phase .step h3 {
    font-size: var(--FontSize-XL);
    padding-top: 120px;
  }
  #story .phase .step p {
    font-size: var(--FontSize-M);
    margin-top: var(--Margin-L);
  }
  #story .phase .step .sub_caption {
    font-size: var(--FontSize-M);
  }
  #story .phase .step::before {
    width: 110px;
    height: 96px;
  }
  #story .phase .step:not(:last-child)::after {
    top: 104px;
    left: 24px;
  }
  #story .phase .step .staff {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  #story .phase .step .visual {
    justify-content: space-between;
  }
  #story .phase .step .branch .visual .alternation {
    right: 0;
  }
  #story .phase .step .branch .visual .appear {
    right: 15px;
  }
  #story .phase .step .graphics {
    justify-content: center;
  }
  #story .phase .step .graphics .diagram figcaption {
    font-size: var(--FontSize-M);
  }
  #story .phase .step .graphics img {
    max-width: 100%;
  }
}

@media screen and (max-width: 530px) {
  #story .phase .step .branch {
    height: 320px;
  }
  #story .phase .step .branch .visual {
    height: 280px;
  }
  #story .phase .step .branch .visual .alternation {
    margin-right: -70px;
  }
  #story .phase .step .branch .visual .appear {
    right: 0;
    width: 200px;
    height: 240px;
  }
  #story .phase .step .branch .visual picture {
    flex-shrink: 0;
  }
}

/* -------------------- #voices-of-our-team -------------------- */

#voices-of-our-team .birth {
  font-size: var(--FontSize-11L);
  font-weight: 600;
  line-height: 2.0;
  color: var(--CorporateColor-MUFG_Red);
  margin-top: var(--Margin-8XL);
  text-align: center;
}

#voices-of-our-team .birth .voice {
  display: inline-block;
  width: 86px;
  height: 86px;
  background-image: url("/lp/new_corporate_uniform/imgs/bubble_red.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 var(--Margin-M);
}

#voices-of-our-team #staff_01,
#voices-of-our-team #staff_02,
#voices-of-our-team #staff_03 {
  color: var(--CorporateColor-MUFG_Gray);
  font-size: var(--FontSize-XL);
  line-height: 2.0;
  display: flex;
  align-items: center;
  margin-top: var(--Margin-4XL);
  width: 100%;
  min-height: 300px;
  position: relative;
}

#voices-of-our-team #staff_01 {
  background: url("/lp/new_corporate_uniform/imgs/bubble_yellow.svg") no-repeat  top 20px left 20px / 280px,
              url("/lp/new_corporate_uniform/imgs/voices-of-our-team_image_01.png") no-repeat top left / 280px;
  padding-left: 350px;
}

#voices-of-our-team #staff_02 {
  background: url("/lp/new_corporate_uniform/imgs/bubble_green.svg") no-repeat top right 20px / 280px,
              url("/lp/new_corporate_uniform/imgs/voices-of-our-team_image_02.png") no-repeat top 20px right / 280px;
  padding-right: 350px;
}

#voices-of-our-team #staff_03 {
  background: url("/lp/new_corporate_uniform/imgs/bubble_blue.svg") no-repeat top 0 left 18px / 280px,
              url("/lp/new_corporate_uniform/imgs/voices-of-our-team_image_03.png") no-repeat top 12px left 0 / 280px;
  padding-left: 350px;
}

@media screen and (max-width: 767px) {
  #voices-of-our-team .birth {
    font-size: var(--FontSize-6XL);
    margin-top: var(--Margin-6XL);
  }
  #voices-of-our-team .birth .voice {
    width: 62px;
    height: 62px;
  }
  #voices-of-our-team #staff_01 {
    background: url("/lp/new_corporate_uniform/imgs/bubble_yellow.svg") no-repeat  top 20px left calc(50% + 20px) / 220px,
                url("/lp/new_corporate_uniform/imgs/voices-of-our-team_image_01.png") no-repeat top center / 220px;
    padding-left: unset;
  }
  #voices-of-our-team #staff_02 {
    background: url("/lp/new_corporate_uniform/imgs/bubble_green.svg") no-repeat top right calc(50% + 20px) / 220px,
                url("/lp/new_corporate_uniform/imgs/voices-of-our-team_image_02.png") no-repeat top 20px center / 220px;
    padding-right: unset;
  }
  #voices-of-our-team #staff_03 {
    background: url("/lp/new_corporate_uniform/imgs/bubble_blue.svg") no-repeat top 0 left calc(50% + 18px)  / 220px,
                url("/lp/new_corporate_uniform/imgs/voices-of-our-team_image_03.png") no-repeat top 12px center / 220px;
    padding-left: unset;
  }
  #voices-of-our-team #staff_01 {
    font-size: var(--FontSize-M);
    padding-top: 266px;
  }
  #voices-of-our-team #staff_02 {
    font-size: var(--FontSize-M);
    padding-top: 294px;
  }
  #voices-of-our-team #staff_03 {
    font-size: var(--FontSize-M);
    padding-top: 288px;
  }
}


/* -------------------- #sustainable-challenge -------------------- */

#sustainable-challenge .declaration {
  color: var(--SupportColor-Black);
  margin-top: var(--Margin-8XL);
  font-size: var(--FontSize-XL);
  line-height: 2.0;
}

#sustainable-challenge .graph {
  border-radius: var(--Radius-M);
  margin: var(--Margin-4XL) 0 var(--Margin-8XL);
}

@media screen and (max-width: 767px) {
  #sustainable-challenge {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #sustainable-challenge .declaration {
    font-size: var(--FontSize-M);
    margin-top: var(--Margin-5XL);
  }
  #sustainable-challenge .graph {
    border-radius: unset;
    max-width: 95%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}