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

 * top

************************************************************/
.container{
  background: #000;
  box-sizing: border-box;
  color: #fff;
}
@media screen and (max-width: 640px) {
	.container{
	}
}
/*--------------------------------------*/
div {
  box-sizing: border-box;
}
@media screen and (max-width: 640px) {

}

.-sp{
  display: none;
}
@media screen and (max-width: 768px) {
  .-pc{
    display: none;
  }
  .-sp{
    display: block;
  }
}

/*--------------------------------------*/
.introduction{
  background: url(../images/about/intro-back.png) no-repeat top right;
  background-size: contain;
  padding: 60px 0 76px;
}
.intro-wrap{
  width: 70%;
  margin: 0 auto;
}
.intro-moji{
}
.intro-inner{
  width: 50%;
  min-width: 400px;
  margin-top: 98px;
}
.intro-ttl{
  width: 55%;
  margin-bottom: 26px;
  animation: main_flash 3s infinite;
}
.intro-p{
  font-weight: 400;
  font-size: 0.9rem;
}
@media screen and (max-width: 640px) {
  .introduction{
    background: url(../images/about/intro-back-sp.png) no-repeat top right;
    background-size: cover;
    padding: 68px 0 54px;
  }
  .intro-wrap{
    width: 90%;
    margin: 0 auto;
  }
  .intro-moji{
  }
  .intro-inner{
    width: 100%;
    min-width: 0;
    margin-top: 370px;
  }
  .intro-ttl{
    width: 66%;
    margin-bottom: 26px;
  }
  .intro-p{
    height: 335px;
    overflow-y: scroll;
    padding-right: 8px;
    font-weight: 400;
    font-size: 0.9rem;
  }
}

/*--------------------------------------*/
.splash{
  background: url(../images/about/fix-pc.png) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}
@media screen and (max-width: 640px) {
  .splash{
    background: none;
  }
  .splash::before{
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(../images/about/fix-sp.png) no-repeat center bottom;
    background-size: cover;
  }
}

/*--------------------------------------*/
.story{
  background: url(../images/about/story-back.png) no-repeat center;
  background-size: cover;
  padding: 160px 0 190px;
}
.story-wrap{
  width: 72%;
  min-width: 750px;
  margin: 0 auto;
  background-color: rgba(11, 53, 57, 0.4);
  padding: 55px 70px 62px;
}
.story-ttl{
  width: 12%;
  min-width: 122px;
  margin: 0 auto;
  animation: main_flash 3s infinite;
}
.story-moji{
  width: 85%;
  margin: 52px auto 46px;
}
.story-p{
  width: 85%;
  font-size: 1rem;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .story{
    background: url(../images/about/story-back-sp.png) no-repeat center;
    background-size: cover;
    padding: 80px 0 72px;
  }
  .story-wrap{
    width: 90%;
    margin: 0 auto;
    min-width: 0;
    background-color: rgba(11, 53, 57, 0.4);
    padding: 50px 18px;
  }
  .story-ttl{
    width: 33%;
    min-width: 0;
    margin: 0 auto;
  }
  .story-moji{
    width: 90%;
    margin: 44px auto 25px;
  }
  .story-p{
    width: 90%;
    font-size: 1rem;
    margin: 0 auto;
  }
}

