#resultLoader{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("../images/loading_bg.png") center top no-repeat, linear-gradient(-90deg, #421a00, #601f00 15%, #6f2100 30%, #7c2300 50%, #6f2100 70%, #601f00 85%, #421a00);
background-size: 120%, 100%;
z-index: 2;
max-width: 520px;
}
#clockWrap{
width: 46vw;
height: 64vw;
background: url("../images/clock.png") center center no-repeat;
background-size: 100%;
position: absolute;
top:13vw;
left: 50vw;
margin-left: -23vw;
}
.clock{
position: absolute;
width: 4.8vw;
height: 15vw;
top: 40%;
left: 50%;
margin-left: -2.4vw;
transform-origin: bottom center;
}
#clockS{
animation:0.14s linear infinite rotation1;
opacity: 0.5;
}
#clockM{
animation:0.375s linear infinite rotation2;
}
#clockH{
animation:6s linear infinite rotation3;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
@keyframes rotation2{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
@keyframes rotation3{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
#clockGrass{
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
}
#loadTXT{
position: absolute;
width: 100%;
height: auto;
color: rgba(102, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.7);
font-size: 1.5rem;
text-align: center;
top:76vw;
animation:1.5s linear infinite flickTXT;
}
@keyframes flickTXT{
  0%{ opacity: 0;}
  20%{ opacity: 0; }
  60%{ opacity: 100;}
  100%{ opacity: 0; }
}
.silhouette{
position: absolute;
width: 75vw;
height: auto;
top: 86vw;
left: 50%;
margin-left: -37.5%;
}

#ctsWrap{
position: relative;
background: url("../images/loading_bg.png") center top no-repeat, linear-gradient(-90deg, #421a00, #601f00 15%, #6f2100 30%, #7c2300 50%, #6f2100 70%, #601f00 85%, #421a00);
background-size: 120%, 100%;
text-align: center;
overflow: hidden;
}


header{
position: relative;
z-index: 5;
}
header a{
display: block;
margin: 2vw auto -2vw auto;
width: 40%;
}
#result{
margin: -6vw 0 0 0;
position: relative;
z-index: 1;
}
#paper{
background: url("../images/result_paper_mid.jpg") center top no-repeat;
background-size: 100% 100%;
margin: -1vw 0;
padding:  5vw;
color: #9b532d;
}
h1{
margin: -6vw auto 5vw auto;
font-weight: normal;
}
h1 #name{
font-size: 1.1rem;
line-height: 1.4;
margin-bottom: 3vw;
}
h1 #name span{
display: inline-block;
}
h1 #catch{
font-size: 2.0rem;
line-height: 1.2;
font-feature-settings: "palt" 1;
letter-spacing: 0.0em;
width: 200%;
margin-left: -50%;
}
h1 #bookName{
font-size: 1.2rem;
line-height: 1;
width: 200%;
margin-left: -50%;
margin-top: 4vw;
font-weight: bold;
}
h1 #relation{
font-size: 3.9rem;
line-height: 1.1;
font-feature-settings: "palt" 1;
letter-spacing: -0.1em;
width: 200%;
margin-left: -50%;
}
h1 #relation img{
width: 3.5%;
margin-left: 0.1em;
margin-right: 0.1em;
}
#affinity{
width: 100%;
background: #9b532d;
padding: 1vw 0 1.5vw 0;
color: #ffff66;
font-size: 1.9rem;
line-height: 1;
border-radius: 1.5vw;
}

#fortune .btn{
display: block;
width: 60%;
margin: 10vw auto;
}
.read{
font-size: 1.1rem;
line-height: 1.6em;
text-align: justify;
}
.arc{
color: #64afde;
}
.marc{
color: #e87ba7;
}

.comment{
text-align: left;
padding: 5vw 0 5vw 20.5vw;
font-size: 1.35rem;
}
.comment.arc{
background: url("../images/arc.png") 0% 2.5vw no-repeat;
background-size: 20% auto;
margin-top: 1em;
}
.comment.marc{
background: url("../images/marc.png") 0% 2.5vw no-repeat;
background-size: 20% auto;
}

