@charset "UTF-8";

/*
	##### OGIS #####
	index/css/index_pc.css
*/

/* --------------------------------------------------
main visual
-------------------------------------------------- */

.main-image-area {
  display: block;
  width: calc(1298 / 1400 * 100vw);
  height: calc(618 / 1400 * 100vw);
  margin: 0 auto;
}
.slide-image {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  @media (hover: hover) {
    opacity: 1;
    transition: opacity .3s ease;

    &:hover {
      opacity: .75
    }
  }

  .img-box {
    display: block;
    width: 100%;
    height: 100%;
  }
  .p-num {
    display: inline-block;
    position: absolute;
    left: calc(30 / 1400 * 100vw);
    bottom: calc(10 / 1400 * 100vw);
    font-weight: 300;
    font-size: calc(90 / 1400 * 100vw);
    color: var(--color-6);

    &.white-pc {
      color: #fff;
    }
  }
  .txt-box {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: calc(90 / 1400 * 100vw) 1fr;
    width: 70.26194144838213%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    padding-left: 23.26656394453005%;
    background-color: var(--color-6);
    clip-path: polygon(100% 100%, 0 100%, 39.035087719% 0, 100% 0);
    z-index: 0;
  }
  .job-change-label {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    border-bottom: solid 1px rgba(255, 255, 255, .7);
    padding-right: calc(29 / 1400 * 100vw);
    padding-bottom: calc(19 / 1400 * 100vw);

    .job-change-list {
      display: flex;
      font-weight: 700;
      letter-spacing: .08em;

      .job-from {
        font-size: calc(24 / 1400 * 100vw);
        color: #fff;
        display: inline-flex;
        align-items: center;

        &::after {
          content: '';
          display: inline-block;
          width: calc(50 / 1400 * 100vw);
          height: calc(9 / 1400 * 100vw);
          background: url(../images/arrw-changing.svg) no-repeat center / contain;
          margin: 0 calc(14 / 1400 * 100vw);
          translate: 0 calc(-1 / 1400 * 100vw);
        }
      }
      .job-to {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding-inline: .5em;
        height: calc(26 / 1400 * 100vw);
        font-size: calc(16 / 1400 * 100vw);
        color: var(--color-6);
        background-color: #fff;
      }
    }
  }
  .ttl-box {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: calc(40 / 1400 * 100vw) 1fr;
    row-gap: calc(36 / 1400 * 100vw);
    padding: calc(65 / 1400 * 100vw) calc(15 / 1400 * 100vw) calc(34 / 1400 * 100vw);

    .label {
      display: inline-block;

      mark {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: calc(40 / 1400 * 100vw);
        padding: 0 1em;
        background-color: var(--color-4);
        border-radius: calc(5 / 1400 * 100vw);
        font-weight: 700;
        font-size: calc(18 / 1400 * 100vw);
        letter-spacing: .08em;
        color: #fff;
      }
    }
    .des {
      display: flex;
      flex-direction: column-reverse;
      justify-content: start;
      height: 100%;
      color: #fff;

      .catch {
        font-weight: 700;
        font-size: calc(40 / 1400 * 100vw);
        letter-spacing: .08em;
        line-height: 1.55;
        margin-bottom: calc(51 / 1400 * 100vw);

        &.three-line {
          margin-bottom: calc(46 / 1400 * 100vw);
        }
        p + p {
          margin-top: calc(12 / 1400 * 100vw);
        }
      }
      .name-and-ttl {
        display: inline-flex;
        align-items: last baseline;
        line-height: 1.75;

        .segment {
          font-weight: 500;
          font-size: calc(16 / 1400 * 100vw);
        }
        .name {
          font-weight: 700;
          font-size: calc(25 / 1400 * 100vw);
          letter-spacing: .08em;
          margin-left: calc(20 / 1400 * 100vw);

          .small {
            font-size: 60%;
          }
        }
      }
    }
  }
}

/* mv slick button */

