/* Plain HTML */
.plain-html {
  padding: 0;
}
/* UWF Top Area */
.p-hero-uwf {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-left: 3.7%;
}
.p-hero-uwf__content {
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2em;
  height: 100%;
  min-height: 578px;
  padding-top: 2em;
  padding-bottom: 2em;
  width: 100%;
  max-width: calc(1280px + 3.7%);
}
.p-hero-uwf__content > * {
  width: 42.6%;
}
.p-hero-uwf__content-logo > img {
  width: clamp(135px, 45%, 250px);
}
.p-hero-uwf__content-title {
  display: flex;
  flex-flow: column nowrap;
  font-size: clamp(24px, 3.125vw, 40px);
}
.p-hero-uwf__content-title p {
  font-size: clamp(18px, 2.1875vw, 28px);
}
.p-hero-uwf__content-title > h1 {
  display: block;
}
.p-hero-uwf__content-text {
  font-size: 18px;
  margin-top: 3em;
}
.p-hero-uwf__media {
  min-height: 578px;
  height: 100%;
  position: absolute;
  left: 0;
  width: 50%;
  margin-left: 50%;
  z-index: -2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.p-hero-uwf::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background: linear-gradient(135deg, #0A0A0A, #353535);
  z-index: -1;
}
.p-hero-uwf::before {
  content: "";
  background: linear-gradient(135deg, var(--background-color-gradation-e2b-start), var(--background-color-gradation-e2b-end));
  position: absolute;
  top: 0;
  left: 50%;
  width: 1rem;
  height: 100%;
  z-index: -1;
}

.p-hero-uwf__style-a {
  overflow: hidden;
}
.p-hero-uwf__style-a::before, .p-hero-uwf__style-a::after {
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  width: 100%;
}
.p-hero-uwf__style-a::after {
  mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%20viewBox='0%200%201280%20420'%3e%3cpath%20d='M650.623,358.265c-23.855-23.337-38.463-55.316-38.204-90.509.069-9.417,1.223-18.582,3.305-27.408L683.812,0H0v420h714.735s-64.113-61.733-64.112-61.735Z'/%3e%3c/svg%3e");
}
.p-hero-uwf__style-a::before {
  mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%20viewBox='0%200%201280%20420'%3e%3cpath%20d='M650.623,358.265c-22.38-24.948-27.408-49.163-29.144-77.371-.578-9.401,1.903-21.174,3.986-30L706.476,0H0v420h714.735s-64.113-61.733-64.112-61.735Z'/%3e%3c/svg%3e");
  left: -1px;
  background: linear-gradient(200deg, var(--background-color-gradation-e2b-start) 10%, var(--background-color-gradation-e2b-end) 75%);
}
.p-hero-uwf__style-a .p-hero-uwf__media {
  width: 60%;
  margin-left: 40%;
}
.p-hero-uwf__style-b::before, .p-hero-uwf__style-b::after {
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
  width: 100%;
}
.p-hero-uwf__style-b::after {
  mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%20viewBox='0%200%201280%20420'%3e%3cpath%20d='M657.871,175.129L610.507,0H0v420h622.276l36.967-138.976c1.8-9.173,6.11-37.631,5.187-60.592-.575-14.297-6.559-45.302-6.559-45.302Z'/%3e%3c/svg%3e");
}
.p-hero-uwf__style-b::before {
  mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%20viewBox='0%200%201280%20420'%3e%3cpath%20d='M660.048,267.42l-50.74,152.58H-1.199V0h622.276l36.967,138.976c1.8,9.173,9.579,40.872,9.34,63.85-.385,37.038-7.337,64.593-7.337,64.593Z'/%3e%3c/svg%3e");
  left: 4px;
  background: linear-gradient(0deg, var(--background-color-gradation-e2b-end), var(--background-color-gradation-e2b-end) 40%, var(--background-color-gradation-e2b-start) 90%);
}
.p-hero-uwf__style-b .p-hero-uwf__media {
  width: 60%;
  margin-left: 40%;
}

@media screen and (max-width: 767px) {
  .p-hero-uwf {
    flex-direction: column;
    position: relative;
    padding-inline: 0;
  }
  .p-hero-uwf__content {
    position: relative;
    min-height: auto;
    flex-shrink: 1;
    gap: 2em;
    flex-flow: row wrap;
    justify-content: flex-start;
    flex: 1 auto;
    align-items: center;
    padding-inline: 3.7%;
  }
  .p-hero-uwf__content > *,
  .p-hero-uwf__content .p-hero-uwf__content-title,
  .p-hero-uwf__content .p-hero-uwf__content-text {
    width: auto;
    height: fit-content;
  }
  .p-hero-uwf__content-logo > img {
    width: clamp(100px, 25vw, 135px);
  }
  .p-hero-uwf__content-text {
    font-size: 16px;
    margin-top: 0em;
    padding-right: unset;
  }
  .p-hero-uwf__content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(135deg, #0A0A0A, #353535);
    z-index: -2;
  }
  .p-hero-uwf__content::before {
    content: "";
    background: linear-gradient(135deg, var(--background-color-gradation-e2b-start) 40%, var(--background-color-gradation-e2b-end));
    position: absolute;
    top: 0;
    left: calc(100% - 1rem);
    width: 1rem;
    height: 100%;
    z-index: -1;
  }
  .p-hero-uwf__media {
    min-height: unset;
    height: auto;
    position: relative;
    width: 100% !important;
    margin: 0 !important;
    z-index: -1;
    padding-bottom: 61.7521367521vw;
  }
  .p-hero-uwf::before, .p-hero-uwf::after {
    content: unset;
  }
}
.bg-gradation-darkgray .p-hero-uwf::after {
  background: linear-gradient(135deg, #0A0A0A, #353535);
}
.bg-gradation-darkgray .p-hero-uwf__style-a::after, .bg-gradation-darkgray .p-hero-uwf__style-b::after {
  background: linear-gradient(135deg, #0A0A0A, #353535 60%);
}
.bg-gradation-darkgray .p-hero-uwf__content::after {
  background: linear-gradient(135deg, #0A0A0A, #353535);
}
.bg-gradation-darkblue .p-hero-uwf::after {
  background: linear-gradient(135deg, #02000C, #1F0098);
}
.bg-gradation-darkblue .p-hero-uwf__style-a::after, .bg-gradation-darkblue .p-hero-uwf__style-b::after {
  background: linear-gradient(135deg, #02000C, #1F0098 60%);
}
.bg-gradation-darkblue .p-hero-uwf__content::after {
  background: linear-gradient(135deg, #02000C, #1F0098);
}
.bg-gradation-darkgreen .p-hero-uwf::after {
  background: linear-gradient(135deg, #000200, #00631B);
}
.bg-gradation-darkgreen .p-hero-uwf__style-a::after, .bg-gradation-darkgreen .p-hero-uwf__style-b::after {
  background: linear-gradient(135deg, #000200, #00631B 60%);
}
.bg-gradation-darkgreen .p-hero-uwf__content::after {
  background: linear-gradient(135deg, #000200, #00631B);
}

/* UWF Gradation Override */
body.p-uwf .section-bg-target.section-bg-support-black:not(.section-bg-img),
body.p-uwf .section-bg-support-black .section-bg-target {
  background: linear-gradient(135deg, #0A0A0A, #353535);
}
body.p-uwf .section-bg-target.section-bg-support-gray1,
body.p-uwf .section-bg-support-gray1 .section-bg-target {
  background: linear-gradient(135deg, #02000C, #1F0098);
}
body.p-uwf .section-bg-target.section-bg-support-gray2,
body.p-uwf .section-bg-support-gray2 .section-bg-target {
  background: linear-gradient(135deg, #000200, #00631B);
}

/* UWF Learn More */
/*body.p-uwf*/
.p-uwf__learn-more {
  padding-top: 60px;
  padding-bottom: 60px;
  display: flex;
  align-items: center;
  gap: 60px;
}
.p-uwf__learn-more img {
  width: clamp(135px, 16vw, 200px);
}
.p-uwf__learn-more a {
  font-size: clamp(24px, 2.5vw, 32px);
  margin-top: 0.78em;
  line-height: 1.5;
}
.p-uwf__learn-more a::after {
  content: "";
  height: 1em;
  width: 1em;
  display: inline-block;
  margin-left: 0.2em;
  background: url(../svg/icon-link-arrow.svg) no-repeat 0 0;
  background-size: 0.8em 0.8em;
  background-position: right bottom;
  transition: margin-left 0.2s ease;
}
.p-uwf__learn-more a:hover, .p-uwf__learn-more a:active {
  text-decoration: underline;
}
.p-uwf__learn-more a:hover::after, .p-uwf__learn-more a:active::after {
  margin-left: 0.6em;
}

@media screen and (max-width: 767px) {
  /*body.p-uwf*/
  .p-uwf__learn-more {
    padding-top: 30px;
    padding-bottom: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .p-uwf__learn-more a {
    font-size: 24px;
    margin-top: 0px;
    line-height: 1.5;
  }
  .p-uwf__learn-more a:hover, .p-uwf__learn-more a:active {
    text-decoration: underline;
  }
  .p-uwf__learn-more a:hover::after, .p-uwf__learn-more a:active::after {
    margin-left: 0.6em;
  }
}