@charset "UTF-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
vertical-align: baseline;
border: 0;
outline: 0;
background: transparent
}

.seven_map_sp{
display: none;
}

.seven_map{
width: 100%;
height: 100vh;
position: relative;
background: url("../img/fantasy/map_bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.seven_map div{
z-index: 10;
opacity: 0;
}

#btn_sun {position: absolute; width: 25%; top: 5%; left: 34%; animation-delay: 0.4s; }
#btn_moon {position: absolute; width: 25%;  top: 13.5%; left: 61.5%; animation-delay: 0.8s; }
#btn_fire {position: absolute; width: 25%;  top: 39%; left: 73.5%; animation-delay: 1.2s; }
#btn_water {position: absolute; width: 25%;  top: 62%; left: 52%; animation-delay: 1.6s; }
#btn_wood {position: absolute; width: 25%;  top: 65%; left: 24%; animation-delay: 2.0s; }
#btn_metal {position: absolute; width: 25%;  top: 42%; left: 2.5%; animation-delay: 2.4s; }
#btn_earth {position: absolute; width: 25%;  top: 15%; left: 9.5%; animation-delay: 2.8s; }


body.loaded .seven_map div{
  animation: fadeIn 2s ease-out forwards;
}

.seven_map div#btn_book{
position: relative;
width: 180px;
top: 50%;
left: 50%;
  transform: translate(-50%, -50%); /* 中央配置のみ担当 */
}
.btn_inner {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  transform: rotate(0deg); /* 初期は回転なし */
  transform-origin: center center; /* 回転の支点を中央に */
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.seven_map div:hover {
  transition: transform 0.5s;
  transform: rotate(-5deg) ;
}

.seven_map div#btn_book:hover {
  transition: transform 0.5s;
}


#btn_book:hover .btn_inner {
  transform: rotate(180deg);
}

/*===================================
BGM
===================================*/
#top_volume {
z-index: 50;
position: absolute;
right:30px;
bottom: 30px;
text-align: center;
width: 35px;
height: 35px;
color: #fff;
animation-delay: 3.2s; 
}
#top_volume p {
position: relative;
cursor: pointer;
}
#top_volume p img {
width: 100%;
height: auto;
}
#pausebtn {
display: none;
z-index: 100;
}

@media screen and (max-width:700px){

.seven_map{
display: none;
}
.seven_map_sp{
display: block;
width: 100%;
position: relative;
background: url("../img/fantasy/map_sp_bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
overflow: hidden;
      height: 100vh;
      height: 100dvh;
      height: calc(var(--real-vh, 1vh) * 100);
}
.seven_map_sp div{
z-index: 10;
opacity: 0;
}

#btn_sun_sp {position: absolute; width: 36%; top: 0; left: 34%; animation-delay: 0.4s; }
#btn_moon_sp {position: absolute; width: 40%;  top: 13.5%; left: 59.5%; animation-delay: 0.8s; }
#btn_fire_sp {position: absolute; width: 40%;  top: 39%; right: -3%; animation-delay: 1.2s; }
#btn_water_sp {position: absolute; width: 40%;  bottom: 15%; left: 54%; animation-delay: 1.6s; }
#btn_wood_sp {position: absolute; width: 40%;  bottom: 4%; left: 16%; animation-delay: 2.0s; }
#btn_metal_sp {position: absolute; width: 40%;  top: 47%; left: 0; animation-delay: 2.4s; }
#btn_earth_sp {position: absolute; width: 40%;  top: 20%; left: 0%; animation-delay: 2.8s; }


.seven_map_sp #btn_book_sp{
position: absolute;
width: 34%;
max-width:150px;
top: 50%;
left: 50%;
  transform:  translate(-50%, -50%);
}

body.loaded .seven_map_sp div{
  animation: fadeIn 2s ease-out forwards;
}



}