/* .routeCursorBox a {
  border: 1px solid skyblue;
  border-radius: 30%;
} */
* {
  margin: 0;
  padding: 0;
  /* color:#333; */
}
.html {
  height: 100%;
}
.body {
  height: 100%;
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
}
.fontSansSerif {
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
}
/* 背景画像 */
.hananoiwaya_1 {
  background-image: url('../image/hananoiwaya_1-1.jpg');

  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: ease;
}
.hananoiwaya_1:hover {
  opacity: 0;
}
.hananoiwaya_2-1 {
  background-image: url('../image/hananoiwaya_2-1.jpg');
}
/* 右 */
.hananoiwaya_2-2 {
  background-image: url('../image/hananoiwaya_2-2.jpg');
}
/* 左 */
.hananoiwaya_2-3 {
  background-image: url('../image/hananoiwaya_2-3.jpg');
}
.hananoiwaya_3-1 {
  background-image: url('../image/hananoiwaya_3-1.jpg');
}
.hananoiwaya_4-1 {
  background-image: url('../image/hananoiwaya_4-1.jpg');
}
.hananoiwaya_5-1 {
  background-image: url('../image/hananoiwaya_5-1.jpg');
}
.hananoiwaya_5_5-1 {
  background-image: url('../image/hananoiwaya_5_5-1.jpg');
}
.hananoiwaya_5_5-2 {
  background-image: url('../image/hananoiwaya_5_5-2.jpg');
}
.hananoiwaya_5_5-3 {
  background-image: url('../image/hananoiwaya_5_5-3.jpg');
}
.hananoiwaya_5-2 {
  background-image: url('../image/hananoiwaya_5-2.jpg');
}
.hananoiwaya_5-2-1 {
  background-image: url('../image/hananoiwaya_5-2-1.jpg');
}
.hananoiwaya_5-3-1 {
  background-image: url('../image/hananoiwaya_5-3-1.jpg');
}
.hananoiwaya_6-1 {
  background-image: url('../image/hananoiwaya_6-1.jpg');
}
.hananoiwaya_7-1 {
  background-image: url('../image/hananoiwaya_7-1.jpg');
}
.hananoiwaya_8-1 {
  background-image: url('../image/hananoiwaya_8-1.jpg');
}
.hananoiwaya_9-1 {
  background-image: url('../image/hananoiwaya_9-1.jpg');
}
.hananoiwaya_9-1-2 {
  background-image: url('../image/hananoiwaya_9-1-2.jpg');
}
.hananoiwaya_10-1 {
  background-image: url('../image/hananoiwaya_10-1.jpg');
}
.hananoiwaya_11-1 {
  background-image: url('../image/hananoiwaya_11-1.jpg');
}
.hananoiwaya_11-2 {
  background-image: url('../image/hananoiwaya_11-2.jpg');
}
.hananoiwaya_11-3 {
  background-image: url('../image/hananoiwaya_11-3.jpg');
}
.hananoiwaya_12-1 {
  background-image: url('../image/hananoiwaya_12-1.jpg');
}
.hananoiwaya_12-2 {
  background-image: url('../image/hananoiwaya_12-2.jpg');
}
.hananoiwaya_12-3 {
  background-image: url('../image/hananoiwaya_12-3.jpg');
}
.hananoiwaya_12_5-1 {
  background-image: url('../image/hananoiwaya_12_5-1.jpg');
}
.hananoiwaya_13-1 {
  background-image: url('../image/hananoiwaya_13-1.jpg');
}
.hananoiwaya_13-2 {
  background-image: url('../image/hananoiwaya_13-2.jpg');
}
.hananoiwaya_13-3 {
  background-image: url('../image/hananoiwaya_13-3.jpg');
}
.hananoiwaya_13-5 {
  background-image: url('../image/hananoiwaya_13-5.jpg');
}
.hananoiwaya_13-6 {
  background-image: url('../image/hananoiwaya_13-6.jpg');
}
.hananoiwaya_14-1 {
  background-image: url('../image/hananoiwaya_14-1.jpg');
}
.hananoiwaya_15-1 {
  background-image: url('../image/hananoiwaya_15-1.jpg');
}
.hananoiwaya_16-1 {
  background-image: url('../image/hananoiwaya_16-1.jpg');

  animation: in16-1 2s ease;
}
@keyframes in16-1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.box {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  /* 左右中央寄せ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;

  /* 上下中央寄せ */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.page {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  display: flex;
  flex-direction: column;
}
.header {
  height: 70px;
  background-color: black;
  flex: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.headerIcon {
  width: 40px;
  height: 40px;
  background-color: white;
  margin: 10px;
  border-radius: 50%;
  background-size: contain;
  background-position: center;
}
/* ヘッダーアイコン  Enabled:有効状態  Disabled:無効状態 */
.quizEnabled {
  background-image: url('../image/icon_quiz_2.png');
  background-color: #c51417;
}
.quizDisabled {
  background-image: url('../image/icon_quiz_2.png');
}
.explanationEnabled {
  background-image: url('../image/icon_explanation_2.png');
  background-color: #c51417;
}
.explanationDisabled {
  background-image: url('../image/icon_explanation_2.png');
}
.eventEnabled {
  background-image: url('../image/icon_event_2.png');
  background-color: #c51417;
}
.eventDisabled {
  background-image: url('../image/icon_event_2.png');
}
.movieEnabled {
  background-image: url('../image/icon_movie_2.png');
  background-color: #c51417;
}
.movieDisabled {
  background-image: url('../image/icon_movie_2.png');
}
.shoppingEnabled {
  background-image: url('../image/icon_shopping_2.png');
  background-color: #c51417;
}
.shoppingDisabled {
  background-image: url('../image/icon_shopping_2.png');
}

.routeCursorBox {
  height: 22%;
  flex-direction: column;
}
.routeCursorBoxTop {
  height: 33%;
  flex: 1;
  display: flex;
  flex-direction: row;
}
.routeCursorBoxMid {
  height: 33%;
  flex: 1;
  display: flex;
  flex-direction: row;
}
.routeCursorBoxBottom {
  height: 33%;
  flex: 1;
  display: flex;
  flex-direction: row;
}
.footer {
  height: 13%;
}
.left {
 width: 28%; 
 height: 100%;
 flex: 1;
}
.center {
  height: 100%;
  flex: 1;
}
.right {
  width: 10%; 
  height: 100%;
  flex: 1;
}
.divLink {
  display: block;
  width: 100%; 
  height: 100%;  
}
.whiteButton {
  color: #c51417;
  text-decoration:none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.redButton {
  color: white;
  text-decoration:none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.choiceButtion {
  color: black;
  text-decoration:none;
}

iframe {
  width: 100vw;
  height: 100vh;
}
/* コンテンツ領域 */
.contents  {
  height: 52%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.iwaButton {
  width: 85%;
  height: 10%;
  background-color: white;
  font-size: 18px;
  opacity: 0.8;
  text-align: center;
  border-radius: 20px;
  margin-top: 55%;
}
.nextButton {
  width: 85%;
  height: 10%;
  background-color: #c51417;
  font-size: 18px;
  text-align: center;
  border-radius: 20px;
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 55%;
}
.prevButton {
  width: 85%;
  height: 10%;
  background-color: #c51417;
  font-size: 18px;
  text-align: center;
  border-radius: 20px;
  align-self: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 5%;
}
.iwaExplanation {
  width: 85%;
  height: 70%;
  background-color: white;
  font-size: 18px;
  border-radius: 20px;
  opacity: 0.8;
  margin-top: 8%;
  padding: 4%;
  overflow-x: scroll;
}
.iwaExTitle {
  text-align: center;
}
.contentsSheet {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
  font-size: 18px;
}
.sahouTitle {
  text-align: center;
  font-size: 28px;
  margin-top: 7%;
}
.sahouExplain {
  text-align: center;
}
.toNext {
  width: 85%;
  height: 10%;
  background: rgba(197,20,23, 1);
  opacity: 1;
  border-radius: 20px;
  margin-bottom: 6%;
}

.contentsTitle {
  width: 85%;
  height: 10%;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 20px;
  margin-top: 6%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.choice {
  width: 85%;
  height: 28%;
  background-color: white;
  text-align: center;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.choiceSmoll {
  height: 14%;
}
.choiceBig {
  height: 60%;
}
.fontSmall {
  font-size: 12px;
  line-height: 1.4em;
}
.contentsInstruction {
  width: 85%;
  height: 10%;
  background-color: white;
  color: #c51417;
  text-align: center;
  border-radius: 20px;
  margin-bottom: 6%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.colorRed {
  color: #c51417;
}
.fontBold {
  font-weight: bold;
}
.choiceChild {
  flex-grow: 1;
}
.handIcon {
  background-image: url('../image/hand.png');
  width: 80%;
  height: 80%;
  margin-top: 4%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.kaoIcon {
  background-image: url('../image/kao.png');
  width: 80%;
  height: 80%;
  margin-top: 4%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.worshipMethod {
  background-image: url('../image/omairi.png');
  width: 66%;
  height: 66%;
  margin-top: 4%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.saisennbako {
  background-image: url('../image/saisennbako.png');
  width: 70%;
  height: 70%;
  margin: 6% 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.eventAnime1 {
  background-image: url('../image/kamisama_9-2-2.gif');
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.eventAnime2 {
  background-image: url('../image/kamisama_10-3-2.gif');
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position:relative;
}
.eventAnime3 {
  background-image: url('../image/kamisama_13-4.gif');
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position:relative;
}
.eventAnime4 {
  background-image: url('../image/kamisama_13-7.gif');
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position:relative;
}
.maru {
  background-image: url('../image/maru.png');
  width: 40%;
  height: 20%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
}
.batsu {
  background-image: url('../image/batsu.png');
  width: 40%;
  height: 20%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
}

.goodJobText {
  font-size: 26px;
  margin: 3%;
}
.movieBox {
  background-color: black;
  width: 100vw;
  height: 100vh;
  z-index:-1;
}
.Link {
  display: block;
  position: absolute;
  width: 100%; 
  height: 100%;  
  top: 0;
  left: 0;
  z-index: 10;
}

.uranaiContent {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: white;

  animation: uranaiContent_visible 5s ease;
}
@keyframes uranaiContent_visible {
 0% {
  opacity: 0;
 }
 40% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
.question {
  background-color: rgb(255, 123, 0);
  opacity: 0.9;
  width: 80%;
  height: 36%;
  margin-top: 40%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
}
.uranaiChoice {
  width: 80%;
  height: 16%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
  margin: 5% 0;
}
#fortuneTelling {
  width: 40%;
  background-color: rgb(255, 123, 0);
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
#nextTime {
  width: 40%;
  background-color: rgb(255, 123, 0);
  text-align: center;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.kumo {
  background-image: url('../image/kumo.png');
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 10;
}
.uranaiStartButtonBox{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  position: absolute;
  z-index: 30;
}
.uranaiStartButton {
  background-color: #c51417;
  opacity: 0.8;
  width: 60%;
  height: 28%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  font-size: 34px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.uranaiShuffle1 {
  background-image: url('../image/uranaiShuffle_9-2.gif');
  position: absolute;
  width: 100%; 
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 20;
  visibility: hidden;
}
.uranaiShuffle2 {
  background-image: url('../image/uranaiShuffle_10-3-4.gif');
  position: absolute;
  width: 100%; 
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 20;
  visibility: hidden;
}
.uranaiShuffle3 {
  background-image: url('../image/uranaiShuffle_13-4-2.gif');
  position: absolute;
  width: 100%; 
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 20;
  visibility: hidden;
}
.uranaiShuffle4 {
  background-image: url('../image/uranaiShuffle_13-7-2.gif');
  position: absolute;
  width: 100%; 
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 20;
  visibility: hidden;
}
.uranaiImg {
  position: absolute;
  width: 100%; 
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 21;
  visibility: hidden;
}
.resultMessageBox{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: white;
  position: absolute;
}
.resultMessage {
  margin: 10%;
  background-color: #c51417;
  opacity: 0.8;
  width: 80%;
  height: 30%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  font-size: 16px;
  visibility: hidden;
  z-index: 28;
}

#uranaiLink {
  visibility: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 40;
}