@charset "UTF-8";
/*
# =================================================================
# トップページ
# =================================================================*/
/* fv */
.fv {
  width: 100%;
  height: 100svh;
  background: #e4e4e4;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  animation: loading1 1s forwards 6.2s;
  transition: 1s;
}
.fv.act {
  visibility: hidden;
  opacity: 0;
  animation: none;
}
@keyframes loading1 {
  100% {visibility: hidden;opacity: 0;}
}
.fv svg {
  width: 100vw!important;
  height: 100svh!important;
}
.btnSkip {
  max-width: 180px;
  width: 100%;
  margin: 0 auto;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 101;
  opacity: 1;
  visibility: visible;
  cursor: pointer;
  animation: loading2 1s forwards 5.2s;
  transition: 1s;
}
.btnSkip.act {
  visibility: hidden;
  opacity: 0;
  animation: none;
}
@keyframes loading2 {
  100% {visibility: hidden;opacity: 0;}
}
.btnSkip a {
  padding: 35px 20px;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  line-height: 1;
  letter-spacing: .01em;
  transition: .3s ease-in-out;
  display: block;
}
.btnSkip:hover a {
  border: 1px solid #ff5500;
  background: #ff5500;
  color: #fff;
}
.boxModal {
  width: 100%;
  height: 100dvh;
  background: rgba(228,228,228,.95);
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: .3s ease-in-out;
  z-index: 101;
}
.boxModal.act {
  opacity: 1;
  visibility: visible;
}
.boxModal .bg {
  max-width: 850px;
  width: 90%;
  height: 80%;
  margin: 0 auto;
  padding: 75px 40px 75px 75px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translate(0,-50%);
}
.boxModal .bg .inner {
  height: 100%;
  padding: 0 35px 0 0;
  overflow-y: scroll;
}
.boxModal .bg .inner::-webkit-scrollbar{
   width: 1px;
   position: relative;
   right: -20px;
}
.boxModal .bg .inner::-webkit-scrollbar-track{
   background-color: #e4e4e4;
}
.boxModal .bg .inner::-webkit-scrollbar-thumb{
   background-color: #000;
}

.boxModal .bg .inner > img {
  margin: 0 0 60px 0;
}
.boxModal .bg .inner .mainTxt {
  margin: 0 0 35px 0;
  padding: 0 0 45px 0;
  border-bottom: 1px solid #000;
}
.boxModal .bg .inner .mainTxt p {
  margin: 0 0 25px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 2;
}
.boxModal .bg .inner .mainTxt p:nth-last-of-type(1) {
  margin: 0;
}
.boxModal .bg .inner .box2 {
  margin: 0 0 30px 0;
  padding: 0 0 30px 0;
  border-bottom: 1px solid #000;
}
.boxModal .bg .inner .box2.end {
  border-bottom: none;
}
.boxModal .bg .inner .box2 h3 {
  margin: 0 0 25px 0;
  font-size: 20px;
  font-weight: 500;
}
.boxModal .bg .inner .box2 ul.attention {
  margin: 10px 0 0 0;
}
.boxModal .bg .inner .box2 ul li {
  padding: 0 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  position: relative;
}
.boxModal .bg .inner .box2 ul.attention li {
  font-size: 14px;
}
.boxModal .bg .inner .box2 ul li::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 11px;
  left: 0;
}
.boxModal .bg .inner .box2 ul.attention li:before {
  content: '※';
  width: 1px;
  height: 1px;
  background: none;
  font-size: 14px;
  top: 2px;
}
.boxModal .bg .inner .box2 p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}
.boxModal .bg .inner > a {
  width: 100%;
  padding: 23px 20px;
  background: #ff5500;
  font-size: 18px;
  color: #fff;
  text-align: center;
  line-height: 1;
  letter-spacing: .1em;
  display: block;
  transition: .3s ease-in-out;
}
.boxModal .bg .inner > a:hover {
  background: #50955c;
}
.boxModal .bg .btnClose2 {
  width: 40px;
  position: absolute;
  top: -55px;
  right: 0;
  z-index: 9;
  cursor: pointer;
}
.btnModal {
  cursor: pointer;
}

