@charset "UTF-8";
/*
# =================================================================
# マネジメント事業
# =================================================================*/
#management {
  background: #d6d3b8;
}
#management main {
  margin: 0;
  padding: 0;
}
#management .mainInfo {
  padding: 245px 0 200px 0;
  background: url(../img/managementBg1.png) no-repeat left top / 43%,
  url(../img/managementBg2.png) no-repeat right bottom / 43%;
}
#management .mainInfo .inner .ttl {
  margin: 0 0 150px 0;
  position: relative;
}
#management .mainInfo .inner  .mainTxt img {
  max-width: 600px;
  width: 100%;
  margin: 0 auto 43px auto;
  display: block;
}
#management .mainInfo .inner  .mainTxt h2 {
  margin: 0 0 90px 0;
  font-size: 26px;
  font-weight: 500;
  text-align: center;
  letter-spacing: .1em;
  line-height: 1;
}
#management .mainInfo .inner  .mainTxt p {
  font-size: 17px;
  line-height: 2.6;
  font-weight: 500;
  text-align: center;
}
#management .artists .lottie-container {
  margin: 0 0 160px 0;
  padding: 5px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  overflow: hidden;
}
#management .artists .lottie-container > svg {
  width: 170%!important;
  animation: obiLeft 10s linear infinite;
  position: relative;
  right: 0;
}
@keyframes obiLeft {
  100% {right: 24.2%;}
}
#management .artists .lottie-container2 {
  padding: 5px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  overflow: hidden;
}
#management .artists .lottie-container2 > svg {
  width: 170%!important;
  animation: obiRight 10s linear infinite;
  position: relative;
  left: -70%;
}
@keyframes obiRight {
  100% {left: -45.8%;}
}
#management .artists .inner .ttl {
  margin: 0 0 80px 0;
  display: flex;
  flex-wrap: wrap;
}
#management .artists .inner .ttl h2 {
  width: 450px;
}
#management .artists .inner .ttl p {
  width: calc(100% - 450px);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .02em;
}
#management .artists .inner .boxArtists {
  margin: 0 0 70px 0;
}
#management .services {
  padding: 170px 0 0 0;
  border-bottom: 1px solid #000;
}
#management .services .inner .ttl {
  margin: 0 auto 80px auto;
  display: flex;
  flex-wrap: wrap;
}
#management .services .inner .ttl h2 {
  width: 450px;
}
#management .services .inner .ttl p {
  width: calc(100% - 450px);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .02em;
}
#management .services .inner.type3 {
  border-top: 1px solid #000;
}
#management .services .inner .boxServices {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#management .services .inner .boxServices2 {
  flex-direction: row-reverse;
}
#management .services .inner .boxServices .img {
  width: 50%;
}
#management .services .inner .boxServices .img img {
  width: 100%;
  display: block;
}
#management .services .inner .boxServices .txt {
  width: 50%;
  padding: 0 200px 0 100px;
}
#management .services .inner .boxServices2 .txt {
  padding: 0 100px 0 200px;
}
#management .services .inner .boxServices .txt span {
  margin: 0 0 30px 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 700;
  display: block;
}
#management .services .inner .boxServices .txt h3 {
  margin: 0 0 40px 0;
  font-size: 22px;
  font-weight: 500;
}
#management .services .inner .boxServices .txt p {
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}
#management .flow {
  padding: 190px 0;
}
#management .flow .inner .ttl {
  margin: 0 0 75px 0;
}
#management footer {
  background: #d6d3b8;
}

/*
# =================================================================
# レスポンシブ要素
# =================================================================*/
/* 4K:2560px */
@media screen and (min-width: 1920px) {
  #management .mainInfo {
    background: url(../img/managementBg1.png) no-repeat left top / 739px,
    url(../img/managementBg2.png) no-repeat right bottom / 726px;
  }
}

/* PC:1920px */

