/* ----------------------------------- */
/* President Message Page Animations   */
/* ----------------------------------- */
@keyframes slideInLeftPresident {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes slideInRightPresident {
  0% {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
/* ----------------------------------- */
/* President Message Page              */
/* ----------------------------------- */
.breadcrumb {
  margin-bottom: 12.1rem;
  padding: 1.4rem 0 1.5rem;
}

main {
  overflow-x: hidden;
}

.president {
  padding: 6.4rem 0 20.2rem;
  max-width: 128rem;
  margin: 0 auto;
  position: relative;
}
.president .president__pattern {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0;
}
.president .president__pattern img {
  display: block;
  width: 100%;
  height: auto;
}
.president .president__pattern--top {
  top: 0.6rem;
  right: calc(100% - 55rem);
  width: 70rem;
  transform: scaleX(-1) rotate(-5deg);
}
.president .president__pattern--top.is-animated {
  animation: slideInRightPresident 2s cubic-bezier(0.21, 0.85, 0.35, 1) forwards;
}
@media screen and (max-width: 768px) {
  .president .president__pattern--top {
    width: 40rem;
    right: calc(100% - 26rem);
  }
}
.president .president__pattern--bottom {
  bottom: 8.1rem;
  width: 75rem;
  transform: scaleY(-1) rotate(-4deg);
  left: calc(100% - 60rem);
}
.president .president__pattern--bottom.is-animated {
  animation: slideInRightPresident 2s cubic-bezier(0.21, 0.85, 0.35, 1) forwards;
}
@media screen and (max-width: 768px) {
  .president .president__pattern--bottom {
    width: 40rem;
    bottom: 7.4rem;
    left: calc(100% - 26rem);
  }
}
.president .president__inner {
  position: relative;
  z-index: 1;
}
.president .item__text--spaced {
  margin-left: 0.8rem;
}
.president .president__heading {
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.5;
  color: #000000;
  letter-spacing: 0.08em;
  margin: 0 0 9.9rem;
}
.president .president__intro {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  margin-bottom: 5.9rem;
}
.president .president__intro p {
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0.04em;
  color: #000000;
  margin: 0;
}
.president .president__layout {
  display: flex;
  align-items: flex-start;
  gap: 9.8rem;
}
.president .president__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
}
.president .president__body p {
  font-size: 1.6rem;
  line-height: 2.8rem;
  letter-spacing: 0.04em;
  color: #000000;
  margin: 0;
}
.president .president__photo {
  flex: 0 0 37.6rem;
}
.president .president__photo-img-wrapper {
  width: 100%;
  height: 32rem;
  margin-top: 0.2rem;
  position: relative;
}
.president .president__photo-img-wrapper .president__photo-image--title {
  position: absolute;
  bottom: 4.8%;
  right: 5.3%;
  width: fit-content;
  padding: 0.5rem 0.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  background: #0027FF;
}
.president .president__photo-img {
  width: 100%;
  height: auto;
  display: block;
}
.president .president__photo-caption {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: #000000;
  margin: 1.5rem 0 0rem;
  font-weight: 500;
}
.president .president__signature-name {
  font-size: 2.4rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #000000;
  margin: 0.1rem 0 0;
}
@media screen and (max-width: 768px) {
  .president .breadcrumb {
    margin-bottom: 5rem;
  }
  .president {
    padding: 5rem 0 15.1rem;
  }
  .president .president__inner {
    padding: 0 1.8rem !important;
  }
  .president .president__heading {
    flex: 0 0 1rem;
    font-size: 2.4rem;
    margin-bottom: 3rem;
  }
  .president .president__photo-caption {
    margin: 1.4rem 0 0;
  }
  .president .president__intro {
    gap: 2.8rem;
    margin-bottom: 4.3rem;
  }
  .president .president__intro p {
    font-size: 1.6rem;
  }
  .president .president__layout {
    flex-direction: column;
    gap: 4.3rem;
  }
  .president .president__photo {
    flex: none;
    width: 100%;
  }
  .president .president__body p {
    font-size: 1.6rem;
  }
  .president .president__signature-name {
    font-size: 2rem;
    margin-top: 0.2rem;
  }
  .president .president__photo-img-wrapper {
    width: 28.1rem;
    height: 23.9rem;
  }
}

.tohoku-message {
  padding-top: 9.7rem;
}

.tohoku-message .president__layout, .higashinihon-message .president__layout {
  gap: 9.3rem;
}
@media screen and (max-width: 768px) {
  .tohoku-message .president__layout, .higashinihon-message .president__layout {
    gap: 4.3rem;
  }
}

.kansai-message {
  padding-bottom: 12.5rem;
}
@media screen and (max-width: 768px) {
  .kansai-message {
    padding-bottom: 15.1rem;
  }
}
.kansai-message .president__layout {
  gap: 10rem;
}
@media screen and (max-width: 768px) {
  .kansai-message .president__layout {
    gap: 4.3rem;
  }
}

.higashinihon-message {
  padding-bottom: 18.1rem;
}
@media screen and (max-width: 768px) {
  .higashinihon-message {
    padding-bottom: 15.1rem;
  }
}

.nishinihon-message {
  padding: 9.6rem 0 15.4rem;
}
.nishinihon-message .president__pattern--bottom {
  bottom: 3.3rem;
}
@media screen and (max-width: 768px) {
  .nishinihon-message .president__pattern--bottom {
    bottom: 8.4rem;
  }
}

.kyushu-message .president__intro {
  margin-bottom: 6rem;
}
@media screen and (max-width: 768px) {
  .kyushu-message .president__intro {
    margin-bottom: 4.3rem;
  }
}

.zennoh-energy-chiba-message .president__photo-img {
  height: 100%;
  object-fit: cover;
  border-radius: 0.8rem;
}

@media screen and (max-width: 768px) {
  .breadcrumb {
    margin-bottom: 5rem;
  }
}