@charset "UTF-8";

/* =============================================================================

Announcement of Financial Results CSS

・決算公告ページ用CSS「.ir-×××」

上記はここに記述する

============================================================================= */

/* キービジュアル
----------------------------------------------------------------------------- */
.ir-desc {
  @media (width > 767px) {
    margin-bottom:7.2rem;
  }
  @media (width <= 767px) {
    margin-bottom:3.2rem;
  }
}


/* 決算公告
----------------------------------------------------------------------------- */
.ir-results {
  @media (width > 767px) {
    padding:10.0rem 15.0rem;
  }
  @media (width <= 767px) {
    padding-block:6.4rem;
  }

  .m-bg {
    background-color:var(--cc-white-C);
  }

  .l {
    display:grid;
    gap:1.0rem;
    line-height:1.6;

    @media (width <= 767px) {
      gap:.6rem;
    }
  }
  .l_i {

  }
  .l_i_l {
    display:grid;
    background-color:#fff;
    @media (width > 767px) {
      grid-template-columns:10.8rem 1fr auto;
      align-items: center;
      grid-template-areas:
        "date title icon"
      ;
      gap:3.0rem;
      height:7.0rem;
      padding-inline:3.0rem;
    }
    @media (width <= 767px) {
      grid-template-columns:1fr auto;
      grid-template-rows:auto 1fr;
      grid-template-areas:
        "date date"
        "title icon"
      ;
      row-gap:0;
      padding:1.6rem 2.0rem;
    }

    &::after {
      grid-area:icon;
      margin-block:auto;
    }
  }
  .l_i_l_date {
    grid-area:date;
    font-size:1.4rem;
    position:relative;
    @media (width > 767px) {
      &::after {
        content:"";
        margin-block:auto;
        background-color:currentColor;
        width:1px;
        height:2.0rem;
        position:absolute;
        inset-block:0;
        right:0;
      }
    }
    @media (width <= 767px) {
      font-size:1.1rem;
    }
  }
  .l_i_l_title {
    grid-area:title;
  }

}


/* SelectorName
----------------------------------------------------------------------------- */
.ir-SelectorName {
  @media (width > 767px) {
  }
  @media (width <= 767px) {
  }
}