@charset "utf-8";
/* グローバル */

.cpbn_1, .cpbn_2, .cpbn_3, .svbn_1, .svbn_2, .svbn_3, .brbn  {
  color: #FFFFFF;
  margin-right: auto;
  margin-left: auto;
}
.cpbn_1 {
  background-image: url(img/cp_img_bn1.jpg);
}
.cpbn_2 {
  background-image: url(img/cp_img_bn2.jpg);
}
.cpbn_3 {
  background-image: url(img/cp_img_bn3.jpg);
}
.svbn_1 {
  background-image: url(img/sv_img_bn1.jpg);
}
.svbn_2 {
  background-image: url(img/sv_img_bn2.jpg);
}
.svbn_3 {
  background-image: url(img/sv_img_bn3.jpg);
}
.brbn {
  background-image: url(img/cp_img.jpg);
}
.tcbn {
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 2em;
}
.bn_text {
  margin-left: auto;
  margin-right: auto;
}
.bn_text h1 {
  font-family: 'Fjalla One', sans-serif;
}
.top_box{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  color: #FFFFFF;
}
.top_box li{
  width: 30%;
  position: relative;
}
.top_box li a{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  text-indent: 100%; /*テキスト非表示*/
  white-space: nowrap; /*テキスト非表示*/
  overflow: hidden; /*テキスト非表示*/
}
.top_box li a:hover{
  opacity:0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
  background: #fff;
  }
.top_box h3{
  font-family: 'Fjalla One', sans-serif;
  text-align: center
}
.top_box p{
  text-align: center
}
.honbun_flex {
  display: flex
}

/* スマートフォン */
@media only screen and ( min-width : 285px ) and (max-width : 600px ){

.cpbn_1, .cpbn_2, .cpbn_3, .svbn_1, .svbn_2, .svbn_3, .brbn  {
  width: 100vw;
  height: 95px;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 45px;
  margin-bottom: 20px;
}
.bn_text {
  max-width: 600px;
  padding-left: 20px;
}
.bn_text h1 {
  font-size: 24px;
}
.bn_text h2 {
  font-size: 12px;
}
.top_box h3{
  font-size: 18px;
  margin-top: 70%;
}
.top_box p{
  font-size: 80%;
  margin-top: 5px;
}
.top_box div{
  font-size: 80%;
  margin-top: 10%;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
  
}

/* タブレット */
@media only screen and (min-width : 601px ) and ( max-width : 960px ){
	
.cpbn_1, .cpbn_2, .cpbn_3, .svbn_1, .svbn_2, .svbn_3, .brbn  {
  width: 100vw;
  height: 120px;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 60px;
  margin-bottom: 30px;
}
.bn_text {
  max-width: 960px;
  padding-left: 30px;
}
.bn_text h1 {
  font-size: 30px;
}
.bn_text h2 {
  font-size: 15px;
}
.top_box h3{
  font-size: 20px;
  margin-top: 25%;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
  text-shadow: 0px 0px 5px #333333;
}
.top_box p{
  font-size: 80%;
  margin-top: 5px;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
  text-shadow: 0px 0px 5px #333333;
}
.top_box div{
  font-size: 80%;
  margin-top: 20%;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
  
}

/* デスクトップ  */
@media only screen and (min-width : 961px ){

.cpbn_1, .cpbn_2, .cpbn_3, .svbn_1, .svbn_2, .svbn_3, .brbn  {
  height: 150px;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 90px;
  margin-bottom: 40px;
  max-width: 960px;
  padding-left: 40px;
}
.bn_text {
  max-width: 1000px;
}

.bn_text h1 {
  font-size: 40px;
}
.bn_text h2 {
  font-size: 20px;
}
.top_box h3{
  font-size: 25px;
  margin-top: 65px;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
  text-shadow: 0px 0px 5px #333333;
}
.top_box p{
  font-size: 90%;
  margin-top: 5px;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
  text-shadow: 0px 0px 5px #333333;
}
.top_box div{
  font-size: 80%;
  margin-top: 70px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
  
}