@charset "UTF-8";
/* CSS Document */
body{
  background-color: #E0F9FF;
  font-weight: 600;
}

:root{
	--title-color: #2E76FF;
}

h1,h2,h3,h4,h5,h6,span,p{
  margin: 0;
  padding: 0;
}

li{
  list-style: none;
}
#main{
  text-align: left;
  color: #333;
}
img{
  width: 100%;
}

.animation{
	opacity : 0;
	visibility: hidden;
	transition: 2s;
	transform: translateY(40px);
}
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}









@media screen and (min-width:1081px) {


  .cast-shadow{
    box-shadow: 10px 10px 0px 0px #43ABF3;
  }
  .cast-title{
    font-size: 5.0rem;
    padding: 100px 0 80px 0;
    color:#2E76FF;
    letter-spacing: 1.0rem;
  }


	.cast__container-wrapper {
		max-width: 1500px;
		margin: 0 auto;
	}

  .cast__container{
    width: 84%;
    margin-left: auto;
    margin-right: 0 ;
    margin-bottom: 200px;
  }

  .cast-flex{
    display: flex;
    flex-wrap: wrap;
  }

  .cast{
    width: 45%;
    height: auto;
  }

  .cast img{
    width: 100%;
    height: auto;
  }




  .cast__text{
    margin-left: 30px;
    vertical-align: top;
    width: 49%;
  }
  .cast__text ul li{
    margin-bottom: 15px;
  }
  .cast__name{
    font-size: 3.8rem;
    margin-bottom: 5px;
    letter-spacing: 0.3rem;
  }

  .cast__name span{
    font-size: 2.0rem;
  }
  .en-name{
    font-size: 1.2rem;
    margin: 5px 0px 30px 30px;
  }

  .cast__appear{
    font-size: 2.0rem;
    margin-bottom: 20px;
    background-color: #CFEEFE;
    padding: 7px;
    width: 120px;
    text-align: center;
  }



  .cast__about{
    margin: 40px 0px 100px 0px;
    font-size: 1.6rem;
    line-height: 1.8;
  }
  /* cast */



  /* staff */

	.staff__container-wrapper {
		max-width: 1500px;
		margin: 0 auto;
	}
	
  .staff__background{
    background: url("../images/cast-staff/background_1.jpg") no-repeat center center / cover;
    padding-top: 80px;
  }
  .staff__container{
    width: 83%;
    margin-left: auto;
    margin-right: 0 ;

  }
  .staff-title{
    font-size: 5.0rem;
    padding: 0px 0 80px 0;
    color:#2E76FF;
    letter-spacing: 1.0rem;
  }
  .staff-flex{
    display: flex;
    flex-wrap: wrap;
  }


  .staff__image-container{
    flex: 0 0 29%;
    margin-right: 3.5%;
    margin-bottom: 80px;
    text-align: center;
    border-radius: 10px;
    padding: 0px 0 20px 0;
  }

  .staff__image-container img{
    width: 100%;
  }
  .staff__image-sp{
    display: none;
  }

	.special-container-wrapper {
		max-width: 1500px;
		margin: 0 auto;
	}
  .special-container{
    margin-left: auto;
    margin-right: 0;

    width: 83%;
    margin-bottom: 50px;
  }
  .special-thanks__title{
    font-size: 4.0rem;
    padding: 100px 0 50px 0;
    color:#2E76FF;
    letter-spacing: 0.7rem;
  }
  .special-thanks{
    font-size: 2.0rem;
    position: relative;
  }

  .special-thanks ul {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
  }

  .special-thanks ul li {
    margin: 0 0 100px 0;
    font-size: 1.4rem;
    padding-right: 110px;
    letter-spacing: 0.4rem;
  }

  .special-thanks span{
    font-size: 3.0rem;
    margin: 0 0 0 40px;
  }
  .special-thanks__image-sp{
    display: none;
  }
  .special-thanks__image-pc{
    width: 90%;
  }
  .algin{
    padding-left: 25px;
  }


	.fukagawa-comment-wrapper {
		max-width: 1500px;
		margin: 0 auto;
	}
	
.fukagawa-container{
  background: url("../images/cast-staff/fukagawa-background.jpg") no-repeat center center / cover;
  padding: 0 0 150px 0;
}
  .fukagawa-comment img{
    position:relative;
    top:170px;
    margin-left: 190px;
    width:250px;
    z-index: 2;
  }

  .fukagawa-comment__space {
    position:sticky;
    background:#fff;
    height: 100%;
    margin: 0px 0 0px 290px;
    padding:60px 50px 60px 220px;
    font-size:12px;
    line-height:24px;
    z-index:1;
  }

  .fukagawa-comment__space h2{
    padding: 0px 0 20px 0px;
    font-size: 3.4rem;
  }
  .fukagawa-comment__name{
    margin-left: 30px;
    font-size: 1.8rem;
  }
  .fukagawa-comment__space h3{
    padding: 40px 0 20px 0;
    font-size: 2.0rem;
  }
  .fukagawa-comment__align{
    line-height: 1.8;
    font-size: 1.5rem;
    font-weight: 500;
  }




	.web-team__container-wrapper {
		max-width: 1500px;
		margin: 0 auto;
	}
  .web-team__container{
    padding: 0 0 100px 0;
  }

  .web-team__container img{
    position:relative;
    top:150px;

    margin-left: 190px;
    width:600px;
    z-index: 2;
  }
  .web-team__space{
    position:sticky;
    background:#fff;
    top:200px;
    right: 0px;
    height: 100%;
    margin: 0 0 0 290px;
    padding:200px 190px 90px 90px;
    font-size:2.0rem;
    font-weight: 400;
    line-height:24px;
    letter-spacing: 0.3rem;
    z-index:1;
  }
  .web-team{
    font-size: 3.0rem;
    color: #2E76FF;
    margin: 0px 0 20px 0;
  }
  
  .row{
    display: flex;
    flex-direction: row;
    /* gap: 20px; */
    column-gap: 40px;
    row-gap: 20px;
    width:100%;
    flex-wrap: wrap;
  }
  .web-team__member---{
    margin-right: 40px;
  }

  .supporter{
    font-size: 2.4rem;
    color: var(--title-color);
    margin: 40px 0 20px 0;
  }
  .supporter span{
    font-size: 2.2rem;

  }
  .supporter-row{
    display: flex;
  }

}









