.article-inner {
  width: 90%;
  margin: 100rem auto 0;
}

.article-head {
  position: relative;
  height: calc(100svh - 160rem);
  margin-left: 140rem;
}
.article-head img.main {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.article-head .logo {
  position: absolute;
  bottom: 0;
  width: 90%;
}

.article-info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10rem;
}
.article-info .box-info {
  width: 460rem;
  margin-right: 30rem;
}
.article-info p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 1.4;
  font-size: 26rem;
}
.article-info p span.left {
  width: auto;
}
.article-info p span.right {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.article-info p.place {
  margin-bottom: 10rem;
}

.box-movieIcon {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: block;
  width: 100rem;
  height: 50rem;
  background: url("../images/v2/btn-youtube-sp.svg") no-repeat center;
  background-size: contain;
}

.article-title {
  font-size: 52rem;
  margin-top: 30rem;
  line-height: 1.5;
}

.article-body {
  margin-top: 80rem;
  display: -ms-grid;
  display: grid;
  gap: 60rem;
}

a.btn-arrow-page {
  margin-top: 50rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

section.contact {
  margin-top: 160rem;
}

.portfolio-bottom-info {
  margin-top: 160rem;
}

/**********************************************************************

 * Media Query For PC

 ***********************************************************************/
@media print, screen and (min-width: 768px) {
  .article-inner {
    width: 90%;
    max-width: min(1258px, 66.21vw);
    margin: min(130px, 6.84vw) auto 0;
  }
  .article-head {
    margin-left: 0;
    height: 86vh;
  }
  .article-head img.main {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center bottom;
    object-position: center bottom;
  }
  .article-head .logo {
    width: min(464px, 24.42vw);
  }
  .article-info {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: min(10px, 0.53vw);
  }
  .article-info .box-info {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: auto;
    margin-right: min(50px, 2.63vw);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .article-info p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 1.4;
    font-size: min(29px, 1.53vw);
  }
  .article-info p span.left {
    width: auto;
  }
  .article-info p span.right {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .article-info p.place {
    width: 36%;
    margin-right: min(40px, 2.11vw);
    margin-bottom: min(10px, 0.53vw);
  }
  .article-info p.company {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  a.box-movieIcon {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    display: block;
    width: min(270px, 14.21vw);
    height: min(50px, 2.63vw);
    background: url("../images/v2/btn-youtube-pc.svg") no-repeat center;
    background-size: contain;
  }
  a.box-movieIcon:hover {
    opacity: 0.6;
  }
  .article-title {
    font-size: min(90px, 4.74vw);
    margin-top: min(30px, 1.58vw);
    line-height: 1.5;
  }
  .article-body {
    margin-top: min(80px, 4.21vw);
    display: -ms-grid;
    display: grid;
    gap: min(60px, 3.16vw);
  }
  .article-body p {
    font-size: min(24px, 1.26vw);
    letter-spacing: 0.06em;
    line-height: 2;
  }
  a.btn-arrow-page {
    margin-top: min(100px, 5.26vw);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  section.contact {
    width: 90%;
    margin-top: min(160px, 8.42vw);
    margin-bottom: min(50px, 2.63vw);
  }
  .portfolio-bottom-info {
    margin-top: min(140px, 7.37vw);
  }
}
/*# sourceMappingURL=portfolio.css.map */