html {
 scroll-behavior: smooth;
}
body{
-webkit-text-size-adjust: 100%;
margin:0;
padding:0;
font-family: "Noto Serif JP", serif;
font-weight: 100;
letter-spacing: 0.1em;
line-height: 1.5em;
background:#000;
overflow:hidden;
}
.exhibition_SP body{
 overflow:auto;
}
#loading{
 display:flex;
 z-index: 3;
 width: 100vw;
 height:100vh;
 justify-content: center;
 align-items: center;
 position:absolute;
 background:#000;
}
#loading img{
 animation:loadAnime 2s infinite linear;
 width:80px;
 height:80px;
}
@keyframes loadAnime{
 0% {transform: rotate(0deg);}
 100% {transform: rotate(360deg);}
}
@keyframes fadeOut{
 0% {opacity:1;}
 100% {opacity:0;}
}
@keyframes fadeIn{
   0% {opacity: 0;display:none;}
   1% {display:block;}
   100% {opacity: 1;}
}
.loadedStart{
 animation:fadeOut 1s;
}
.loaded{
 animation:fadeIn 1s reverse forwards;
}
#galleyArea{
 display: flex;
 animation:fadeIn 2s;
 justify-content: center;
}
#wrap {
 width:100vw;
 height:100vh;
 overflow:hidden;
 display: flex;
 align-items: flex-start;
}
.exhibition_SP.iOSstyle #wrap {
 height:calc(100vh - 150px);
}
.exhibition_SP.Androidstyle #wrap {
 height:calc(100vh - 120px);
}
#wrap::-webkit-scrollbar{
 display:none;
 height:60px;
 background: rgba(0,0,0,0);
}
#wrap::-moz-scrollbar{
 display:none;
}
#wrap::scrollbar{
 display:none;
}
#wrapInner{
 height:100%;
 margin:0;
 display: flex;
 justify-content: flex-start;

 overflow-x: scroll;
 overflow-y: hidden;
}
.exhibition_SP #wrapInner{
}
#artList{
 list-style-type: none;
 margin: 0 0 0 0;
 padding: 0;
 position: relative;
 display: flex;
 align-items: flex-start;
 text-align:center;
 height: 100%;
}
.exhibition_SP #artList{
/*
 overflow-x: scroll;
 overflow-y: hidden;
*/
font-size:1rem;
height:100%;
z-index:1;
}
.exhibition_SP.iOSstyle #artList, .exhibition_SP.Androidstyle #artList{
font-size: 0.8rem;

}
#scrollEnd{
 width: 100vw !important;
}
#scrollEnd lb{
 z-index:1;
 font-size:3.2em;
}
.exhibition_SP #scrollEnd lb{
 font-size:1.4em;
}
#scrollEnd lb #contentEnd{
font-size: 0.3em;
margin: 1em 0 0;
line-height: 1.3em;
}
.exhibition_SP #scrollEnd lb #contentEnd{
line-height: 1.2em;
font-size: 0.6em;
}
#scrollEnd lb a{
text-decoration: none;
display: block;
padding: 0 0 26px;
}
.exhibition_SP #scrollEnd lb a{
padding:0;
}
#scrollEnd img{
 width: 150px;
}
.exhibition_SP #scrollEnd img{
 width: 100px;
}
#artList li, #artList #chapterIndex{
height:100%;
width:100vw;
min-width:1300px;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
}
.exhibition_SP #artList li, .exhibition_SP #artList #chapterIndex{
min-width:550px;
}
#artList #titleImg{
 width:100vw;
}
#artList li p{
 mask-image: url("../images/ui/bg_light.webp");
 mask-size:auto 110vh;
 mask-repeat:no-repeat;
 mask-position: center top;
 width: 100%;
 height: 100%;
 min-height:800px;
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
}
.exhibition_SP #artList li p{
mask-position: center;
/*
width: 550px;
*/
}
#bgmP{
 position: absolute;
 top: 0;
 width: 100%;
 height:100vh;
 text-align: center;
 z-index:3;
 display:none;
 justify-content: center;
 align-items: center;
 animation:2s;
}
#bgmP p{
  mask-image: url("../images/ui/bg_light.webp");
  mask-size:auto 110vh;
  mask-repeat:no-repeat;
  mask-position:center top;
  width: 100%;
  height:100%;
  min-height:600px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