#result h2{
display: inline-block;
padding: 0 1.8em;
font-size: 1.4rem;
line-height: 1em;
background: url("../images/midashi_kazari.png") left 80% no-repeat, url("../images/midashi_kazari.png") right 80% no-repeat;
background-size: 1.4em, 1.4em;
font-weight: normal;
margin-top: 15vw;
margin-bottom: 3vw;
}
#book .waku{
background: url("../images/book_waku.png") center center no-repeat;
width: 100%;
height: 140vw;
background-size: 100%;
padding: 10vw 8vw;
box-sizing: border-box;
}
#book h3{
padding: 6vw 0;
font-size: 1.4rem;
line-height: 1;
background: url("../images/ttl_head.png") top center no-repeat, url("../images/ttl_foot.png") bottom center no-repeat;
background-size: 100% auto;
font-weight: normal;
}
#book .cover{
display:inline-block;
width: 80%;
margin: 2vw auto;
}
#book p{
font-size: 0.9rem;
line-height: 1.6em;
text-align: justify;
}
#book .btn{
display: inline-block;
width: 42%;
margin: 5vw 1% 0 1%;
}

#connect .waku{
background: url("../images/book_connect_waku.png") center center no-repeat;
width: 100%;
height: 62vw;
background-size: 100%;
padding: 8vw 4vw;
box-sizing: border-box;
}
#connect h3{
font-size: 1.2rem;
line-height: 1;
font-weight: normal;
}
#connect h5{
font-size: 1.4rem;
line-height: 1.1;
font-weight: normal;
padding: 4vw 0 4.5vw 0;
background: url("../images/ttl_mini_head.png") top center no-repeat, url("../images/ttl_mini_foot.png") bottom center no-repeat;
background-size: 100% auto;
}
/*#connect h5 span{
display: inline-block;
width: 200%;
margin-left: -50%;*/
}
#connect .waku > ul{
margin-top: 1vw;
}
#connect .waku > ul > li{
display:inline-block;
vertical-align: middle;
margin-top: 2vw;
}
#connect .waku > ul > li:nth-of-type(1){
width: 40%;
}
#connect .waku > ul > li:nth-of-type(2){
width: 55%;
}
#connect .btn{
display: inline-block;
width: 70%;
margin-top: 0.5vw;
}
#connect .btn:nth-of-type(1){
margin-top: 2vw;
}



#campaign h2{
display: inline-block;
background: url("../images/share_icon.png") left center no-repeat;
background-size: auto 100%;
color: #ffff8e;
font-size: 1.5rem;
padding-left: 1.5em;
line-height: 1;
}
#campaign section{
background: url("../images/campaign_bg.jpg") top center no-repeat #900;
background-size: 100%;
height: 165vw;
margin: 5vw auto 25vw auto;
box-sizing: border-box;
padding-top: 115vw;
}
#campaign .button{
text-indent: -99999px;
margin: 3vw auto;
background: url("../images/btn_share.png") center center no-repeat;
background-size: 100%;
}
#campaign p{
display: inline-block;
margin: 2vw auto;
font-size: 0.8rem;
line-height: 1.4;
color:#FFF;
padding: 1em 2em;
background: rgba(0, 0, 0, 0.7);
border-radius: 2vw;
}
#campaign p a{
color:#FF0;
padding-left: 0.25em;
}

