body {
  font-family: "Poppins", "Kosugi", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: "Poppins", "Kosugi", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  overscroll-behavior-y: none;
}

.notification-bar {
  position: relative;
  top: 0;
  width: 100%;
  background-color: #f1c40f;
  color: #000;
  text-align: center;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 10;
  font-size: 0.9em;
}

.notification-bar label {
  display: inline-block;
  margin-right: 10px;
}

.notification-bar button {
  background-color: #e74c3c;
  color: white;
  padding: 5px;
  width: 60px;
  height: 30px;
  margin: 0.1em 0;
  font-size: 1em;
  font-family: "Kosugi"
}

.notification-bar button:hover {
  background-color: #9e2a1d;
}

.block_trigger {
  color: #666;
  font-size: 13px;
  padding-left: 10px;
  margin-bottom: 20px;
  text-align: left;
}

.block_trigger:hover .block {
  grid-template-rows: 1fr;
}

.block {
  display: grid;
  grid-template-rows: 0fr;
  transition: .4s;
}

.update-contents {
  overflow: hidden;
  font-family: "Kosugi", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.3;
  text-align: left;
}

.update-contents span {
  display: inline-block;
  text-align: left;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  font-size: 50px;
  margin: 0;
}

.subtitle {
  text-align: center;
  color: #666;
  font-size: 18px;
  margin-top: 0px;
  margin-bottom: 5px;
}

.small {
  text-align: center;
  color: #666;
  font-size: 12px;
}

.button-group-divider {
  border-top: 1px solid #ccc;
  margin-top: 15px;
  margin-bottom: 15px;
}

.button-group {
  margin-top: 20px;
}

.button-group h2 {
  text-align: center;
  font-size: 18px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.button {
  width: 20%;
  /* 幅を設定 */
  aspect-ratio: 7/4;
  margin-bottom: 10px;
  text-align: center;
  background-color: #0e2047;
  color: #ffffff;
  font-size: clamp(4px, 2.8vw, 18px);
  border: 2px solid #0b1939;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button:hover {
  background-color: #2b63dd;
  color: #fff;
}

a {
  color: #0e2047;
}

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f8fbff;
  z-index: -1;
}

.Paper_v2 {
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px,
      transparent 27px, transparent 51px,
      rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px,
      transparent 53px, transparent 77px,
      rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px,
      transparent 79px, transparent 103px,
      rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px,
      transparent 105px, transparent 129px,
      rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px,
      transparent 27px, transparent 51px,
      rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px,
      transparent 53px, transparent 77px,
      rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px,
      transparent 79px, transparent 103px,
      rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px,
      transparent 105px, transparent 129px,
      rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px);
}