.exhibition_SP.iOSstyle #bgmP p{
mask-position: center 26px;
}
.exhibition_SP.Androidstyle #bgmP p{
/*
mask-position: center 13px;
*/
mask-position:center;
}
#bgmP div{
 width:508px;
 height:200px;
 color:#c4c4c4;
 z-index: 1;
}
.exhibition_SP #bgmP div{
width:354px;
height:170px;
}
.exhibition_SP.iOSstyle #bgmP div{
position: relative;
top: -3em;
}
.exhibition_SP.Androidstyle #bgmP div{
scale:0.8;
}
#bgmP div span{
 display:block;
 font-size:1.3rem;
 border-bottom:solid 2px rgba(69, 69, 69, 0.35);
 line-height: 2rem;
}
.exhibition_SP #bgmP div span{
 font-size:1rem;
 border-bottom:solid 1px rgba(69, 69, 69, 0.35);
}
#bgmP div ul{
 list-style: none;
 display:flex;
 justify-content: space-around;
 padding: 0;
 position: relative;
 top: 45px;
}
.exhibition_SP #bgmP div ul{
top:10px;
font-size: 0.8em;
}
#bgmP div ul li{
width:40px;
height:84px;
background:url("../images/ui/uisprite.webp") no-repeat;
background-size:250px auto;
display: flex;
align-items: flex-end;
justify-content: center;
cursor:pointer;
}
.exhibition_SP #bgmP div ul li{
 width:36px;
 height:72px;
 background-size:220px auto;
}
#bgmP div ul li:nth-child(1){
 background-position: -127px -158px;
}
.exhibition_SP #bgmP div ul li:nth-child(1){
 background-position: -111px -140px;
}
#bgmP div ul li:nth-child(2){
 background-position: -164px -158px;
}
.exhibition_SP #bgmP div ul li:nth-child(2){
 background-position: -145px -140px;
}
#artList #chapterIndex{
 font-size:2.2rem;
 line-height:5em;
/*
 align-items: flex-start;
*/
}
.exhibition_SP #artList #chapterIndex{
font-size:1.5rem;
line-height: 1.2em;
}
.exhibition_SP.iOSstyle #artList #chapterIndex, .exhibition_SP.Androidstyle #artList #chapterIndex{
font-size:1rem;
line-height:0.8em;
}
#artList #chapterIndex .chapterTextNum{
 display:block;
 font-size:0.5em;
 line-height: 1em;
}
.exhibition_SP #artList #chapterIndex .chapterTextNum{
margin: 1.8em 0 0;
}
.exhibition_SP.iOSstyle #artList #chapterIndex .chapterTextNum, .exhibition_SP.Androidstyle #artList #chapterIndex .chapterTextNum{
margin: 1.3em 0 0;
}
#artList #chapterIndex .chapterTextBody{
display:inline-block;
font-size: 0.6em;
line-height: 1.9em;
margin: 0 0 1.5em 0;
text-decoration: none;
}
.exhibition_SP #artList #chapterIndex .chapterTextBody{
margin: 0;
letter-spacing: 0.02em;
}
#artList #chapterIndex lb{
z-index:1;
position: relative;
bottom: 5rem;
/*
 top: calc(50vh - 550px);
*/
}
.exhibition_SP #chapterIndex lb{
top: -18vh;
}
.exhibition_SP.iOSstyle #chapterIndex lb{
top: calc(50vh - 14em);
}
.exhibition_SP.Androidstyle #chapterIndex lb{
top: calc(50vh - 13em);
}