/* 共通 */
#top .ttl {
  position: relative;
}
#top .ttl h2 {
  font-family: "Inter", sans-serif;
  font-size: 80px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .04em;
}
#top .ttl h2 span {
  margin: 20px 0 0 0;
  padding: 0 0 0 33px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
  display: block;
  position: relative;
}
#top .ttl h2 span::before {
  content: '';
  width: 19px;
  height: 19px;
  background: url(../img/common/iconLogo.svg) no-repeat left top / 19px;
  position: absolute;
  top: -2px;
  left: 5px;
}
#top .btnMore2 {
  max-width: 180px;
  width: 100%;
  margin: 0 auto 0 0;
  position: relative;
}
#top .btnMore2::after {
  content: '';
  width: 16px;
  height: 12px;
  background: url(../img/common/iconArrow2.svg) no-repeat left top / 16px;
  position: absolute;
  top: calc(50% - 6px);
  right: 15px;
  transition: .3s ease-in-out;
}
#top .btnMore2:hover::after {
  background: url(../img/common/iconArrow2_o.svg) no-repeat left top / 16px;
}
#top .btnMore2 a {
  width: 180px;
  padding: 35px 20px;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  display: block;
  transition: .3s ease-in-out;
}
#top .btnMore2 a:hover {
  border: 1px solid #ff5500;
  background: #ff5500;
  color: #fff;
}

/* コンテンツエリア */
#top .mv {
  width: 100%;
  height: 100svh;
  /*height: calc(100svh - 155px);
  margin: 155px 0 0 0;*/
  border-bottom: 1px solid #000;
  position: relative;
  overflow: hidden;
}
#top .mv .boxSns {
  position: absolute;
  top: 45%;
  left: -70px;
  transform: rotate(90deg);
}
#top .mv .boxSns a {
  padding: 12px 22px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  display: inline-block;
  position: relative;
}
#top .mv .boxSns a:nth-of-type(2) {
  margin: 0 10px;
}
#top .mv .boxSns a .draw-circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#top .mv .boxSns a .draw-circle rect {
  fill: none;
  stroke: #000;
  stroke-width: 1;
  rx: 999;
  ry: 999;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 0.8s cubic-bezier(.4,0,.2,1);
  stroke-linecap: round;
}
#top .mv .boxSns a:hover .draw-circle rect {
  stroke-dashoffset: 0;
}
#top .mv h1 {
  max-width: 990px;
  width: 76%;
  margin: 0 auto;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  animation: mvh1 1.5s ease-in-out forwards 7.2s;
}
@keyframes mvh1 {
  100%{top: 50%;opacity: 1;}
}
#top .mv h1.act {
  animation: mvh2 1.5s ease-in-out forwards 1.3s;
}
@keyframes mvh2 {
  100%{top: 50%;opacity: 1;}
}