.main-image-area .slick-arrow {
  all: unset;
  display: block;
	width: calc(59 / 1400 * 100vw);
	height: calc(59 / 1400 * 100vw);
  position: absolute;
	top: 50%;
	z-index: 98;
	background-repeat: no-repeat;
	background-size: 100%;
  transform: translate(0, -50%);
  color: transparent;
  cursor: pointer;

  @media (hover: hover) {
    opacity: 1;
    transition: opacity .3s ease;

    &:hover {
      opacity: .5;
    }
  }

  &.slick-next {
    right: calc(-20 / 1400 * 100vw);
    background-image: url(../../assets/images/btn-next.svg)
  }
  &.slick-prev {
    left: calc(-20 / 1400 * 100vw);
    background-image: url(../../assets/images/btn-prev.svg)
  }
}


/* --------------------------------------------------
news area
-------------------------------------------------- */

.news-area {
  display: block;
  width: 100%;
  max-width: 1298px;
  padding-top: 48px;
  margin: 0 auto;

  @media (width > 1400px) {
    max-width: calc(1298 / 1400 * 100vw);
    padding-top: calc(48 / 1400 * 100vw);
  }

  .news-box {
    display: flex;
    width: 100%;
    padding-bottom: 48px;
    border-bottom: solid 1px var(--color-5);

    @media (width < 1400px) {
      padding-bottom: calc(48 / 1400 * 100vw);
    }
  }

  .news-ttl {
    flex: 0 1 calc(160 / 1400 * 100vw);
    padding-right: 16px;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;

    @media (width > 1400px) {
      flex-basis: calc(160 / 1400 * 100vw);
      padding-right: calc(16 / 1400 * 100vw);
      font-size: calc(12 / 1400 * 100vw);
    }

    span {
      display: inline-block;
      padding-top: .15em;
      padding-right: 1em;
      border-right: solid 2px var(--color-3)
    }
  }

  .article-box {
    width: calc(814 / 1400 * 100vw);

    @media (1200px <= width < 1400px) {
      width: 814px;
    }
    @media (width < 1200px) {
      width: calc(814 / 1200 * 100vw);
    }
  }

  .article {
    display: flex;
    flex-wrap: nowrap;
    column-gap: 23px;

    @media (width > 1400px) {
      column-gap: calc(23 / 1400 * 100vw);
    }

    .date {
      font-size: 12px;
      color: var(--color-2);
      padding-left: 16px;
      line-height: 1.2;
      padding-top: .15em;

      @media (width > 1400px) {
        font-size: calc(12 / 1400 * 100vw);
        padding-left: calc(16 / 1400 * 100vw);
      }
    }
    .des {
      width: auto;
      max-width: calc(770 / 1400 * 100vw);
      font-size: 13px;
      line-height: 1.4;

      @media (width > 1400px) {
        padding-right: calc(70 / 1400 * 100vw);
        font-size: calc(13 / 1400 * 100vw);
      }
      @media (1200px <= width < 1400px) {
        max-width: 770px;
      }
      @media (width < 1200px) {
        max-width: calc(770 / 1200 * 100vw);
      }
    }
  }
}


/* news slick button */