#promotion{
background: #FFF;
margin-top: -14vw;
margin-bottom: 20vw;
position: relative;
z-index: 0;
}
#prCatch{
margin: 18vw auto -19vw auto;
transform: scale(0.5, 0.5);
transform-origin: bottom, center;
transition: 0.6s all;
transition-delay: 0.6s;
}
#prCatch.effect.active{
transform: scale(1, 1);
}
#prTitle{
margin: 108vw auto 10vw auto;
}
#buy{
padding: 10vw 0;
background: #1ba52e;
color: #FFF;
}
#buy .button{
text-indent: -99999px;
margin: 2vw auto;
}
#buy .button:nth-of-type(1){
background: url("../images/btn_official.png") center center no-repeat;
background-size: 100%;
}
#buy .button:nth-of-type(2){
background: url("../images/btn_amazon.png") center center no-repeat;
background-size: 100%;
}
#buy .button:nth-of-type(3){
background: url("../images/btn_rakuten.png") center center no-repeat;
background-size: 100%;
}
#roulette{
position: relative;
perspective: 100vw;
perspective: 170vw;
z-index: 2;
}
#roulette ul{
display: block;
position: relative;
top: 50vw;
width: 120%;
margin: 0 auto 0 -10%;
padding: 0;
transform-style: preserve-3d;
animation:rotate 50s infinite linear;
}
#roulette li{
position: absolute;
display: block;
list-style: none;
width: 100%;
transform-style: preserve-3d;
/*background: rgba(0, 0, 0, 0.1);*/
}
#roulette li img{
float: left;
width: 13vw;
height: 18.2vw;	
text-align: center;
/*transition: .2s;*/
transform: rotateY(90deg);
position: relative;
}
#roulette li:nth-of-type(25) img{
float: left;
text-align: center;
transform: rotateY(90deg);
position: absolute;
width: 44%;
height: auto;
left: 50%;
margin-left: -22%;
top: -25vw;
}

#roulette li:nth-of-type( 1) { transform: rotateY(  0deg); }
#roulette li:nth-of-type( 2) { transform: rotateY( 15deg); }
#roulette li:nth-of-type( 3) { transform: rotateY( 30deg); }
#roulette li:nth-of-type( 4) { transform: rotateY( 45deg); }
#roulette li:nth-of-type( 5) { transform: rotateY( 60deg); }
#roulette li:nth-of-type( 6) { transform: rotateY( 75deg); }
#roulette li:nth-of-type( 7) { transform: rotateY( 90deg); }
#roulette li:nth-of-type( 8) { transform: rotateY(105deg); }
#roulette li:nth-of-type( 9) { transform: rotateY(120deg); }
#roulette li:nth-of-type(10) { transform: rotateY(135deg); }
#roulette li:nth-of-type(11) { transform: rotateY(150deg); }
#roulette li:nth-of-type(12) { transform: rotateY(165deg); }
#roulette li:nth-of-type(13) { transform: rotateY(180deg); }
#roulette li:nth-of-type(14) { transform: rotateY(195deg); }
#roulette li:nth-of-type(15) { transform: rotateY(210deg); }
#roulette li:nth-of-type(16) { transform: rotateY(225deg); }
#roulette li:nth-of-type(17) { transform: rotateY(240deg); }
#roulette li:nth-of-type(18) { transform: rotateY(255deg); }
#roulette li:nth-of-type(19) { transform: rotateY(270deg); }
#roulette li:nth-of-type(20) { transform: rotateY(285deg); }
#roulette li:nth-of-type(21) { transform: rotateY(300deg); }
#roulette li:nth-of-type(22) { transform: rotateY(315deg); }
#roulette li:nth-of-type(23) { transform: rotateY(330deg); }
#roulette li:nth-of-type(24) { transform: rotateY(345deg); }
#roulette li:nth-of-type(25) { transform: rotateY(360deg); }


