@charset "UTF-8";
/*
	##### MFR #####
	business/css/business_pc.css
*/



.infomovies-page .sec {
  padding-top: calc(120 / 1400 * 100vw);
  padding-bottom: calc(70 / 1400 * 100vw);
}
.corner-ttl {
  font-size: calc(18 / 1400 * 100vw);
  margin-bottom: calc(30 / 1400 * 100vw);
  color: var(--color-3);

  &.en::before {
    font-size: 80%;
    margin-right: .5em;
    translate: 0 -.15em;
  }
}
.movie-ttl {
  display: flex;
  flex-direction: column-reverse;
}
.corner-sub-ttl {
  font-weight: 700;
  font-size: calc(30 / 1400 * 100vw);
  margin-bottom: calc(40 / 1400 * 100vw);
}
.movie-box {
  display: block;
  width: 100%;
  height: calc(550 / 1400 * 100vw);
  margin-bottom: calc(100 / 1400 * 100vw);
  border-radius: calc(20 / 1400 * 100vw);
  overflow: hidden;

  & a {
    display: block;
    width: 100%;
    height: 100%;
  }
}


@media (hover) {
  .movie-box a {
    opacity: 1;
    transition: opacity .3s ease;
  }
  .movie-box a:hover {
    opacity: .45;
  }
  
}

/* BUSINESS PAGE */
.business-page .fv-area .lead {
  margin-bottom: calc(60 / 1400 * 100vw);

  & p {
    font-feature-settings: "palt";
    font-weight: 700;
    font-size: calc(24 / 1400 * 100vw);
    line-height: 1.6666666666666667;
    margin-bottom: calc(35 / 1400 * 100vw);
  }
  & strong {
    font-weight: 700;
    font-size: calc(48 / 1400 * 100vw);
    line-height: 1.4583333333333333;
  }
}

.anchor-links {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(50 / 1400 * 100vw);

  & li {
    display: block;
    height: calc(60 / 1400 * 100vw);
    flex: 0 0 calc(322 / 1400 * 100vw);

    & a {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: space-between;
      padding: 0 calc(30 / 1400 * 100vw);
      font-weight: 700;
      font-size: calc(16 / 1400 * 100vw);
      color: #fff;
      text-decoration: none;
      background-color: var(--color-3);
      border-radius: 5px;

      &::after {
        content: '';
        display: block;
        width: calc(24 / 1400 * 100vw);
        height: calc(24 / 1400 * 100vw);
        background-image: url(../../assets/images/arrw-down.svg);
        background-repeat: no-repeat;
        background-position: center;
      }
    }
  }
}
@media (hover) {
  .anchor-links a {
    transition: background-color .3s ease;
  }
  .anchor-links a:hover {
    background-color: #016D96
  }
  .anchor-links a::after {
    background-size: 100%;
    transition: background-size .3s ease
  }
  .anchor-links a:hover::after {
    background-size: 25%
  }
}