.news-list .slick-arrow {
  position: absolute;
  display: block;
  width: 10px;
  height: 8px;
  outline: none;
  border: 0;
  color: transparent;
  background-color: transparent;
  top: 0;
  transform: translateY(50%);
  z-index: +1;
  cursor: pointer;

  @media (width > 1400px) {
    width: calc(10 / 1400 * 100vw);
    height: calc(8 / 1400 * 100vw);
  }

  &::after {
    content: '';
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &.slick-disabled {
    cursor: default;

    &::after {
      opacity: .2;
    }
  }
}

.news-list .slick-prev {
  left: calc(100% + 20px);

  @media (width > 1400px) {
    left: calc(100% + 1.4285714285714286vw);
  }

  &::after {
    background-image: url(../../assets/images/ico_lt_sign.svg);
  }
}

.news-list .slick-next {
  left: calc(100% + 52px);

  @media (width > 1400px) {
    left: calc(100% + 3.7142857142857144vw);
  }

  &::after {
    background-image: url(../../assets/images/ico_gt_sign.svg);
  }
}


/* --------------------------------------------------
introduction
-------------------------------------------------- */

.intro {
  display: flex;
  align-items: center;
  flex-direction: column-reverse;
  width: 100%;
  text-align: center;
  padding: 120px 0 160px;
  background-color: rgba(225, 227, 226, .3);
  position: relative;

  &::after {
    content: '';
    display: block;
    width: 1px;
    height: 90px;
    position: absolute;
    left: 50%;
    bottom: 0;
    background-color: var(--color-6);
    z-index: +1;
    animation: scrollbar 2.0s ease-in-out infinite;
  }
  .company-logo {
    display: block;
    width: 262px;
    height: auto;

    img {
      width: 100%;
      height: auto;
    }
  }
  .lead-area {
    font-weight: 700;
    font-size: 21px;
    letter-spacing: .08em;
    line-height: 2.2;
    color: var(--color-6);
  }
  .policy-box {
    display: block;
    width: 100%;
    max-width: 655px;
    margin: 45px auto 25px;
    padding: 45px 0 55px;
    background-color: var(--color-3);
    background-image: radial-gradient(closest-side, rgba(255, 255, 255, .1) 30%, transparent 0);
    background-size: 6px 6px;
    color: #fff;

    .ttl {
      font-weight: 600;
      font-size: 28px;
      letter-spacing: .08em;
      margin-bottom: 1em;
    }
    .des {
      font-weight: 600;
      font-size: 20px;
      line-height: 2.05;
    }
  }

  @media (width > 1400px) {
    padding: calc(120 / 1400 * 100vw) 0 calc(160 / 1400 * 100vw);

    &::after {
      height: calc(90 / 1400 * 100vw);
    }
    .company-logo {
      width: calc(262 / 1400 * 100vw);
    }
    .lead-area {
      font-size: calc(21 / 1400 * 100vw);
    }
    .policy-box {
      max-width: calc(655 / 1400 * 100vw);
      margin: calc(45 / 1400 * 100vw) auto calc(25 / 1400 * 100vw);
      padding: calc(45 / 1400 * 100vw) 0 calc(55 / 1400 * 100vw);
      background-size: calc(6 / 1400 * 100vw) calc(6 / 1400 * 100vw);
  
      .ttl {
        font-size: calc(28 / 1400 * 100vw);
      }
      .des {
        font-size: calc(20 / 1400 * 100vw);
      }
    }
  }
}


/* --------------------------------------------------
contents
-------------------------------------------------- */

.line {
  all: unset;
  display: block;
  height: 1px;
  width: 100%;
  max-width: 1298px;
  margin: 0 auto 96px;
  background-color: var(--color-5);

  @media (width > 1400px) {
    max-width: calc(1298 / 1400 * 100vw);
    margin-bottom: calc(96 / 1400 * 100vw);
  }
}

.sec .sec-ttl {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: 40px;

  .jp {
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
    padding-left: 20px;
    line-height: 1.5;
  }
  .en {
    font-weight: 300;
    font-size: 51.5px;
    line-height: .9;
    color: var(--color-6);

    &::before {
      content: '•';
      margin-right: .15em;
      vertical-align: middle;
      font-size: 1.3em;
      color: var(--color-4)
    }
  }

  @media (width > 1400px) {
    margin-bottom: calc(40 / 1400 * 100vw);

    .jp {
      font-size: calc(13 / 1400 * 100vw);
      padding-left: calc(20 / 1400 * 100vw);
    }
    .en {
      font-size: calc(51.5 / 1400 * 100vw);
    }
  }
}

.offsets {
  display: flex;
  column-gap: 58px;
  width: 100%;
  max-width: 1245px;

  &.about {
    margin-left: auto;
    padding-top: 130px;
    padding-bottom: 96px;

    .txt-col {
      padding-left: 10px;
    }
  }

  &.business {
    flex-direction: row-reverse;
    margin-right: auto;
    padding-bottom: 112px;

    .txt-col {
      padding-right: 10px;
    }
  }

  .txt-col {
    flex: 0 0 435px;
    padding-top: 65px;
  }

  @media (width > 1400px) {
    max-width: calc(1245 / 1400 * 100vw);

    &.about {
      padding-top: calc(130 / 1400 * 100vw);
      padding-bottom: calc(96 / 1400 * 100vw);
    }
    &.business {
      padding-bottom: calc(112 / 1400 * 100vw);
    }
    .txt-col {
      flex: 0 0 calc(435 / 1400 * 100vw);
      padding-top: calc(65 / 1400 * 100vw);
    }
  }

  &.benefit {
    max-width: 1090px;
    margin: 190px auto 120px;
    position: relative;

    &::before {
      content: '';
      display: block;
      width: 110px;
      height: 3px;
      background-color: var(--color-5);
      position: absolute;
      left: 0;
      top: 0;
    }

    @media (width > 1400px) {
      max-width: calc(1090 / 1400 * 100vw);
      margin-top: calc(190 / 1400 * 100vw);
      margin-bottom: calc(120 / 1400 * 100vw);

      &::before {
        width: calc(110 / 1400 * 100vw);
        height: calc(3 / 1400 * 100vw);
      }
    }
  }
}

.txt-col .txt {
  font-size: 15px;
  line-height: 1.8666666666666667;
  padding-left: 23px;
  margin-bottom: 40px;

  @media (width > 1400px) {
    font-size: calc(15 / 1400 * 100vw);
    padding-left: calc(23 / 1400 * 100vw);
    margin-bottom: calc(40 / 1400 * 100vw);
  }
}

.related-links {
  padding-left: 7px;

  li {
    display: block;
    width: 327px;
    height: 74px;

    & + & {
      margin-top: 18px;
    }

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      font-size: 16px;
      width: 100%;
      height: 100%;
      border-radius: 100px;
      border-style: solid;
      border-width: 1px;
      border-color: transparent;
      background-color: var(--color-3);
      position: relative;

      &::after {
        content: '';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        width: 16px;
        height: 10px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../../assets/images/arrw-r.svg);
      }

      @media (hover: hover) {
        transition: .3s ease;

        &:hover {
          color: var(--color-3);
          background-color: #fff;
          border-color: var(--color-3);

          &::after {
            background-image: url(../../assets/images/arrw-r-b.svg);
          }
        }
      }
    }
  }

  @media (width > 1400px) {
    padding-left: calc(7 / 1400 * 100vw);

    li {
      width: calc(327 / 1400 * 100vw);
      height: calc(74 / 1400 * 100vw);

      & + & {
        margin-top: calc(18 / 1400 * 100vw);
      }

      a {
        font-size: calc(16 / 1400 * 100vw);
        border-width: calc(1 / 1400 * 100vw);

        &::after {
          right: calc(20 / 1400 * 100vw);
          width: calc(16 / 1400 * 100vw);
          height: calc(10 / 1400 * 100vw);
        }
      }
    }
  }
}

