@media screen and (min-width: 480px){
.pc	{ display:inline!important; 
}
.mb	{ display:none!important; 
}
#header{
  padding: 44px 100px 40px 100px;
  display: flex;
  align-items: center;  
  justify-content:space-between;
}
.eastlogo01 img{
  width: 200px;
  height: 40px;
}
.eastlogo02 img{
  width: 44px;
  height: 51px;
}
.be-gradient {
  position: relative;
  width: 100%;
  height: 908px;
  background:linear-gradient(45deg, #0097E0,#94196B);/* ここでグラデーションの色を決める */
  background-size: 500% 500%;/*サイズを大きくひきのばす*/
  animation: bggradient 20s ease infinite;
}

@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 0%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.be-gradient-first{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 908px;
  background:#0097E0;
  background-size: 100%;
  animation: bggradient-first 5s 5s ease forwards;
  opacity: 1;
}
@keyframes bggradient-first{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}
.bg-gradient-img{
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  background: url('/assets/images/50th/bg-img.png')no-repeat;
  opacity: 0;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  animation: bgImg 2.0s 0.3s ease-in forwards;
}
@keyframes bgImg{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
.logo{
  position: relative;
  width: 100%;
  height: 100%;
}
.logo > img{
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 195px;
  height: 195px;
}

.Anniversary50th-Area{
  position: relative;
}
.bg-Anniversary50th img{
  width: 100%;
}
.Anniversary50th-text{
  position: absolute;
  width: 1000px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
}

.bg-message{
  position: relative;
  background: url('/assets/images/50th/bg3-img.png')no-repeat;
  background-size: cover;
  width: 100%;
  height: 136px;
  margin-bottom: 158px;
}
.message-box{
  position: absolute;
  width: 1060px;
  height: auto;
  display: block;
  top: 79%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}


/* 以下はsvg */
#svg{
  width: 1000px;
  height: 119px;
  display: block;
  margin: 0 auto;
  fill:#0D2E80;
}

.Anniversary50th-text.fadeUp > #svg{
  animation: svgAnima 3s ease-in forwards;
}
@keyframes svgAnima {
  0% {
    fill: transparent;
    opacity: 0;
    stroke-width: 1px;
    stroke: #0D2E80;
  }
  5%{
    opacity: 0.5;
  }
  30%{
    fill: transparent;
    opacity: 1;
  }
  40%{
    fill:#0D2E80;
  }
  50%{
    stroke-width: 0;
    stroke-opacity: 0;
    stroke: rgb(255, 255, 255,0);
  }
}

#svg2{
  position: absolute;
  width: 270px;
  height: 88px;
  display: block;
  fill:#0D2E80;
}
#svg2.fadeUp{
  animation: svgAnima 5s ease-in forwards;
}
.scroll img{
  position: absolute;
  width: 80px;
  height: auto;
  bottom: 73px;
  left: 50%;
}
.scroll img.fadeUp{
  /* transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%); */
  animation: scroll-anima 3s ease-in forwards;
}
@keyframes scroll-anima {
  0% {
    opacity: 0;
  }
  60%{
    opacity: 1;
  }
}

