@charset "UTF-8";

/*/
==========================================================================
  Shareholder
==========================================================================
/*/

/* ====================================================== 全体レイアウト */
.Main--shareholder {
  margin: 0;
  font-family: Noto Sans JP, sans-serif;
  line-height: 1.2;
  color: #333;

  .Main--shareholder-frame {
    /* max-width: 1240px; */
    width: 1240px;
    margin: 0 auto;
    padding: 20px 20px 10px;

    &, * {
      box-sizing: border-box;
    }

    @media (max-width: 767px) {
      width: calc(100%);
      padding: 16px 16px 8px;
    }
  }

  .sentenceFragment {
    white-space: nowrap;
  }

  .desktopOnly {
    display: block;
  }
  .mobileOnly {
    display: none;
  }

  @media (max-width: 767px) {
    .desktopOnly {
      display: none;
    }
    .mobileOnly {
      display: block;
    }
  }

}

/* 画像プリロード用（hover用など） */
img.preload {
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  animation: vanish .1s ease-in-out forwards;
}
@keyframes vanish {
  to {
    display: none;
    opacity: 0;
  }
}

/* ====================================================== コンポーネント配置グリッド */
.componentRow {
  display: grid;
  gap: 16px 24px;

  @media screen and (max-width: 767px) {
    display: flex;
    flex-direction: column;
    gap: 16px 0;
  }

  &.componentRow--spaceAround {
    gap: 12px 24px;
    padding: 0 24px;
  }

  &.componentRow--centered {
    display: flex;
    justify-content: center;
  }

  &.componentRow--1up {
    grid-template-columns: repeat(1fr, 1fr);
  }
  &.componentRow--2up {
    grid-template-columns: repeat(2, 1fr);
  }
  &.componentRow--3up {
    grid-template-columns: repeat(3, 1fr);
  }
  &.componentRow--4up {
    grid-template-columns: repeat(4, 1fr);
  }

  @media (max-width: 767px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.sectionBoard-heading + .componentRow {
  margin-top: 48px;
}
.section-leadtext + .componentRow {
  margin-top: 32px;

  @media (max-width: 767px) {
    margin-top: 24px;
  }
}

.bracket {
  display: flex;
  flex-direction: column;
}


/* ====================================================== 共用コンポーネント */
/* 影付き矩形 */
.shadowedBorderedContainer {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.17);
}
.shadowedBorderedContainer {
  transition: box-shadow .1s;
}

a.shadowedBorderedContainer,
.shadowedBorderedContainer:not(.pageHeadline-gallery):has(a) {
  box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.24);
}
a.shadowedBorderedContainer:hover,
.shadowedBorderedContainer:not(.pageHeadline-gallery):has(a:hover) {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.17);
  transform: translateY(2px);
}

/* カード */
.card {
  display: flex;
  flex-direction: column-reverse;
  border-radius: 16px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.17);
  overflow: hidden;

  .card-body {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 20px 24px;
    background: #fff;

    &::after {
      content: '';
      display: inline-block;
      width: 14.142px;
      height: 14.142px;
      background: url(/company/jp/shareholder/assets/img/chevron-right.svg) center center no-repeat;
      background-size: contain;
      margin-left: auto;
      transition: transform .4s cubic-bezier(.02,.05,0,1.03);
    }

  }

  &:hover .card-body::after {
    transform: translateX(3px);
  }

  .card-body-heading {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
  }

  .card-image {
    width: 100%;
    height: auto;
    background-color: #F0F0F0;

    .card-image-img {
      display: block;
      width: 100%;
      height: auto;
      transition: transform .3s;
    }
  }

  &:hover {
    .card-body-heading {
      color: var(--red, #E60012);
      text-decoration: underline;
    }

    .card-image-img {
      transform: scale(1.03);
    }
  }
}

