@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600&display=swap');

html.spacebook {
  font-size: .73vw;
}

@media screen and (max-width: 767px) {
  html.spacebook {
    font-size: 2.4vw;
  }
}

body {
  background-color: black;
  width: 100%;
  color: white;
  margin: 0;/* bodyの余白を削除 */
  padding: 0;/* bodyの余白を削除 */
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

img {
  vertical-align: bottom;
}

h1 {
  margin: 0;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-size: 2.6rem;
}

h2 {
  font-size: 2.4rem;
}


/*お知らせ終わり*/
.news {
  margin-block: 4rem 4rem;
  text-align: center;
}

.news-list {
  width: 85%;
  list-style: none outside;
  margin: 0 auto;
  padding: .5rem 3.5rem 2.5rem;
  font-size: 1.6rem;
}

.news-list .item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #CCC;
  padding: 1.5rem;
}

.news-list .item:first-child a {
  border-top: 1px solid #CCC;
}

.news-list .item .date {
  margin: 0;
  min-width: 14rem;
  color: #999;
}

.news-list .item .category {
  margin: 0;
  min-width: 14rem;
  padding: 0 20px 0 0;
}

.news-list .item .category span {
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  background: #999;
  color: #FFF;
  text-align: center;
  padding: .5rem 2.1rem;
  font-size: .8em;
  line-height: 1;
}

.news-list .item .title {
  margin: 0;
  width: 100%;
  color: #999;
}

.news-list .item a:hover .title {
  color: white;
}

/*slider*/


.slider {
  width: 94%;
  padding: 0;
  margin: 7rem auto 0;
}

.slider img {
  width:50vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
}

.slider .slick-slide {
-webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
        transform: scale(0.8);/*左右の画像のサイズを80%に*/
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
-webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;/*矢印の色*/
  border-right: 2px solid #666;/*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left: -1.5%;
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right: -1.5%;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

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

  /*お知らせ始まり*/
  .news-list {
    padding: 0;
    margin-bottom: 4rem;
  }

  .news-list .item .category {
    display: none;
  }

  .news-list .item a {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
  }

  .news-list .item .date {
    min-width: 10rem;
  }

  .news-list .item .title {
    margin-top: .2rem;
  }

  .more h3 {
    display: none;
  }

  /*お知らせ終わり*/
}





/*bottom_banner*/
.bottom_banner {
  background-color: #dcdcdc;
  width: 100%;
  height: 4em;
  position: fixed;
  bottom: 0;
  padding: 0;
  font-size: 2rem;
}

.bottom_banner_tab {
  width: 90%;
  max-width: 980px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
}

.home {
  width: 24%;
  background-color: #fff;
  text-align: center;
  border-radius: .7em;
  padding-block: .5em;
  -webkit-box-shadow: 5px 5px 10px 1px gray;
          box-shadow: 5px 5px 10px 1px gray;
  color: #000;
}

.contact {
  width: 73%;
  background-color: #95D1C6;
  text-align: center;
  border-radius: .7em;
  padding-block: .5em;
  -webkit-box-shadow: 5px 5px 10px 1px gray;
          box-shadow: 5px 5px 10px 1px gray;
  color: #fff;
}

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

  .news {
    margin-block: 16rem 4rem;
 }
  .bottom_banner {
    font-size: 1.6rem;
  }

  /*画像ライダー*/
  .slider,
  .slick-slider {
    display: none;
  }
}

@media screen and (min-width:980px) {
  .bottom_banner {
    font-size: 24px;
  }
}