#artList #chapter{
font-size:2rem;
line-height:5em;
text-align:center;
width:100vw;
display: flex;
justify-content: center;
align-items: center;
}
.exhibition_SP #artList #chapter{
font-size:1rem;
}
.exhibition_SP.iOSstyle #artList #chapter, .exhibition_SP.Androidstyle  #artList #chapter{
font-size:0.7rem;
top:-12em;
}
#artList #chapter lb{
 position: relative;
}
.exhibition_SP #artList #chapter lb{
width:50vw;
line-height: 2rem;
top: -6em;
}
.exhibition_SP.iOSstyle  #artList #chapter lb{
top: calc(50% - 12.5em);
}
.exhibition_SP.Androidstyle #artList #chapter lb{
top: calc(50% - 12em);
}
#artList #chapter span{
 display:block;
 font-size:0.8em;
 line-height:1.2em;
}
.exhibition_SP #artList #chapter span{
font-size:1.2em;
line-height:3.6em;
}
.exhibition_SP #artList .guideText{
 line-height: 2em;
}
.exhibition_PC #artList .guideText{
 font-size: 1.2rem;
 line-height: 2em;
}
#artList li.guideText lb{
position: absolute;
top: calc(50% - 18rem);
width: 800px;
font-size: 1.5rem;
text-align: left;
}
.exhibition_SP #artList li.guideText lb{
width:60em;
height:60%;
overflow-y: scroll;
top:calc(50% - 24em);
font-size: 0.8em;
z-index: 1;
}
.exhibition_SP.iOSstyle #artList li.guideText lb, .exhibition_SP.Androidstyle #artList li.guideText lb{
top:calc(50% - 7em);
width:35em;
height:70%;
}
#artList li.guideText lb span{
text-align:center;
display:block;
font-size:2em;
margin: 0 0 2em 0;
font-size: 1.5em;
}
.exhibition_SP #artList li.guideText lb span{
/*
font-size:1.3em;
*/
}
#artList li.artImage img{
 height:82%;
 width: auto;
}
.exhibition_SP #artList li.artImage img{
height:67%;
}
#titleImg img{
z-index:1;
}
#titleImg div{
font-size:0.8em;
z-index:1;
}
#titleImg div span{
display:block;
position: relative;
top:10px;
}
.exhibition_SP #titleImg div span{
font-size: 0.45rem;
}
.exhibition_SP.iOSstyle #titleImg div span, .exhibition_SP.Androidstyle #titleImg div span{
letter-spacing: -0.05em;
}
#artList li.artImage lb{
 position: relative;
 top:-30px;
 font-size:1rem;
 letter-spacing: normal;
 line-height: 1rem;
}
.exhibition_SP #artList li.artImage lb{
 font-size:0.6rem;
 top:-9px;
 line-height:0.2em;
}
#artList li.artImage lb span{
 display: block;
 font-size:1.5em;
 margin: 1em auto 0.4em;
 width:23em;
 line-height: 1.8em;
 border-bottom: solid 2px #6868689e;
}
.exhibition_SP #artList li.artImage lb span{
 line-height: 1.3em;
}
.artImageMain{
 height: 100%;
 position: absolute;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}
#artList .artInfoLink{
z-index: 1;
position: absolute;
right:-10.5em;
top: 38px;
background:url("../images/ui/uisprite.webp") no-repeat -0px -187px;
background-size:320px auto;
}
.exhibition_SP #artList .artInfoLink{
background:url("../images/ui/uisprite.webp") no-repeat -0px -122px;
background-size:210px auto;
right:-12.5em;
top: 16px;
}
#scbarArea{
 position:absolute;
 bottom:0;
 width:100%;
 display: flex;
 align-items:center;
 justify-content:center;
 gap: 15px;
 height:50px;
 z-index:1;
 width:100%;
}
.exhibition_SP #scbarArea{
 height:50px;
 align-items: flex-start;
 gap:3px;
 padding: 10px 0 0 0;
}