#top .mv .boxScroll {
  position: absolute;
  top: 45%;
  right: 35px;
  transform: rotate(90deg);
}
#top .mv .boxScroll span {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 400;
}
#top .mv .boxTxt {
  width: 24%;
  margin: 0 76% 0 0;
  word-break: break-all;
  position: absolute;
  bottom: 50px;
  left: 70px;
}
#top .mv .boxTxt p {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
}
#top .mv .boxPickup {
  max-width: 440px;
  width: 100%;
  padding: 15px;
  background: #ff5500;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  bottom: 50px;
  right: 70px;
  transition: .3s;
}
#top .mv .boxPickup:hover {
  background: #50955c;
}
#top .mv .boxPickup::after {
  content: '';
  width: 40px;
  height: 40px;
  background: url(../img/common/iconArrow2_o.svg) no-repeat center center / 16px,
  #000;
  border-radius: 50%;
  position: absolute;
  right: 15px;
  bottom: 15px;
}
#top .mv .boxPickup .img {
  width: 90px;
}
#top .mv .boxPickup .txt {
  width: calc(100% - 90px);
  padding: 0 0 0 20px;
}
#top .mv .boxPickup .txt img {
  max-width: 100px;
  width: 100%;
  margin: 0 0 13px 0;
  display: block;
}
#top .mv .boxPickup .txt p {
  color: #fff;
}
#top .about {
  border-bottom: 1px solid #000;
  position: relative;
}
#top .about .bg {
  margin: -100svh 0 0 0;
}
#top .about .boxTxt {
  width: 100%;
  height: 100svh;
  padding: 30vw 0 0 0;
  position: sticky;
  top: 0;
}
#top .about .boxTxt .txt {
  width: 100%;
  position: absolute;
  top: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#top .about .boxTxt .txt2 {
  top: 48%;
}
#top .about .boxTxt .txt3 {
  top: 44%;
}
#top .about .boxTxt .txt.act {
  opacity: 1;
}
#top .about .boxTxt .txt p {
  margin: 0 0 20px 0;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  line-height: 1.8;
}
#top .about .boxTxt .txt p:nth-last-of-type(1) {
  margin: 0;
}
#top .about .iconArrow {
  width: 40px;
  margin: 0 auto;
  position: absolute;
  bottom: 90px;
  left: 0;
  right: 0;
}
#top .aboutus .lottie-container2 {
  margin: 0 0 170px 0;
  padding: 5px 0;
  border-bottom: 1px solid #000;
  overflow: hidden;
}
#top .aboutus .lottie-container2 > svg {
  width: 170%!important;
  animation: obiRight 10s linear infinite;
  position: relative;
  left: -70%;
}
@keyframes obiRight {
  100% {left: -45.8%;}
}
#top .aboutus .lottie-container3 {
  margin: 170px 0 0 0;
  padding: 5px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  overflow: hidden;
}
#top .aboutus .lottie-container3 > svg {
  width: 170%!important;
  animation: obiLeft2 10s linear infinite;
  position: relative;
  right: 0;
}
@keyframes obiLeft2 {
  100% {right: 24.2%;}
}
#top .aboutus .inner {
  max-width: 1020px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row-reverse;
}
#top .aboutus .inner .txt {
  width: calc(100% - 520px);
  padding: 120px 20px 0 0
}
#top .aboutus .inner .txt .ttl {
  margin: 0 0 40px 0;
}
#top .aboutus .inner .txt p {
  margin: 0 0 35px 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 2;
}
#top .aboutus .inner .btn {
  width: 520px;
}
#top .aboutus .inner .btn ul {
  display: flex;
  flex-wrap: wrap;
}
#top .aboutus .inner .btn ul li {
  width: 50%;
}
#top .aboutus .inner .btn ul li:nth-of-type(1) {
  margin: 0 0 10px 0;
}
#top .aboutus .inner .btn ul li:nth-of-type(2) {
  margin: 0 0 10px 0;
  text-align: right;
}
#top .aboutus .inner .btn ul li:nth-of-type(4) {
  text-align: right;
}
#top .aboutus .inner .btn ul li a {
  max-width: 250px;
  width: 100%;
  height: 0;
  padding: 100% 0 0 0;
  display: block;
  position: relative;
}
#top .aboutus .inner .btn ul li:nth-of-type(2) a,
#top .aboutus .inner .btn ul li:nth-of-type(4) a {
  margin: 0 0 0 auto;
}
#top .aboutus .inner .btn ul li a img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: .3s;
}
#top .aboutus .inner .btn ul li a:hover img:nth-of-type(1) {
  opacity: 0;
}
#top .aboutus .inner .btn ul li a img:nth-of-type(2) {
  opacity: 0;
}
#top .aboutus .inner .btn ul li a:hover img:nth-of-type(2) {
  opacity: 1;
}
#top .artists {
  padding: 170px 0 110px 0;
  background: #cecece;
  border-bottom: 1px solid #000;
}
#top .artists .inner .ttl {
  margin: 0 0 80px 0;
  display: flex;
  flex-wrap: wrap;
}
#top .artists .inner .ttl h2 {
  width: 450px;
}
#top .artists .inner .ttl p {
  width: calc(100% - 450px);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .02em;
}
#top .services {
  padding: 150px 0;
}
#top .services .inner .ttl {
  margin: 0 0 80px 0;
}
#top .services .inner .servicesList ul {
  border-top: 1px solid #000;
}
#top .services .inner .servicesList ul li {
  border-bottom: 1px solid #000;
}
#top .services .inner .servicesList ul li .hoverImg1,
#top .services .inner .servicesList ul li .hoverImg2,
#top .services .inner .servicesList ul li .hoverImg3,
#top .services .inner .servicesList ul li .hoverImg4 {
  position: fixed;
  width: 55px;
  height: 55px;
  object-fit: cover;
  pointer-events: none;
  display: none;
  z-index: 1000;
  animation: mouseLogo 10s linear infinite;
}
@keyframes mouseLogo {
  100% {transform: rotate(360deg);}
}
#top .services .inner .servicesList ul li a {
  padding: 40px 80px 50px 65px;
  display: block;
  position: relative;
  transition: .3s ease-in-out;
}
#top .services .inner .servicesList ul li a::after {
  content: '';
  width: 40px;
  height: 40px;
  background: url(../img/common/iconArrow2_o.svg) no-repeat center center / 16px,
  #000;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 20px);
  right: 20px;
}
#top .services .inner .servicesList ul li a:hover {
  background: #ff5500;
}
#top .services .inner .servicesList ul li a h3 {
  margin: 0 0 30px 0;
  font-family: "Inter", sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  position: relative;
  transition: .3s ease-in-out;
}
#top .services .inner .servicesList ul li a h3::before {
  width: 1px;
  height: 1px;
  font-family: "Cormorant Garamond", serif;
  font-size: 25px;
  font-weight: 700;
  position: absolute;
  top: -15px;
  left: -40px;
}
#top .services .inner .servicesList ul li a:hover h3 {
  color: #fff;
}
#top .services .inner .servicesList ul li:nth-of-type(1) a h3::before {
  content: '01';
}
#top .services .inner .servicesList ul li:nth-of-type(2) a h3::before {
  content: '02';
}
#top .services .inner .servicesList ul li:nth-of-type(3) a h3::before {
  content: '03';
}
#top .services .inner .servicesList ul li:nth-of-type(4) a h3::before {
  content: '04';
}
#top .services .inner .servicesList ul li a span {
  margin: 0 0 30px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  display: block;
  transition: .3s ease-in-out;
}
#top .services .inner .servicesList ul li a:hover span {
  color: #fff;
}
#top .services .inner .servicesList ul li a p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  transition: .3s ease-in-out;
}
#top .services .inner .servicesList ul li a:hover p {
  color: #fff;
}
#top .box1 {
  padding: 190px 0;
  background: #cecece;
}
#top .box1 .youtube {
  padding: 0 0 130px 0;
}
#top .box1 .youtube .inner .img1 {
  margin: 0 auto 65px auto;
  display: block;
}
#top .box1 .youtube .inner p {
  margin: 0 0 110px 0;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  line-height: 1.8;
}
#top .box1 .youtube .inner .boxVideo {
  max-width: 690px;
  width: 100%;
  margin: 0 auto;
}
#top .box1 .youtube .inner .boxVideo .activeImage iframe {
  max-width: 690px;
  width: 100%;
  height: 460px;
  display: block;
}
#top .box1 .slideImg {
  height: 365px;
  position: relative;
  overflow: hidden;
}
#top .box1 .slideImg img {
  max-width: none;
  width: 8454px;
  position: absolute;
  top: 0;
  left: 0;
  animation: slideImg1 60s linear infinite;
}
@keyframes slideImg1 {
  100% {left: -4227px;}
}
#top .box1 .studio {
  padding: 100px 0 120px 0;
  text-align: center;
}
#top .box1 .studio .inner h2 {
  margin: 0 0 20px 0;
  font-family: "Inter", sans-serif;
  font-size: 80px;
  font-weight: 300;
  letter-spacing: .04em;
}
#top .box1 .studio .inner span {
  margin: 0 0 25px 0;
  font-size: 16px;
  font-weight: 600;
  display: block;
}
#top .box1 .studio .inner p {
  margin: 0 0 40px 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
}
#top .box1 .studio .inner .btnMore2 {
  margin: 0 auto;  
}
#top .box1 .recruit .inner .bg {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 90px 5% 60px 5%;
  background: url(../img/recruitBg1.jpg) no-repeat center center / cover;
  text-align: center;
}
#top .box1 .recruit .inner .bg h2 {
  margin: 0 0 20px 0;
  font-family: "Inter", sans-serif;
  font-size: 80px;
  font-weight: 300;
  letter-spacing: .04em;
}
#top .box1 .recruit .inner .bg span {
  margin: 0 0 25px 0;
  font-size: 16px;
  font-weight: 600;
  display: block;
}
#top .box1 .recruit .inner .bg p {
  margin: 0 0 40px 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
}
#top .box1 .recruit .inner .bg .btnMore2 {
  margin: 0 auto;  
}
#top .box1 .contact {
  padding: 150px 0 0 0;
}
#top .box1 .contact .inner {
  display: flex;
  flex-wrap: wrap;
}
#top .box1 .contact .inner .txt {
  width: calc(100% - 580px);
  padding: 0 30px 0 0;
}
#top .box1 .contact .inner .txt h2 {
  margin: 0 0 15px 0;
  font-family: "Inter", sans-serif;
  font-size: 80px;
  font-weight: 300;
  letter-spacing: .04em;
}
#top .box1 .contact .inner .txt span {
  margin: 0 0 40px 0;
  font-size: 16px;
  font-weight: 600;
  display: block;
}
#top .box1 .contact .inner .txt p {
  margin: 0 0 40px 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
}
#top .box1 .contact .inner .img {
  width: 580px;
}

