@charset "utf-8";
/****ブレイクポイントは880pxにする****/

/********************************
TOP画像=top
*********************************/

.top{
  height: 400px;
  margin: auto;
  padding-top: 150px;
  margin-bottom: 30px;
  background-image: url(../img/index/index-top.jpg);
  background-size: cover;
}

.top-text{
  color:#fff;
  padding-bottom: 90px;
  margin-right: 8%;
  margin-left: 50%;
}

/********************************
導入=introduction
*********************************/


.jump{
  color: #555;
  font-weight: bold;
  text-decoration: underline;
}

.jump a:hover{
  text-decoration: underline;
  opacity: 0.9;
}


/********************************
新着情報=news
*********************************/

.news{
  margin:50px auto 100px auto;
  text-align: center;

}

.news h3{
  font-size: 1.8vw;
  font-weight: bold;
  display: inline-block;
  letter-spacing: 10px;
  line-height: 2.0 ;
}

.news hr{
  width:80%;
margin: auto;
}

.news-table{
  width:80%;
  border-top:1px solid #333;
  border-bottom: 1px solid #333;
  margin: 15px auto;
}

.news-table td{
  font-size: 1.3vw;
}

.date{
  width:30%;
  padding:5px;
  text-align: center;
}

.info{
  text-align: left;
  vertical-align:middle;
}

.info span{
  font-weight: bold;
  text-decoration: underline;
}

.news-table_sp  {
  display: none;
}
/********************************
campaign
********************************/

.campaign{
text-align: center;
}

.campaign img{
  width:45%;
  margin: auto;

}

.reserve{
  width:80%;
  margin: auto;
}

.reserve  p{
  font-size: 1.6vw;
  line-height: 2.5;
  font-weight: bold; 
  margin: 40px 5% 50px 5%;
}

.br_sp{
  display: none;
}

.reserve p{
  font-size: 1.6vw;
  line-height: 2.5;
}
/*
.reserve img{
  width:50%;
  border: 1px solid #ccc;
  border-radius: 10px;
}
*/

.reserve span{
  color: #222;
  font-family: Meiryo;
  font-size: 1em;
  padding: 10px 15px;
  border-radius: 25px;
  border:1px solid rgb(21, 65, 12);
  border-bottom:4px solid #222;
  border-right:4px solid #222;
  text-decoration: none;
}

.reserve a:hover{
  text-decoration: none;
}

.reserve a:hover{
  text-decoration: none;
  opacity: 0.9;
}

.reserve a:active{
  text-decoration: none;
  transform: translateY(4px);
  transform: translateX(4px);
  border-bottom: 0px solid #222;
}

#img{
  padding-top: 180px;
    margin-top:-180px;
}

.br_sp{
  display: none;
}

.br-sp{
  display: none;
}

hr{
  display: none;
}

/********************************************
PC用CSSここまで、以下はスマホ用CSS
*********************************************/

/*スマホ・タブレット用*/
@media screen and (max-width: 880px) {
  /* 880px以下に適用されるCSS（スマホ用） */
.br_pc{
  display:none;
}


.br-sp{display: block;
}

.introduction-text p{
  font-size: 3vw;
}


hr{
  display: block;
}

.news{
  margin-bottom: 80px;
}

.news h3{
  font-size:3.8vw;
}

.news-table{
  display:none;
}


.news-table_sp{
  display: inline-block;
  justify-content: center;
}

.news-table_sp td{
  font-size: 3vw;
}

.date_sp,
.info_sp{
  display: flex;
  justify-content: center;
}


.campaign{
  display: block;
}

.campaign{
  display: block;
  margin: auto;
  text-align: center;
}


.campaign img{
  width:80%;
}

.reserve{
  width:90%;
  margin: auto;
}

.reserve p{
  font-size: 1em;
}

.reserve span{
  font-size: 1.5em;
  margin: 10px;
}

}/**スマホ用**/