/*
#scbar::-webkit-slider-thumb {
 width:70px;
 height:17px;
 background:url("../images/ui/slider_knob.webp") no-repeat;
 -webkit-appearance: none;
 position:relative;
 bottom:7px;
}
#scbar::-moz-range-thumb {
 width:70px;
 height:17px;
 background:url("../images/ui/slider_knob.webp") no-repeat;
 -moz-appearance: none;
 position:relative;
 bottom:7px;
 border:0;
}
#scbar::slider-thumb {
 width:70px;
 height:17px;
 background:url("../images/ui/slider_knob.webp") no-repeat;
 appearance: none;
 position:relative;
 bottom:7px;
}
*/
#scbar::-webkit-slider-thumb {
 width:70px;
 height:17px;
 background:url("../images/ui/slider_knob.webp") no-repeat;
 appearance: none;
 position:relative;
 bottom:2px;
}
#scbar {
 width:50vw;
 outline: none;
 height:9px;
 background:#111;
 appearance: none;
 border-radius:4px;
}
.exhibition_SP #scbar {
 width:33vw;
 position: relative;
 top: 4px;
}
#scbar:focus {
  outline: none;
}
#autoPlay, #musicPlay, #listView, #artList .artInfoLink, #howToPlay{
   width:160px;
   height:30px;
}
.exhibition_SP #autoPlay, .exhibition_SP #musicPlay, .exhibition_SP #listView, .exhibition_SP #artList .artInfoLink, .exhibition_SP #howToPlay{
   width:105px;
   height:20px;
}
#autoPlay:hover, #musicPlay:hover, #listView:hover, .artInfoLink:hover, 
.listBack:hover, #listClose:hover, #howToPlay:hover, #scbar::-webkit-slider-thumb:hover, #bgmP ul li:hover, 
#scrollEnd lb a:hover, #chapterIndex a:hover, #menuArea a:hover, #menuArea.closeMenu:hover, #closeImage:hover, #linkArea a:hover{
 opacity:0.7;
}
#howToPlay{
   background:url("../images/ui/uisprite.webp") no-repeat 0px 0px;
   background-size:320px auto;
}
#autoPlay{
   background:url("../images/ui/uisprite.webp") no-repeat 0px -31px;
   background-size:320px auto;
}
#musicPlay{
   background:url("../images/ui/uisprite.webp") no-repeat 0px -93px;
   background-size:320px auto;
}
#listView{
 background:url("../images/ui/uisprite.webp") no-repeat -0px -156px;
 background-size:320px auto;
}
.exhibition_SP #howToPlay{
 background:url("../images/ui/uisprite.webp") no-repeat 0px 0px;
/*
 background-size:238px auto;
*/
 background-size:210px auto;
}
.exhibition_SP #autoPlay{
 background:url("../images/ui/uisprite.webp") no-repeat 0px -20px;
 background-size:210px auto;
}
.exhibition_SP #musicPlay{
 background:url("../images/ui/uisprite.webp") no-repeat 0px -61px;
 background-size:210px auto;
}
.exhibition_SP #listView{
 background:url("../images/ui/uisprite.webp") no-repeat -0px -102px;
 background-size:210px auto;
}
#artDetailArea{
text-align:center;
display:none;
z-index:5;
width: 100vw;
position:absolute;
top:0;
animation:1s;
}
#artDetail{
display:flex;
align-items: flex-start;
}
#detailImage {
margin: 0 3vh 0 0;
display: flex;
justify-content: flex-start;
align-items: center;
height:100vh;
/*
width:56vw;
*/
}
.exhibition_SP.iOSstyle #detailImage, .exhibition_SP.Androidstyle #detailImage{
align-items: flex-start;
width:40vw;
}
#detailImage img{
max-height: 100vh;
max-width:56vw;
}
.exhibition_SP #detailImage img{
max-height: calc(100vh - 100px);
}
#closeImage{
position:absolute;
top:30px;
right:30px;
background:url("../images/ui/uisprite.webp") no-repeat -59px -45px;
background-size:119px auto;
width:30px;
height:30px;
}
.exhibition_SP #closeImage{
top:3em;
right:13px;
}
.exhibition_SP.iOSstyle #closeImage, .exhibition_SP.Androidstyle #closeImage{
top:13px;
}
#detailText{
  font-size:1em;
  text-align: left;
/*
  width:36vw;
*/
  white-space: normal;
  letter-spacing: 0em;
  padding:110px 20px 0 0;
}
#detailText h2{
font-weight:normal;
}
.exhibition_SP #detailText{
padding:8em 40px 0 0;
font-size: 0.6rem;
width:56vw;
}
.exhibition_SP.iOSstyle #detailText, .exhibition_SP.Androidstyle #detailText{
padding:2em 40px 0 0;
}
.exhibition_SP #detailText h2{
 font-size:1rem;
 margin:0;
}
.exhibition_SP #detailText p{
  margin: 4px 0;
  line-height: 1.2em;
}
#kana{
  line-height: 1.2em;
  margin-bottom:60px;
}
#author,#year, #scale{
  line-height: 1.5em;
}
#explanation{
  margin:30px 0 30px 0;
  overflow-y:auto;
  scrollbar-width: thin;
  max-height:10em;
  white-space: normal;
}
.exhibition_SP #explanation{
max-height:100px;
width:90%;
}
.exhibition_SP.iOSstyle #explanation, .exhibition_SP.Androidstyle #explanation{
height:12vh;
}
#appreciate{
 font-size:0;
 list-style:none;
 margin:0;
 padding:0;
 display:flex;
 justify-content: center;
 width:256px;
}
.exhibition_SP #appreciate{
bottom: 17px;
position: relative;
}
#appreciate li{
 width: 60px;
 height: 60px;
 border-radius: 10px;
 margin: 0 2px;
 display: flex;
 align-items: center;
 justify-content: center;
 background:rgba(129, 128, 128, 0.2);
}
.exhibition_SP #appreciate li{
 width:30px;
 height:30px;
}
#appreciate li lb{
 width: 56px;
 height: 56px;
 display: block;
}
.exhibition_SP #appreciate li lb{
 width: 28px;
 height: 28px;
}