/*
# =================================================================
# レスポンシブ要素
# =================================================================*/
/* 4K:2560px */
@media screen and (min-width: 1921px) {
  #top .about .bg img {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    display: block;
  }
}

/* PC:1920px */

/* laptop NotePC L */
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1240px) {
  #top .box1 .contact .inner .txt {
    width: 50%;
  }
  #top .box1 .contact .inner .img {
    width: 50%;
  }
}

/* laptop NotePC */
@media screen and (max-width: 1024px) {
  /* 共通 */
  #top .ttl h2 {
    font-size: 60px;
  }
  /* コンテンツエリア */
  #top .mv h1 {
    width: 70%;
  }
  #top .aboutus .inner .txt {
    width: 50%;
    padding: 50px 20px 0 0
  }
  #top .aboutus .inner .btn {
    width: 50%;
  }
  #top .aboutus .inner .btn ul li:nth-of-type(1) {
    padding: 0 10px 0 0;
  }
  #top .aboutus .inner .btn ul li:nth-of-type(2) {
    padding: 0 0 0 10px;
  }
  #top .aboutus .inner .btn ul li:nth-of-type(3) {
    padding: 0 10px 0 0;
  }
  #top .aboutus .inner .btn ul li:nth-of-type(4) {
    padding: 0 0 0 10px;
  }
}
@media screen and (max-width: 960px) {
  #top .artists .inner .ttl {
    display: block;
  }
  #top .artists .inner .ttl h2 {
    width: 100%;
    margin: 0 0 50px 0;
  }
  #top .artists .inner .ttl p {
    width: 100%;
  }
  #top .box1 .slideImg {
    height: 276px;
  }
  #top .box1 .slideImg img {
    width: 6400px;
  }
  @keyframes slideImg1 {
    100% {left: -3200px;}
  }
}