/* 順路ガイドリンク */
.button-routeGuide {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 32px;
  border-radius: 16px;
  background-color: #fff;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;

  @media screen and (max-width: 767px) {
    font-size: 16px;
  }

  &::after {
    content: '';
    display: inline-block;
    width: 34.667px;
    height: 8px;
    background: url(/company/jp/shareholder/assets/img/arrow-right.svg) center center no-repeat;
    background-size: contain;
    margin-left: auto;
    transition: transform .4s cubic-bezier(.02,.05,0,1.03);
    flex-shrink: 0;

    @media screen and (max-width: 767px) {
      width: 26.727px;
      height: 6.325px;
    }
  }

  &[target="_blank"]::after {
    width: 18px;
    height: 18px;
    background: url(/company/jp/shareholder/assets/img/icon-blank.svg) center center no-repeat;
    background-size: contain;
  }

  &:hover::after {
    transform: translateX(8px);
  }

  &[target="_blank"]:hover::after {
    transform: scale(1.25);
  }

  &:hover {
    .button-routeGuide-content {
      color: var(--red, #E60012);
      text-decoration: underline;
    }
  }

  .fowardingSign {
    display: inline-block;
    margin-right: 8px;
    width: 32px;
    height: 32px;
  }

  .button-routeGuide-content {
    flex: 1;
    padding-right: 30px;
  }

  &.button-routeGuide--sharpen {
    border-radius: 8px;
    padding: 24px 40px 24px 16px;

    .button-routeGuide-content {
      padding-right: 0;
    }
  }

  &.button-routeGuide--emph {
    background: #FBE2E3;
    .fowardingSign {
      width: 56px;
      height: 56px;

      @media screen and (max-width: 767px) {
        width: 40px;
        height: 40px;
      }
    }
  }

  &.button-routeGuide--bordered {
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid #D5D5D5;
    padding: 20px 24px 20px 0;
    font-size: 18px;
    font-weight: 400;

    &:hover {
      box-shadow: none;
    }
  }
  &.button-routeGuide--noframe {
    border-radius: 0;
    box-shadow: none;
    padding: 20px 24px 20px 0;
    font-size: 18px;
    font-weight: 400;

    &:hover {
      box-shadow: none;
    }
  }

  &.button-routeGuide--centered {
    justify-content: center;
    column-gap: 20px;

    @media screen and (max-width: 767px) {
      column-gap: 8px;
    }

    .fowardingSign {
      margin-left: auto;
    }
    .button-routeGuide-content {
      flex: none;

      @media screen and (max-width: 767px) {
        flex: unset;
        flex-shrink: 1;
      }
      @media screen and (max-width: 372px) {
        .sentenceFragment {
          white-space: normal;
        }
      }

    }
  }
}

.componentRow .button-routeGuide--emph {
  width: 100%;
}


.bannered-control {
  display: block;
  border-radius: 16px;
  overflow: hidden;

  .bannered-control-img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .3s;
  }

  &:hover {
    .bannered-control-img {
      transform: scale(1.03);
    }
  }
}