#appreciate li:nth-child(1) lb{
 background:url("../images/ui/uisprite.webp") no-repeat -159px 2px;
 background-size:314px auto, auto;
}
.exhibition_SP #appreciate li:nth-child(1) lb{
 background:url("../images/ui/uisprite.webp") no-repeat -79px 0px;
 background-size:157px auto, auto;
}
#appreciate li:nth-child(2) lb{
 background:url("../images/ui/uisprite.webp") no-repeat -216px 2px;
 background-size:314px auto, auto;
}
.exhibition_SP #appreciate li:nth-child(2) lb{
 background:url("../images/ui/uisprite.webp") no-repeat -108px 0px;
 background-size:157px auto, auto;
}
#appreciate li:nth-child(3) lb{
 background:url("../images/ui/uisprite.webp") no-repeat -159px -56px;
 background-size:314px auto, auto;
}
.exhibition_SP #appreciate li:nth-child(3) lb{
 background:url("../images/ui/uisprite.webp") no-repeat -79px -29px;
 background-size:157px auto, auto;
}
#appreciate li:nth-child(4) lb{
 background:url("../images/ui/uisprite.webp") no-repeat -217px -56px;
 background-size:314px auto, auto;
}
.exhibition_SP #appreciate li:nth-child(4) lb{
 background:url("../images/ui/uisprite.webp") no-repeat -108px -29px;
 background-size:157px auto, auto;
}
#listAreaScreen{
 position: absolute;
 top: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.75);
 display:none;
 animation:1s;
 z-index: 3;
}
#linkArea{
display:flex;
flex-direction: column;
align-items: center;
position:absolute;
bottom:10px;
width:42vw;
}
.exhibition_SP #linkArea{
bottom:73px;
width: 160px;
right: 14em;
}
#linkArea a{
display:block;
text-decoration: none;
line-height: 2em;
}
#listArea{
 width:100%;
 height:350px;
 position:absolute;
 z-index:3;
 animation:0.5s forwards;
 bottom:0;
}
.exhibition_SP #listArea{
 height:206px;
}
#listClose{
 width:30px;
 height:30px;
 background:url("../images/ui/uisprite.webp") no-repeat -59px -45px;
 background-size:119px auto;
}
@keyframes slideUP{
 0% {bottom:-380px;}
 100% {bottom:0;}
}
@keyframes slideDOWN{
 0% {bottom:0;}
 100% {bottom:-380px;}
}
@keyframes slideUPSP{
 0% {bottom:-206px;}
 100% {bottom:0;}
}
@keyframes slideDOWNSP{
 0% {bottom:0;}
 100% {bottom:-206px;}
}

#listAreaTitle{
 font-size:1.8em;
 margin: 20px 20px 10px;
 display: flex;
 justify-content: space-between;
 align-items:center;
}
.exhibition_SP #listAreaTitle{
 font-size:1em;
}
#listAreaMain{
 width:100vw;
 overflow:hidden;
}
.exhibition_SP  #listAreaMain{
 overflow-y:hidden;
 overflow-x:scroll;
}
#listAreaMain ul{
 list-style: none;
 letter-spacing: 0em;
 font-size: 0.86em;
 display: flex;
 position:relative;
 margin:0;
 padding:0 10px;
}
.exhibition_SP #listAreaMain ul{
 font-size: 0.5em;
 line-height: 1.5em;
}
#listAreaMain ul li{
 margin:0 40px 0 0;
 text-align:center;
 width:200px;
}
.exhibition_SP #listAreaMain ul li{
 margin:0 20px 0 0;
 width: 80px;
}
#listAreaMain ul li span{
 text-align:left;
 display:block;
}
#listAreaMain ul li a{
 text-decoration: none;
}
.listBack{
 width:80%;
 display: flex;
 justify-content: center;
 align-items: center;
 margin:auto;
}
.listBack img{
 width:200px;
 height:200px;
}
.exhibition_SP .listBack img{
 width:80px;
 height:80px;
}
#pnButton{
position: absolute;
top:calc(50vh - 65px);
width: calc(100vw - 20px);
}

