nav ul{
    display: table;
    margin: 0 auto;
    padding: 0 ;
    width: 80%;
    text-align: center;
    }
    nav li{
    display: table-cell;
    min-width: 50px;
    }
    nav a{
    display: block;
    width: 100%;
    text-decoration: none;
    color: #555;
    padding-bottom: 5px;
    }
    nav li.current{
    border-bottom: 3px solid #92D050;
    }
    nav li:hover{
    color: #E7DA66;
    border-bottom: 3px solid #F0E475;
    }

    li img {
        width: 40%;
    }

    .ue header {
        
        display: flex;
        font-size: 20px;
        line-height:100px;
        font-family: serif;
        text-align: center;
       }
       .box2 a p {
        font-family: serif;
        
       }
      .head  {
        width: 100px ;
        height: 7%;
       }
       .ue header a {
        padding: 0px 1vw;
       }

          /*PCとスマホ版の切り替えるPG*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}
/*ここまで*/

header a {
    color: #444444;
}





body {
  background-color: #1f1f1f;

}

.ue a {
  color: white;
}


.gaiyou p {
  color: white;
  
font-family:  "Yu Gothic", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro",  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;;

}
.gaiyou h2 {
  color: rgb(78, 78, 78);
  background-color: #ffe600;
  padding: 0.5em;
}

.pc .gaiyou {
  margin: 0 20%;
}

.sp .gaiyou {
  margin: 0 2%;
}

.sp .png img {
  width: 90%;
  margin: 0 2%;
}
.pc .png img {
  width: 40%;
  margin: 0 20%;
}
.pc .png video {
  width: 40%;
  margin: 0 20%;
}
.pp img {
  width: 100%;
}
.sp .png video {
  width: 90%;
  margin: 0 2%;
}

.gaiyou h3 {
  color: white;
  background: linear-gradient(transparent 60%, rgb(55, 0, 255) 30%);
  width: 350px;
}


.contact p {
  font-family:  "Yu Gothic", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro",  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;;

}
.contact { 
  background-color: #e0e0e0;
 
 
 
}
h4{
  color: white;
}
h5 {
  color: white;
}
input { 
  color: white;
 
 
}
.contact {
  text-align: center;
}




.png {
  text-align: center;
}
.gaiyou0 {
  text-align: center;
  background-color: #e0e0e0;
}

.gaiyou0 img {
  width: 40%;
}


/*** スライドショー ***/
.slide-show{
  position: relative; /*子要素の起点*/
  margin: 0 auto; /*中央配置*/
  width: 100%;
  height: 40vw; /*任意の高さ*/
  overflow: hidden; /*外側要素の非表示*/
}
 
/*** スライド(画像) ***/
.slide-show > video{
  position: absolute;
  top: 0;
  left: 100%; /*右側へ隠す*/
  width: 100%;
  height: 100%;
  animation: slide 20s linear forwards infinite; /*スライドアニメーション（ループ）*/
}
/*1枚目*/
.slide-show > video:nth-of-type(1){
  animation: slide 20s linear forwards infinite, slide-start 20s linear; /*2つのアニメーション*/
}

/*** 2枚目移行は 1/4時間ずつ遅らせる ***/
.slide-show > video:nth-of-type(2) {
  animation-delay: 5s; /* 1/4の遅延 */
}
.slide-show > video:nth-of-type(3) {
  animation-delay: 10s; /* 2/4の遅延 */
}
.slide-show > video:nth-of-type(4){
  animation-delay: 15s; /* 3/4の遅延 */
}


/*** スライドアニメーション ***/
@keyframes slide{
  0% {
    left: 100%; /*右*/
  }
  3%, 25%{ /*画像が4枚なので 1/4 まで*/
    left: 0; /*表示*/
  }
  28%,100%{
    left: -100%; /*左*/
  }
}


/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start{
  0%,25%{
    left: 0; /*表示*/
  }
  28%,100%{
    left: -100%; /*左へ隠す*/
  }
}

/*** サンプル用装飾 ***/
body{

  padding: 1rem;
}