@charset "UTF-8";

/* school */
.background-stadium {
  background: url(../image/stadium.png);
  background-size: cover;
  padding: 200px 0;
  text-align: center;
  font-size: 36px;
}

.contents {
  overflow: hidden;
}
.item-four-part {
  float: left;
  padding: 20px 30px;
  text-align: center;
  width: 25%;
}

.item-three-part {
  float: left;
  text-align: center;
  width: 33%;
}

.item2 {
  float: left;
  padding: 20px 30px;
  text-align: center;
  width: 65%;
}

.item3 {
  float: left;
  padding: 20px 30px;
  text-align: center;
  width: 45%;
}

.background-about {
  background: url(../image/player.jpg);
  padding: 200px 0px;
  background-size:100%;
  
  text-align: center;
  font-size: 36px;
}

.width-two-part {
  width:50%;
}

.width-three-part{
  width: 30%;
}

.width-four-part{
  width: 25%;
}

.video {
  width:100%;              /*横幅いっぱいにwidthを指定*/
  padding-bottom: 56.25%;  /*高さをpaddingで指定(16:9)*/
  height:0px;              /*高さはpaddingで指定するためheightは0に*/
  position: relative;
}

.video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}


.box-left {
  margin-top: -15%;
  margin-left: 40%;
  max-width:40%;
  background-color: rgba(28,51,101,0.8);
  z-index: 1;
  position: absolute;
}

.box-right {
  text-align: left;
  margin-top: -15%;
  margin-left: 20%;
  max-width:40%;
  background-color: rgba(28,51,101,0.8);
  z-index: 1;
  position: absolute;
}

.box-center {
  margin-top: -5%;
  margin-left: 9%;
  max-width:80%;
  min-width: 80%;
  background-color: #dbdf1eab;
  z-index: 1;
  position: absolute;
}

.div-position {
  position: relative;
  width:100%;
}

.image-box {
  position: relative;
}

.center {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.headerrect{
  background-color: #0c1732c2;
  width: 80%;
}

.div-padding {
  padding: 5px 30px;
}

.div-margin {
  margin: auto auto;
}

.sub-title-font {
  font-size: 30px;
}

.border-bottom{
  border-bottom: solid #fff;
}

.border-top {
  border-top: solid #fff;
}

span{
	background:linear-gradient(transparent 60%, #e84b3a 60%);
}
@media all and (max-width: 1000px) {
  .pc-display {
    display: none;
  }
  .tab-display {
    display: block;
    line-height: 24px;
  }
}
@media all and (min-width: 1000px) {
  .pc-display {
    display: block;
  }
  .tab-display {
    display: none;
  }
}

/*==================================================
シャッ
===================================*/

/*背景色が伸びて出現 共通*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1.5s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*--------- 左から --------*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/*--------- 右から --------*/
.bgRLextend::before{
  animation-name:bgRLextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

/*--------- 下から --------*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/*--------- 上から --------*/
.bgUDextend::before{
  animation-name:bgUDextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}

@keyframes bgUDextendAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

#slider {
  width: 100%;
  padding-bottom: 40%;
  height: 0px;
} 

/* #slider {
  width: 100%;
   height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする */
/* }  */