/* laptop NotePC L */
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1240px) {
  #management .services .inner .boxServices .txt {
    padding: 30px 100px;
  }
  #management .services .inner .boxServices2 .txt {
    padding: 30px 100px;
  }
}

/* laptop NotePC */
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 960px) {
  #management .mainInfo .inner .ttl {
    padding: 0 0 50px 0;
  }
  #management .artists .inner .ttl {
    display: block;
  }
  #management .artists .inner .ttl h2 {
    width: 100%;
    margin: 0 0 50px 0;
  }
  #management .artists .inner .ttl p {
    width: 100%;
  }
  #management .services .inner .ttl {
    display: block;
  }
  #management .services .inner .ttl h2 {
    width: 100%;
    margin: 0 0 50px 0;
  }
  #management .services .inner .ttl p {
    width: 100%;
  }
  #management .services .inner .boxServices .txt {
    padding: 30px 50px;
  }
  #management .services .inner .boxServices2 .txt {
    padding: 30px 50px;
  }
  #management .services .inner .boxServices .txt span {
    margin: 0 0 15px 0;
  }
  #management .services .inner .boxServices .txt h3 {
    margin: 0 0 20px 0;
  }
}

/* tablet */
@media screen and (max-width: 768px) {
  #management .services .inner .boxServices {
    display: block;
  }
  #management .services .inner .boxServices .img {
    width: 100%;
  }
  #management .services .inner .boxServices .txt {
    width: 100%;
    padding: 50px;
  }
}

/* mobile L */
@media screen and (max-width: 480px) {
  #management .mainInfo {
    padding: 200px 0 70px 0;
    background: url(../img/managementBg1.png) no-repeat left -15px top -35px / 79%,
  url(../img/managementBg2.png) no-repeat right bottom / 90%;
  }
  #management .mainInfo .inner .ttl {
    margin: 0 0 85px 0;
  }
  #management .mainInfo .inner .mainTxt img {
    width: 90%;
    margin: 0 auto 17px auto;
  }
  #management .mainInfo .inner .mainTxt h2 {
    margin: 0 0 55px 0;
    font-size: 4.7vw;
    letter-spacing: .02em;
  }
  #management .mainInfo .inner .mainTxt p {
    font-size: 3.8vw;
    line-height: 2.4;
  }
  #management .artists .lottie-container {
    margin: 0 0 90px 0;
    padding: 0;
  }
  #management .artists .lottie-container > svg {
    width: 600% !important;
    animation: obiLeft 5s linear infinite;
  }
  @keyframes obiLeft {
    100% {right: 85.2%;}
  }
  #management .artists .lottie-container2 {
    padding: 0;
  }
  #management .artists .lottie-container2 > svg {
    width: 600% !important;
    left: -500%;
    animation: obiRight 5s linear infinite;
  }
  @keyframes obiRight {
    100% {left: -414.8%;}
  }
  #management .artists .inner .ttl {
    margin: 0 0 45px 0;
    padding: 0;
  }
  #management .artists .inner .ttl p {
    font-size: 3.8vw;
  }
  #management .artists .inner .boxArtists {
    margin: 0 0 20px 0;
  }
  #management .services {
    padding: 90px 0 0 0;
  }
  #management .services .inner .ttl  {
    margin: 0 auto 45px auto;
    padding: 0;
  }
  #management .services .inner .ttl p {
    font-size: 3.8vw;
  }
  #management .services .inner .boxServices .txt {
    padding: 45px 20px 50px 20px;
  }
  #management .services .inner .boxServices2 .txt {
    padding: 45px 20px 50px 20px;
  }
  #management .services .inner .boxServices .txt span {
    font-size: 6vw;
  }
  #management .services .inner .boxServices .txt h3 {
    font-size: 5.8vw;
  }
  #management .services .inner .boxServices .txt p {
    font-size: 3.8vw;
  }
  #management .flow {
    padding: 90px 0;
  }
  #management .flow .inner .ttl {
    margin: 0 0 55px 0;
    padding: 0;
  }
}

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

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