/* tablet */
@media screen and (max-width: 768px) {
  #top .mv h1 {
    top: 50%;
  }
  @keyframes mvh1 {
    100%{top: 40%;opacity: 1;}
  }
  @keyframes mvh2 {
    100%{top: 40%;opacity: 1;}
  }
  #top .mv .boxSns {
    display: none;
  }
  #top .mv .boxScroll {
    display: none;
  }
  #top .mv .boxTxt {
    width: 100%;
    margin: 0;
    bottom: 150px;
    left: 5%;
  }
  #top .mv .boxPickup {
    max-width: none;
    width: 90%;
    display: block;
    right: 5%;
  }
  #top .mv .boxPickup::after {
    right: 10px;
    bottom: 10px;
  }
  #top .mv .boxPickup .img {
    display: none;
  }
  #top .mv .boxPickup .txt {
    width: 100%;
    padding: 0;
  }
  #top .mv .boxPickup .txt img {
    max-width: 60px;
    margin: 0;
    display: inline-block;
  }
  #top .mv .boxPickup .txt p {
    margin: 7px 0 0 10px;
    display: inline-block;
  }
  #top .about .boxTxt .txt1 {
    top: 50%;
  }
  #top .about .boxTxt .txt2 {
    top: 48%;
  }
  #top .about .boxTxt .txt3 {
    top: 44%;
  }
  #top .aboutus .inner {
    display: block;
  }
  #top .aboutus .inner .txt {
    width: 100%;
    padding: 0;
  }
  #top .aboutus .inner .btn {
    width: 100%;
    margin: 0 0 50px 0;
  }
  #top .aboutus .inner .btn ul {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }
  #top .services .inner .servicesList ul li .hoverImg1,
  #top .services .inner .servicesList ul li .hoverImg2,
  #top .services .inner .servicesList ul li .hoverImg3,
  #top .services .inner .servicesList ul li .hoverImg4 {
    display: none;
  }
  #top .box1 .contact .inner {
    display: block;
  }
  #top .box1 .contact .inner .txt {
    width: 100%;
    padding: 0;
  }
  #top .box1 .contact .inner .img {
    display: none;
  }
}

