@charset "UTF-8";

.header_box.not_login {
  position: fixed;
}

.header_box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  margin-top: -2px;
  width: 100%;
  height: 49px;
  background-color: #fff;
  text-align: center;
  border-bottom: #ddd 1px solid;
}

.js_gnav {
  display: inline-block;
}

.js_gnav_cont {
  position: absolute;
}

#js_gnav_btn {
  cursor: pointer;
}

#js_gnav_btn.active {
  background: #000;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}

.btn_Notification,
.btn_mail,
.btn_menu,
.btn_point {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 8px;
  width: 50px;
  height: 51px;
  text-align: center;
  font-size: 10px;
  font-size: 1rem;
}

#gnav_menu_icon {
  display: block;
  margin: 5px auto -2px;
  width: 20px;
  height: 22px;
  cursor: pointer;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

#gnav_menu_icon span {
  display: block;
  margin-bottom: 3px;
  width: 20px;
  height: 3px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  background: #322f34;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  will-change: transform, opacity;
}

#gnav_menu_icon span#bar1 {
  margin-top: 2px;
}

#js_gnav_btn.active #gnav_menu_icon {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#js_gnav_btn.active #gnav_menu_icon #bar1 {
  -webkit-transform: rotate(0) translateY(6px);
  transform: rotate(0) translateY(6px);
}

#js_gnav_btn.active #gnav_menu_icon #bar2 {
  opacity: 0;
}

#js_gnav_btn.active #gnav_menu_icon #bar3 {
  -webkit-transform: rotate(-90deg) translateX(5px);
  transform: rotate(-90deg) translateX(5px);
}

.header__menuCont {
  top: 55px;
  left: 1%;
  width: 98%;
  border: 1px solid #555;
  border-top: none;
  border-bottom: none;
  background: #fff;
  color: #000;
  text-align: left;
}

.header__closeBtn {
  margin: 2px 3px;
  padding: 3px 0 2px;
  width: 100px;
  border: 1px solid #b8b8b8;
  text-align: center;
}

.header__closeBtn a {
  color: #fff;
}

#js_gnav_mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: none;
  width: 100%;
  height: 200%;
  background: #000;
  opacity: .3;
}

.gnav_user_01 {
  display: block;
  width: 72.67px;
  height: 38px;
  background-position: 0 -464px;
  -webkit-background-size: 72.67px 502px;
  background-size: 72.67px 502px;
}

.gnav_user_02 {
  display: block;
  margin: 0 auto 3px;
  width: 22px;
  height: 22px;
  background-position: 0 -171.33px;
  -webkit-background-size: 72.67px 502px;
  background-size: 72.67px 502px;
}

.gnav_user_03 {
  display: block;
  margin: 0 auto 3.5px;
  width: 22px;
  height: 22px;
  background-position: 0 -193.33px;
  -webkit-background-size: 72.67px 502px;
  background-size: 72.67px 502px;
}

.gnav_user_04 {
  display: block;
  margin: 0 auto 9px;
  width: 22px;
  height: 16px;
  background-position: 0 -102.67px;
  -webkit-background-size: 72.67px 502px;
  background-size: 72.67px 502px;
}

/*バッチ表示
********************************/
.batch_Notification, .batch_menu {
  top: 7px;
  display: inline-block;
  padding: 1px 2px 1px 2px;
  min-width: 17px;
  min-height: 15px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  background: #ff0000;
  text-align: center;
  font-size: 1rem;
  position: absolute;
  z-index: 1;
  left: inherit;
  right: 5px;
}

.batch_Notification,
.batch_mail {
  position: relative;
  top: -29px;
  left: 12px;
  display: inline-block;
  padding: 1px 2px 1px 2px;
  min-width: 17px;
  min-height: 15px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  background: #ff0000;
  text-align: center;
  font-size: 10px;
  font-size: 1rem;
}

.batch_txt {
  position: absolute;
  padding-bottom: 2px;
  padding-top: 2px;
  top: -6px;
  left: 20px;
  display: inline-block;
  padding: 1px 2px 1px 2px;
  min-width: 17px;
  min-height: 15px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  background: #ffeb3b;
  text-align: center;
  font-size: 10px;
  font-size: 1rem;
  width: 50px;
  color: red;
}

.batch_legs {
  position: relative;
  top: 0px;
  left: 12px;
  display: inline-block;
  padding: 1px 2px 1px 2px;
  min-width: 17px;
  min-height: 15px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  background: #ff0000;
  text-align: center;
  font-size: 10px;
  font-size: 1rem
}

.batch_point {
  position: relative;
  top: -29px;
  left: 0;
  display: inline-block;
  padding: 1px 5px 1px 5px;
  min-width: 17px;
  min-height: 15px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  background: #ffeb3b;
  text-align: center;
  font-size: 10px;
  font-size: 1rem;
  color: red;
}
.fluffy {
  animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}