/* 固定リンク */
.fixedLinkToShareholderSite {
  display: block;
  position: fixed;
  width: auto;
  right: 0;
  top: 50%;
  margin: auto;
  transform: translateY(-50%);

  z-index: 2000; /* ヘッダのz-indexが1000なのでそれ以上に */
  transition: transform .3s cubic-bezier(.02,.72,.24,.99);

  &.stored {
    transform: translate(calc(100% + 22px), -50%);
    pointer-events: none;
  }

  .fixedLinkToShareholderSite-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    row-gap: 7px;
    border-radius: 16px 0 0 16px;
    border: 4px solid var(--red, #E60012);
    border-width: 4px 0 4px 4px;
    background: #fff;
    padding: 20px 24px;

    .fixedLinkToShareholderSite-content-text {
      color: var(--red, #E60012);
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
    } 

    .fixedLinkToShareholderSite-content-symbol {
      display: block;
      width: 52px;
      height: auto;
    }

    &:hover {
      text-decoration: none;
    }
  }

  &.is-erased {
    display: none;
  }

  .eraseSelf { /* 消去ボタン */
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: 43px;
    height: 43px;
    cursor: pointer;

    background: url(/company/jp/shareholder/assets/img/control-close.svg) center center no-repeat;
    background-size: contain;

    &:hover {
      background-image: url(/company/jp/shareholder/assets/img/control-close--hover.svg);
    }
  }
}

/* ====================================================== キービジュアル部・H1 */
/* パンくず */
.contentPath {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 7px;
  font-size: 14px;
  line-height: 1.5;

  .contentPath-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 8px;
  }

  .contentPath-item {
    &::before {
      content: "";
      width: 10px;
      height: 10px;
      background: url(/company/jp/shareholder/assets/img/chevron-right.svg) center center no-repeat;
      background-size: contain;
      margin-right: 8px;
      display: inline-block;
    }
    &:first-of-type::before {
      content: none;
      margin: 0;
    }
  }
  .contentPath-item-content {
    color: #333;
    font-size: 14px;
    line-height: 1.9;

    @media screen and (max-width: 767px) {
      font-size: 10px;
    }
  }

  /* 言語切替リンク */
  .languageSwitch {
    flex-shrink: 0;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    border: 1px solid var(--red, #E60012);
    border-radius: 16px;
    background-color: #fff;
    padding: 4px 12px;
    color: var(--red, #E60012);
    line-height: 1.2;
    padding: 4px 21px;

    &:hover {
      text-decoration: underline;
    }

    @media (max-width: 767px) {
      font-size: 10px;
    }
  }
}
.contentPath + * {
  margin-top: 16px;
  @media screen and (max-width: 767px) {
    margin-top: 13px;
  }
}
/* 波付背景付きコンテナ */
.pageHeadline {
  position: relative;  


  /* 波模様背景 */
  &::after {
    margin: 118px auto 0;
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1440 / 78;
    background-image: url(/company/jp/shareholder/assets/img/waved-background.svg);
    background-position: bottom - 2px center;
    background-size: cover;

    @media screen and (max-width: 767px) {
      margin-top: 60px;
    }
  }
}

.Main--shareholder .pageHeadline-frame {

  @media screen and (max-width: 767px) {
    padding-left: 28px;
    padding-right: 28px;
  }
}

.pageHeadline,
.pageHeadline-frame {
  background-color: #FBE2E3;
}

/* ------------------------------  H1部（2列組） */
.pageTitle-shareholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0;

  @media (max-width: 767px) {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 左カラム（配置定義） */
  .pageTitle-shareholder-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
  }

  /* 右カラム（配置定義） */
  .pageTitle-shareholder-sub {
    flex-shrink: 0;
    width: 490px;

    .pageTitle-shareholder-sub-keyvisual {
      display: block;
      width: 100%;
      height: auto;
    }

    @media screen and (max-width: 767px) {
      width: 100%;
    }
  }
}

/* 訴求パネル群配置グリッド */
.pageHeadline-frame .pageHeadline-featureBoard {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: calc(65% - 8px) calc(35% - 8px);
  column-gap: 16px;
  row-gap: 10px;
  max-width: 1240px;

  @media (max-width: 767px) {
    display: flex;
    flex-direction: column;
  }
}

/* 訴求パネル群 左カラム */
.pageTitle-shareholder-main-heading {
  color: #333;

  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  margin-top: -.1em;

  @media (max-width: 767px) {
    font-size: 26px;
  }

}
.pageTitle-shareholder-main-trailerNav {
  .pageTitle-shareholder-trailerNav-list {
    display: flex;
    gap: 16px;
    list-style: none;
  }
  .pageTitle-shareholder-main-trailerNav-item {
    display: flex;
  }
  .pageTitle-shareholder-main-trailerNav-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 24px;
    background-color: #fff;
    border-radius: 16px;
    font-size: 18px;

    &::after {
      content: '';
      display: block;
      width: 14.142px;
      height: 14.142px;
      background: url(/company/jp/shareholder/assets/img/chevron-right.svg) center center no-repeat;
      background-size: contain;
    }

    @media (max-width: 767px) {
      font-size: 18px;
      padding: 6px 16px;

      &::after {
        width: 10px;
        height: 10px;
      }
    }
  }

  &:hover {
    .pageTitle-shareholder-main-trailerNav-content {
      color: var(--red, #E60012);
      text-decoration: underline;
    }
  }
}

/* ------------------------------ カルーセルギャラリー */
.pageHeadline-gallery {
  container-type: inline-size;
  display: flex;
  position: relative;
  width: 764px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px;
  background: #fff;

  .pageHeadline-gallery-content {
    container-type: inline-size;
    width: 100%;
    /* padding: 20px 24px 0; */
    padding: 2.61cqw 3.14cqw 6.42cqw;

    @media (max-width: 767px) {
      padding-bottom: 46px;
    }
  }

  .slideContainer {
    container-type: inline-size;
    width: 100%;

    .slideList {
      width: 100%;
    }

    .slideItem {
      padding: 0 1px; /* アイテム間に縦線が描画されることがあるケースへの対応 */
      width: 100%;
      text-align: center;

      &:hover {
        opacity: .7;
      }

      .slideItemContent {
        display: block;
        width: 100%;
      }
      img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 243px;
        object-fit: cover;

        @media screen and (max-width: 767px) {
          max-height: none;
          height: auto;
          max-height: none;
        }
        @media screen and (max-width: 767px) {
          /* aspect-ratio: 2.5 / 1; */
        }

      }
    }
  }
}