#roulette li:nth-of-type( 1) img { animation:rotate1 50s infinite linear; }
#roulette li:nth-of-type( 2) img { animation:rotate2 50s infinite linear; }
#roulette li:nth-of-type( 3) img { animation:rotate3 50s infinite linear; }
#roulette li:nth-of-type( 4) img { animation:rotate4 50s infinite linear; }
#roulette li:nth-of-type( 5) img { animation:rotate5 50s infinite linear; }
#roulette li:nth-of-type( 6) img { animation:rotate6 50s infinite linear; }
#roulette li:nth-of-type( 7) img { animation:rotate7 50s infinite linear; }
#roulette li:nth-of-type( 8) img { animation:rotate8 50s infinite linear; }
#roulette li:nth-of-type( 9) img { animation:rotate9 50s infinite linear; }
#roulette li:nth-of-type(10) img { animation:rotate10 50s infinite linear; }
#roulette li:nth-of-type(11) img { animation:rotate11 50s infinite linear; }
#roulette li:nth-of-type(12) img { animation:rotate12 50s infinite linear; }
#roulette li:nth-of-type(13) img { animation:rotate13 50s infinite linear; }
#roulette li:nth-of-type(14) img { animation:rotate14 50s infinite linear; }
#roulette li:nth-of-type(15) img { animation:rotate15 50s infinite linear; }
#roulette li:nth-of-type(16) img { animation:rotate16 50s infinite linear; }
#roulette li:nth-of-type(17) img { animation:rotate17 50s infinite linear; }
#roulette li:nth-of-type(18) img { animation:rotate18 50s infinite linear; }
#roulette li:nth-of-type(19) img { animation:rotate19 50s infinite linear; }
#roulette li:nth-of-type(20) img { animation:rotate20 50s infinite linear; }
#roulette li:nth-of-type(21) img { animation:rotate21 50s infinite linear; }
#roulette li:nth-of-type(22) img { animation:rotate22 50s infinite linear; }
#roulette li:nth-of-type(23) img { animation:rotate23 50s infinite linear; }
#roulette li:nth-of-type(24) img { animation:rotate24 50s infinite linear; }
#roulette li:nth-of-type(25) img { animation:rotate25 50s infinite linear; }

@keyframes rotate {
	0% { transform:rotateY(360deg)}
	100% { transform:rotateY(0deg)}
}

@keyframes rotate1 {
	0% { transform:rotateY(0deg)}
	100% { transform:rotateY(360deg)}
}
@keyframes rotate2 {
	0% { transform:rotateY(-15deg)}
	100% { transform:rotateY(345deg)}
}
@keyframes rotate3 {
	0% { transform:rotateY(-30deg)}
	100% { transform:rotateY(330deg)}
}
@keyframes rotate4 {
	0% { transform:rotateY(-45deg)}
	100% { transform:rotateY(315deg)}
}
@keyframes rotate5 {
	0% { transform:rotateY(-60deg)}
	100% { transform:rotateY(300deg)}
}
@keyframes rotate6 {
	0% { transform:rotateY(-75deg)}
	100% { transform:rotateY(285deg)}
}
@keyframes rotate7 {
	0% { transform:rotateY(-90deg)}
	100% { transform:rotateY(270deg)}
}
@keyframes rotate8 {
	0% { transform:rotateY(-105deg)}
	100% { transform:rotateY(255deg)}
}
@keyframes rotate9 {
	0% { transform:rotateY(-120deg)}
	100% { transform:rotateY(240deg)}
}
@keyframes rotate10 {
	0% { transform:rotateY(-135deg)}
	100% { transform:rotateY(225deg)}
}
@keyframes rotate11 {
	0% { transform:rotateY(-150deg)}
	100% { transform:rotateY(210deg)}
}
@keyframes rotate12 {
	0% { transform:rotateY(-165deg)}
	100% { transform:rotateY(195deg)}
}
@keyframes rotate13 {
	0% { transform:rotateY(-180deg)}
	100% { transform:rotateY(180deg)}
}
@keyframes rotate14 {
	0% { transform:rotateY(-195deg)}
	100% { transform:rotateY(165deg)}
}
@keyframes rotate15 {
	0% { transform:rotateY(-210deg)}
	100% { transform:rotateY(150deg)}
}
@keyframes rotate16 {
	0% { transform:rotateY(-225deg)}
	100% { transform:rotateY(135deg)}
}
@keyframes rotate17 {
	0% { transform:rotateY(-240deg)}
	100% { transform:rotateY(120deg)}
}
@keyframes rotate18 {
	0% { transform:rotateY(-255deg)}
	100% { transform:rotateY(105deg)}
}
@keyframes rotate19 {
	0% { transform:rotateY(-270deg)}
	100% { transform:rotateY(90deg)}
}
@keyframes rotate20 {
	0% { transform:rotateY(-285deg)}
	100% { transform:rotateY(75deg)}
}
@keyframes rotate21 {
	0% { transform:rotateY(-300deg)}
	100% { transform:rotateY(60deg)}
}
@keyframes rotate22 {
	0% { transform:rotateY(-315deg)}
	100% { transform:rotateY(45deg)}
}
@keyframes rotate23 {
	0% { transform:rotateY(-330deg)}
	100% { transform:rotateY(30deg)}
}
@keyframes rotate24 {
	0% { transform:rotateY(-345deg)}
	100% { transform:rotateY(15deg)}
}
@keyframes rotate25 {
	0% { transform:rotateY(0deg)}
	100% { transform:rotateY(360deg)}
}