#pnButton div{
 position: absolute;
 width:43px;
 height:130px;
 border-radius:6px;
 background:rgba(64, 64, 64, 0.5);
 display: flex;
 justify-content: center;
 align-items: center;
 animation:0.5s;
 z-index:2;
}
.exhibition_SP #pnButton div{
 width:24px;
 height:70px;
}
#pnButton #prev{
 left:20px;
 display:none;
}
#pnButton div p{
 background:url("../images/ui/uisprite.webp") no-repeat -252px -125px;
 background-size:320px auto;
 margin:0;
 width:32px;
 height:61px;
}
.exhibition_SP #pnButton div p{
 background:url("../images/ui/uisprite.webp") no-repeat -168px -80px;
 background-size:214px auto;
 height:46px;
}
#pnButton #next{
 right:20px;
}
#pnButton #next p{
 transform: scale(-1, 1);
}
#howToPlayScreen{
 position:absolute;
 width:100vw;
 height:100vh;
 background:rgba(0, 0, 0, 0.75);
 z-index:2;
 display:none;
 animation:1s;
 color: #c4c4c4;
}
#howToPlayScreen div:nth-child(1){
width:30px;
height:30px;
background: url("../images/ui/uisprite.webp") no-repeat -59px -45px;
background-size: 119px auto;
position:absolute;
right:30px;
top:30px;
font-size:0;
z-index:1;
}
.exhibition_SP #howToPlayScreen div:nth-child(1){
top: 3rem;
}
.exhibition_SP.iOSstyle #howToPlayScreen div:nth-child(1), .exhibition_SP.Androidstyle #howToPlayScreen div:nth-child(1){
top: 24px;
right: 24px;
}
#howToPlayScreen div:nth-child(2){
text-align:center;
font-size:36px;
position:relative;
top:40px;
}
.exhibition_SP #howToPlayScreen div:nth-child(2){
font-size: 1.5em;
top: 2.5em;
}
.exhibition_SP.iOSstyle #howToPlayScreen div:nth-child(2){
font-size: 1.2em;
top:2px;
}
.exhibition_SP.Androidstyle #howToPlayScreen div:nth-child(2){
font-size: 1.2em;
top:1em;
}
#howToPlayScreen ul{
 background:url("../images/ui/howtoplay.jpg") center calc(50% - 23px) no-repeat;
 background-size:auto 500px;
 list-style: none;
 font-size:15px;
 letter-spacing: 0px;
 margin: 0;
 padding: 0;
 white-space: nowrap; 
 height:100vh;
}
.exhibition_SP.iOSstyle #howToPlayScreen ul{
background-size: auto 150px;
background-position:center 37px;
position: relative;
top: -1em;
height:250px;
font-size:12px;
}
.exhibition_SP.Androidstyle #howToPlayScreen ul{
background-size: auto 150px;
background-position:center 37px;
height:250px;
font-size:12px;
}
#howToPlayScreen ul li{
display: flex;
align-items: center;
position: absolute;
}
#howToPlayScreen ul p{
border-bottom:1px solid #FFF;
position:relative;
}
#howToPlayScreen ul li:nth-child(1){
top: 50vh;
left:calc(50vw - 668px);
}
.exhibition_SP #howToPlayScreen ul li:nth-child(1){
top: calc(50% - 27px);
left:calc(50% - 645px);
}
.exhibition_SP.iOSstyle #howToPlayScreen ul li:nth-child(1){
left:calc(50% - 304px);
}
.exhibition_SP.Androidstyle #howToPlayScreen ul li:nth-child(1){
left:calc(50% - 304px);
top: calc(50% - 44px);

}