/* カルーセル（splide）オーバーライド */
.Main--shareholder {
  .splide__pagination {
    bottom: 2.23cqw;

    @media (max-width: 767px) {
      bottom: 20px;
    }
  }
  .splide__pagination__page {
    margin: 0 8px;
    width: 14px;
    height: 14px;
    opacity: 1;

    &.is-active {
      background-color: var(--red, #E60012);
      transform: scale(1);
    }
  }
  .splide__slide img {
    width: 100%;
    height: auto;
  }
}

/* 再生・停止ボタン（splideには未提供。自作） */
.pageHeadline-gallery-transport {
  position: absolute;
  bottom: 1.53cqw;
  right: 48px;
  height: 28px;
  z-index: 1;

  @media (max-width: 767px) {
    bottom: 14px;
    right: 4.93%;
  }

  .slideControl {
    position: relative;
    display: block;
    width: 28px;
    aspect-ratio: 1;
    text-indent: -100vw;
    overflow: hidden;
    cursor: pointer;
    background: center center no-repeat;
    background-size: contain;

    &[data-active="true"] {
      display: block;
    }
    &[data-active="false"] {
      display: none;
    }
  }

  .slideControl-pause {
    background-image: url(/company/jp/shareholder/assets/img/control-pause.svg);
    &:hover {
      background-image: url(/company/jp/shareholder/assets/img/control-pause--hover.svg);
    }
  }
  .slideControl-start {
    background-image: url(/company/jp/shareholder/assets/img/control-play.svg);
    &:hover {
      background-image: url(/company/jp/shareholder/assets/img/control-play--hover.svg);
    }
  }
}

/* ------------------------------ 訴求カセット群配置 */
.pageHeadline-featureBoard {
  .pageHeadline-featuredContent:first-of-type {
    grid-row: 1 / 3;
    grid-column: 1 / 1;
  }

  .pageHeadline-featuredContent:nth-of-type(2) {
    grid-row: 1 / 1;
    grid-column: 2 / 2;
  }

  .pageHeadline-featuredContent:nth-of-type(3) {
    grid-row: 2 / 2;
    grid-column: 2 / 2;
  }
  @media screen and (max-width: 767px) {
    margin-top: 24px;
  }
}

.pageHeadline-stockInfo {
  height: 136px;
  overflow: hidden;
  position: relative;

  .loadingIndicator {
    z-index: 1;
    display: flex;
    width: 80px;
    height: 10px;
    align-items: stretch;
    justify-content: space-around;;

    position: absolute;
    margin: auto;
    top: 0; right: 0; bottom: 0; left: 0;

    .loadingIndicatorContent {
      background: #ccc;;

      display: block;
      width: 10px;
      height: auto;
      aspect-ratio: 2;

      animation: loadingSpinner 1s infinite;
      &:nth-of-type(2) {
        animation-delay: .3s;
      }
      &:nth-of-type(3) {
        animation-delay: .6s;
      }
    }
  }

  @media (max-width: 767px) {
    width: 100%;
  }
}


@keyframes loadingSpinner {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

iframe.pageHeadline-stockInfo-realtimeSignage {
  position: relative;
  z-index: 0;
  border: none;
  background: transparent;
  width: 100%;
  height: auto;
  border-radius: 32px;
  height: 138px;
  overflow: hidden;
}
.pageHeadline-featureBoard .pageHeadline-featuredContent {
  display: flex;
  width: auto;
  min-height: 38px;
  border-radius: 16px;
  column-gap: 24px;
  background: #FFF;
}

.pageHeadline-featuredLink-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  container-type: inline-size;
  gap: 24px;
  padding: 16px 36px;
  width: 100%;
  border: 4px solid var(--red, #E60012);
  border-radius: 16px;

  @media (max-width: 767px) {
    padding: 20px 28px;
  }

  &:hover {
    text-decoration: none;
  }

  .pageHeadline-featuredLink-content-symbol {
    display: block;
    width: 29.5%;
    /* width: 52px; */
    height: auto;
  }

  .pageHeadline-featuredLink-content-title {
    color: var(--red, #E60012);
    font-size: 30px;
    /* font-size: 6.36cqh; */
    font-weight: 700;
    line-height: 1.25;
  }

  &[target="_blank"]::after {
    flex-shrink: 0;
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(/company/jp/shareholder/assets/img/icon-blank.svg) center center no-repeat;
    background-size: contain;
    margin-left: auto;
  }

  .overMedScreen {
    display: inline;
  }
  .narrowScreen {
    display: none;
  }

  @container(max-width: 319px) {
    .pageHeadline-featuredLink-content-title {
      font-size: 24px;
    }

    .overMedScreen {
      display: none;
    }
    .narrowScreen {
      display: inline;
    }
  }
}


.internalNav {
  width: 100%;
  padding: 0 72px;

  @media (max-width: 767px) {
    padding: 0;
  }

  .internalNav-list {
    display: flex;
    gap: 20px 6%;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;

    @media (max-width: 767px) {
      padding: 0;
      flex-direction: column;
      gap: 24px 0;;
      justify-content: flex-start;
    }


    .internalNav-item {
      width: calc(33% - 3.7%);

      @media (max-width: 767px) {
        width: 100%;
      }

      .internalNav-item-content::after {
        flex-shrink: 0;
      }
    }
  }
}

* + .internalNav {
  margin-top: 62px;

  @media (max-width: 767px) {
    margin-top: 56px;
  }
}

.internalNav-item-content {
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;

  @media screen and (max-width: 767px) {
    font-size: 13px;
  }

  &::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(/company/jp/shareholder/assets/img/chevron-circle-down.svg) center center no-repeat;
    background-size: contain;
    margin-left: 8px;

    @media (max-width: 767px) {
      width: 18px;
      height: 18px;
    }
  }

  &:hover {
    text-decoration: underline;
    color: var(--red, #E60012);
  }
}

/* ====================================================== セクション レイアウト雛形 */
.sectionBoard {
  display: flex;
  flex-direction: column;
}
.sectionBoard-frame.Main--shareholder-frame {
  position: relative;
  width: 100%;
  max-width: 1071px;
  padding-top: 64px;

  @media (max-width: 767px) {
    padding-top: 72px;
  }

  &, * {
    box-sizing: border-box;
  }
}

.fullWidthBg {
  width: 100%;
  margin: 0 auto;
  display: block;
  background-color: #F0F0F0;
}

.sectionBoard-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .sectionBoard-heading-body {
    overflow: hidden;
    display: flex;
    align-items: center;
    column-gap: 52px;

    color: var(--red, #E60012);

    @media (max-width: 767px) {
      column-gap: 40px;
    }

    &::before,
    &::after {
      content: "";
      width: 30px;
      height: 28px;
      background: url(/company/jp/shareholder/assets/img/footprint.svg) center center no-repeat;
      background-size: contain;

      @media screen and (max-width: 767px) {
        width: 20px;
        height: 18.4px;
        flex-shrink: 0;        
      }
    }

    img.desktopOnly {
      width: auto;
      height: 91px;
    }
    img.mobileOnly {
      width: auto;
      height: 66px;
    }
  }

  .sectionBoard-heading-textForScreenReader {
    position: fixed;
    left: -100vw;
  }
}

.section-leadtext {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  text-align: center;

  @media (max-width: 767px) {
    font-size: 18px;
  }
}
.sectionBoard-heading + .section-leadtext {
  margin-top: 48px;
  color: #252525
}
.sectionBoard-heading + .sectionBoard-body {
  margin-top: 48px;

  @media (max-width: 767px) {
    margin-top: 40px;
  }
}
.section-leadtext + .sectionBoard-body {
  margin-top: 32px;
}

/* ====================================================== セクション個別 */
/* ---------------------------------------- 味の素グループを知る */
.sectionBoard#section-aboutus {
  .sectionBoard-frame {
    padding-bottom: 96px;
  }
}
/* ---------------------------------------- 事業を知る */
.sectionBoard#section-ourbusiness {
  background-color: #F0F0F0;

  .sectionBoard-frame {
    container-type: inline-size;
    padding-bottom: 136px;

    @media (max-width: 767px) {
      padding-bottom: 96px;
    }
  }

  .sectionBoard-body {
    container-type: inline-size;

    @media (max-width: 767px) {
      gap: 48px;
    }

    .card {
      width: calc(33cqw - 12px);

      @media screen and (max-width: 767px) {
        width: 100%;
      }

      .card-body-heading {
        font-size: 18px;
      }
      .card-image {
        padding-top: 16px;
        background-color: #fff;
      }
    }
  }

  .sectionBoard-subheading {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 500;

    &[data-category="food"] {
      background-color: #EB9500;
    }
    &[data-category="bio-and-chemical"] {
      background-color: #1B489D;
    }
  }
  .sectionBoard-subheading + .componentRow {
    margin-top: 24px;
  }

}

.animated-figure-runway {
  container-type: inline-size;
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 5cqw);
  height: 100px;

  @media (max-width: 767px) {
    left: 16px;
    width: calc(100% - 16px * 2 - 60px);
    transform: translateY(calc(50% - 5px));
  }
}