/*PC*/
@media screen and (min-width:520px){

#clockWrap{
width: calc(0.46*520px);
height: calc(0.64*520px);
top: calc(0.13*520px);
left: calc(0.5*520px);
margin-left: calc(-0.23*520px);
}
.clock{
width: calc(0.048*520px);
height: calc(0.15*520px);
margin-left: calc(-0.024*520px);
}
#loadTXT{
top:calc(0.76*520px);
}
.silhouette{
width: calc(0.75*520px);
top: calc(0.86*520px);
}

header a{
margin: calc(0.02*520px) auto calc(-0.02*520px) auto;
}
#result{
margin: calc(-0.06*520px) 0 calc(0.05*520px) 0;
}
#paper{
margin: calc(-0.01*520px) 0;
padding: calc(0.05*520px);
}
h1{
margin: calc(-0.06*520px) auto calc(0.05*520px) auto;
}
h1 #name{
margin-bottom: calc(0.03*520px);
}
h1 #bookName{
margin-top: calc(0.04*520px);
}
#affinity{
padding: calc(0.01*520px) 0 calc(0.015*520px) 0;
border-radius: calc(0.015*520px);
}

#fortune .btn{
margin: calc(0.1*520px) auto;
}

.comment{
padding: calc(0.05*520px) 0 calc(0.05*520px) calc(0.205*520px);
}
.comment.arc{
background: url("../images/arc.png") 0% calc(0.025*520px) no-repeat;
background-size: 20% auto;
}
.comment.marc{
background: url("../images/marc.png") 0% calc(0.025*520px) no-repeat;
background-size: 20% auto;
}

#result h2{
margin-top: calc(0.15*520px);
margin-bottom: calc(0.03*520px);
}
#book .waku{
height: calc(1.4*520px);
padding: calc(0.1*520px) calc(0.08*520px);
}
#book h3{
padding: calc(0.06*520px) 0;
}
#book .cover{
margin: calc(0.02*520px) auto;
}
#book .btn{
margin: calc(0.05*520px) 1% 0 1%;
}

#connect .waku{
height: calc(0.62*520px);
padding: calc(0.08*520px) calc(0.04*520px);
}
#connect h5{
padding: calc(0.04*520px) 0 calc(0.045*520px) 0;
}
#connect .waku > ul{
margin-top: calc(0.01*520px);
}
#connect .waku > ul > li{
margin-top: calc(0.01*520px);
}
#connect .btn{
margin-top: calc(0.005*520px);
}
#connect .btn:nth-of-type(1){
margin-top: calc(0.02*520px);
}




#campaign section{
height: calc(1.65*520px);
margin: calc(0.05*520px) auto calc(0.25*520px) auto;
padding-top: calc(1.15*520px);
}
#campaign .button{
margin: calc(0.03*520px) auto;
}
#campaign p{
margin: calc(0.02*520px) auto;
border-radius: calc(0.02*520px);
}

#promotion{
margin-top: -8vw;
margin-bottom: calc(0.2*520px);
}
#prCatch{
margin: calc(0.2*520px) auto calc(-0.19*520px) auto;
}
#prTitle{
margin: calc(1.08*520px) auto calc(0.1*520px) auto;
}
#buy{
padding: calc(0.1*520px) 0;
}
#buy .button{
margin: calc(0.02*520px) auto;
}
#roulette{
position: relative;
perspective: calc(1*520px);
perspective: calc(1.7*520px);
}
#roulette ul{
top: calc(0.5*520px);
}
#roulette li img{
width: calc(0.13*520px);
height: calc(0.182*520px);	
}
#roulette li:nth-of-type(25) img{
top:  calc(-0.25*520px);
}

}