@layer component {

  /* .p-chronology */
  .p-chronology {
    --mc-navigation2--offset--for-top: 80px;
  }

  @media screen and (max-width: 767px) {
    .p-chronology {
      padding-top: calc(30 * var(--mc--quantity--of-design--horizontal));
      margin-left: calc(var(--mc-layout--offset--of-outer-left));
      margin-right: calc(var(--mc-layout--offset--of-outer-right));
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology {
      padding-top: 80px;
      margin-left: calc(var(--mc-layout--offset--of-outer-left) + var(--mc-layout--offset--of-inner-left));
      margin-right: calc(var(--mc-layout--offset--of-outer-right) + var(--mc-layout--offset--of-inner-right));
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology {
      padding-top: 80px;
      margin-left: calc(var(--mc-layout--offset--of-outer-left) + var(--mc-layout--offset--of-inner-left));
      margin-right: calc(var(--mc-layout--offset--of-outer-right) + var(--mc-layout--offset--of-inner-right));
    }
  }

  @media print {
    .p-chronology {
      padding-top: 80px;
      margin-left: calc(var(--mc-layout--offset--of-outer-left) + var(--mc-layout--offset--of-inner-left));
      margin-right: calc(var(--mc-layout--offset--of-outer-right) + var(--mc-layout--offset--of-inner-right));
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology {
      padding-top: 80px;
      margin-left: calc(var(--mc-layout--offset--of-outer-left) + var(--mc-layout--offset--of-inner-left));
      margin-right: calc(var(--mc-layout--offset--of-outer-right) + var(--mc-layout--offset--of-inner-right));
    }
  }

  .p-chronology__nav1 :where(menu > li):not(:last-child) {
    margin-bottom: 20px;
  }

  .p-chronology__nav1 :where(menu > li) :where(li:first-child a) {
    border-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #000 50%, #000 100%) 1;
  }

  .p-chronology__nav1 :where(menu > li) :where(li:first-child a)::before {
    background-size: 1px 50%;
    background-position: center bottom;
  }

  .p-chronology__nav1 :where(menu > li) :where(li a) {
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
    border-left: 1px solid #000;
    min-height: 53px;
    padding-left: 15px;
    box-sizing: border-box;
  }

  .p-chronology__nav1 :where(menu > li) :where(li a)::before {
    content: "";
    display: block;
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #333;
  }

  .p-chronology__nav1 :where(menu > li) :where(span) {
    display: block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.8;
    text-align: left;
    color: #333;
  }

  .p-chronology__hit1:hover::before,
  .p-chronology__hit1--active::before {
    left: -6px;
    width: 11px;
    height: 11px;
    background: #a22041;
  }

  .p-chronology__hit1:hover>span,
  .p-chronology__hit1--active>span {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.575;
    color: #a22041;
  }

  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__bdy1 {
      display: grid;
      grid-template-columns: 1fr calc(var(--mc-layout--width-column) * 3 + var(--mc-layout--gap) * 2);
      grid-auto-rows: auto;
      gap: 80px 0;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__bdy1 {
      display: grid;
      grid-template-columns: 1fr calc(var(--mc-layout--width-column) * 3 + var(--mc-layout--gap) * 2);
      grid-auto-rows: auto;
      gap: 80px 0;
    }
  }

  @media print {
    .p-chronology__bdy1 {
      display: grid;
      grid-template-columns: 1fr calc(var(--mc-layout--width-column) * 3 + var(--mc-layout--gap) * 2);
      grid-auto-rows: auto;
      gap: 80px 0;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__bdy1 {
      display: grid;
      grid-template-columns: 1fr calc(var(--mc-layout--width-column) * 3 + var(--mc-layout--gap) * 2);
      grid-auto-rows: auto;
      gap: 80px 0;
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__sct1 {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: repeat(2, auto);
      grid-auto-flow: column;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__sct1 {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: repeat(2, auto);
      grid-auto-flow: column;
    }
  }

  @media print {
    .p-chronology__sct1 {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: repeat(2, auto);
      grid-auto-flow: column;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__sct1 {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: repeat(2, auto);
      grid-auto-flow: column;
    }
  }


  @media screen and (max-width: 767px) {
    .p-chronology__sct1:not(:last-child) {
      margin-bottom: calc(50 * var(--mc--quantity--of-design--horizontal));
    }
  }

  .p-chronology__hd1 {
    border-bottom: 1px solid #d5d5d5;
    position: relative;
    font-weight: normal;
    color: #333;
  }

  @media screen and (max-width: 767px) {
    .p-chronology__hd1 {
      padding: 0 0 calc(7 * var(--mc--quantity--of-design--horizontal));
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__hd1 {
      padding: 17px 0 18px;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__hd1 {
      padding: 17px 0 18px;
    }
  }

  @media print {
    .p-chronology__hd1 {
      padding: 17px 0 18px;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__hd1 {
      padding: 17px 0 18px;
    }
  }

  .p-chronology__hd1::after {
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    background-color: #bf0c0c;
  }

  @media screen and (max-width: 767px) {
    .p-chronology__hd1::after {
      width: calc(9 * var(--mc--quantity--of-design--horizontal));
      height: calc(9 * var(--mc--quantity--of-design--horizontal));
      bottom: -1.0666666667vw;
      right: 0;
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__hd1::after {
      width: 9px;
      height: 9px;
      bottom: -4px;
      right: -4px;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__hd1::after {
      width: 9px;
      height: 9px;
      bottom: -4px;
      right: -4px;
    }
  }

  @media print {
    .p-chronology__hd1::after {
      width: 9px;
      height: 9px;
      bottom: -4px;
      right: -4px;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__hd1::after {
      width: 9px;
      height: 9px;
      bottom: -4px;
      right: -4px;
    }
  }

  .p-chronology__hd1>span {
    font-size: 28px;
    letter-spacing: 0.1em;
    line-height: 1.5;
  }

  @media screen and (max-width: 767px) {
    .p-chronology__hd1>span {
      font-size: calc(24 * var(--mc--quantity--of-design--horizontal));
    }
  }


  @media screen and (max-width: 767px) {
    .p-chronology__hd1>span+span {
      font-size: calc(15 * var(--mc--quantity--of-design--horizontal));
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__hd1>span+span {
      font-size: 22px;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__hd1>span+span {
      font-size: 22px;
    }
  }

  @media print {
    .p-chronology__hd1>span+span {
      font-size: 22px;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__hd1>span+span {
      font-size: 22px;
    }
  }


  @media screen and (max-width: 767px) {
    .p-chronology__list1 {
      margin-top: calc(25 * var(--mc--quantity--of-design--horizontal));
      margin-bottom: 0;
      margin-left: calc(var(--mc-layout--offset--of-inner-left));
      margin-right: calc(var(--mc-layout--offset--of-inner-right));
      padding: 0;
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__list1 {
      margin-top: 36px;
      padding-right: 20px;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__list1 {
      margin-top: 36px;
      padding-right: 20px;
    }
  }

  @media print {
    .p-chronology__list1 {
      margin-top: 36px;
      padding-right: 20px;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__list1 {
      margin-top: 36px;
      padding-right: 20px;
    }
  }

  .p-chronology__list1 :where(li) {
    width: 100%;
    padding-bottom: 20px;
  }

  @media screen and (max-width: 767px) {
    .p-chronology__list1 :where(li) {
      display: block;
      background-image: linear-gradient(0deg, #d5d5d5 0%, #d5d5d5 100%) no-repeat 25px top/1px 100%;
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__list1 :where(li) {
      display: flex;
      align-items: flex-start;
      background-image: linear-gradient(0deg, #d5d5d5 0%, #d5d5d5 100%) no-repeat 30px top/1px 100%;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__list1 :where(li) {
      display: flex;
      align-items: flex-start;
      background-image: linear-gradient(0deg, #d5d5d5 0%, #d5d5d5 100%) no-repeat 30px top/1px 100%;
    }
  }

  @media print {
    .p-chronology__list1 :where(li) {
      display: flex;
      align-items: flex-start;
      background-image: linear-gradient(0deg, #d5d5d5 0%, #d5d5d5 100%) no-repeat 30px top/1px 100%;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__list1 :where(li) {
      display: flex;
      align-items: flex-start;
      background-image: linear-gradient(0deg, #d5d5d5 0%, #d5d5d5 100%) no-repeat 30px top/1px 100%;
    }
  }

  .p-chronology__list1 :where(li):last-child {
    background: #fff;
    padding-bottom: 0;
  }

  .p-chronology__list1 :where(li)+li {
    margin-top: 14px;
  }

  @media screen and (max-width: 767px) {
    .p-chronology__list1 :where(li)+li {
      margin-top: calc(10 * var(--mc--quantity--of-design--horizontal));
    }
  }

  .p-chronology__list1 :where(time) {
    background: #fff;
    white-space: nowrap;
    display: block;
  }

  @media screen and (max-width: 767px) {
    .p-chronology__list1 :where(time) {
      margin: 0;
      padding-bottom: calc(5 * var(--mc--quantity--of-design--horizontal));
      width: 100%;
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__list1 :where(time) {
      margin-right: 15px;
      padding-bottom: 6px;
      width: 90px;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__list1 :where(time) {
      margin-right: 15px;
      padding-bottom: 6px;
      width: 90px;
    }
  }

  @media print {
    .p-chronology__list1 :where(time) {
      margin-right: 15px;
      padding-bottom: 6px;
      width: 90px;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__list1 :where(time) {
      margin-right: 15px;
      padding-bottom: 6px;
      width: 90px;
    }
  }

  .p-chronology__list1 :where(time)>span {
    letter-spacing: 0.1em;
    line-height: 1.454545;
    text-align: left;
    color: #333;
  }

  @media screen and (max-width: 767px) {
    .p-chronology__list1 :where(time)>span {
      font-size: calc(20 * var(--mc--quantity--of-design--horizontal));
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__list1 :where(time)>span {
      font-size: 22px;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__list1 :where(time)>span {
      font-size: 22px;
    }
  }

  @media print {
    .p-chronology__list1 :where(time)>span {
      font-size: 22px;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__list1 :where(time)>span {
      font-size: 22px;
    }
  }

  .p-chronology__list1 :where(time)>span+span {
    color: #666;
  }

  @media screen and (max-width: 767px) {
    .p-chronology__list1 :where(time)>span+span {
      font-size: calc(14 * var(--mc--quantity--of-design--horizontal));
      margin-left: calc(2 * var(--mc--quantity--of-design--horizontal));
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__list1 :where(time)>span+span {
      font-size: 16px;
      margin-left: 2px;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__list1 :where(time)>span+span {
      font-size: 16px;
      margin-left: 2px;
    }
  }

  @media print {
    .p-chronology__list1 :where(time)>span+span {
      font-size: 16px;
      margin-left: 2px;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__list1 :where(time)>span+span {
      font-size: 16px;
      margin-left: 2px;
    }
  }

  .p-chronology__txt1 {
    display: block;
    flex: 1;
    font-weight: normal;
    letter-spacing: 0.03em;
    line-height: 1.8;
    text-align: left;
    color: #333;
    background: #fff;
  }

  @media screen and (max-width: 767px) {
    .p-chronology__txt1 {
      font-size: calc(15 * var(--mc--quantity--of-design--horizontal));
      padding-bottom: calc(10 * var(--mc--quantity--of-design--horizontal));
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__txt1 {
      font-size: 16px;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__txt1 {
      font-size: 16px;
    }
  }

  @media print {
    .p-chronology__txt1 {
      font-size: 16px;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__txt1 {
      font-size: 16px;
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .p-chronology__img1 {
      grid-row: 1/-1;
      align-self: start;
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .p-chronology__img1 {
      grid-row: 1/-1;
      align-self: start;
    }
  }

  @media print {
    .p-chronology__img1 {
      grid-row: 1/-1;
      align-self: start;
    }
  }

  @media screen and (min-width: 1440px) {
    .p-chronology__img1 {
      grid-row: 1/-1;
      align-self: start;
    }
  }

  .p-chronology__img1 :where(div > picture > source),
  .p-chronology__img1 :where(div > picture > img) {
    width: 100%;
    height: auto;
  }

  /* .c-related */

  @media screen and (max-width: 767px) {
    .c-related {
      margin-top: calc(50 * var(--mc--quantity--of-design--horizontal));
      margin-bottom: calc(50 * var(--mc--quantity--of-design--horizontal));
      margin-left: calc(var(--mc-layout--offset--of-outer-left));
      margin-right: calc(var(--mc-layout--offset--of-outer-right));
    }
  }


  @media screen and (min-width: 768px) and (max-width: 1199px) {
    .c-related {
      margin-top: 100px;
      margin-bottom: 100px;
      margin-left: calc(var(--mc-layout--offset--of-outer-left) + var(--mc-layout--offset--of-inner-left));
      margin-right: calc(var(--mc-layout--offset--of-outer-right) + var(--mc-layout--offset--of-inner-right));
    }
  }


  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    .c-related {
      margin-top: 100px;
      margin-bottom: 100px;
      margin-left: calc(var(--mc-layout--offset--of-outer-left) + var(--mc-layout--offset--of-inner-left));
      margin-right: calc(var(--mc-layout--offset--of-outer-right) + var(--mc-layout--offset--of-inner-right));
    }
  }

  @media print {
    .c-related {
      margin-top: 100px;
      margin-bottom: 100px;
      margin-left: calc(var(--mc-layout--offset--of-outer-left) + var(--mc-layout--offset--of-inner-left));
      margin-right: calc(var(--mc-layout--offset--of-outer-right) + var(--mc-layout--offset--of-inner-right));
    }
  }

  @media screen and (min-width: 1440px) {
    .c-related {
      margin-top: 100px;
      margin-bottom: 100px;
      margin-left: calc(var(--mc-layout--offset--of-outer-left) + var(--mc-layout--offset--of-inner-left));
      margin-right: calc(var(--mc-layout--offset--of-outer-right) + var(--mc-layout--offset--of-inner-right));
    }
  }

  @media screen and (min-width: 768px) {
    .c-related__list1 .c-image1 img {
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }
    .c-related__list1 .c-image1::after, .c-related__list1 .c-image1::before {
        content: "";
        width: 32px;
        height: 32px;
        transition-duration: 0.2s;
        transition-timing-function: ease-in;
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    .c-related__list1 .c-image1::before {
        background-color: #666666;
        mask: url(https://www.mitsubishicorp.com/assets_r24/images/cmn-mark_arrow_4.svg) no-repeat center center / contain;
        z-index: 100;
    }
    .c-related__list1 .c-image1:is(picture) {
        display: block;
        width: 100%;
        height: 100%;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }
    .c-related__list1 .c-image1 {
        overflow: hidden;
        position: relative;
    }
    .c-related__list1 a:hover .c-image1::before {
        background-color: #fff;
        transition-duration: 0.2s;
        transition-timing-function: ease-in;
    }
    .c-related__list1 .c-image1::after {
        box-sizing: border-box;
        border-radius: 16px;
        border: solid 2px #D5D5D5;
        background-color: #fff;
    }
    .c-related__list1 a:hover .c-image1 img {
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
        scale: 1.1;
    }
    .c-related__list1 a:hover .c-image1::after {
        border-color: #fff;
        background-color: #A22041;
        transition-duration: 0.2s;
        transition-timing-function: ease-in;
    }
  }
  @media screen and (max-width: 767px) {
    .c-related__list1 .c-panel1__frame {
        border-bottom: var(--mc-panel--border--of-text, solid 1px #D5D5D5);
        background-color: var(--mc-panel--background-color--of-text--default, #FFF);
    }
    .c-panel1__text {
        padding-top: var(--mc-layout--offset--of-inner-left);
        padding-bottom: var(--mc-layout--offset--of-inner-left);
        padding-left: var(--mc-layout--offset--of-inner-left);
        padding-right: var(--mc-layout--offset--of-inner-right);
    }
    .c-related__list1 .c-panel1__title {
        display: block grid;
        grid-template-columns: auto 1fr;
        grid-auto-flow: column;
        grid-auto-columns: auto;
        align-items: center;
        justify-items: start;
        column-gap: 0.5em;
        box-sizing: border-box;
        line-height: 1.6;
    }
    .c-related__list1 .c-panel1__title::after {
        content: "";
        justify-self: end;
        aspect-ratio: 1;
        width: 1em;
        background-color: #000;
        mask: var(--mc-button-url-mark-after, url(https://www.mitsubishicorp.com/assets_r24/images/cmn-mark_arrow_1.svg)) no-repeat center / contain;
    }
}
}