.animated-figure {
  position: absolute;
  width: 60px;
  bottom: 0;
  left: 0;
  z-index: 10;
  aspect-ratio: 60 / 100;
  pointer-events: none;
  user-select: none;

  animation: walk-cycle-ajpnd 20s steps(1) infinite;

  .animated-figure-frame {
    width: 100%;
    height: 100%;
    animation: flipCycle-first 20s ease-in-out forwards, flipCycle 20s 20s ease-in-out forwards infinite;
  }
  .animated-figure-content {
    width: 100%;
    height: 100%;
    animation: shake 10s infinite;
  }

  .animated-figure-body {
    width: 100%;
    height: auto;
    aspect-ratio: 60 / 100;
    background: center center no-repeat;
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
    background-size: contain;
    animation: stepCycle-ajpnd 20s steps(1) infinite;

  }
}
@keyframes flipCycle-first {
  0% {
    transform: rotateY(0deg);
  }
  2% {
    transform: rotateY(0deg);
  }
  52% {
    transform: rotateY(0deg);
  }
  54% {
    transform: rotateY(180deg);
  }
  99% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

@keyframes flipCycle {
  0% {
    transform: rotateY(180deg);
  }
  2% {
    transform: rotateY(0deg);
  }
  52% {
    transform: rotateY(0deg);
  }
  54% {
    transform: rotateY(180deg);
  }
  99% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180eg);
  }
}

