@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: 0%;
    width: 100%;
    border: none;
    border-top: none;
    border-bottom: none;
    background: #fff;
    color: #000;
	text-align: left;
	overflow: scroll!important;
}

.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: #FF3079;
	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: #FF3079;
	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: #FF3079;
	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;
}

.batch_unread_blog {
	display: inline-block;
	padding: 1px 2px 1px 2px;
	min-width: 17px;
	min-height: 15px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	background: #FF3079;
	text-align: center;
	font-size: 10px;
	font-size: 1rem;
}

.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;}
}
