@charset "utf-8";
/*********************
 ハリネズミ占い
 *********************/
.pc{
  display: none!important;
}
.sp{
  display: block!important;
  width: 100%!important;
}
html{
  text-align: center;
  box-sizing: border-box;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 62.5%;
}
b{
  font-weight: normal;
}
a{
  color: #ffffff;
  text-decoration: none;
}
a:hover{
  opacity: 0.8;
}
img{
  width: 100%;
  vertical-align: bottom;
}
li{
  list-style: none;
}
section{
  margin: 0 0 5%;
}
#wrapper{
  background: #235d86;
  font-size: 1.7rem;
  line-height: 1.5;
}
/************
今日の運勢を占うボタン
**************/
.btn_start{
  width: 60%!important;
  margin: 0 auto 5%;
}
/************
ツイッターシェアボタン
**************/
.result_share_btn{
  width: 80%;
  margin: 0 auto 5%;
}
.result_share_btn a{
  display: block;
  margin: 0 auto 5%;
}
/************
もう一度占うボタン
**************/
.btn_restart{
  width: 60%;
  margin: 0 auto 5%;
}
/************
section_about_HARIURA
**************/
.ribon::before{
  content: "";
  display: block;
  background: url(../img/line_01.png) no-repeat;
  background-size: 100%;
  background-position: center top;
  padding: 0 0 20%;
}
.ribon::after{
  content: "";
  background: url(../img/line_02.png) no-repeat;
  background-size: 100%;
  background-position: center top;
  display: block;
  padding: 0 0 20%;
}
#about div{
  width: 66%;
  min-width: 310px;
  max-width: 400px;
  margin: 0 auto;
  padding: 12% 0;
  background: url(../img/bg_01.png) no-repeat center 0;
  background-size: 100%;
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 1.4;
}
#about p.att{
  display: block;
  color: #dce3e7;
  line-height: 1.2;
}
/************
section_campaign
**************/
#camp .present{
  font-size: 1.6rem;
  padding: 5% 3% 0;
  color: #ffffff;
}
#camp .present p{
  margin: 0 0 5% 0;
}
#camp .howto{
  color: #ffffff;
}
#camp .howto p{
  margin: 0 0 10%;
}
#camp .howto dl{
  margin: 0 0 10%;
}
#camp .howto dd{
  width: 80%;
  margin: 0 auto;
}
#camp .date{
  color: #ffffff;
}
#camp h3{
  font-size: 2.3rem;
}
/************
タロット結果
**************/
#result_massege{
  position: relative;
  background: #235d86;
  padding: 5% 0;
  color: #ffffff;
  font-size: 1.5rem;
}
#result_massege strong{
  display: block;
  position: relative;
  width: 320px;
  margin: 0 auto 5%;
  font-size: 3.0rem;
}
#result_massege strong span::before, #result_massege strong span::after{
  content: "";
  background: url(../img/icon_01.png) no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
  width: 100px;
  height: 50px;
  position: absolute;
}
#result_massege strong span::before{
  top: 22%;
  left: 0%;
}
#result_massege strong span::after{
  top: 22%;
  right: 0;
}
#result_massege span{
  display: block;
  font-size: 2.0rem;
}
#result_massege p{
  line-height: 1.6;
}
.result{
  position: relative;
}
.result_tarot{
  position: absolute;
  width: 50%;
  top: 5%;
  left: 25%;
  right: 25%;
}
.result_tarot_back{
  position: absolute;
  width: 50%;
  top: 5%;
  left: 25%;
  right: 25%;
}
.result_tarot{
  display: none;
}
.result_tarot_back{
  transform:rotateY(0deg);
  -webkit-animation: action_tarot 3s ease 0s 1 forwards;
  animation: action_tarot 3s ease 0s 1 forwards;
}
.result_tarot{
  transform:rotateY(-180deg);
  -webkit-animation: action_tarot_result 1s ease 0s 1 forwards;
  animation: action_tarot_result 1s ease 0s 1 forwards;
}

@keyframes action_tarot {
  100% {
    -webkit-transform: rotateY(720deg);
    -ms-transform: rotateY(720deg);
    transform: rotateY(720deg);
    }
  }
@keyframes action_tarot_result {
  100% {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform:rotateY(0deg);
    }
  }

