@charset "UTF-8";
/* common */
* {
  box-sizing: border-box;
}
html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  position: relative;
  background-position: 50% 50%;
  background-size: cover;
  background-image: url('../img/2025/top_bg.jpg');
  color: rgb(80, 80, 80);
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%
}
button {
  outline: none;
}
input, button {
  font-family: inherit;
}
/* login */
.top-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.top-wrap {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 80px);
}
.top {
  width: 100%;
}
.main-img {
  width: 100%;
  margin-bottom: 30px;
  vertical-align: bottom;
}

/* attention */
.attention-container {
  width: 100%;
  margin: 0 auto;
  padding: 5px 0;
  background: rgb(255, 255, 255);
}
.attention-wrapper {
  height: 285px;
  overflow-y: scroll;
}
.attention {
  padding: 5px 10px;
}
.attention h1 {
  margin: 0;
  font-size: 16px;
}
.attention p {
  margin: 0;
  font-size: 14px;
}
.attention ol {
  margin: 0 0 0 1.5em;
  padding: 0;
  font-size: 14px;
  counter-reset: list-count;
}
.attention li {
  line-height: 1.4rem;
  list-style-type: none;
  counter-increment: list-count;
}
.attention li::before {
  width: 1.5em;
  margin-left: -1.5em;
  display: inline-block;
  content: "("counter(list-count)")";
}
.check-area {
  width: 100%;
  background: rgb(20, 90, 110);
  padding: 10px;
}
.check-area input[type="checkbox"] {
  transform: scale(1.2);
}
.rule {
  display: block;
  text-align: center;
  color: rgb(255, 255, 255);
}
.login-box {
  margin-top: 10px;
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}
.login-box a {
  width: 128px;
  padding: 2px 5px;
  display: block;
  color: rgb(255, 255, 255);
  font-size: 16px;
  border: 1px solid rgb(255, 255, 255);
  background: rgb(120, 120, 120);
  text-decoration: none;
}
.registration {
  margin: 30px auto;
  text-align: center;
  color: rgb(255, 255, 255);
}
.registration a {
  color: rgb(150, 150, 150);
}
#login_btn.red-button {
  color: rgb(255, 255, 255);
  border: 1px solid rgb(255, 255, 255);
  background: rgb(255, 0, 0);
  transition: 0.3s;
}
#login_btn.red-button:hover {
  background: rgba(255, 0, 0, 0.6);
}
.main-footer {
  width: 100%;
  padding: 0 25px;
  text-align: center;
  position: absolute;
  bottom: 0;
}
.main-footer small {
  display: inline-block;
  font-size: 13px;
  color: rgb(255, 255, 255);
  text-align: left;
}

/* グラデーション */
.gt-wrap {
  width: 100%;
  overflow: hidden;
  position: absolute;
  height: 310px;
  top: 0;
  left: 0;
}
.gb-wrap {
  width: 100%;
  overflow: hidden;
  position: absolute;
  height: 210px;
  left: 0;
  bottom: 0;
}
.g-top {
  width: calc(100% + 20px);
  height: 300px;
  position: absolute;
  background: linear-gradient(to bottom,
  rgb(20, 90, 110) 0% 25%,
  rgba(20, 90, 110, 0.2) 100%
  );
  filter: blur(10px);
  margin: -10px -10px 0 -10px;
}
.g-bottom {
  width: calc(100% + 20px);
  height: 200px;
  bottom: 0;
  position: absolute;
  background: linear-gradient(to top,
  rgb(20, 90, 110) 0% 25%,
  rgba(20, 90, 110, 0.2) 100%
  );
  filter: blur(10px);
  margin: 0 -10px -10px -10px;
}
.oshika {
  width: 20%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.trophy {
  width: 20%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.oshika img,
.trophy img {
  width: 100%;
  vertical-align: bottom;
}
img.oshika-info {
  width: 50%;
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 1;
}

/* 767px以下の時のスタイル */
@media (max-width: 767px) {
  .top-container {
    /* padding: 20px; */
    padding: 20px 20px 100px 20px;
  }
  .top-wrap {
    /* min-height: calc(100vh - 40px); */
    min-height: calc(100vh - 120px);
  }
  .main-img {
    margin-bottom: 20px;
  }
}