/* Cookie同意ポップアップ1（.cookie-consent） */
.cookie-consent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: -200px;
  left: calc(50% - 90%/2);
  width: 90%;
  font-size: 12px;
  background: #fff;
  padding: 1.2em;
  box-sizing: border-box;
  border: 1px solid #ddd;
  visibility: visible;
  transition: .5s;
  z-index: 1000;
  font-family: 'japanese_font', 'maru_gothic_pro', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
  color: #000;
}

.cookie-consent.is-show {
  bottom: 30px;
}

.cookie-text {
  width: 90%;
  color: #000;
}

.cookie-agree {
  color: #fff;
  background: dodgerblue;
  padding: .5em 1.5em;
}

.cookie-agree:hover {
  cursor: pointer;
}

.cc-hide1 {
  display: none;
}

.cc-hide2 {
  animation: hide 1s linear 0s;
  animation-fill-mode: forwards;
}

/* Cookie同意ポップアップ2（.beta-consent） */
.beta-consent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: -200px;
  left: calc(50% - 90%/2);
  width: 90%;
  font-size: 12px;
  background: #fff;
  padding: 2em;
  box-sizing: border-box;
  border: 1px solid #ddd;
  visibility: visible;
  transition: .5s;
  z-index: 1000;
  font-family: 'japanese_font', 'maru_gothic_pro', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
  color: #000; /* テキストの色を指定 */
}

.beta-consent.beta-is-show {
  top: 100px;
}

.beta-text {
  width: 90%;
}

.beta-agree {
  color: #fff;
  background: dodgerblue;
  padding: .5em 1.5em;
}

.beta-agree:hover {
  cursor: pointer;
}

.betacc-hide1 {
  display: none;
}

.betacc-hide2 {
  animation: hide 1s linear 0s;
  animation-fill-mode: forwards;
}

/* モバイルデバイス用のスタイル */
@media screen and (max-width: 650px) {
  .cookie-consent,
  .beta-consent {
    flex-direction: column;
    width: 300px;
    left: calc(50% - 300px/2);
  }

  .cookie-text,
  .beta-text {
    width: 100%;
    margin-bottom: 1em;
  }
}