.sec-ttl {
  font-feature-settings: "palt";
  font-weight: 700;
  font-size: calc(31 / 1400 * 100vw);
  margin-bottom: calc(60 / 1400 * 100vw);

  &.dark-side {
    display: flex;
    align-items: center;
    color: #fff;
    min-height: calc(90 / 1400 * 100vw);
    padding-left: calc(30 / 1400 * 100vw)
  }
}
.sub-sec-ttl {
  display: block;
  font-feature-settings: "palt";
  font-weight: 700;
  font-size: calc(30 / 1400 * 100vw);
  line-height: 1.6666666666666667;
  color: var(--color-3);
  padding-left: 1em;
  margin-bottom: calc(45 / 1400 * 100vw);
  position: relative;

  &::before {
    content: '';
    display: block;
    width: calc(4 / 1400 * 100vw);
    height: 85%;
    background-color: var(--color-3);
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
  }
}
.service-list {
  display: block;
  margin-top: calc(70 / 1400 * 100vw);
  margin-bottom: calc(-10 / 1400 * 100vw);
}
.service-col {
  padding-bottom: calc(50 / 1400 * 100vw);
  display: flex;
  justify-content: space-between;

  & .bnnrs-area {
    flex: 0 0 calc(370 / 1400 * 100vw);

    & .bnnr-btn {
      width: 100%;
      height: calc(74 / 1400 * 100vw);
      border-radius: 5px;
      border: 1px solid #d9d9d9;
      margin-top: calc(20 / 1400 * 100vw);
      position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: 700;
        font-size: calc(15 / 1400 * 100vw);
        color: var(--color-3);

        & .num {
          font-size: calc(25 / 1400 * 100vw);
          margin-left: .08em;
          margin-right: .025em;
        }
        & .note {
          font-weight: 400;
          font-size: calc(13 / 1400 * 100vw);
          color: #808080;
          margin-top: calc(6 / 1400 * 100vw);
        }
    }
  }
  & .des-area {
    font-feature-settings: "palt";
    flex: 0 0 calc(595 / 1400 * 100vw);

    & dt {
      font-weight: 700;
      font-size: calc(18 / 1400 * 100vw);
      line-height: 1.7777777777777777;
      color: var(--color-3);
      margin-bottom: calc(30 / 1400 * 100vw);
    }
    & dd {
      font-size: calc(13 / 1400 * 100vw);
      line-height: 2.3076923076923075;
    }
  }

  & + & {
    border-top: solid 1px #d9d9d9;
    padding-top: calc(50 / 1400 * 100vw);
  }
}
.more-details {
  margin-top: calc(20 / 1400 * 100vw);

  & a {
    font-feature-settings: "palt";
    font-weight: 500;
    font-size: calc(15 / 1400 * 100vw);
    color: var(--color-3);
    text-decoration: none;
  }
}
.sec .popup::after {
  content: '';
  display: inline-block;
  width: .8em;
  height: .8em;
  background: url(../../assets/images/ico-popup-2.svg) no-repeat center / contain;
  vertical-align: middle;
  margin-left: calc(8 / 1400 * 100vw);
  translate: 0 -.1em;
}
@media (hover) {
  .more-details a span {
    background-image: linear-gradient(var(--color-3), var(--color-3));
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 100% 100%;
    transition: background-size .3s cubic-bezier(0.23, 1, 0.320, 1)
  }
  .more-details a:hover span {
    background-size: 100% 1px;
    background-position: 0 100%;
  }
}