/* mobile L */
@media screen and (max-width: 480px) {
  /* 共通 */
  #top .ttl h2 {
    font-size: 15vw;
  }
  #top .ttl h2 span {
    font-size: 4.6vw;
  }
  #top .ttl h2 span::before {
    top: -1px;
  }
  #top .btnMore2 a {
    font-size: 4vw;
  }
  /* コンテンツエリア */
  #top .mv h1 {
    width: 80%;
  }
  #top .mv .boxTxt {
    bottom: 130px;
  }
  #top .mv .boxTxt p {
    font-size: 3.6vw;
  }
  #top .mv .boxPickup {
    bottom: 20px;
  }
  #top .mv .boxPickup .txt p {
    margin: 1.8vw 0 0 10px;
    font-size: 3.6vw;
  }
  #top .about .boxTxt .txt1 {
    top: 75vw;
  }
  #top .about .boxTxt .txt2 {
    top: 92vw;
  }
  #top .about .boxTxt .txt3 {
    bottom: 66vw;
  }
  #top .about .boxTxt .txt p {
    font-size: 3.8vw;
    line-height: 2.2;
  }
  #top .about .iconArrow {
    bottom: 170px;
  }
  #top .aboutus .lottie-container2 {
    margin: 0 0 90px 0;
    padding: 0;
  }
  #top .aboutus .lottie-container2 > svg {
    width: 600% !important;
    left: -500%;
    animation: obiRight 5s linear infinite;
  }
  @keyframes obiRight {
    100% {left: -414.8%;}
  }
  #top .aboutus .lottie-container3 {
    margin: 90px 0 0 0;
    padding: 0;
  }
  #top .aboutus .lottie-container3 > svg {
    width: 600% !important;
    animation: obiLeft2 5s linear infinite;
  }
  @keyframes obiLeft2 {
    100% {right: 85.2%;}
  }
  #top .aboutus .inner .txt p {
    font-size: 3.8vw;
  }
  #top .artists {
    padding: 90px 0 30px 0;
  }
  #top .artists .inner .ttl {
    margin: 0 0 45px 0;
  }
  #top .artists .inner .ttl p {
    font-size: 3.8vw;
  }
  #top .services {
    padding: 90px 0;
  }
  #top .services .inner .servicesList ul li a {
    padding: 40px 20px 75px 50px;
  }
  #top .services .inner .servicesList ul li a::after {
    top: auto;
    bottom: 25px;
  }
  #top .services .inner .servicesList ul li a h3 {
    margin: 0 0 18px 0;
    font-size: 8vw;
  }
  #top .services .inner .servicesList ul li a h3::before {
    top: -5px;
    left: -35px;
  }
  #top .services .inner .servicesList ul li a span {
    margin: 0 0 20px 0;
    font-size: 3.8vw;
  }
  #top .services .inner .servicesList ul li a p {
    font-size: 3.8vw;
  }
  #top .box1 .slideImg {
    height: 147px;
  }
  #top .box1 .slideImg img {
    width: 3400px;
  }
  @keyframes slideImg1 {
    100% {left: -1700px;}
  }
  #top .box1 {
    padding: 90px 0;
  }
  #top .box1 .youtube {
    padding: 0 0 70px 0;
  }
  #top .box1 .youtube .inner .img1 {
    margin: 0 auto 45px auto;
  }
  #top .box1 .youtube .inner .boxVideo .activeImage iframe {
    height: 225px;
  }
  #top .box1 .youtube .inner p {
    margin: 0 0 60px 0;
    font-size: 4.9vw;
    letter-spacing: .1em;
    line-height: 2.2;
  }
  #top .box1 .studio {
    padding: 100px 0;
  }
  #top .box1 .studio .inner h2 {
    font-size: 13.8vw;
  }
  #top .box1 .studio .inner span {
    font-size: 4.4vw;
  }
  #top .box1 .studio .inner p {
    font-size: 4vw;
  }
  #top .box1 .recruit .inner .bg {
    padding: 50px 5% 50px 5%;
  }
  #top .box1 .recruit .inner .bg h2 {
    font-size: 14.8vw;
  }
  #top .box1 .recruit .inner .bg span {
    font-size: 4.4vw;
  }
  #top .box1 .recruit .inner .bg p {
    font-size: 4vw;
  }
  #top .box1 .contact {
    padding: 90px 0 0 0;
  }
  #top .box1 .contact .inner .txt h2 {
    font-size: 15.4vw;
  }
  #top .box1 .contact .inner .txt span {
    font-size: 4.4vw;
  }
  #top .box1 .contact .inner .txt p {
    font-size: 4vw;
  }
  .boxModal .bg {
    padding: 50px 10px 50px 20px;
  }
  .boxModal .bg .inner {
    padding: 0 10px 0 0;
  }
  .boxModal .bg .inner > img {
    margin: 0 0 35px 0;
  }
  .boxModal .bg .inner .mainTxt p {
    font-size: 3.7vw;
  }
  .boxModal .bg .inner .box2 h3 {
    font-size: 5.4vw;
  }
  .boxModal .bg .inner .box2 ul li {
    font-size: 4.2vw;
  }
  .boxModal .bg .inner .box2 ul.attention li {
    font-size: 3.6vw;
    letter-spacing: .04em;
  }
  .boxModal .bg .inner .box2 p {
    font-size: 3.6vw;
    letter-spacing: .04em;
  }
  .boxModal .bg .inner > a {
    font-size: 4.8vw;
  }
}

/* mobile M */
@media screen and (max-width: 375px) {
}

/* mobile S */
@media screen and (max-width: 320px) {
}