@charset "utf-8";

/*==================================================
ニュースティッカーのためのcss
===================================*/
/*ニュース1行の周りの余白*/
.slider a {
  display: block;
  background: #fff;
  padding: 20px;
}

/*日付*/
.slider span {
  display: inline-block;
  font-size: 0.8rem;
  margin-right: 10px;
  color: #777;
}

/* 320px以下の見た目 */
@media screen and (max-width: 320px) {
  .slider {
    padding: 20px;
    background: #fff;
  }

  .slider li {
    border-bottom: 1px dashed #ccc;
  }

  .slider li:last-child {
    border-bottom: none;
  }
  .slider span {
    display: block;
    padding-bottom: 10px;
  }
}

/*========= レイアウトのためのCSS ===============*/

body {
  width: 100%;
  height: 100vh;
  vertical-align: middle;
  padding: 25vh 0;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  background-image: linear-gradient(
    109.6deg,
    rgba(253, 199, 141, 1) 11.3%,
    rgba(249, 143, 253, 1) 100.2%
  );
}

li {
  list-style-type: none;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
}

h1 {
  text-align: center;
  font-size: 1.5rem;
  margin: 5px 0;
  color: #fff;
  text-shadow: 1px 1px 2px #333;
}

h2 {
  position: relative;
  display: block;
  text-align: center;
  background: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));
  color: #fff;
  text-shadow: 1px 1px 2px #333;
  font-weight: bold;
  padding: 5px 10px 5px;
  font-size: 17px;
  vertical-align: middle;
}

a {
  color: #333;
  text-decoration: none;
}

p {
  text-align: center;
  margin: 0 0 30px 0;
  color: #fff;
  text-shadow: 1px 1px 2px #333;
}