/* 以下はテキストの調整です */
.message-area{
  width: 1060px;
  margin: 0px auto;
}
.text-block{
  position: relative;
  background-image: -moz-linear-gradient(left, rgba(234,233,244,100%),rgba(240,240,247,100%),rgba(255,255,255,0)); 
  background-image: -webkit-linear-gradient(left, rgba(234,233,244,100%),rgba(240,240,247,100%),rgba(255,255,255,0)); 
  background-image: linear-gradient(to right, rgba(234,233,244,100%),rgba(240,240,247,100%),rgba(255,255,255,0)); 
  width: 1060px;
  height: auto;
  display: block;
}
.text-block::after{
  content: '';
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-size: 300% 100%;
  background-image: -moz-linear-gradient(right, #fff 50%,rgb(255, 255, 255,0) 70%);
  background-image: -webkit-linear-gradient(right, #fff 50%,rgb(255, 255, 255,0) 70%);
  background-image: linear-gradient(to left, #fff 50%,rgb(255, 255, 255,0) 70%);
}
.message-inner.fadeUp .text-block::after{
animation: textBlockAnima 2.5s 0s forwards;
}
@keyframes textBlockAnima{
  0%{
    opacity: 1;
    background-position: left 100% center;
  }
  40%{
    opacity: 0.8;
    background-position: left 100% center;
  }
  100%{
    /* opacity:0; */
    background-position: left 0% center;
  }
}
.text{
  padding: 24px 30px;
  font-size: 14px;
  line-height:36px;
  background-image: -moz-linear-gradient(right, rgba(255,255,255,0) 50%,#121212 70%); 
  background-image: -webkit-linear-gradient(right, rgba(255,255,255,0) 50%,#121212 70%); 
  background-image: linear-gradient(to left, rgba(255,255,255,0) 50%,#121212 70%); 
  /* background:#121212; */
  /* background-position: left 0 center; */
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}
.text2{
  padding: 42px 82px 42px 30px;
  font-size: 14px;
  line-height:36px;
  background-image: -moz-linear-gradient(right, rgba(255,255,255,0) 50%,#121212 70%); 
  background-image: -webkit-linear-gradient(right, rgba(255,255,255,0) 50%,#121212 70%); 
  background-image: linear-gradient(to left, rgba(255,255,255,0) 50%,#121212 70%); 
  /* background-position: left 0 center; */
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.message-inner.fadeUp .text-block .text,
.message-inner.fadeUp .text-block .text2{
  animation: kielu 2.5s 0s forwards;
  animation-iteration-count: 1;
}
@keyframes kielu {
  0%{
    background-position: left 100% center;
  }
  40%{
    background-position: left 100% center;
  }
  100%{
    background-position: left 0% center;
  }
}
/* 画像にアニメーション */
.bg-img{
  position: relative;
  display: block;
  background-image: url('/assets/images/50th/img-photo.png');
  background-repeat: no-repeat;
  background-size: 100%;
  width: 734px;
  height: 261px;
  margin: 48px 133px 110px auto;
}
.bg-img::after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,#fff 50%,rgb(255, 255, 255,0) 70%
  );
  background-size: 300% 100%;
}
.bg-img2{
  position: relative;
  display: block;
  background-image: url('/assets/images/50th/img-photo2.png');
  background-repeat: no-repeat;
  background-size: 100%;
  width: 734px;
  height: 261px;
  margin: 48px 133px 110px auto;
}
.bg-img2::after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,#fff 50%,rgb(255, 255, 255,0) 70%
  );
  background-size: 300% 100%;
}
.message-inner.fadeUp .bg-img::after,
.message-inner.fadeUp .bg-img2::after{
  animation: kielu-left 2.5s 0s forwards;
  animation-iteration-count: 1;
}
@keyframes kielu-left {
  0%{
    opacity: 1;
    background-position: left 0% center;
  }
  40%{
    opacity: 0.8;
    background-position: left 0% center;
  }
  100%{
    background-position: left 100% center;
  }
}

.presidentnameArea{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.presidentname{
  padding-right: 30px;
  font-size: 14px;
  line-height: 28px;
}

#footer50th{
  width: 100%;
  margin-top: 172px;
}
#footer50th img{
  width: 100%;
}
}

  


/* スマホ用CSS -------------- */
@media screen and (max-width: 480px){
  .mb	{ display:inline!important; 
  }
  .pc	{ display:none!important; 
  }
  #header{
    padding: 20px;
  }
  .eastlogo01 img{
    width: 160px;
    height: 34px;
  }
  .be-gradient {
    position: relative;
    width: 100%;
    height: 510px;
    background:linear-gradient(45deg, #0097E0,#94196B);/* ここでグラデーションの色を決める */
    background-size: 500% 500%;/*サイズを大きくひきのばす*/
    animation: bggradient 20s ease infinite;
  }
  
  @keyframes bggradient{
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 0%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  .be-gradient-first{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 510px;
    background:#0097E0;
    background-size: 100%;
    animation: bggradient-first 5s 5s ease forwards;
    opacity: 1;
  }
  @keyframes bggradient-first{
    from{
      opacity: 1;
    }
    to{
      opacity: 0;
    }
  }
  .bg-gradient-img{
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background: url('/assets/images/50th/bg-img.png')no-repeat;
    opacity: 0;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
   animation: bgImg 2.0s 0.3s ease-in forwards;
  }
  @keyframes bgImg{
    from{
      opacity: 0;
    }
    to{
      opacity: 1;
    }
  }
  .logo{
    position: relative;
    width: 100%;
    height: 100%;
  }

  .logo > img{
    z-index: 2;/* ここで1番上に表示させる */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 98px;
    height: 98px;
  }
  
  .Anniversary50th-Area{
    position: relative;
  }

  .bg-Anniversary50th img{
    width: 100%;
  }

  .Anniversary50th-text{
    position: absolute;
    width: 80%;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
  
  .bg-message{
    position: relative;
    background: url('/assets/images/50th/bg3-img_sp.png')no-repeat;
    background-size: cover;
    width: 100%;
    height: 74px;
    margin-bottom: 105px;
  }

  .message-box{
    position: absolute;
    width: 100%;
    height: auto;
    display: block;
    top: 79%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    padding: 0 20px;
  }

  /* 以下はsvg */

#svg{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  fill:#0D2E80;
}

.Anniversary50th-text.fadeUp > #svg{
  animation: svgAnima 3s ease-in forwards;
}

@keyframes svgAnima {
  0% {
    fill: transparent;
    opacity: 0;
    stroke-width: 1px;
    stroke: #0D2E80;
  }
  5%{
    opacity: 0.5;
  }
  30%{
    fill: transparent;
    opacity: 1;
  }
  40%{
    fill:#0D2E80;
  }
  50%{
    stroke-width: 0;
    stroke-opacity: 0;
    stroke: rgb(255, 255, 255,0);
  }
}

#svg2{
  position: absolute;
  width: 148px;
  height: 48px;
  display: block;
  fill:#0D2E80;
}

.Anniversary50th-text.fadeUp > #svg2{
  animation: svgAnima 5s ease-in forwards;
}

.scroll img{
  position: absolute;
  width: 53px;
  height: auto;
  bottom: 75px;
  left: 142px;
}

.scroll img.fadeUp{
  /* transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%); */
  animation: scroll-anima 3s ease-in forwards;
}

@keyframes scroll-anima {
  0% {
    opacity: 0;
  }
  60%{
    opacity: 1;
  }
}

/* 以下はテキストの調整です */
.message-area{
  width: 100%;
  margin: 0px auto;
}

.text-block{
  position: relative;
  background-image: -moz-linear-gradient(left, rgba(234,233,244,100%),rgba(240,240,247,100%),rgba(255,255,255,0));
  background-image: -webkit-linear-gradient(left, rgba(234,233,244,100%),rgba(240,240,247,100%),rgba(255,255,255,0));
  background-image: linear-gradient(to right, rgba(234,233,244,100%),rgba(240,240,247,100%),rgba(255,255,255,0));
  width: 89%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.text-block::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-size: 300% 100%;
  background-image: -moz-linear-gradient(right, #fff 50%,rgb(255, 255, 255,0) 70%);
  background-image: -webkit-linear-gradient(right, #fff 50%,rgb(255, 255, 255,0) 70%);
  background-image: linear-gradient(to left, #fff 50%,rgb(255, 255, 255,0) 70%);
}

.message-inner.fadeUp .text-block::after{
  animation: textBlockAnima 2.5s 0s forwards;
}

@keyframes textBlockAnima{
  0%{
    opacity: 1;
    background-position: left 100% center;
  }
  40%{
    opacity: 0.8;
    background-position: left 100% center;
  }
  100%{
    /* opacity:0; */
    background-position: left 0% center;
  }
}

.text{
  padding: 24px 18px;
  font-size: 14px;
  line-height:30px;
  background-image: -moz-linear-gradient(right, rgba(255,255,255,0) 50%,#121212 70%);
  background-image: -webkit-linear-gradient(right, rgba(255,255,255,0) 50%,#121212 70%);
  background-image: linear-gradient(to left, rgba(255,255,255,0) 50%,#121212 70%);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text2{
  padding: 24px 18px;
  font-size: 14px;
  line-height:30px;
  background-image: -moz-linear-gradient(right, rgba(255,255,255,0) 50%,#121212 70%);
  background-image: -webkit-linear-gradient(right, rgba(255,255,255,0) 50%,#121212 70%);
  background-image: linear-gradient(to left, rgba(255,255,255,0) 50%,#121212 70%);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.message-inner.fadeUp .text-block .text,
.message-inner.fadeUp .text-block .text2{
  animation: kielu 2.5s 0s forwards;
  animation-iteration-count: 1;
}

@keyframes kielu {
  0%{
    background-position: left 100% center;
  }
  40%{
    background-position: left 100% center;
  }
  100%{
    background-position: left 0% center;
  }
}

/* 画像にアニメーション */
.bg-img{
  position: relative;
  display: block;
  background-image: url('/assets/images/50th/img-photo_sp.png');
  background-repeat: no-repeat;
  background-size: 100%;
  width: 335px;
  height: 450px;
  margin: 40px auto 80px auto;
}

.bg-img::after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,#fff 50%,rgb(255, 255, 255,0) 70%
  );
  background-size: 300% 100%;
}

.bg-img2{
  position: relative;
  display: block;
  background-image: url('/assets/images/50th/img-photo2_sp.png');
  background-repeat: no-repeat;
  background-size: 100%;
  width: 335px;
  height: 450px;
  margin: 40px auto 80px auto;
}

.bg-img2::after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,#fff 50%,rgb(255, 255, 255,0) 70%
  );
  background-size: 300% 100%;
}

.message-inner.fadeUp .bg-img::after,
.message-inner.fadeUp .bg-img2::after{
  animation: kielu-left 2.5s 0s forwards;
  animation-iteration-count: 1;
}

@keyframes kielu-left {
  0%{
    opacity: 1;
    background-position: left 0% center;
  }
  40%{
    opacity: 0.8;
    background-position: left 0% center;
  }
  100%{
    background-position: left 100% center;
  }
}

.presidentnameArea{
  display: flex;
  justify-content: flex-end;
  margin-top: 36px;
}

.presidentname{
  padding-right: 30px;
  font-size: 14px;
  line-height: 28px;
}

#footer50th{
  width: 100%;
  margin-top: 140px;
}

#footer50th img{
  width: 100%;
}

}