* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-family: "Yuji Syuku", serif;
}

:root {
  --red: #ff0000;
  --red-translucent: rgb(255 0 0 / .25);
  --white: #ffffff;
  --main-text-color: #dc3545;
  --main-text-color-hover: #b32b39;
}

/* 要素の表示 */
.d-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 要素の非表示 */
.d-none {
  display: none;
}
/* 主軸を垂直とした縦横中央揃えのFlexBox指定 */
.flexColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ページ全体 */
html, body {
  height: 100%;
}
a, img {
  user-select: none;
}
a {
  -webkit-tap-highlight-color: transparent;
}
.topContainer {
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--main-text-color);
  background: linear-gradient(#feebd2, #fcb8a1);
}

/* トップのおみくじ */
#omikujiBoxImage {
  width: 50%;
  min-width: 100px;
  margin: 1em 0;
  filter: drop-shadow(0 0 16px var(--white));
}
#drawButton {
  margin-bottom: 1em;
}

/* 共通ボタンスタイル */
.omikujiButton {
  font-size: 16px;
  color: var(--white);
  border: var(--red);
  border-radius: 25px;
  padding: .5em 1em;
  background-color: var(--main-text-color);
}
.omikujiButton:hover {
  background-color: var(--main-text-color-hover);
}
.omikujiButton:focus,
.omikujiButton:active {
  transition: .2s;
  outline: 4px solid var(--red-translucent);
}


/* おみくじの紙ページ */
.omikujiPaper {
  width: 80%;
  padding: 16px;
  border: thick double var(--red);
  outline: .2rem solid var(--red);
  background-color: var(--white);
  margin-bottom: 1em;
}
.omikujiPaper h3,
.omikujiPaper h4,
.omikujiPaper ul li {
  margin-bottom: 1em;
}
.omikujiPaper ul {
  list-style: square;
  text-align: left;
  padding: 0 .5em 0 2em;
}

/* おみくじの結果ページ */
#fortuneResult {
  height: 80vh;
  overflow-y: scroll;
}
hr {
  width: 100%;
  border-top: 2px solid var(--red-translucent);
  margin: 1em 0;
}
#resultImg {
  width: 100%;
}
#fortuneComment {
  font-size: .9rem;
  text-align: left;
}
#reTryButton {
  margin-top: 1.5em;
}

/* アニメーション */
.shakeBox {
  animation: shakeBox .3s 2;
  transform-origin: bottom center;
}
@keyframes shakeBox {
  40% { transform: rotate(-6deg); }
  80% { transform: rotate(6deg); }
}

.expansionKichi {
  transform-origin: center;
  animation: expansionKichi 1s ease-in-out;
}
@keyframes expansionKichi {
  0% { transform: scale(.8); }
  50% { transform: scale(1); }
  80% { transform: scale(1.5); }
}

.openResult {
  animation: openResult .3s ease-in-out;
}
@keyframes openResult {
  0% { transform: scale(.9); }
  100% { transform: scale(1); }
}

.bounce {
  animation: bounce .3s ease-out;
  transform-origin: bottom center;
}
@keyframes bounce {
  50% { transform: scale(1, .8); }
  100% { transform: scale(1); }
}

/* フッター */
footer {
  font-size: 11px;
}
footer a {
  color: var(--main-text-color);
}
footer p {
  font-size: .5rem;
  margin-top: 2em;
}

/* レスポンシブ対応 */
.aboutContents {
  height: 64vh;
  overflow-y: scroll;
  justify-content: normal;
}

@media screen and (min-width: 320px) {
  .topTitle {
    font-size: 2.4rem;
  }
  .omikujiPaper {
    width: 280px;
  }
}

@media screen and (min-height: 560px) {
  #topPage {
    margin: 0 0 1em 0;
  }
  .omikujiBox img {
    margin: 2em 0 1em 0;
  }
  #drawButton {
    margin: 1.5em 0 2em 0;
  }
  .aboutContents {
    height: auto;
    padding: 16px;
    overflow: hidden;
  }
}