#urala, #yushi, #camp_disc, #att{
  font-size: 1.2rem;
  text-align: left;
}
#camp_disc h2, #att h2{
  text-align: center;
}
#camp_disc h2, #att h2{
  margin: 0 0 3%;
}
#urala h2, #yushi h2{
  width: 45%;
  margin: 0 0 3%;
}
#urala, #yushi{
  margin: 3%;
  padding: 3%;
  color: #ffffff;
}
#urala p{
  margin: 0 0 5%;
}
#urala figure{
  margin: 0 0 5%;
}
#yushi{
  position: relative;
}
#yushi ul{
  display: flex;
  position: absolute;
  top: 0;
  right: 0%;
  width: 25%;
}
#yushi ul li{
  width: 50%;
  margin: 0 7% 0 0;
}
#yushi .hp_link a{
  text-decoration: underline;
}
#camp_disc, #att{
  margin: 3%;
  padding: 3%;
  background: #ffffff;
  border-radius: 5px;
}
.bnr{
  margin: 0 0 25px;
}
.bnr a{
  display: inline-block;
  position: relative;
  width: 90%;
  padding: 10px 5% 10px 0;
  border: 3px solid #231441;
  box-sizing: border-box;
  background: #ffffff;
  color: #231441;
  font-size: 2rem;
  font-weight: bold;
}
.bnr a::before,
.bnr a::after{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.bnr a::before{
  right: -55%;
  width: 10px;
  height: 10px;
  border-top: 3px solid #231441;
  border-right: 3px solid #231441;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.btn_app{
  margin: 0 0 5%;
  text-align: center;
}
.btn_app li{
  display: inline-block;
  width: 45%;
}
.btn_app li img{
  width: 100%;
  height: auto;
}
/*カードを選択*/
.choice{
  z-index: 100;
}
.choice img{
  -moz-transition: -moz-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
}
.choice img{
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

/***************
シャッフル中タロットのアニメーション
****************/
.balloon{
  position: absolute;
  top: 12%;
  left: 10%;
  width: 20%!important;
  opacity: 0;
  -webkit-animation: balloonin 2s ease-in 3s 1 forwards, fuwafuwa 2s ease-in-out 3s infinite forwards;
  animation: balloonin 2s ease-in 3s 1 forwards, fuwafuwa 2s ease-in-out 3s infinite forwards;
}
@-webkit-keyframes balloonin {
  100% { opacity: 1; }
}
@keyframes balloonin {
  100% { opacity: 1; }
}

@-webkit-keyframes fuwafuwa {
  50%{
    -webkit-transform: translateY(8%);
    -ms-transform: translateY(8%);
    transform: translateY(8%);
    }
  100%{
    -webkit-transform: translateY(1%);
    -ms-transform: translateY(1%);
    transform: translateY(1%);
    }
}
@keyframes fuwafuwa {
  50%{
    -webkit-transform: translateY(8%);
    -ms-transform: translateY(8%);
    transform: translateY(8%);
    }
  100%{
    -webkit-transform: translateY(1%);
    -ms-transform: translateY(1%);
    transform: translateY(1%);
    }
}

.hari_shaffle{
  position: relative;
}
.hand_r{
  position: absolute;
  top: 32%;
  left: 33%;
  width: 9%!important;
  transform-origin: top left;
  -webkit-animation: hand_right 0.5s ease 0.5s 9 forwards;
  animation: hand_right 0.5s ease 0.5s 9 forwards;
}
.hand_l{
  position: absolute;
  top: 31%;
  right: 33%;
  width: 8%!important;
  transform-origin: top right;
  -webkit-animation: hand_left 0.5s ease 0.5s 9 forwards;
  animation: hand_left 0.5s ease 0.5s 9 forwards;
}

@-webkit-keyframes hand_left {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}
@keyframes hand_left {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

@-webkit-keyframes hand_right {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
@keyframes hand_right {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

img.shaffle{
  width: 100%!important;
}
.tarot_wrap{
  position: relative;
  display: none;
}
.tarot_wrap ul{
  position: absolute;
  width: 100%;
  margin: 0 auto;
  top: 40%;
}
.tarot_wrap img{
  width: 90%;
}
.tarot_wrap ul li{
  display: inline-block;
  position: absolute;
  left: 45%;
  right: 45%;
}
.tarot_wrap ul li:nth-child(1) {
  -webkit-animation: actionin 0.5s ease 0.5s 1 forwards;
  animation: actionin 0.5s ease 0.5s 1 forwards;
}
.tarot_wrap ul li:nth-child(2) {
  -webkit-animation: actionin_02 0.5s ease 0.7s 1 forwards;
  animation: actionin_02 0.5s ease 0.7s 1 forwards;
}
.tarot_wrap ul li:nth-child(3) {
  -webkit-animation: actionin_03 0.5s ease 0.9s 1 forwards;
  animation: actionin_03 0.5s ease 0.9s 1 forwards;
}
.tarot_wrap ul li:nth-child(4) {
  -webkit-animation: actionin_04 0.5s ease 1.1s 1 forwards;
  animation: actionin_04 0.5s ease 1.1s 1 forwards;
}
.tarot_wrap ul li:nth-child(5) {
  -webkit-animation: actionin_05 0.5s ease 1.3s 1 forwards;
  animation: actionin_05 0.5s ease 1.3s 1 forwards;
}
.tarot_wrap ul li:nth-child(6) {
  -webkit-animation: actionin_06 0.5s ease 1.5s 1 forwards;
  animation: actionin_06 0.5s ease 1.5s 1 forwards;
}
.tarot_wrap ul li:nth-child(7) {
  -webkit-animation: actionin_07 0.5s ease 1.7s 1 forwards;
  animation: actionin_07 0.5s ease 1.7s 1 forwards;
}
.tarot_wrap ul li:nth-child(8) {
  -webkit-animation: actionin_08 0.5s ease 1.9s 1 forwards;
  animation: actionin_08 0.5s ease 1.9s 1 forwards;
}
.tarot_wrap ul li:nth-child(9) {
  -webkit-animation: actionin_09 0.5s ease 2.1s 1 forwards;
  animation: actionin_09 0.5s ease 2.1s 1 forwards;
}
.tarot_wrap ul li:nth-child(10) {
  -webkit-animation: actionin_10 0.5s ease 2.3s 1 forwards;
  animation: actionin_10 0.5s ease 2.3s 1 forwards;
}
.tarot_wrap ul li:nth-child(11) {
  -webkit-animation: actionin_11 0.5s ease 2.5s 1 forwards;
  animation: actionin_11 0.5s ease 2.5s 1 forwards;
}
.tarot_wrap ul li:nth-child(12) {
  -webkit-animation: actionin_12 0.5s ease 2.7s 1 forwards;
  animation: actionin_12 0.5s ease 2.7s 1 forwards;
}
.tarot_wrap ul li:nth-child(13) {
  -webkit-animation: actionin_13 0.5s ease 2.9s 1 forwards;
  animation: actionin_13 0.5s ease 2.9s 1 forwards;
}
.tarot_wrap ul li:nth-child(14) {
  -webkit-animation: actionin_14 0.5s ease 3.1s 1 forwards;
  animation: actionin_14 0.5s ease 3.1s 1 forwards;
}
.tarot_wrap ul li:nth-child(15) {
  -webkit-animation: actionin_15 0.5s ease 3.3s 1 forwards;
  animation: actionin_15 0.5s ease 3.3s 1 forwards;
}
.tarot_wrap ul li:nth-child(16) {
  -webkit-animation: actionin_16 0.5s ease 3.5s 1 forwards;
  animation: actionin_16 0.5s ease 3.5s 1 forwards;
}
.tarot_wrap ul li:nth-child(17) {
  -webkit-animation: actionin_17 0.5s ease 3.7s 1 forwards;
  animation: actionin_17 0.5s ease 3.7s 1 forwards;
}
.tarot_wrap ul li:nth-child(18) {
  -webkit-animation: actionin_18 0.5s ease 3.9s 1 forwards;
  animation: actionin_18 0.5s ease 3.9s 1 forwards;
}
.tarot_wrap ul li:nth-child(19) {
  -webkit-animation: actionin_19 0.5s ease 4.1s 1 forwards;
  animation: actionin_19 0.5s ease 4.1s 1 forwards;
}
.tarot_wrap ul li:nth-child(20) {
  -webkit-animation: actionin_20 0.5s ease 4.3s 1 forwards;
  animation: actionin_20 0.5s ease 4.3s 1 forwards;
}
.tarot_wrap ul li:nth-child(21) {
  -webkit-animation: actionin_21 0.5s ease 4.5s 1 forwards;
  animation: actionin_21 0.5s ease 4.5s 1 forwards;
}
.tarot_wrap ul li:nth-child(22) {
  -webkit-animation: actionin_22 0.5s ease 4.7s 1 forwards;
  animation: actionin_22 0.5s ease 4.7s 1 forwards;
}

/*********
1列目
**********/

@-webkit-keyframes actionin {
  100% {
    -webkit-transform: translate(-300%,230%);
    -ms-transform: translate(-300%,230%);
    transform: translate(-300%,230%);
    }
  }
@keyframes actionin {
  100% {
    -webkit-transform: translate(-300%,230%);
    -ms-transform: translate(-300%,230%);
    transform: translate(-300%,230%);
    }
  }

@-webkit-keyframes actionin_02 {
  100% {
    -webkit-transform: translate(-200%,230%);
    -ms-transform: translate(-200%,230%);
    transform: translate(-200%,230%);
    }
  }
@keyframes actionin_02 {
  100% {
    -webkit-transform: translate(-200%,230%);
    -ms-transform: translate(-200%,230%);
    transform: translate(-200%,230%);
    }
  }

@-webkit-keyframes actionin_03 {
  100% {
    -webkit-transform: translate(-100%,230%);
    -ms-transform: translate(-100%,230%);
    transform: translate(-100%,230%);
    }
  }
@keyframes actionin_03 {
  100% {
    -webkit-transform: translate(-100%,230%);
    -ms-transform: translate(-100%,230%);
    transform: translate(-100%,230%);
    }
  }

@-webkit-keyframes actionin_04 {
  100% {
    -webkit-transform: translate(0,230%);
    -ms-transform: translate(0,230%);
    transform: translate(0,230%);
    }
  }
@keyframes actionin_04 {
  100% {
    -webkit-transform: translate(0,230%);
    -ms-transform: translate(0,230%);
    transform: translate(0,230%);
    }
  }

@-webkit-keyframes actionin_05 {
  100% {
    -webkit-transform: translate(100%,230%);
    -ms-transform: translate(100%,230%);
    transform: translate(100%,230%);
    }
  }
@keyframes actionin_05 {
  100% {
    -webkit-transform: translate(100%,230%);
    -ms-transform: translate(100%,230%);
    transform: translate(100%,230%);
    }
  }

@-webkit-keyframes actionin_06 {
  100% {
    -webkit-transform: translate(200%,230%);
    -ms-transform: translate(200%,230%);
    transform: translate(200%,230%);
    }
  }
@keyframes actionin_06 {
  100% {
    -webkit-transform: translate(200%,230%);
    -ms-transform: translate(200%,230%);
    transform: translate(200%,230%);
    }
  }

@-webkit-keyframes actionin_07 {
  100% {
    -webkit-transform: translate(300%,230%);
    -ms-transform: translate(300%,230%);
    transform: translate(300%,230%);
    }
  }
@keyframes actionin_07 {
  100% {
    -webkit-transform: translate(300%,230%);
    -ms-transform: translate(300%,230%);
    transform: translate(300%,230%);
    }
  }
/*********
2列目
**********/

@-webkit-keyframes actionin_08 {
  100% {
    -webkit-transform: translate(-350%,120%);
    -ms-transform: translate(-350%,120%);
    transform: translate(-350%,120%);
    }
  }
@keyframes actionin_08 {
  100% {
    -webkit-transform: translate(-350%,120%);
    -ms-transform: translate(-350%,120%);
    transform: translate(-350%,120%);
    }
  }

@-webkit-keyframes actionin_09 {
  100% {
    -webkit-transform: translate(-250%,120%);
    -ms-transform: translate(-250%,120%);
    transform: translate(-250%,120%);
    }
  }
@keyframes actionin_09 {
  100% {
    -webkit-transform: translate(-250%,120%);
    -ms-transform: translate(-250%,120%);
    transform: translate(-250%,120%);
    }
  }

@-webkit-keyframes actionin_10 {
  100% {
    -webkit-transform: translate(-150%,120%);
    -ms-transform: translate(-150%,120%);
    transform: translate(-150%,120%);
    }
  }
@keyframes actionin_10 {
  100% {
    -webkit-transform: translate(-150%,120%);
    -ms-transform: translate(-150%,120%);
    transform: translate(-150%,120%);
    }
  }

@-webkit-keyframes actionin_11 {
  100% {
    -webkit-transform: translate(-50%,120%);
    -ms-transform: translate(-50%,120%);
    transform: translate(-50%,120%);
    }
  }
@keyframes actionin_11 {
  100% {
    -webkit-transform: translate(-50%,120%);
    -ms-transform: translate(-50%,120%);
    transform: translate(-50%,120%);
    }
  }

@-webkit-keyframes actionin_12 {
  100% {
    -webkit-transform: translate(50%,120%);
    -ms-transform: translate(50%,120%);
    transform: translate(50%,120%);
    }
  }
@keyframes actionin_12 {
  100% {
    -webkit-transform: translate(50%,120%);
    -ms-transform: translate(50%,120%);
    transform: translate(50%,120%);
    }
  }

@-webkit-keyframes actionin_13 {
  100% {
    -webkit-transform: translate(150%,120%);
    -ms-transform: translate(150%,120%);
    transform: translate(150%,120%);
    }
  }
@keyframes actionin_13 {
  100% {
    -webkit-transform: translate(150%,120%);
    -ms-transform: translate(150%,120%);
    transform: translate(150%,120%);
    }
  }

@-webkit-keyframes actionin_14 {
  100% {
    -webkit-transform: translate(250%,120%);
    -ms-transform: translate(250%,120%);
    transform: translate(250%,120%);
    }
  }
@keyframes actionin_14 {
  100% {
    -webkit-transform: translate(250%,120%);
    -ms-transform: translate(250%,120%);
    transform: translate(250%,120%);
    }
  }

/*********
3列目
**********/

@-webkit-keyframes actionin_15 {
  100% {
    -webkit-transform: translate(350%,120%);
    -ms-transform: translate(350%,120%);
    transform: translate(350%,120%);
    }
  }
  @keyframes actionin_15 {
    100% {
    -webkit-transform: translate(350%,120%);
    -ms-transform: translate(350%,120%);
    transform: translate(350%,120%);
    }
  }

@-webkit-keyframes actionin_16 {
  100% {
    -webkit-transform: translate(-300%,10%);
    -ms-transform: translate(-300%,10%);
    transform: translate(-300%,10%);
    }
  }
@keyframes actionin_16 {
  100% {
    -webkit-transform: translate(-300%,10%);
    -ms-transform: translate(-300%,10%);
    transform: translate(-300%,10%);
    }
  }

@-webkit-keyframes actionin_17 {
  100% {
    -webkit-transform: translate(-200%,10%);
    -ms-transform: translate(-200%,10%);
    transform: translate(-200%,10%);
    }
  }
@keyframes actionin_17 {
  100% {
    -webkit-transform: translate(-200%,10%);
    -ms-transform: translate(-200%,10%);
    transform: translate(-200%,10%);
    }
  }

@-webkit-keyframes actionin_18 {
  100% {
    -webkit-transform: translate(-100%,10%);
    -ms-transform: translate(-100%,10%);
    transform: translate(-100%,10%);
    }
  }
@keyframes actionin_18 {
  100% {
    -webkit-transform: translate(-100%,10%);
    -ms-transform: translate(-100%,10%);
    transform: translate(-100%,10%);
    }
  }

@-webkit-keyframes actionin_19 {
  100% {
    -webkit-transform: translate(0,10%);
    -ms-transform: translate(0,10%);
    transform: translate(0,10%);
    }
  }
@keyframes actionin_19 {
  100% {
    -webkit-transform: translate(0,10%);
    -ms-transform: translate(0,10%);
    transform: translate(0,10%);
    }
  }

@-webkit-keyframes actionin_20 {
  100% {
    -webkit-transform: translate(100%,10%);
    -ms-transform: translate(100%,10%);
    transform: translate(100%,10%);
    }
  }
@keyframes actionin_20 {
  100% {
    -webkit-transform: translate(100%,10%);
    -ms-transform: translate(100%,10%);
    transform: translate(100%,10%);
    }
  }

@-webkit-keyframes actionin_21 {
  100% {
    -webkit-transform: translate(200%,10%);
    -ms-transform: translate(200%,10%);
    transform: translate(200%,10%);
    }
  }
@keyframes actionin_21 {
  100% {
    -webkit-transform: translate(200%,10%);
    -ms-transform: translate(200%,10%);
    transform: translate(200%,10%);
    }
  }

@-webkit-keyframes actionin_22 {
  100% {
    -webkit-transform: translate(300%,10%);
    -ms-transform: translate(300%,10%);
    transform: translate(300%,10%);
    }
  }
@keyframes actionin_22 {
  100% {
    -webkit-transform: translate(300%,10%);
    -ms-transform: translate(300%,10%);
    transform: translate(300%,10%);
    }
  }

/***********
footer
************/
footer{
  font-size: 1.5rem;
  color: #ffffff;
  background: #231441;
  padding: 25px 0;
}