@media screen and (min-width:768px){
/*pc・タブレットcss*/

#sp-header{
	display:none;
}


}
@media screen and (min-width:768px) and ( max-width:1110px) {
}

@media (max-width: 768px) {
/*sp css*/

	#sp-header{
		position:relative;
		background-color:#fff;
		height:16vw;
		-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-justify-content: center; justify-content: center;
		-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
		-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	}
	#sp-header .logo{
		width:30%;
	}
	#sp-header .logo img{
		width:100%;
	}

	/* +++++++++++++++++++++++++ */
	
	#sp-header .gnavi{
		display:block;
	}
	#sp-header .sp-navi-btn{
		position: fixed;
		z-index:999;
		top:0;
		right:0;
		display:block;
	}
	#sp-header .sp-navi-btn.active{
		position: absolute;
	}
	#sp-header .sp-navi-btn .gnavi-toggle{
		cursor:pointer;
		width:16vw;
		height:16vw;
		background-color:rgba(255,255,255,0.5);
	}
	#sp-header .sp-navi-btn .gnavi-toggle.active{
		background-color: transparent;
	}
	#sp-header .sp-navi-btn .gnavi-toggle .gnavi-toggle-inner{
		position: absolute;
		top:5vw;
		left:5vw;
		width:8vw;
		height:6vw;
	}
	#sp-header .sp-navi-btn .gnavi-toggle span {
		position: absolute;
		left: 0;
		width: 100%;
		height:3px;
		background-color:#737373;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	#sp-header .sp-navi-btn .gnavi-toggle span:nth-of-type(1) {
		top: 0;
	}
	#sp-header .sp-navi-btn .gnavi-toggle span:nth-of-type(2) {
		top: 50%;
		margin-top:-2px;
	}
	#sp-header .sp-navi-btn span:nth-of-type(3) {
		bottom: 0;
	}
	#sp-header .sp-navi-btn .gnavi-toggle.active span {
		border-radius: 0;
		background-color:#fff;
	}
	#sp-header .sp-navi-btn .gnavi-toggle.active span:nth-of-type(1) {
		-webkit-transform: translateY(2.4vw) rotate(-315deg);
		transform: translateY(2.4vw) rotate(-315deg);
	}
	#sp-header .sp-navi-btn .gnavi-toggle.active span:nth-of-type(2) {
		opacity: 0;
	}
	#sp-header .sp-navi-btn .gnavi-toggle.active span:nth-of-type(3) {
		width:100%;
		margin-left:0%;
		-webkit-transform: translateY(-2.4vw) rotate(315deg);
		transform: translateY(-2.4vw) rotate(315deg);
	}
	
	/* +++++++++++++++++++++++++　gnavi */
	
	.navi-bg{
		display:none;
		position: fixed;
		z-index:100;
		width: 100%;
		height:100%;
		background-color:rgba(0,0,0,0.4);
	}
	.navi-bg.active{
		display: block;
	}
	#sp-header .sp-navi-box,
	#sp-header .navi-child{
		display:block;
	}
	#sp-header .navi-child{
		position:fixed;
		top:0;
		right:-80vw;
		height:100vh;
		overflow:scroll;
		z-index:998;
		width:80vw;
		padding:15vw 5vw 20vw 5vw; 
		background: url(../images/new-navi/navibg_non_member.png) no-repeat bottom center / 100% auto #000;
		-webkit-transition: 0.53s transform;
		transition: 0.53s transform;
		-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
		transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	}
	#sp-header .navi-child.non-member-bg{ background: url(../images/new-navi/navibg_non_member.png) no-repeat bottom center / 100% auto #000;}
	#sp-header .navi-child.member-man-bg{ background: url(../images/new-navi/navibg_member_man.png) no-repeat bottom center / 100% auto #000;}
	#sp-header .navi-child.member-woman-bg{ background: url(../images/new-navi/navibg_member_woman.png) no-repeat bottom center / 100% auto #000;}
	
	
	
	
	#sp-header .navi-child.active{
		-webkit-transform: translateX(-80vw);
		transform: translateX(-80vw);
	}
	body.active,
	html.active{
		overflow:hidden;
		height:100%;
	}
	#sp-header .gnavi{
	}
	#sp-header .navi-child{
	}
	#sp-header .gnavi{
		padding-bottom:8vw;
		margin-bottom:8vw;
		border-bottom: solid 1px rgba(255,255,255,0.3);
    }	
	#sp-header .gnavi.last{
		padding-bottom:0;
		margin-bottom:8vw;
		border-bottom:none;
    }	
	#sp-header .gnavi > li{
		position:relative;
		font-size:16px;
		line-height:1;
		color:#fff;
		margin-bottom:8vw;
		letter-spacing:0.1em;
	}
	#sp-header .gnavi > li:last-child{
		margin-bottom:0;
	}
	#sp-header .gnavi > li > a,
	#sp-header .gnavi > li > .dropdwn{
		position:relative;
		display:block;
		color:#fff;
		text-decoration:none;
		padding:0px 1.2vw;
	}
	#sp-header .gnavi > li > .dropdwn{
		display:block;
        font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", "Lucida Grande", sans-serif !important;
	}
	
	/* accordion icon++++++++ */
	
	#sp-header .gnavi .accordion_icon,
	#sp-header .gnavi .accordion_icon span {
		display: inline-block;
		transition: all .4s;
	}
	#sp-header .gnavi .accordion_icon {
		position:absolute;
		right:0vw;
		top:50%;
		width: 4vw;
		height: 4vw;
		margin-top:-0.3vw;
	}
	#sp-header .gnavi .accordion_icon span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #fff;
	}
	#sp-header .gnavi .accordion_icon span:nth-of-type(1) {
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
	}
	#sp-header .gnavi .accordion_icon span:nth-of-type(2) {
		display:block;
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
	}
	#sp-header .gnavi .dropdwn.active .accordion_icon span:nth-of-type(1) {
		top:-0.4vw;
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
	}
	#sp-header .gnavi .dropdwn.active .accordion_icon span:nth-of-type(2) {
		display:none;
	}
	
	
	/* navi ++++++++ */
	
	#sp-header .gnavi .sub-link{
		position:relative;
		font-size:13px;
		padding-left:1.5em;
		margin-bottom:5vw;
	}
	#sp-header .gnavi .sub-link:before{
		content:"";
		position:absolute;
		left:0;
		top:0.4em;
		width:1.2em;
		height:1.2em;
		margin-top:-0.6em;
		background: url(../images/new-navi/icon_sublink.svg) no-repeat center center / cover;
	}
	
	/* ++++++++ */
	#sp-header .gnavi .icon{
		position:relative;
		padding-left:1.5em;
	}
	#sp-header .gnavi .icon:before{
		content:"";
		position:absolute;
		left:0;
		top:0.4em;
		width:1.2em;
		height:1.2em;
		margin-top:-0.5em;
	}
	
	
	#sp-header .gnavi .i-woman a{
		color:#DC1976;
		font-size:17px;
		font-weight:700;
	}
	#sp-header .gnavi .icon.i-woman:before{	background: url(../images/new-navi/icon_woman.svg) no-repeat center center / cover;}
	#sp-header .gnavi .i-woman a{
		color:#DC1976;
		font-size:17px;
		font-weight:700;
	}
	#sp-header .gnavi .icon.i-man:before{	background: url(../images/new-navi/icon_man.svg) no-repeat center center / cover;}
	#sp-header .gnavi .i-man a{
		color:#0076B4;
		font-size:17px;
		font-weight:700;
	}
	
	#sp-header .gnavi .icon.i-login:before{	background: url(../images/new-navi/icon_login.svg) no-repeat center center / cover;}
	#sp-header .gnavi .icon.i-access:before{	background: url(../images/new-navi/icon_access.svg) no-repeat center center / cover;}
	#sp-header .gnavi .icon.i-compa:before{	background: url(../images/new-navi/icon_compa.svg) no-repeat center center / cover;}
	#sp-header .gnavi .icon.i-prof:before{	background: url(../images/new-navi/icon_prof.svg) no-repeat center center / cover;}
	#sp-header .gnavi .icon.i-photo:before{	background: url(../images/new-navi/icon_photo.svg) no-repeat center center / cover;}
	#sp-header .gnavi .icon.i-blog:before{	background: url(../images/new-navi/icon_blog.svg) no-repeat center center / cover;}
	#sp-header .gnavi .icon.i-home:before{	background: url(../images/new-navi/icon_home.svg) no-repeat center center / cover;}
	#sp-header .gnavi .icon.i-payment:before{	background: url(../images/new-navi/icon_payment.svg) no-repeat center center / cover;}
	#sp-header .gnavi .icon.i-bank-notice:before{	background: url(../images/new-navi/icon_bank-notice.svg) no-repeat center center / cover;}
	#sp-header .gnavi .icon.i-setting:before{	background: url(../images/new-navi/icon_setting.svg) no-repeat center center / cover;}
	
	
	/* dropdwn ++++++++ */
	
	#sp-header .gnavi .dropdwn{
		cursor:pointer;
	}
	#sp-header .gnavi .dropdwn > a{
		display:block;
		position:relative;
		font-size:18px;
		line-height:1;
		color:#fff;
		margin-bottom:6vw;
	}
	#sp-header .gnavi .dropdwn_menu{
		display:none;
		padding-top:5vw;
		padding-left:1em;
	}
	#sp-header .gnavi .dropdwn_menu li{
		position:relative;
		margin-bottom:3vw;
	}
	#sp-header .gnavi .dropdwn_menu a{
		display:block;
		text-indent:-1.5em;
		color:#fff;
		padding-left:1.5em;
		font-size:13px;
		line-height:1.5;
	}
	#sp-header .gnavi .dropdwn_menu a:before{
		content:"∟ ";
		color:rgba(255,255,255,0.6)
	}
	
	/* non-member-btn ++++++++ */
	
	#sp-header .non-member-btn{
		margin-bottom:8vw;
		padding-top:8vw;
		background:url(../images/new-navi/line_deco.svg) no-repeat top center / 100% auto;
	}
	#sp-header .non-member-btn li{
		margin-bottom:4vw;
	}
	#sp-header .non-member-btn a{
		display:block;
		color:#fff;
		font-size:15px;
		font-weight:700;
		border: solid 2px #fff;
		border-radius:10px;
		padding:5vw 0;
		text-align:center;
	}
	#sp-header .non-member-btn span{
		position:relative;
		display: inline-block;
		padding-left:1.5em;
		font-weight:700;
        font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", "Lucida Grande", sans-serif !important;
	}
	#sp-header .non-member-btn span:before{
		content:"";
		position:absolute;
		left:0;
		top:50%;
		width:1.2em;
		height:1.2em;
		margin-top:-0.6em;
	}
	#sp-header .non-member-btn .man-btn a{
		color:#0076B5;
		border: solid 2px #0076B5;
	}
	#sp-header .non-member-btn .man-btn span:before{ background: url(../images/new-navi/icon_man.svg) no-repeat center center / cover; }
	#sp-header .non-member-btn .woman-btn a{
		color:#DC1B76;
		border: solid 2px #DC1B76;
	}
	#sp-header .non-member-btn .woman-btn span:before{ background: url(../images/new-navi/icon_woman.svg) no-repeat center center / cover; }


	/* language-navi ++++++++ */
	
	#sp-header .language-navi{
		width:70%;
		border-radius:5px;
		font-size:13px;
		-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
		-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	}
	#sp-header .language-navi a{
		display:block;
		padding:10px 5px;
		color:#fff;
		background-color:rgba(255,255,255,0.3);
		font-weight:700;
        font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", "Lucida Grande", sans-serif !important;
	}
	#sp-header .language-navi li.active a{
		color:#000;
		background-color:rgba(255,255,255,1);
	}
	#sp-header .language-navi li{
		position:relative;
		width:50%;
		text-align:center;
	}
	#sp-header .language-navi li:nth-child(1) a{ border-radius:7px 0 0 7px;}
	#sp-header .language-navi li:nth-child(2) a{ border-radius:0 7px 7px 0;}
	

	/* member-data ++++++++ */
	
	#sp-header .member-data{
		margin-bottom:8vw;
		padding-bottom:8vw;
		background:url(../images/new-navi/line_deco.svg) no-repeat bottom center / 100% auto;
	}
	#sp-header .member-data .member-status{
		display:inline-block;
		margin-bottom:3vw;
		font-size:11px;
		line-height:1;
		color:#fff;
		background-color:#ccc;
		padding:1vw 3vw;
        font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", "Lucida Grande", sans-serif !important;
	}
	#sp-header .member-data.prof-man .member-status{ background-color:#0177B6; }
	#sp-header .member-data.prof-woman .member-status{ background-color:#DD1C77; }
	#sp-header .member-data .member-name{
		font-size:20px;
		line-height:1;
		color:#fff;
        font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", "Lucida Grande", sans-serif !important;
	}
	#sp-header .member-data .member-name .unit{
		font-size:14px;
        font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", "Lucida Grande", sans-serif !important;
	}


}