/* Interview */

.interviews {
  display: block;
  width: 100%;
  padding: 110px 0 180px;
  background-size: calc(14 / 1400 * 100vw) calc(14 / 1400 * 100vw);
  background-image:
    linear-gradient(rgba(255, 255, 255, .5) calc(1 / 1400 * 100vw), transparent 0),
    linear-gradient(90deg, rgba(255, 255, 255, .5) calc(1 / 1400 * 100vw), transparent 0);
  background-color: rgba(225, 227, 226, .7);
  position: relative;

  .txt-col {
    display: block;
    position: absolute;
    width: 535px;
    left: calc(700 / 1400 * 100vw);
    bottom: calc(110 / 1400 * 100vw);
    z-index: +1;

    @media (width < 1100px) {
      width: calc(700 / 1400 * 100vw);
      padding-right: calc(20 / 1400 * 100vw);
    }
  }

  .related-links {
    padding-left: calc(7 / 1400 * 100vw);
  
    li {
      width: calc(327 / 1400 * 100vw);
      height: calc(74 / 1400 * 100vw);
  
      & + & {
        margin-top: calc(18 / 1400 * 100vw);
      }
  
      a {
        font-size: calc(16 / 1400 * 100vw);
        background-color: #fff;
        border-color: var(--color-3);
        color: var(--color-3);

        &::after {
          right: calc(20 / 1400 * 100vw);
          width: calc(16 / 1400 * 100vw);
          height: calc(10 / 1400 * 100vw);
          background-image: url(../../assets/images/arrw-r-b.svg);
        }

        @media (hover: hover) {
          &:hover {
            background-color: var(--color-3);
            border-color: #fff;
            color: #fff;
    
            &::after {
              background-image: url(../../assets/images/arrw-r.svg);
            }
          }
        }
      }
    }
  }

  @media (width > 1400px) {
    padding: calc(110 / 1400 * 100vw) 0 calc(180 / 1400 * 100vw);
  }
}


