/*
スタンプカードページ用のスタイル
*/

/*
ページ内MENU
- 幅は他のコンテンツと同じ
- MENUの文字は、白
- 背景色は images/common/wood_yoko.jpg
- MENUの文字の間隔は、1em
- MENUの文字の大きさは、1.2em
- MENUの文字の上下の余白は、0.5em
*/

.page_menu {
  max-width: 900px;
  margin-inline: auto;
  border-radius: 10px;
  box-shadow: 0px 0px 15px -5px #777777;
  background-image: url(../images/common/wood_yoko.jpg);
  background-color: #936943;
  background-blend-mode: multiply;
  background-size: cover;
  padding: 1em;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 3em;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2em 1em;
    justify-content: center;
    flex-wrap: wrap;

    li {
      a {
        color: #ffffff;
        text-decoration: none;
        font-size: 1em;
        padding: 0.5em 1.5em;
        border-radius: 100px;
        box-shadow: 0px 0px 15px -5px #777777;
        transition: all 0.2s ease;
        border: 1px solid;
        font-family: "RocknRoll One", sans-serif;

        &:hover {
          background: #d56e2f;
          box-shadow: 0px 0px 15px -5px #777777;
          transform: translateY(-5px);
        }
      }
    }
  }
}

/* グレーボックス用スタイル */
.gray_box {
  h2 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 1.5em;
  }

  .talk_box .w_b_wrap_talk > .w_b_ava_box {
    width: 80px;
  }
}

/* ページ用スタイル */
main.page {
  margin-bottom: 4em;
  margin-top: 100px;
}

/* スタンプ出現アニメーション */
@keyframes stamp_appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* エリアボックス共通スタイル */
.area_box {
  padding: 2em;
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: 3em;
  border-radius: 10px;
  box-shadow: 0px 0px 15px -5px #777777;
  background-image: url(../images/common/wood_yoko.jpg);
  background-color: #936943;
  background-blend-mode: multiply;
  background-size: cover;
  width: 100%;
  box-sizing: border-box;

  h2 {
    text-align: center;
    color: white;
    margin-bottom: 1em;
  }
}

/* ログインユーザー用エリアボックス */
.area_box.is_user_logged_in {
  padding: 4em;
}

/* スタンプブック */
.stamp_book {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: unset;
  list-style: none;
  width: 100%;
  margin: 0 auto;

  li {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid #ffffff;
    padding: unset;
    overflow: hidden;

    .stamp_graphic {
      width: 100%;
      height: auto;
      display: inline-block;
    }

    .stamp_number {
      position: absolute;
      bottom: 2px;
      right: 5px;
      font-family: "Grenze", serif;
      color: #ffffff;
      font-size: 1.2em;
    }
  }
}

/* スタンプ記録ボタン */
.area_box .record {
  display: block;
  margin: 1em auto;
  background: #ff7f30;
  color: #ffffff;
  border-radius: 50px;
  padding: 0.8em 1.4em;
  text-align: center;
  box-shadow: 7px 10px 0px -5px #292724;
  cursor: pointer;
  transition: all 0.2s ease;

  &:active {
    box-shadow: 0px 0px 0px 0px #292724;
    transform: translateY(5px);
  }

  &[disabled] {
    filter: opacity(50%);
    cursor: not-allowed;
    pointer-events: none;
  }
}

/* スタンプブックサイズ表示 */
.area_box .stamp_book_size {
  text-align: right;
  color: #ffffff;
  margin: 0.5em 0 3em 0;
  font-size: 0.8rem;
}

/* ガイドメッセージ */
.area_box .guide_msg {
  text-align: center;
  color: #ffffff;
  font-size: 0.8rem;
}

/* 未ログインユーザー用スタイル */
.area_box.isnt_user_logged_in {
  text-align: center;
  color: white;

  p {
    margin-bottom: 1em;
  }

  .login_btn {
    display: inline-block;
    background: #ff7f30;
    color: #ffffff;
    border-radius: 50px;
    padding: 0.8em 1.4em;
    text-decoration: none;
    box-shadow: 7px 10px 0px -5px #292724;
    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 7px 12px 0px -5px #292724;
    }

    &:active {
      box-shadow: 0px 0px 0px 0px #292724;
      transform: translateY(5px);
    }
  }
}