.brbr{
  display: none;
}
.btn-wrapper{
  width: 90%;
}
.header{
  position: absolute;
  z-index: 1;
}
.body-wrapper{
  background-size: 88px auto, 72px auto, 450px auto, 346px auto, 288px auto, 232px auto;
  background-position: left 20% bottom 40%, right 20% top 45%, left 0 top 0, right 0 top 0, left 0 bottom 0, right 0 bottom 0;
}  

.color-wrapper{
  padding-top: -4rem;
   
}
.ans-wrapper{
  background-size: 162px auto, 122px auto, 70px auto, 95px auto;
  background-position: left 0 top 0, right 0 top 0, left 0 bottom 0, right 0 bottom 0;
  width: 90%;
  max-width: 375px;  
}
.ans-note{
  width: auto;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.ar-wrapper{
  border: 0px solid green;
  width: 280px;
  height: 250px;
  background: no-repeat; 
  
  background-size: 80px auto;
}

.popup{
  width: 90%;
  height: 90%;
  max-height: 700px;
  max-width: 400px;  
  margin-top: 3%;
}
model-viewer{
  width: 280px;
  height: 250px;
}
  .roulette {
    width: 66px;
    height: 60px;
    margin-top: 10%;
    margin-right: 10%;
  }
  .click_hint{
    width: 120px;
    height: 36px;
    line-height: 36px;
    border-radius: 25px;
    top: 32%;
    right: 0%;
  }   
  .color-wrapper{
   padding-top: 1rem;
   padding-bottom: 3rem;
  }
/* normal PC */  
@media only screen and (min-width: 768.1px){

  p, a{  
    font-size: 1.1rem;
    letter-spacing: 1px;
  }
  .idx-wrapper{
    max-width: 500px;
  }
  .idx-wrapper > *{
    margin: 1rem 0;
  }
  .header{
    width: 300px;
    height: auto;
    top: 1rem;
    left: 2rem;
  }
  .idx-title{
    width: 100%;
    height: auto;
  }
  .idx-title img:first-child{
    width: 40%;
    height: auto;
  }  
  .idx-title img:last-child{
    width: 46%;
    height: auto;
  }

  .roulette-wrapper {
    width: 260px;
    height: 260px;
  }
  
  .brbr{
    display: block;
    height: 1px;
  }  
  .ans-body-wrapper{
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 700px;
    height: 100vh;
  }
  .color-wrapper, .photo-wrapper{
    width: 50%;
  }
  .color-wrapper{
    background-size: auto 5rem;
  }
 
}
/* small PC */
@media only screen and (min-width: 768.1px) and (max-width: 1280px){
.body-wrapper{
  background-size: 88px auto, 72px auto, 450px auto, 346px auto, 288px auto, 232px auto;
  background-position: left 10% bottom 40%, right 10% top 45%,  left 0 top 0, right 0 top 0, left 0 bottom 0, right 0 bottom 0;
}   
  .body-wrapper{
    padding-top: 100px;
  }
  .idx-wrapper{
    max-width: 500px;
  }
}
/* NB, landscape PC */
@media only screen and (min-width: 768.1px) and (max-height: 768px){
  .body-wrapper{
    position: static;
    height: auto;
    min-height: 766px;
  }
}
.d_arrow{
  display: none;
}
@media only screen and (max-width: 768px){
  .d_arrow{
    color: #324F7C;
    font-size: .75rem;
    margin: .5rem auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .d_arrow img{
    margin-top: .25rem;
    width: 14px;
    height: auto;
    animation: downarrow 0.6s infinite alternate ease-in-out;
  }
}  
/* pad */
@media only screen and (min-width: 640.1px) and (max-width: 768px){
  .body-wrapper{
    background-size: 88px auto, 72px auto, 70% auto, 50% auto, 50% auto, 50% auto;
    background-position: left 10% bottom 25%, right 10% bottom 40%, left -5% top -3%, right -40% top -2%, left -50% bottom -18%, right -45% bottom -5%;
  }  
  .body-wrapper{
    padding-top: 100px;
    height: 100vh;
  }
  p, a{  
    font-size: 1.1rem;
    letter-spacing: 1px;
  }
  .idx-wrapper{
    max-width: 500px;
  }
  .idx-wrapper > *{
    margin: 1rem 0;
  }
  .header{
    /* height: 59px; */
    width: 40%;
    top: 1rem;
    left: 2rem;
  }
  .idx-title{
    width: 100%;
    height: auto;
  }
  .idx-title img:first-child{
    width: 40%;
    height: auto;
  }  
  .idx-title img:last-child{
    width: 46%;
    height: auto;
  }

  .roulette-wrapper {
    width: 260px;
    height: 260px;
  }
  
  .brbr{
    display: block;
    height: 1px;
  }

}
@media only screen and (max-width: 640px) {
  .body-wrapper{
    background-size: 60px auto, 50px auto, 70% auto, 50% auto, 50% auto, 50% auto;
    background-position: left 5% bottom 8%, right 5% bottom 20%,  left -5% top -3%, right -40% top -2%, left -50% bottom -22%, right -45% bottom -5%;
  }
  .body-wrapper{
    padding-top: 80px;
    /* height: calc(100vh - 100px); */
    height: auto;
  }
  .idx-wrapper{
    width: 90%;
    max-width: 338px;
    height: auto;
  }
  .idx-wrapper > *{
    margin: .5rem 0;
  }
  .header{
    /* height: 59px; */
    width: 50%;
    top: 1rem;
    left: 1rem;
  }
  .idx-title{
    width: 90%;
    height: 110px;
  }  
  .idx-title img:first-child{
    width: 40%;
    height: auto;
  }  
  .idx-title img:last-child{
    width: 46%;
    height: auto;
  }
  .btn-wrapper{
    width: 100%;
  }

  .roulette-wrapper {
    width: 260px;
    height: 260px;
    margin-top: 0;
  }
  
  /* .ans-note{
    margin-left: 33%;
  } */
  .photo-btn-wrapper{
      width: 80%;
      background-position: left 0 bottom 1rem;
  }
  .p-align{
    width: 85%;
  }
  .p-wrapper{
    margin-right: 10%;
  }
  .popup{
    width: 95%;
    height: 95%;
    max-height: 700px;
    max-width: 400px;  
  }

  .color-wrapper{
   padding-top: 4rem;
  }
}
@media only screen and (max-width: 374.9px) {
  .body-wrapper{
    background-size: 50px auto, 40px auto, 70% auto, 50% auto, 50% auto, 50% auto;
    background-position: left 5% bottom 3%, right 5% bottom 20%,  left -5% top -3%, right -40% top -2%, left -50% bottom -22%, right -45% bottom -5%;
  } 
  .body-wrapper{
    padding-top: 60px;
    height: calc(100vh - 0px);
    height: auto;
  }
  .btn-wrapper{
    padding: 1.0rem 1.5rem 1.0rem 1.5rem;
    margin-top: 0;
  }
  .body-wrapper a.btn{
    margin-right: 0rem;
  }

  .roulette-wrapper {
    width: 240px;
    height: 240px;
    
  }

  .ar-wrapper{
    width: 250px;
    height: 250px;
  }
  model-viewer{
    width: 250px;
    height: 250px;
  }
  /* .ans-note{
    margin-left: 33%;
  } */
}
@media only screen and (max-width: 320px) {

}