@keyframes shake {
  42% {
    transform: rotate(0deg);
  }
  43% {
    transform: rotate(-6deg);
  }
  44% {
    transform: rotate(6deg);
  }

  45% {
    transform: rotate(-6deg);
  }
  46% {
    transform: rotate(6deg);
  }
  47% {
    transform: rotate(-6deg);
  }
  48% {
    transform: rotate(0deg);
  }
}

@keyframes stepCycle-ajpnd {
  /* 往路 */
  0% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
  }
  4% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-01.svg);
  }
  8% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
  }
  12% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-01.svg);
  }
  16% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
  }

  /* 25%付近で1アクション挿入するため時間マージン確保 */

  28% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-01.svg);
  }
  32% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
  }
  36% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-01.svg);
  }
  40% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
  }
  44% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-01.svg);
  }
  48% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
  }


  /* 復路 */
  56% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-01.svg);
  }
  60% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
  }
  64% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-01.svg);
  }
  68% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
  }

  /* 75%付近で1アクション挿入するため時間マージン確保 */

  76% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-01.svg);
  }
  80% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
  }
  84% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-01.svg);
  }
  88% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
  }
  92% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-01.svg);
  }
  96% {
    background-image: url(/company/jp/shareholder/assets/img/ajpnd-walk-frame-00.svg);
  }
}