/* モバイル */
@media screen and (max-width:1080px) {

  .cast__container-sp{
    max-width: 310px;
    margin: 0 auto;
    width: auto;
  }

  .cast-title{
    font-size: 4.0rem;
    padding: 70px 0 50px 0;
    color:#2E76FF;
    letter-spacing: 1.0rem;
  }
  .cast-flex{
    display: flex;
    flex-wrap: wrap;
  }

  .cast img{
    width: 98%;
    height: auto;
  }

  .cast-shadow{
    box-shadow: 10px 10px 0px 0px #43ABF3;
  }
  .cast__text ul li{
    margin-bottom: 15px;
    font-size:1.4rem;
  }
  .cast__name{
    font-size: 3rem;
    margin:30px 0 5px 0;
    letter-spacing: 0.3rem;
  }
  .cast__name span{
    font-size: 1.8rem;
  }
  .en-name{
    font-size: 1.4rem;
    margin: 5px 0px 30px 15px;
  }

  .cast__appear{
    margin-bottom: 20px;
    background-color: #CFEEFE;
    width: 120px;
    text-align: center;
    
    font-size:1.4rem;
    padding:5px;
  }

  .cast__about{
    margin: 10px 0px 70px 0px;
    font-size: 1.4rem;

    line-height: 1.8;
  }



  .staff__background{
    padding: 0 0 80px 0;
    background: url("../images/cast-staff/background_1.jpg") no-repeat center center / cover;
  }
  .staff__container{
    margin: 0 auto;
    max-width: 340px;
  }
  .staff-title{
    font-size: 4.0rem;
    padding: 70px 10px 50px 0;
    color:#2E76FF;
    margin-left: 10px;
    letter-spacing: 1.0rem;
  }
  .staff-flex{
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .staff__image-container{
    text-align: center;
    flex: 0 0 43%;
    margin: 10px 10px ;
  }
  .staff__image-container img{
    width: 100%;
  }
  .staff__image-pc{
    display: none;
  }



  .special-thanks__title{
    font-size: 3.0rem;
  }

  .special-thanks__image-pc {
    display: none;
  }


  .special-container__sp{
    margin: 0 auto;
    max-width: 340px;
  }


  .special-thanks__title{
    font-size: 2.5rem;
    padding: 40px 0 10px 0;
    color:#2E76FF;
    letter-spacing: 0.5rem;
  }


  .special-thanks{
    display: flex;
    justify-content: center;
  }

  .special-thanks__image-container{
    width: 50%;

  }

  .special-thanks__text-container{
    width: 60%;
    margin-top: 50px;
  }

  .special-thanks__text-container li{
    margin-bottom: 50px;
    font-size: 1.0rem;
  }

  .special-thanks__text-container span{
    font-size: 1.4rem;
    margin: 0 0 0 20px;
    text-align: left;
  }

  .algin{
    padding-left: 21px;
  }


  .fukagawa-comment__space br{
      display:none
    }
  .fukagawa-container{
    background: url("../images/cast-staff/fukagawa-background.jpg") no-repeat center center / cover;
    height:100%;
    padding-bottom: 50px;
  }
  .fukagawa-comment img{
    position:relative;
    top:100px;
    left:20px;
    width:120px;
    z-index: 2;
  }

  .fukagawa-comment__space {
    position:sticky;
    background:#fff;
    height: 100%;
    margin: 10px 0 50px 55px;
    padding:20px 20px 40px 20px;
    font-size:12px;
    line-height:24px;

    z-index:1;

  }


  .fukagawa-comment__align{
    line-height: 1.8;
    font-size: 1.4rem;
    font-weight: 500;
  }
  .fukagawa-comment__space h2{
    padding: 0px 0px 30px 80px;
    font-size: 1.6rem;
  }
  .fukagawa-comment__name{
    font-size: 1.2rem;
    display: block;
    margin-top: 5px;
  }
  .fukagawa-comment__space h3{
    padding: 40px 0 0px 0;
    font-size: 1.4rem;
    padding-bottom: 20px;
  }

  .rhythm-font__sp{
    font-size: 1.6rem;

  }





.web-team__container{
  padding: 0 0 50px 0;
}
.web-team__container img{
  position:relative;
  top:60px;
  left:30px;
  width:260px;
  z-index: 2;
}
.web-team__space{
  position:sticky;
  background-color:rgb(255, 255, 255);
  height: 100%;
  margin: 0 0 0 55px;
  padding:90px 0px 30px 35px;
  font-weight: 400;
  line-height:24px;
  text-align: left;
  z-index:1;
}
.web-team{
  font-size: 1.8rem;
  color: #2E76FF;
  margin: 0px 0 5px 0px;
}
.row{
  display: flex;
  flex-direction: row;
  column-gap: 20px;
  row-gap: 5px;
  width: 100%;
  flex-wrap: wrap;
}
.web-team__member{
  margin-right: 10px;
}
.supporter__member{
  gap: 20px;
  font-size: 1.4rem;
}

.supporter{
  font-size: 1.6rem;
  color: var(--title-color);
  margin-top: 15px;
}
.supporter span{
  font-size: 1.4rem;
}


}