#howToPlayScreen ul li:nth-child(2){
 top: calc(50vh + 300px);
 left: calc(50vw - 462px);
}
.exhibition_SP #howToPlayScreen ul li:nth-child(2){
 top: calc(50% + 252px);
 left: calc(50% - 494px);
}
.exhibition_SP.iOSstyle #howToPlayScreen ul li:nth-child(2){
top: calc(50% + 67px);
left: calc(50% - 264px);
}
.exhibition_SP.Androidstyle #howToPlayScreen ul li:nth-child(2){
top: calc(50% + 50px);
left: calc(50% - 264px);
}
#howToPlayScreen ul li:nth-child(3){
top: calc(50vh + 300px);
left: calc(50vw - 191px);
}
.exhibition_SP #howToPlayScreen ul li:nth-child(3){
top: calc(50% + 262px);
left: calc(50% - 271px);
}
.exhibition_SP.iOSstyle #howToPlayScreen ul li:nth-child(3){
top: calc(50% + 84px);
left: calc(50% - 217px);
}
.exhibition_SP.Androidstyle #howToPlayScreen ul li:nth-child(3){
top: calc(50% + 66px);
left: calc(50% - 217px);
}
#howToPlayScreen ul li:nth-child(4){
top: calc(50vh + 335px);
left: calc(50vw - 40px);
}
.exhibition_SP #howToPlayScreen ul li:nth-child(4){
top: calc(50% + 247px);
left: calc(50% + 7px);
}
.exhibition_SP.iOSstyle #howToPlayScreen ul li:nth-child(4){
top: calc(50% + 98px);
left: calc(50% - 113px);
}
.exhibition_SP.Androidstyle #howToPlayScreen ul li:nth-child(4){
top: calc(50% + 78px);
left: calc(50% - 113px);
}
#howToPlayScreen ul li:nth-child(5){
 top: calc(50vh + 300px);
 left: calc(50vw + 189px);
}
.exhibition_SP #howToPlayScreen ul li:nth-child(5){
 top: calc(50% + 274px);
 left: calc(50% + 192px);
}
.exhibition_SP.iOSstyle #howToPlayScreen ul li:nth-child(5){
top: calc(50% + 73px);
left: calc(50% + 54px);
}
.exhibition_SP.Androidstyle #howToPlayScreen ul li:nth-child(5){
top: calc(50% + 55px);
left: calc(50% + 54px);
}
#howToPlayScreen ul li:nth-child(6){
 top: calc(50vh + 222px);
 left: calc(50vw + 450px);
}
.exhibition_SP #howToPlayScreen ul li:nth-child(6){
 top: calc(50% + 222px);
 left: calc(50% + 427px);
}
.exhibition_SP.iOSstyle #howToPlayScreen ul li:nth-child(6){
top: calc(50% + 45px);
left: calc(50% + 128px);
}
.exhibition_SP.Androidstyle #howToPlayScreen ul li:nth-child(6){
top: calc(50% + 25px);
left: calc(50% + 128px);
}



