body {
    margin:0;  }


  body {
    /*背景グラデーションのやつ*/
    /* Firefox */
    background: -moz-linear-gradient(top, rgb(36, 75, 133), #ddd);
    /* Chrome , Safari */
    background: -webkit-linear-gradient(top, rgb(209, 128, 62), #ddd);
    /* IE11 */
    background: linear-gradient(to bottom, rgb(29, 65, 99), rgb(153, 37, 37));
    /* 代用 */
    background-color: rgba(214, 149, 63, 0.788);
    /*グラデやつ終われ*/
  }
  
/*大文字*/
h1{color:rgb(228, 118, 91);}
/*文字*/
p{color:rgb(255, 255, 255);}
/*雲*/
.hidariue{position:fixed;top: 0px; z-index:100;pointer-events: none;
}
.migisita{position: fixed;bottom: 0px;right: 0px;pointer-events: none;
}
/*メニューバー*/
.rogo{background-color: rgb(102, 0, 0);}
.rogo2{background-color: rgb(255, 255, 255);height: 250px;}
.rogo2 img{margin-top: 50px;}
.header{clear:both;}
.container{clear: both;display: flex;flex-direction:row;margin: 0%;}
div.item{width: 25%;height: 30%;/**background-color:#eba894 ;**/ margin:0%; min-height: 40px; display: flex; justify-content: center;}
.titel{margin-left: 5%;}
.item{padding-top: 10px;}
  .border-solid {
        border: 2px solid #ff6347;clear: both; margin-left: 30px; margin-right: 30px;
      }
/*上に行くボタン*/
.button{width: 150px;height: 150px; clear: both; float: right;
  overflow: visible; cursor: pointer; position: fixed; bottom: 40px;right: 10px;}

/*HPメインビジュアルより下*/
.mainvisual{height: 400px;/*background-color: cadetblue;*/}
.video{height: 400px; /*background-color: darkgoldenrod;*/ display: flex;flex-wrap: wrap;margin-left: 40px;}
.charaHP{height: 400px; /*background-color: cyan; */display: flex;flex-wrap: wrap;margin-left: 40px;}
#charaHP{margin-left: 20px;}
.dougu{height: 400px; /*background-color: darkgray; */display: flex;flex-wrap: wrap;margin-left: 40px;}
.human{height: 400px; /*background-color: darkolivegreen;*/ display: flex;flex-wrap: wrap;margin-left: 40px;}
.sns3{margin-left: 90px;}
.midasi{margin-top: 80px;}

.setumei2{width: 600px; background-color: rgb(107, 89, 28); margin-left: 240px;font-size: 25px;}
.setumei{width: 600px; background-color: rgb(107, 89, 28); margin-left: 30px;font-size: 25px;}
.setumei p{margin: 40px;}
.setumei2 p{margin: 40px;}


.HP{margin-top: 200px;}
.HP2{margin-top: 50px; margin-left: 400px;}
.HP3{margin-top: 0px; margin-right: 20px;}

/*キャラクター説明右に寄せてるやつ*/
.hidari{clear: both;display: flex;}
.migi{background-color: rgb(107, 89, 28);width: 1500px; height: 300px;margin: 30px;margin-top: 250px;font-size: 25px;}
.migi p{margin-left: 40px;margin-top: 40px;}

.cp_cssslider{height: 800px;}
#profile{margin: 3%;display: flex;flex-direction: row;}
#test1{font-size: 30px;}
#test2{font-size: 30px;}
#test3{font-size: 30px;}
#test4{font-size: 30px;}
#test5{font-size: 30px;}
#test6{font-size: 30px;}
#test7{font-size: 30px;}
#test8{font-size: 30px;}
#test9{font-size: 30px;}
/*図鑑系画像差し込み部分*/
div#works{display: flex;flex-wrap: wrap; margin-left: 5%;}
.wks{width: 250px;height: 250px;object-fit: cover;}
div.work{width: 250px;height: 250px;background-color: rgb(107, 89, 28);margin:7px;margin-bottom: 50px;}

.chr{width: 135px;height: 135px;object-fit: cover;}
div#chara{display: flex;flex-wrap: wrap; margin-left: 3%;}
div.chara{width: 135px;height: 135px;background-color: rgb(107, 89, 28);margin:7px;margin-bottom: 50px;}

/*紹介ページ*/
#uge{margin-left: 100px;}
#ntest{clear: both; display: flex;flex-wrap: wrap;margin-left: 100px;}
.honnbun{margin-top: 0px;}
.gazo{margin-top: 80px; margin-left: 30px;}
.kusoga{width: 400px;}


/*スマホ幅テスト*/
.test{width: 497px;background-color: aquamarine;}


.img-box {
  position: relative;
}
.img-box .active {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: 0.5s;
}
.img-box:hover .active {
  opacity: 1;
} 


@media screen and (max-width: 600px) {
body{background-color:rgb(10, 9, 39);}
div#rink{margin: 0.1%;display: flex;}



#sns{display:flex;flex-direction: column;}
}
p{margin:2%;}
a{text-decoration: none;}

.header {
  position:relative;
  text-align:center;
background-color: #ffffff;
  color:rgb(102, 0, 0);
  background-blend-mode: color-burn;
  background-size: cover;
}




/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}