/*-----------------------------------------
** slide images
-----------------------------------------*/
.slide-img{
	display: flex;
  align-items: center;
	overflow: hidden;
  padding: 12px 0;
  background-color: #000;
}
.slideshow{
	display: flex;
	animation: loop-slide 30s infinite linear 1s both;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.content {
  width: 372px;
}
@media screen and (max-width: 640px) {
  .slide-img{
    padding: 5px 0;
  }
  .slideshow{
    animation: loop-slide 20s infinite linear 1s both;
  }
	.content {
		width: 173px;
	}
}

/*-----------------------------------------
** like a instaglam
-----------------------------------------*/
.insta-zoon{
  background: url(../images/about/insta-back.png) no-repeat center;
  background-size: cover;
  padding: 122px 140px;
}
.insta-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  gap: 120px 30vw;
}
.insta-content {
  width: 100%;
  max-width: 275px;
  min-width: 160px;
  position: relative;
}
.content01{
  order: 1;
}
.content02{
  order: 2;
}
.content03{
  order: 3;
}
.content04{
  order: 4;
}
.insta-img{
  border: #fff solid 3px;
}
.icon-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 86%;
  height: fit-content;
  margin: 12px auto 0;
  justify-content: space-between;
  align-items: center;
  z-index: -10;
}
.icon-wrap > div {
  width: calc(100% / 4 - 17%);
}
.love {
  cursor: pointer;
  position: relative;
}
.particle {
  background-repeat: no-repeat;
  display: none;
  position: absolute;
  width: 180px;
  height: 50px;
  left: -81px;
  /* z-index: -1000; */
}
.particle.top {
  top: -50px;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.particle.bottom {
  bottom: -50px;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.particle.top.animate {
  display: block;
  animation: topparticles ease-in-out 0.75s forwards;
}
.particle.bottom.animate {
  display: block;
  animation: bottomparticles ease-in-out 0.75s forwards;
}

@keyframes topparticles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
@keyframes bottomparticles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
@media screen and (max-width: 768px) {
  .insta-zoon{
    background: url(../images/about/insta-back-sp.png) no-repeat center bottom;
    background-size: cover;
    padding: 88px 0 120vw;
  }
  .insta-wrap{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 62%;
    gap: 44px 0;
    margin: 0 auto;
  }
  .insta-content {
    width: 100%;
    max-width: 275px;
    position: relative;
  }
  .content01{
    order: 1;
  }
  .content02{
    order: 3;
  }
  .content03{
    order: 2;
  }
  .content04{
    order: 4;
  }
  .insta-img{
    border: #fff solid 3px;
  }
  .icon-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 86%;
    height: fit-content;
    margin: 12px auto 0;
    justify-content: space-between;
    align-items: center;
    z-index: -10;
  }
  .icon-wrap > div {
    width: calc(100% / 4 - 17%);
  }
}

/*-----------------------------------------
** cast
-----------------------------------------*/
.cast{
  padding: 116px 0 0;
}
.cast-ttl{
  width: 7%;
  min-width: 105px;
  margin: 0 auto 63px;
  animation: main_flash 3s infinite;
}
.cast-wrap{
  display: flex;
  align-items: stretch;
}
.nakajima .cast-img{
  width: 43%;
}
.nakajima .cast-moji{
  width: 57%;
  padding: 110px 0 60px;
  background: url(../images/about/cast-mainback.png) no-repeat center right;
  background-size: cover;
}
.nakajima-name{
  width: 26%;
  margin: 0 auto;
}
.cast-profile{
  font-weight: 400;
  font-size: 1vw;
  width: 62%;
  margin: 55px auto 0;
}
.cast-profile img{
  display: inline;
  width: auto;
  height: 1vw;
}
.water{
  color: #7FC5DA;
  font-weight: 500;
}
.nao .cast-img{
  width: 35%;
  order: 2;
}
.nao .cast-moji{
  width: 65%;
  order: 1;
  padding: 110px 0 60px;
  background: url(../images/about/cast-mainback02.png) no-repeat center right;
  background-size: cover;
}
.nao-name{
  width: 7%;
  margin: 0 auto;
}
.nagayama .cast-img{
  width: 35%;
}
.nagayama .cast-moji{
  width: 65%;
  padding: 110px 0 60px;
  background: url(../images/about/cast-mainback03.png) no-repeat center right;
  background-size: cover;
}
.nagayama-name{
  width: 24%;
  margin: 0 auto;
}
@media screen and (max-width: 1000px) {
  .cast-profile{
    font-weight: 400;
    font-size: 1vw;
    width: 62%;
    max-height: 250px;
    overflow-y: auto;
    margin: 55px auto 0;
  }
}
@media screen and (max-width: 768px) {
  .cast{
    padding: 16px 0 0;
    background-color: #000;
  }
  .cast-ttl{
    width: 22%;
    min-width: 0;
    margin: 0 auto 16px;
    position: relative;
    z-index: 9;
  }
  .cast-ttl img{
    z-index: 99;
    position: relative;
  }
  .cast-ttl::before{
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    z-index: 1;
    filter: blur(5px);
    width: 100vw;
    height: 100px;
    background-color: #000;
  }
  .cast-wrap{
    display: block;
  }
  .nakajima  .cast-img{
    width: 100%;
  }
  .nakajima  .cast-moji{
    width: 100%;
    padding: 72px 0 82px;
  }
  .nakajima-name{
    width: 45%;
    margin: 0 auto;
  }
  .cast-profile{
    font-weight: 400;
    font-size: 15px;
    width: 90%;
    max-height: 440px;
    overflow-y: auto;
    margin: 70px auto 0;
  }
  .cast-profile img{
    display: inline;
    width: auto;
    height: 15px;
  }
  .nao .cast-img{
    width: 100%;
  }
  .nao .cast-moji{
    width: 100%;
    padding: 72px 0 82px;
    padding: 110px 0 60px;
    background: url(../images/about/cast-mainback02-sp.png) no-repeat center right;
    background-size: cover;
  }
  .nao-name{
    width: 14%;
    margin: 0 auto;
  }
  .nagayama .cast-img{
    width: 100%;
  }
  .nagayama .cast-moji{
    width: 100%;
    padding: 72px 0 82px;
    background: url(../images/about/cast-mainback03-sp.png) no-repeat center right;
    background-size: cover;
  }
  .nagayama-name{
    width: 45%;
    margin: 0 auto;
  }
}

/*-----------------------------------------
** stream images
-----------------------------------------*/
.slide-img02{
	display: flex;
  align-items: center;
	overflow: hidden;
  padding: 12px 0;
  background-color: #000;
}
.slideshow02{
	display: flex;
	animation: loop-slide 30s infinite linear 1s both;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.slide-content02 {
  width: 382px;
}
@media screen and (max-width: 640px) {
  .slide-img02{
    padding: 5px 0;
  }
  .slideshow02{
    animation: loop-slide 20s infinite linear 1s both;
  }
	.slide-content02 {
		width: 173px;
	}
}

/*-----------------------------------------
** staff
-----------------------------------------*/
.staff{
  padding-top: 82px;
  padding-bottom: 200px;
  background: url(../images/about/staff-back.png) no-repeat center;
  background-size: cover;
}
.staff-ttl{
  width: 8.5%;
  min-width: 110px;
  margin: 0 auto 80px;
  animation: main_flash 3s infinite;
}
.staff-content{
  width: 38%;
  min-width: 400px;
  margin: 0 auto 116px;
}
.staff-img {
	overflow: hidden;
}
.staff-img img {
  display: block;
  transition: 0.5s;
}
.staff-img img:hover{
  opacity: 1;
  transform: scale(1.1, 1.1) rotate(5deg);
}
.kumagiri .staff-name{
  width: 40%;
  margin: 35px auto 0;
}
.okada .staff-name{
  width: 48%;
  margin: 35px auto 0;
}
.watanabe .staff-name{
  width: 37%;
  margin: 35px auto 0;
}
@media screen and (max-width: 640px) {
  .staff{
    padding-top: 64px;
    padding-bottom: 60px;
    background: url(../images/about/staff-back-sp.png) no-repeat center;
    background-size: cover;
  }
  .staff-ttl{
    width: 25%;
    min-width: 0px;
    margin: 0 auto 80px;
  }
  .staff-content{
    width: 90%;
    min-width: 0;
    margin: 0 auto 96px;
  }
  .staff-img {
    overflow: hidden;
  }
  .staff-img img {
    display: block;
    transition: 0.5s;
  }
  .staff-img img:hover{
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(5deg);
  }
  .kumagiri .staff-name{
    width: 44%;
    margin: 30px auto 0;
  }
  .okada .staff-name{
    width: 55%;
    margin: 30px auto 0;
  }
  .watanabe .staff-name{
    width: 44%;
    margin: 30px auto 0;
  }
}

/*-----------------------------------------
** footer前
-----------------------------------------*/
.credit{
  background: url(../images/about/credit-back.png) no-repeat center bottom;
  background-size: cover;
  padding: 30px 0 60vw;
  position: relative;
}
.credit::before{
  position: absolute;
  top: -25vw;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  z-index: 1;
  width: 100vw;
  height: 30vw;
  background: linear-gradient(to bottom, transparent 10%, #000 70%, #000);
}
.credit-moji{
  position: relative;
  z-index: 9;
  width: 44%;
  min-width: 400px;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .credit{
    background: url(../images/about/credit-back-sp.png) no-repeat center bottom;
    background-size: cover;
    padding: 70px 0 100vw;
    position: relative;
  }
  .credit::before{
    position: absolute;
    top: -25vw;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    z-index: 1;
    width: 100vw;
    height: 40vw;
    background: linear-gradient(to bottom, transparent 10%, #000 70%, #000);
  }
  .credit-moji{
    position: relative;
    z-index: 9;
    width: 88%;
    min-width: 0px;
    margin: 0 auto;
  }
}

/*-----------------------------------------
** modal
-----------------------------------------*/
.staff-wrap{
  box-sizing: border-box;
  color: #fff;
  display: flex;
  padding: 85px 55px 75px;
  gap: 25px;
}
.staff-photo{
  width: 46%;
}
.staff-moji{
  width: 54%;
  overflow-y: auto;
  min-height: 240px;
  padding-right: 10px;
}
.staff-inner{
  height: 0;
}
.staff-inner img{
  width: calc(100% / 2);
}
.staff-inner p{
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  margin-top: 12px;
}
@media screen and (max-width: 640px) {
  .staff-wrap{
    display: block;
    padding: 56px 30px 0px;
  }
  .staff-photo{
    width: 82%;
    margin: 0 auto;
  }
  .staff-moji{
    width: 82%;
    margin: 50px auto 0;
    overflow: visible;
    height: auto;
    padding-right: 4px;
  }
  .staff-inner{
    height: 0;
  }
  .staff-inner .name01{
    width: 150px;
  }
  .staff-inner .name02{
    width: 196px;
  }
  .staff-inner .name03{
    width: 150px;
  }
  .staff-inner p{
    font-size: 15px;
    line-height: 1.8;
    margin-top: 13px;
    padding-bottom: 60px;
  }
}

/*-----------------------------------------
** 各タイトル統一
-----------------------------------------*/
@keyframes main_flash {
  0% {
    -webkit-transform: none;
            transform: none;
  }
  36% {
    -webkit-transform: none;
            transform: none;
  }
  36.2% {
    -webkit-transform: skewX(8deg);
            transform: skewX(8deg);
  }
  36.4% {
    -webkit-transform: skewX(-8deg);
            transform: skewX(-8deg);
  }
  36.6% {
    -webkit-transform: none;
            transform: none;
  }
  66% {
    -webkit-transform: none;
            transform: none;
  }
  66.2% {
    -webkit-transform: skewX(10deg);
            transform: skewX(10deg);
  }
  66.4% {
    -webkit-transform: skewX(-10deg);
            transform: skewX(-10deg);
  }
  66.6% {
    -webkit-transform: none;
            transform: none;
  }
  76% {
    -webkit-transform: none;
            transform: none;
  }
  76.2% {
    -webkit-transform: skewX(40deg);
            transform: skewX(40deg);
  }
  76.4% {
    -webkit-transform: skewX(-40deg);
            transform: skewX(-40deg);
  }
  76.6% {
    -webkit-transform: none;
            transform: none;
  }
  97% {
    -webkit-transform: none;
            transform: none;
  }
  97.2% {
    -webkit-transform: skewX(5deg);
            transform: skewX(5deg);
  }
  97.4% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
  }
  97.6% {
    -webkit-transform: none;
            transform: none;
  }
}