@keyframes walk-cycle-ajpnd {
  /* 往路 */
  0% {
    left: 0cqw;
  }
  4% {
    left: 10cqw;
  }
  8% {
    left: 20cqw;
  }
  12% {
    left: 30cqw;
  }
  16% {
    left: 40cqw;
  }
  28% {
    left: 50cqw;
  }
  32% {
    left: 60cqw;
  }
  36% {
    left: 70cqw;
  }
  40% {
    left: 80cqw;
  }
  44% {
    left: 90cqw;
  }
  48% {
    left: 100cqw;
  }

  /* 復路 */
  56% {
    left: 90cqw;
  }
  60% {
    left: 80cqw;
  }
  64% {
    left: 70cqw;
  }
  68% {
    left: 60cqw;
  }

  76% {
    left: 50cqw;
  }
  80% {
    left: 40cqw;
  }
  84% {
    left: 30cqw;
  }
  88% {
    left: 20cqw;
  }
  92% {
    left: 10cqw;
  }
  96% {
    left: 0cqw;
  }
}

@keyframes stepCycle-ajpna {
  /* 往路 */
  0% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-00.svg);
  }
  4% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-01.svg);
  }
  8% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-00.svg);
  }
  12% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-01.svg);
  }
  16% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-00.svg);
  }

  /* 25%付近で1アクション挿入するため時間マージン確保 */

  28% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-01.svg);
  }
  32% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-00.svg);
  }
  36% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-01.svg);
  }
  40% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-00.svg);
  }
  44% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-01.svg);
  }
  48% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-00.svg);
  }


  /* 復路 */
  56% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-01.svg);
  }
  60% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-00.svg);
  }
  64% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-01.svg);
  }
  68% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-00.svg);
  }

  /* 25%付近で1アクション挿入するため時間マージン確保 */

  76% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-01.svg);
  }
  80% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-00.svg);
  }
  84% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-01.svg);
  }
  88% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-00.svg);
  }
  92% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-01.svg);
  }
  96% {
    background-image: url(/company/jp/shareholder/assets/img/ajpna-walk-frame-00.svg);
  }
}

@keyframes walk-cycle-ajpna {
  /* 往路 */
  0% {
    right: 0cqw;
  }
  4% {
    right: 10cqw;
  }
  8% {
    right: 20cqw;
  }
  12% {
    right: 30cqw;
  }
  16% {
    right: 40cqw;
  }
  28% {
    right: 50cqw;
  }
  32% {
    right: 60cqw;
  }
  36% {
    right: 70cqw;
  }
  40% {
    right: 80cqw;
  }
  44% {
    right: 90cqw;
  }
  48% {
    right: 100cqw;
  }

  /* 復路 */
  56% {
    right: 90cqw;
  }
  60% {
    right: 80cqw;
  }
  64% {
    right: 70cqw;
  }
  68% {
    right: 60cqw;
  }

  76% {
    right: 50cqw;
  }
  80% {
    right: 40cqw;
  }
  84% {
    right: 30cqw;
  }
  88% {
    right: 20cqw;
  }
  92% {
    right: 10cqw;
  }
  96% {
    right: 0cqw;
  }
}

/* ---------------------------------------- 成長戦略を知る */
.sectionBoard#section-ourstrategy {

  .sectionBoard-frame {
    padding-bottom: 96px;

    @media (max-width: 767px) {
      padding-top: 104px;
    }
  }

  .sectionBoard-heading-body {
    @media (max-width: 441px) {
      gap: 10px;
    }
  }

  .sectionBoard-body {
    display: flex;
    align-items: center;
    gap: 40px;
    border-radius: 8px;
    background: #F0F0F0;
    padding: 32px 82px;

    @media (max-width: 767px) {
      flex-direction: column;
      padding: 32px 16px;
      gap: 10px;
      border-radius: 24px;
    }

    > * {
      width: 50%;

      @media (max-width: 767px) {
        width: 100%;
      }
    }

    .figure-ourstrategy {
      height: auto;
    }

    .bracket--strategyDescription {
      row-gap: 55px;

      @media screen {
        row-gap: 24px;
      }
    }
    .bracket--strategyDescription p {
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      color: #000;

      @media (max-width: 767px) {
        font-size: 16px;
      }
    }
  }
}