/* slide-show */

.p-card-area {
  width: 100%;
  height: calc(531 / 1400 * 100vw);
  overflow: hidden;

  .p-card-set {
    margin-left: calc(-140 / 1400 * 100vw);
    position: relative;
  }
  .slick-current {
    position: relative;
    pointer-events: none;
  
    a::after {
      background-color: rgba(96, 147, 194, .5);
      transition-delay: .3s;
    }
    & + .card-img + .card-img + .card-img + .card-img {
      pointer-events: none;
  
      & a::after {
        background-color: rgba(96, 147, 194, .5);
      }
    }
  }
  
  .slick-current + .slick-active {
    width: calc(476 / 1400 * 100vw);
    height: calc(531 / 1400 * 100vw);
    transition: width .3s linear .3s, height .3s linear .3s;
  
    .img-box::after {
      border-color: var(--color-4);
    }
  
    a dl.job-now {
      background-color: var(--color-4);
      border-color: var(--color-4);
    }
  }
}

.card-img {
  display: block;
  width: calc(280 / 1400 * 100vw);
  height: calc(315 / 1400 * 100vw);
  margin: 0 calc(8 / 1400 * 100vw);
  transition: width .3s linear .3s, height .3s linear .3s;
  position: relative;
  overflow: hidden;

  .img-box {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 0;
      border-bottom-color: var(--color-3);
      border-bottom-style: solid;
      border-bottom-width: 3px;
      position: absolute;
      bottom: 0;
      left: 0;
      transition: border-color .6s ease
    }

    @media (hover: hover) {
      .card-img & img {
        scale: 1;
        transition: scale .3s ease;
      }
      .card-img:hover & img {
        scale: 1.1;
      }
    }
  }

  a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;

    &::after {
      content: '';
      display: block;
      width: 100%;
      height: calc(100% + 3px);
      background-color: rgba(96, 147, 194, 0);
      transition: background-color .3s ease;
      position: absolute;
      top: 0;
      left: 0;
      z-index: +1;
    }

    @media (width > 1400px) {
      border-bottom-width: calc(3 / 1400 * 100vw);

      &::after {
        height: calc(100% + calc(3 / 1400 * 100vw));
      }
    }

    dl {
      display: inline-flex;
      align-items: center;
      height: calc(35 / 1400 * 100vw);
      border-style: solid;
      border-width: 2px;

      .condensed & {
        transform-origin: left top;
        transform: scaleX(.75);
        white-space: nowrap;
      }

      &.job-past {
        background-color: var(--color-2);
        border-color: var(--color-2);
      }
      &.job-now {
        background-color: var(--color-3);
        border-color: var(--color-3);
        transition: border-color .6s ease, background-color .6s ease;
      }

      dt {
        display: inline-flex;
        align-items: center;
        height: 100%;
        padding: 0 1.2em 0 .5em;
        background-color: #fff;
        font-size: calc(17 / 1400 * 100vw);
        color: var(--color-2);
        clip-path: polygon(100% 100%, 0 100%, 0 0, calc(100% - 15px) 0);
      }
      dd {
        display: inline-flex;
        align-items: center;
        height: 100%;
        padding: 0 .75em 0 .5em;
        font-size: calc(18 / 1400 * 100vw);
      }
    }
  }
}