.repark-chart {
  width: 100%;
  padding: calc(70 / 1400 * 100vw) calc(53 / 1400 * 100vw);
  border-radius: 10px;
  margin: calc(55 / 1400 * 100vw) 0 0;
}
.chart-1 {
  margin-top: calc(40 / 1400 * 100vw);
  margin-bottom: calc(40 / 1400 * 100vw);
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 0;

  & .side-panel {
    flex: 0 0 calc(346 / 1400 * 100vw);
    background-color: #fff;
    border-radius: calc(9 / 1400 * 100vw);
    padding: calc(28 / 1400 * 100vw) calc(13 / 1400 * 100vw) calc(13 / 1400 * 100vw);

    & > dt {
      font-weight: 700;
      font-size: calc(18 / 1400 * 100vw);
      color: var(--color-3);
      display: flex;
      align-items: center;
      justify-content: center;

      &::before,
      &::after {
        content: '';
        display: inline-block;
        width: calc(13 / 1400 * 100vw);
        height: calc(2 / 1400 * 100vw);
        background-color: var(--color-3);
        margin: 0 .5em;
      }
    }
  }
  & .agent-list {
    flex: 0 0 calc(204 / 1400 * 100vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: calc(7 / 1400 * 100vw);
    background-color: #8099bc;
    border-radius: calc(9 / 1400 * 100vw);

    & li {
      display: block;
      width: calc(183 / 1400 * 100vw);
      height: calc(64 / 1400 * 100vw);
      border-radius: calc(5 / 1400 * 100vw);
      background-color: #fff;
      overflow: hidden;

      & img {
        object-fit: contain;
        object-position: center;
      }
    }
  }

  & .sub-panel-set {
    padding-top: calc(23 / 1400 * 100vw);
    display: flex;
    justify-content: space-between;

    & .sub-panel {
      flex: 0 0 calc(157 / 1400 * 100vw);
      padding: calc(20 / 1400 * 100vw) 0 calc(20 / 1400 * 100vw) calc(17 / 1400 * 100vw);
      border: solid 1px #8099bc;
      border-radius: calc(5 / 1400 * 100vw);

      & dt {
        font-weight: 700;
        font-size: calc(14 / 1400 * 100vw);
        color: var(--color-3);
        margin-bottom: calc(20 / 1400 * 100vw);

        &::before {
          display: inline-block;
          content: '●';
          font-size: 50%;
          translate: 0 -.3em;
          margin-right: 1em;
          color: var(--color-2)
        }
      }
      & dd {
        font-size: calc(11 / 1400 * 100vw);
        line-height: 1.7272727272727273;

        & li + li {
          margin-top: .5em;
        }
      }
    }
  }
}
:is(.side-panel, .agent-list)::before,
:is(.side-panel, .agent-list)::after {
  display: inline-flex;
  align-items: top;
  justify-content: center;
  width: calc(267 / 1400 * 100vw);
  height: calc(60 / 1400 * 100vw);
  font-weight: 700;
  font-size: calc(16 / 1400 * 100vw);
  color: var(--color-3);
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: +1;
}
.owner {
  position: relative;
  z-index: 0;

  &::before {
    content: '一時使用賃貸';
    background-image: url(../images/chart-arrw-1_pc.svg);
    background-position: left bottom;
    top: calc(-54 / 1400 * 100vw);
    left: calc(50% - calc(6 / 1400 * 100vw));
  }
  &::after {
    content: '賃料の支払い';
    background-image: url(../images/chart-arrw-2_pc.svg);
    background-position: left top;
    bottom: calc(-54 / 1400 * 100vw);
    left: calc(50% - calc(8 / 1400 * 100vw));
    align-items: end;
  }
}
.agent-list {
  position: relative;
  z-index: -1;
}
.customer {
  position: relative;
  z-index: 0;

  &::before {
    content: 'サービスの提供';
    background-image: url(../images/chart-arrw-1_pc.svg);
    background-position: left bottom;
    top: calc(-54 / 1400 * 100vw);
    right: calc(50% - calc(10 / 1400 * 100vw));
  }
  &::after {
    content: '利用料金の支払い';
    background-image: url(../images/chart-arrw-2_pc.svg);
    background-position: left top;
    bottom: calc(-54 / 1400 * 100vw);
    right: calc(50% - calc(6 / 1400 * 100vw));
    align-items: end;
  }
}
.other-services {
  margin: calc(70 / 1400 * 100vw) 0 calc(50 / 1400 * 100vw);

  .other-service-list {
    display: flex;
    justify-content: space-between;
    align-items: center;

    & li {
      display: block;
      flex: 0 0 calc(496 / 1400 * 100vw);
      height: calc(120 / 1400 * 100vw);

      & a {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        border: solid 1px;
        overflow: hidden;
        position: relative;

        &::after {
          content: '';
          display: block;
          width: calc(32 / 1400 * 100vw);
          height: calc(32 / 1400 * 100vw);
          border-radius: 50%;
          background: url(../../assets/images/ico-popup-3.svg) no-repeat center / contain;
          position: absolute;
          right: calc(20 / 1400 * 100vw);
          top: 50%;
          translate: 0 -50%;
        }

        &[href*="carshares"] {
          border-color: var(--color-3);

          &::after {
            background-color: #00337a;
          }
        }

        &:not([href*="carshares"]){
          border-color: #e5e5e5;

          &::after {
            background-color: #ccc
          }
        }
      }
    }
  }
}
@media (hover) {
  .other-service-list a {
    opacity: 1;
    transition: opacity .3s ease;
  }
  .other-service-list a:hover {
    opacity: .4;
  }
}

#solution {
  padding-bottom: calc(140 / 1400 * 100vw);
}
.chart-2 {
  font-feature-settings: "palt";
  padding: calc(30 / 1400 * 100vw);
  margin-top: calc(55 / 1400 * 100vw);
  border-radius: calc(10 / 1400 * 100vw);
  color: var(--color-3);

  .chart-cols {
    display: flex;
    justify-content: space-between;

    & li {
      display: block;
      flex: 0 0 calc(242 / 1400 * 100vw);

      &.partner,
      &.solution-goal {
        background-color: #fff;
        border-radius: 5px;
      }

      &.assets {
        flex: 0 0 calc(392 / 1400 * 100vw);
        position: relative;

        &::after {
          content: '';
          display: block;
          width: calc(45 / 1400 * 100vw);
          height: calc(29 / 1400 * 100vw);
          position: absolute;
          top: 50%;
          left: 100%;
          translate: 0 -50%;
          background: url(../images/arrw-right.svg) no-repeat center / auto 100%;
        }

        & dl {
          display: block;
          padding: calc(27 / 1400 * 100vw);
          background-color: #fff;
          border-radius: 5px;
        }

        & .col-ttl {
          padding-left: .75em;
          font-weight: 700;
          font-size: calc(18 / 1400 * 100vw);
          line-height: 1.4444444444444444;
          position: relative;

          &::before {
            content: '●';
            font-size: 50%;
            margin-right: 1em;
            color: var(--color-2);
            position: absolute;
            left: 0;
            top: .8em;
          }
        }
      }
    }
  }
  .asset-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    & li {
      flex: 1 1 33%;
      font-size: calc(13 / 1400 * 100vw);
      text-align: center;
      margin-top: calc(10 / 1400 * 100vw);
      padding-top: calc(55 / 1400 * 100vw);
      background-repeat: no-repeat;
      background-position: center top;
      background-size: calc(50 / 1400 * 100vw);
    }
    & li:nth-child(1) {
      background-image: url(../images/ico-01.svg);
    }
    & li:nth-child(2) {
      background-image: url(../images/ico-02.svg);
    }
    & li:nth-child(3) {
      background-image: url(../images/ico-03.svg);
    }
    & li:nth-child(4) {
      background-image: url(../images/ico-04.svg);
    }
    & li:nth-child(5) {
      background-image: url(../images/ico-05.svg);
    }
    & li:nth-child(6) {
      background-image: url(../images/ico-06.svg);
    }
  }

  & .multi {
    display: flex;
    align-items: center;
    height: calc(108 / 1400 * 100vw);
    border-radius: 5px;
    padding: calc(15 / 1400 * 100vw) calc(25 / 1400 * 100vw);
    margin-top: calc(12 / 1400 * 100vw);
    background: #fff url(../images/ico-07.svg) no-repeat right calc(63 / 1400 * 100vw) center / calc(146 / 1400 * 100vw) auto;
    position: relative;

    &::before {
      content: '';
      display: block;
      width: calc(24 / 1400 * 100vw);
      height: calc(24 / 1400 * 100vw);
      background: url(../images/sign-multiplication.svg) no-repeat center / contain;
      position: absolute;
      top: calc(-5 / 1400 * 100vw);
      left: 50%;
      translate: -50% -50%;
    }
  }
  & .partner {
    padding: calc(30 / 1400 * 100vw) 0;
    position: relative;

    &::after {
      content: '';
      display: block;
      width: calc(45 / 1400 * 100vw);
      height: calc(29 / 1400 * 100vw);
      position: absolute;
      top: 50%;
      left: 100%;
      translate: 0 -50%;
      background: url(../images/arrw-right.svg) no-repeat center / auto 100%;
    }

    & dt {
      display: block;
      width: calc(188 / 1400 * 100vw);
      margin: 0 auto;
    }
    & ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      column-gap: calc(7 / 1400 * 100vw);
      margin-top: calc(16 / 1400 * 100vw);

      & li {
        display: block;
        flex: 0 0 calc(88 / 1400 * 100vw);
        padding-top: calc(90 / 1400 * 100vw);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% auto;

        & .label {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: calc(33 / 1400 * 100vw);
          background-color: rgba(var(--rgb-3), .1);
          border-radius: 100px;
          text-align: center;
          font-weight: 500;
          font-size: calc(13 / 1400 * 100vw)
        }
      }
      & li:nth-child(1) {
        background-image: url(../images/ico-08.svg);
      }
      & li:nth-child(2) {
        background-image: url(../images/ico-09.svg);
      }
      & li:nth-child(3) {
        background-image: url(../images/ico-10.svg);
      }
    }
  }
  & .solution-goal {
    padding-top: calc(230 / 1400 * 100vw);
    text-align: center;
    font-weight: 700;
    font-size: calc(19 / 1400 * 100vw);
    line-height: 1.6842105263157894;
    background: url(../images/ico-11.svg) no-repeat center top calc(39 / 1400 * 100vw) / calc(150 / 1400 * 100vw) auto;
  }
}