#howToPlayScreen ul li:nth-child(7){
 top: 50vh;
 left:calc(50vw + 450px);
}
.exhibition_SP #howToPlayScreen ul li:nth-child(7){
 top: calc(50% - 27px);
 left: calc(50% + 432px);
}
.exhibition_SP.iOSstyle #howToPlayScreen ul li:nth-child(7){
 top: calc(50% - 27px);
 left: calc(50% + 132px);
}
.exhibition_SP.Androidstyle #howToPlayScreen ul li:nth-child(7){
 top: calc(50% - 44px);
 left: calc(50% + 132px);
}
#howToPlayScreen ul li:nth-child(8){
 top: calc(50vh - 337px);
 left:calc(50vw + 254px);
}
.exhibition_SP #howToPlayScreen ul li:nth-child(8){
 top: calc(50% - 282px);
 left: calc(50% - 197px);
}
.exhibition_SP.iOSstyle #howToPlayScreen ul li:nth-child(8){
 top: calc(50% - 114px);
 left: calc(50% - 53px);
}
.exhibition_SP.Androidstyle #howToPlayScreen ul li:nth-child(8){
 top: calc(50% - 130px);
 left: calc(50% - 53px);
}
#howToPlayScreen ul li:nth-child(1) p{
 width:30px;
 height:1px;
 left:14px;
}
.exhibition_SP #howToPlayScreen ul li:nth-child(1) p{
 width:17px;
 left:2px;
}
#howToPlayScreen ul li:nth-child(6) p, #howToPlayScreen ul li:nth-child(7) p{
 width:30px;
 height:1px;
 right:14px;
}
.exhibition_SP #howToPlayScreen ul li:nth-child(6) p{
  width:18px;
  right: 3px;
}
.exhibition_SP #howToPlayScreen ul li:nth-child(7) p{
  width:17px;
  right:2px;
}
#howToPlayScreen ul li:nth-child(2) p, #howToPlayScreen ul li:nth-child(3) p, #howToPlayScreen ul li:nth-child(5) p{
 width: 50px;
 height: 1px;
 transform: rotate(90deg);
 top: -53px;
 left: 50%;
}
.exhibition_SP #howToPlayScreen ul li:nth-child(2) p{
 width:14px;
 top: -16px;
 left:90%;
}
.exhibition_SP #howToPlayScreen ul li:nth-child(3) p{
 width:32px;
 top: -23px;
 left:84%;
}
#howToPlayScreen ul li:nth-child(4) p{
 width: 149px;
 height: 1px;
 transform: rotate(90deg);
 top: -90px;
 left:50%;
}
.exhibition_SP #howToPlayScreen ul li:nth-child(4) p{
width:60px;
top: -43px;
left:66%;
}
.exhibition_SP.iOSstyle #howToPlayScreen ul li:nth-child(4) p, .exhibition_SP.Androidstyle #howToPlayScreen ul li:nth-child(4) p{
width:60px;
top: -38px;
left:66%;
}
.exhibition_SP #howToPlayScreen ul li:nth-child(5) p{
 width:31px;
 top:-27px;
 left:63%;
}
.exhibition_SP.iOSstyle #howToPlayScreen ul li:nth-child(5) p, .exhibition_SP.Androidstyle #howToPlayScreen ul li:nth-child(5) p{
 width:20px;
 top:-18px;
 left:20%;
}
#howToPlayScreen ul li:nth-child(8) p{
    width: 50px;
    height: 1px;
    transform: rotate(90deg);
    top: 53px;
    right: 50%;
}
.exhibition_SP #howToPlayScreen ul li:nth-child(8) p{
    width:20px;
    top:22px;
    right:34%;
}
.exhibition_SP.iOSstyle #howToPlayScreen ul li:nth-child(8) p, .exhibition_SP.Androidstyle #howToPlayScreen ul li:nth-child(8) p{
    width:8px;
    top:12px;
    right:34%;
}

#menuArea{
border-radius:6px;
background:rgba(64, 64, 64, 0.5);
display:none;
align-items: flex-start;
justify-content: center;
position:absolute;
top:20px;
right:20px;
width: 50px;
height: 50px;
animation:0.5s forwards;
overflow: hidden;
z-index: 1;
}
.exhibition_SP #menuArea{
top:3em;
width: 36px;
height: 36px;
}
.exhibition_SP.iOSstyle #menuArea, .exhibition_SP.Androidstyle #menuArea{
top:20px;
}
#menuBtn{
 font-size:0;
 width:30px;
 height:30px;
 background:url("../images/ui/uisprite.webp") no-repeat -1px -219px;
 background-size:318px auto;
 position: absolute;
 right: 10px;
 top:10px;
 z-index:1;
}
.exhibition_SP #menuBtn{
 width:27px;
 height:27px;
 background:url("../images/ui/uisprite.webp") no-repeat -1px -191px;
 background-size:278px auto;
 right:5px;
 top:5px;
}
#menuArea ul{
 margin:0;
 padding:0;
 list-style:none;
 position: relative;
 top: 60px;
}
.exhibition_SP #menuArea ul{
 top:34px;
}
#menuArea ul a{
 display:block;
 text-decoration:none;
 font-size:1.6em;
 line-height: 1.9em;
}
.exhibition_SP #menuArea ul a{
 font-size:1.1em;
}
@keyframes menuChange{
 0% {width:50px;height:50px;}
 100% {width:240px;height:280px}
}
@keyframes menuChangeRe{
 0% {width:240px;height:280px}
 100% {width:50px;height:50px;}
}
@keyframes menuChangeSP{
 0% {width:36px;height:36px;}
 100% {width:134px;height:180px}
}
@keyframes menuChangeReSP{
 0% {width:134px;height:180px}
 100% {width:36px;height:36px;}
}
#spOrientation{
 background:rgba(0, 0, 0, 0.75);
 color:#FFF;
 font-size:1.2rem;
 align-items: center;
 justify-content: center;
 position:absolute;
 top:0;
 width:100vw;
 height:100vh;
 display:flex;
 z-index: 4;
}
#spBottomSpace{
 position:absolute;
 bottom:-100px;
 height:100px;
 width:100vw;
 background:#000;
 z-index:2;
}