main{
  margin-bottom:0px; /*フッターの上の隙間**/
}
    .top {
            margin: 0 auto;
            letter-spacing: 2px;
        }
        .top div {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .youtube{
        margin:0 2% 20px;
        width:96%;
        }
        .top .content {
            width: 100%;
            background-color: #343A40;
            color: #fff;
            padding:80px 0;
        }
        .top .content .text {
            display:block;
            text-align:center;
        }
        .top .content p {
            border:1px solid #CCCCCC;
            background:#096C97;
            font-size:20px;
            margin:1em auto 0;
            max-width:18em;
        }
        
        .top h2{
        font-size:23px;
        }
        .top .content p:hover{
         background-color: #004C66;
        }
        .top .content p a{
        padding:10px;
        display:block;
        color:#fff;
        }
        .top .content p a:hover{
        text-decoration:none;
        }

        .top .parallax {
            background-attachment: fixed;
            width: 100%;
            padding-top: 66.66%;
            background-position: center 0;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .top div#checkbox {
            position: fixed;
            z-index: 20;
            background-color: #ff0000;
            padding: 2%;
            font-size: 10px;
            display: block;
        }
      /*.top h1{font-size:24px;  font-family: 'Playfair Display', serif;}*/
      .top h1{font-size:32px; font-family: 'Architects Daughter', cursive;}
      
        .top .bg_1 {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/001.png");
        }
        .top .bg_2 {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/04.jpg");
        }

        .top .bg_3 {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/sora.jpg");
        }
        .top .bg_4 {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/05.jpg");
        }
        .top .bg_5 {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/02.jpg");
        }
        .top .bg_wave {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/03.jpg");

        }
        
@media screen and (max-width: 600px){
        .top .bg_1 {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/001.png");
        }
        .top .bg_2 {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/04s.jpg");
        }

        .top .bg_3 {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/soras.jpg");
        }
        .top .bg_4 {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/05s.jpg");
        }
        .top .bg_5 {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/02s.jpg");
        }
        .top .bg_wave {
            background-image: url("https://tinyboybass.com/wp-content/themes/tinyboybass/assets/images/03.jpg");

        }
}


.top .box {
  width: 100%;
  height: 400px;
//  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(black, .2);
  background: lighten(#f0f4c3, 10%);
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  background-position: center 0;
}

.top .wave {
  opacity: .4;
  position: absolute;
  top: 3%;
  left: 50%;
  background: #999;
  width: 2500px;
  height: 2500px;
  margin-left: -1250px;
  margin-top: -2200px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 3000ms infinite linear;
}

.top .wave.-three {
  animation: drift 5000ms infinite linear;
}

.top .wave.-two {
  animation: drift 7000ms infinite linear;
  opacity: .1;
  background: #333;
}

.top .box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
  z-index: 11;
  transform: translate3d(0, 0, 0);
}

.top .title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  line-height: 400px;
  text-align: center;
  transform: translate3d(0, 0, 0);
  color: white;
  text-transform: uppercase;
  font-family: 'Playfair Display', serif;
  letter-spacing: .4em;
  font-size: 24px;
  text-shadow: 0 1px 0 rgba(black, .1);
  text-indent: .3em;
}
@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}