/* Both the image and the text overwrap has to be in the same <div class="banner001"> */

/*##### banner001 #####*/
.banner001{
  position: relative; /*親要素にrelative*/
  z-index: 100;
}

.banner001-box{
  margin: 0;
  position: absolute;
  width: 100%;
  height: 60%;
  background-color:rgba(42,42,42,0.5);
  
  /*中央寄せの「おまじない」*/
  top: 50%;
  transform: translateY(-50%);
}

.banner001-text{
      font-family: 'Limelight', cursive;
  margin: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  align-content: center;

  /*中央寄せの「おまじない」*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.banner001-text-color{
  color: #fff;

}

.banner001-text-color-BW{
  color:lightgray;
  background-color:rgba(42,42,42,0.5);
}

.banner002{
  position: relative; /*親要素にrelative*/
  z-index: 100;

}

.banner002{
    position: relative;
    overflow: hidden;
}

.banner002-R{
  float: right;
  width: 30%;
}
.banner002-L{
  float: left;
  width: 70%;
}

.banner002-box{
  margin: 0;
  position: absolute;
  width: 100%;
  height: 60%;
  background-color:rgba(42,42,42,0.5);
  
  /*中央寄せの「おまじない」*/
  top: 50%;
  transform: translateY(-50%);
}

.banner002-box2{
  margin: 0;
  position: absolute;
  width: 100%;
  height: 60%;
  background-color:rgba(42,42,42,0.3);
  
  /*中央寄せの「おまじない」*/
  top: 50%;
  transform: translateY(-50%);
}

.banner002-text{
    font-family: 'Limelight', cursive;

  margin: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  align-content: center;

  /*中央寄せの「おまじない」*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.banner002-text2{

}

.banner002-text-color{
  color: #fff;
}

.banner002-text-color-BW{
  color:lightgray;
}

.banner002-text2-color{
  color: #520;
}

.font-directory{
  font-size: 150%;
}

.font-country{
  font-size: 150%;
}

.font-city{
  font-size: 100%;
}

.font-cat2{
  font-size: 100%;
}

.font-cat2-2{
  font-size: 80%;
}

.font-cat1{
  font-size: 100%;
}

.font-cat3{
  font-size: 60%;
}


@media screen and (max-width:768px){

    .banner002-L{
        width:70%;
        float:left;
    }

    .banner002-R{
        width:30%;
        float:right;
    }


.banner002-text{
    font-family: 'Limelight', cursive;
  margin: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  align-content: center;

  /*中央寄せの「おまじない」*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
}