.slide-arrow {
  display: block;
  position: absolute;
  width: calc(58 / 1400 * 100vw);
  height: calc(58 / 1400 * 100vw);
  top: calc(175 / 1400 * 100vw);
  z-index: 98;
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
  opacity: .7;

  @media (hover: hover) {
    transition: opacity .3s ease;

    &:hover {
      opacity: .3
    }
  }

  &.next-arrow {
    right: calc(30 / 1400 * 100vw);
    background-image: url(../../assets/images/btn-next.svg);

  }
  &.prev-arrow {
    left: calc(170 / 1400 * 100vw);
    background-image: url(../../assets/images/btn-prev.svg);
  }
}

/* Scroll Text */

.scroll-text-area {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: end;
  height: calc(201 / 1400 * 100vw);
  width: 100%;
  overflow: hidden;

  .scroll-text {
    display: inline-block;
    width: auto;
    font-size: calc(201 / 1400 * 100vw);
    font-weight: 700;
    line-height: .55;
    letter-spacing: .04em;
    color: #fff;
    white-space: nowrap;
  }
}



/* Numbers */

.sec.numbers {
  display: block;
  width: 100%;
  max-width: 1245px;
  margin-top: 180px;
  margin-left: auto;
  padding-top: 65px;
  position: relative;

  &::before {
    content: '';
    display: block;
    width: 110px;
    height: 3px;
    background-color: var(--color-5);
    position: absolute;
    left: 0;
    top: 0;
  }
  &::after {
    content: '';
    display: block;
    width: 155px;
    height: calc(100% - 80px);
    background-color: rgba(255, 255, 255, .8);
    backdrop-filter: blur(3px);
    position: absolute;
    right: 0;
    top: 0;
    z-index: +1;
  }

  .numbers-box {
    display: block;
    width: 100%;
    margin-top: 60px;
    padding-bottom: 80px;
    overflow: hidden;
    overflow-x: scroll;
    scrollbar-color: var(--color-4) #fff;
  }

  @media (width > 1400px) {
    max-width: calc(1245 / 1400 * 100vw);
    margin-top: calc(180 / 1400 * 100vw);
    padding-top: calc(65 / 1400 * 100vw);

    &::before {
      width: calc(110 / 1400 * 100vw);
      height: calc(3 / 1400 * 100vw);
    }

    &::after {
      width: calc(155 / 1400 * 100vw);
      height: calc(100% - calc(80 / 1400 * 100vw));
    }

    .numbers-box {
      margin-top: calc(60 / 1400 * 100vw);
      padding-bottom: calc(80 / 1400 * 100vw);
    }
  }
  .num-list {
    display: grid;
    grid-auto-flow: column;

    &::after {
      content: '';
      display: block;
      width: 155px;

      @media (width > 1400px) {
        width: calc(155 / 1400 * 100vw);
      }
    }

    li {
      padding: 0 37px;

      & + & {
        border-left: solid 1px var(--color-5);
      }

      dl {
        display: flex;
        flex-direction: column-reverse;

        dt {
          font-weight: 700;
          letter-spacing: .08em;
          white-space: nowrap;
          line-height: 1.3;
          vertical-align: baseline;

          .num-ttl {
            font-size: 22px;
  
            & + .note {
              font-size: 13px;
              margin-left: .5em;
            }
          }
        }
        dd {
          white-space: nowrap;
          color: var(--color-6);

          .num {
            font-weight: 600;
            font-size: 144px;
          }
          .unit {
            font-weight: 700;
            font-size: 38px;
            letter-spacing: .08em;
          }
        }
      }

      @media (width > 1400px) {
        padding: 0 calc(37 / 1400 * 100vw);

        dl dt {
          .num-ttl {
            font-size: calc(22 / 1400 * 100vw);

            & + .note {
              font-size: calc(13 / 1400 * 100vw);
            }
          }
        }
        dl dd {
          .num {
            font-size: calc(144 / 1400 * 100vw);
          }
          .unit {
            font-size: calc(38 / 1400 * 100vw);
          }
        }
      }
    }
  }
}