@charset "UTF-8";

/* =========================================================
  ir トップ
========================================================= */
.ir-top-content {
  .img-link.img-link-type-banner.textoverray {
    width: 100%;
    height: 100%;

    > span {
      width: 100%;
      height: 100%;
    }
    img {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -10;
    }
  }
}
@media screen and (max-width: 767px) {
  .ir-top-content {
    .img-link.img-link-type-banner.textoverray {
      height: auto;
      img {
        position: relative;
      }
    }
    .img-link.img-link-type-banner.textoverray > span {
      aspect-ratio: 343 / 252;
      box-shadow: inset 0px -58px 50px -42px rgba(0, 0, 0, 0.2)
    }
  }
}

/* 株価情報
--------------------------------------------------------- */
.ir-real-time {
  padding: clamp(10px, 1vw, 20px) clamp(16px, 1.6vw, 32px);
  text-align: center;

  h3 {
    font-weight: 700;
    font-size: clamp(1.6rem, 1.6vw, 2.4rem);
    
    span {
      font-size: clamp(0.9rem, 1.2vw, 1.6rem);
    }
  }
  /* 「チャートを見る」リンク */
  .text-link.text-normal {
    display: flex;
    align-items: center;
    margin: 0 auto;
    font-size: clamp(1.2rem, 1.2vw, 1.6rem);
    .icon {
      transform: translateY(0);
      svg {
        width: clamp(12px, 1.6vw, 24px);
        height: clamp(12px, 1.6vw, 24px);
      }
    }
  }
}
.heading-box {
  display: flex;
  justify-content: center;
  gap: 3%;

  span {
    line-height: 1.8;
    font-size: clamp(0.8rem, 1.2vw, 1.6rem);
  }
}
.detail-box-1,
.detail-box-2 {
  dt {
    text-align: left;
    font-size: clamp(1.2rem, 1.2vw, 1.6rem);
    font-weight: 700;
  }
  dd {
    text-align: right;
    font-size: clamp(1.2rem, 1.2vw, 1.6rem);
    font-weight: 700;
  }
}
.detail-box-1 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: clamp(16px, 1.6vw, 32px);
  margin-top: clamp(4px, 0.5vw, 8px);
  padding: clamp(8px, 0.8vw, 16px) clamp(16px, 1.6vw, 24px);
  border-radius: 8px;
  background: #fff;
  &::after {
    content: '';
    position: absolute;
    top: 53%;
    left: 50%;
    width: calc(100% - clamp(32px, 3.2vw, 48px));
    height: 1px;
    transform: translate(-50%, 0);
    background: var(--gray_03);
  }

  dt {
    width: 100%;
    max-width: 48px;
    min-width: 48px;
    line-height: 1.4;
  }
  dd {
    width: 100%;
    max-width: calc(100% - 48px);
    line-height: 1;
  }
}
/* 現在値 */
.present-value span {
  margin-right: 8px;
  font-size: clamp(1.6rem, 2vw, 3.2rem);
  font-weight: 500!important;
}
/* 前日比 */
.day-before span {
  margin-right: 8px;
  font-size: clamp(1.2rem, 1.8vw, 2.4rem);
  font-weight: 500!important;
}
.day-before span.plus {
  color: var(--blue);
}

.detail-box-2-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(4px, 0.6vw, 8px);
  margin: clamp(8px, 1vw, 12px) 0;
}
.detail-box-2 {
  padding: clamp(8px, 0.8vw, 16px);
  border-radius: 8px;
  background: #fff;

  dt {
    line-height: 1;
    margin-bottom: clamp(8px, 0.8vw, 12px);
  }
  dd {
    line-height: 1;
  }
}
/* PBR */
.pbr span {
  margin-right: 2px;
  font-size: clamp(1.2rem, 1.4vw, 2.4rem);
}
/* 時価総額 */
.market-capitalization span {
  margin-right: 2px;
  font-size: clamp(1.2rem, 1.4vw, 2.4rem);
}


@media screen and (max-width: 767px) {
  .ir-real-time {
    padding: 20px 24px;

    h3 {
      font-size: 2.4rem;
      
      span {
        font-size: 1.6rem;
      }
    }
    .text-link.text-normal {
      font-size: 1.6rem;
      .icon {
        svg {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .heading-box {
    gap: 3%;

    span {
      font-size: 1.6rem;
    }
  }
  .detail-box-1,
  .detail-box-2 {
    padding: 16px;
    dt,
    dd {
      font-size: 1.6rem;
    }
  }
  .detail-box-1 {
    row-gap: 32px;
    margin-top: 8px;
  }
  /* 現在値 */
  .present-value span {
    font-size: 3.2rem;
  }
  /* 前日比 */
  .day-before span {
    font-size: 2.4rem;
  }

  .detail-box-2-wrap {
    gap: 8px;
    margin: 12px 0;
  }
  .detail-box-2 {
    dt {
      margin-bottom: 12px;
    }
  }
  /* PBR */
  .pbr span {
    font-size: 2.4rem;
  }
  /* 時価総額 */
  .market-capitalization span {
    font-size: 2.4rem;
  }
}


/* おすすめランキング
--------------------------------------------------------- */
.recommend-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 56px;
  padding: 30px 40px;
  /* min-height: 454px; */
  h3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    &::before {
      content: '';
      width: 40px;
      height: 32px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='33' viewBox='0 0 40 33' fill='none'%3E%3Cg clip-path='url(%23clip0_491_15677)'%3E%3Cpath d='M6.98047 31.7008C6.98047 32.1396 7.33 32.4991 7.77584 32.4991H32.2344C32.6715 32.4991 33.0297 32.1396 33.0297 31.7008V28.7793H6.98047V31.7008Z' fill='%23767676'/%3E%3Cpath d='M39.554 6.10793C39.2596 5.9081 38.8776 5.92439 38.5995 6.13943L28.0811 14.5326L20.6966 0.886105C20.4261 0.366963 19.5831 0.375652 19.3039 0.886105L11.9205 14.5326L1.40315 6.14052C1.12504 5.91679 0.743047 5.90918 0.45628 6.10902C0.161939 6.30886 0.0429032 6.67595 0.145706 7.01155L6.68075 27.1831H33.3295L39.857 7.01155C39.9609 6.67595 39.8407 6.30886 39.5551 6.10902L39.554 6.10793Z' fill='%23767676'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_491_15677'%3E%3Crect width='39.7838' height='32' fill='white' transform='translate(0.107422 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
  ol {
    width: 100%;
    padding-left: 2rem;
    li {
      position: relative;
      padding: 16px 0;
      &:first-child {
        padding-top: 0;
      }
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      &::marker {
        color: var(--primary);
        font-weight: 700;
        font-size: 2rem;
      }
      &:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: -22px;
        width: calc(100% + 22px);
        height: 1px;
        background: var(--gray_03);
      }
    }
  }
}
@media screen and (max-width: 950px) {
  .recommend-box {
    flex-direction: row;
    min-height: auto;
  } 
}

@media screen and (max-width: 767px) {
  .recommend-box {
    flex-direction: column;
    gap: 20px;
    padding: 24px;

    h3 {
      flex-direction: row;
      gap: 8px;
      font-size: 1.7rem;

      &::before {
        width: 21px;
        height: 18px;
      }
    }
  }
}

.img-link-type-banner.textoverray .text-box {
  bottom: 5%;
}

@media screen and (max-width: 1024px) {
  .ir-top-content .text-box {
    font-size: 1.6rem !important;
    left: 15px !important;
  }
}