/*ribon
******************************/
.ribon_01 {
  max-width: 5em;
  height: 0px;
  border-top: 7px solid #478fff;
  border-right: 4px solid transparent;
  border-bottom: 7px solid #478fff;
  border-left: none;
  line-height:0;
  color:#fff;
  position: absolute;
  font-size: 9px;
  margin-left: -2px;
  padding: 0 2px;
}

.ribon_smooth { /* no jaggies! */
  -webkit-transform: scaleX(0.999999);
  transform: scaleX(0.999999);
}


/*ハンバーガーメニュー用
******************************/
.js_gnav .btn_menu {
  color: #666;
}

.js_gnav .btn_menu .batch_menu {
  color: #fff;
}


#js_gnav_btn.active a {
  background: none;
}


/*girls_v2.0.css
******************************/
.gr_pink02,
.gr_pink_02 {
  background: -webkit-gradient(linear, left top, left bottom, from(#f55e8f), color-stop(51%, #f03f78), to(#ed2e69));
  background: -webkit-linear-gradient(#f55e8f 0, #f03f78 51%, #ed2e69 100%);
  background: linear-gradient(#f55e8f 0, #f03f78 51%, #ed2e69 100%)
}

.cl_red01 {
  color: #ff0054
}

.bg_gray03,
.bg_gray_03 {
  background: #333;
}

.bg_blk {
  background-color: #000
}

.d_tbr {
  display: table-row
}

.bdb_dot_01 {
  border-bottom: 1px dotted #fff;
}

.header__menuCont .bdb_dot_01 {
  border-color: #555;
}

.w_auto {
  width: auto
}

.pd_t2 {
  padding-top: 2px
}

.pd_r3 {
  padding-right: 3px
}

.pd_b15 {
  padding-bottom: 15px
}

.fs_l,
.fs_l * {
  font-size: 16px;
  font-size: 1.6rem
}

.blink_01 {
  -webkit-animation-name: blink_01;
  animation-name: blink_01;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate
}

@-webkit-keyframes blink_01 {
  from {
    opacity: 1
  }
  40% {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

@keyframes blink_01 {
  from {
    opacity: 1
  }
  40% {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

.gnav_user__menu02 {
  position: relative;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  -webkit-tap-highlight-color: transparent
}

.gnav_user__menu02 .item {
  display: table-cell;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 0 5px 5px;
  height: 56px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #1a1a1a;
  vertical-align: middle;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent
}

.gnav_user__menu02 .item.item-large {
  height: 60px
}

.gnav_user__menu02 .item.item-harf {
  padding-right: 22px;
  padding-bottom: 0;
  height: 30px
}

.gnav_user__menu02 a {
  text-decoration: none
}

.gnav_user__menu02 .row {
  display: table;
  width: 100%;
  table-layout: fixed
}

/*通知ポップアップ用*/
.piko_notification_none {
  display: none;     
}
.done .piko_notification_wrap {
  display: none;     
}
.piko_notification_wrap {
  animation-play-state: paused;
  width: 95%;
  opacity: 0;
  z-index: 101;
  border: 1px solid #fff;
  position: fixed;
  margin: 0 2.5%;
  background: #fff;
  top: 2%;
  padding: 5px 5px;
  box-shadow: 1px 1px 8px 2px rgba(0,0,0,0.4);
  animation-name: anime;
  animation-duration: 5s;
  animation-delay: 1s;
  animation-timing-function: ease;
  animation-direction:alternate;
}
@keyframes anime {
  100% {opacity:0;}
  60% {opacity:1;}
  0% {opacity:1;}
}

/*プッシュ通知用*/
.gr_pink_orange {
  background: -webkit-gradient(linear, left top, left bottom, from(#f9741a), to(#ed2e69));
  background: -webkit-linear-gradient(90deg, #f9741a, #ed2e69);
  background: linear-gradient(90deg, #f9741a, #ed2e69)
}
.web_push_none {
  display: none;
}
.web_push_wrap {
  animation-play-state: paused;
  width: 95%;
  opacity: 0;
  z-index: 101;
  border: 1px solid #fff;
  position: fixed;
  margin: 0 2.5%;
  background: #fff;
  top: 2%;
  padding: 5px 5px;
  box-shadow: 1px 1px 8px 2px rgba(0,0,0,0.4);
  animation-name: web_push_anime;
  animation-duration: 5s;
  animation-delay: 1s;
  animation-timing-function: ease;
  animation-direction:alternate;
}
@keyframes web_push_anime {
  100% {opacity:0;}
  60% {opacity:1;}
  0% {opacity:1;}
}