/* ---------------------------------------- 株主や投資をご検討の皆様へ */
.sectionBoard#section-guidance {
  background-color: #F0F0F0;

  .sectionBoard-frame {
    container-type: inline-size;
    padding-bottom: 136px;

    @media (max-width: 767px) {
      padding-bottom: 96px;
    }
  }

  .sectionBoard-heading-body {
    @media (max-width: 441px) {
      gap: 10px;
    }
  }

  .sectionBoard-heading-body img.desktopOnly {
    width: auto;
    height: 48px;
  }
  .sectionBoard-heading-body img.mobileOnly {
    width: auto;
    height: 88px;;
  }

  .button-routeGuide {
    height: 4.45em;
  }

  .animated-figure-runway {
    left: auto;
    right: 0;
  }
  .animated-figure {
    left: auto;
    animation: walk-cycle-ajpna 20s steps(1) infinite;

    .animated-figure-frame {
      animation: flipCycle-first 20s ease-in-out forwards, flipCycle 20s 20s ease-in-out forwards infinite;
    }
    .animated-figure-body {
      animation: stepCycle-ajpna 20s steps(1) infinite;
    }
  }
}

/* ---------------------------------------- もっと知りたい方へ */
.sectionBoard#section-more-info {
  .sectionBoard-frame.Main--shareholder-frame {
    padding-top: 104px;

    padding-bottom: 152px;
    @media (max-width: 767px) {
      margin-top: 0;
    }
  }
  .sectionBoard-heading-body img.desktopOnly {
    width: auto;
    height: 48px;
  }
  .sectionBoard-heading-body img.mobileOnly {
    width: auto;
    height: 88px;;
  }
  .sectionBoard-heading-body {
    @media (max-width: 441px) {
      gap: 10px;
    }
  }

  .componentRow--centered {
    margin-top: 16px;
  }
  .componentRow + .section-leadtext {
    margin-top: 64px;

    @media (max-width: 767px) {
      margin-top: 40px;
    }
  }
}

/* ---------------------------------------- 関連リンク */
.sectionBoard#section-related {
  .sectionBoard-frame--fullWidth:first-of-type {
    padding: 0;
  }
  .sectionBoard-frame:last-of-type {
    padding-bottom: 50px;
  }

  .sectionBoard-heading {
    background-color:#FBE2E3;
    padding: 45px;

    @media (max-width: 767px) {
      padding: 40px 8px;
    }

    .additional-symbol {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 122px;
      height: auto;

      @media (max-width: 767px) {
        width: 108px;
      }
    }
  }
  .sectionBoard-heading-body img.desktopOnly {
    width: auto;
    height: 48px;
  }
  .sectionBoard-heading-body img.mobileOnly {
    width: auto;
    height: 26px;
  }

  .fullWidthBg.bg-polkaDotsAjpnd {
      background: url(/company/jp/shareholder/assets/img/bg-deco-section.png);
    background-size: 360px auto;
  }

  .componentRow--spaceAround {
    background-color: #fff;

    @media screen and (max-width: 767px) {
      padding: 0;
      gap: 0;
    }

    li { /* 高さ揃え */
      flex: 1;
      display: flex;

      a {
        flex: 1;

        @media screen and (max-width: 767px) {
          padding-left: 24px;
        }
      }
    }
  }

  .fullWidthBg + .sectionBoard-frame {
    padding-top: 40px;

    @media (max-width: 767px) {
      padding-top: 48px;
    }

    .componentRow {
      margin: auto;
      max-width: 960px;
      column-gap: 64px;

      @media screen and (max-width: 767px) {
        gap: 0;

        a {
          flex: 1;

          @media screen and (max-width: 767px) {
            padding-left: 24px;
            border-bottom: 1px solid #D5D5D5;
          }
        }
      }
    }
  }
}