@charset "utf-8";

main{
	padding-bottom:0;
}

#mypage{
	background: #f5f5f5;
	padding: 50px 0 70px;
	margin: 0 auto 80px;
}
#mypage>.inner{
	width: auto;
}
main #mypage h2{
	font-size: 2.2rem;
	line-height: 120%;
	margin: 0 auto 30px;
	font-family: "Noto Sans JP","游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}
main #mypage h2>span{
	display: inline;
	padding: 0;
	font-size: 2.2rem;
}
main #mypage h2>small{
	display: inline;
	font-size: 1.6rem;
	padding: 0 15px;
}
#mypage p.tx{
	display: inline-block;
	margin: 0 auto 30px;
	font-size: 1.4rem;
	line-height: 160%;
}
#mypage #tabs{
	display: block;
	letter-spacing: -0.4em;
	text-align: center;
	line-height: 0;
}
#mypage #tabs>a{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 285px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #339999;
	padding: 30px 30px 20px;
	color: #333;
	border-radius: 14px;
	margin: 0 20px 0 0;
}
#mypage #tabs>a:last-child{
	margin-right: 0;
}
#mypage #tabs>a:hover,
#mypage #tabs>a.active{
	text-decoration: none;
	background: #edfcfb;
}
#mypage #tabs>a>span{
	display: block;
	text-align: left;
	font-size: 1.6rem;
	line-height: 160%;
	letter-spacing: -0.5px;
}
#mypage #tabs>a>span.t{
	display: inline-block;
	font-size: 1.8rem;
	line-height: 120%;
	color: #339999;
	font-weight: bold;
	margin: 0 auto 20px;
	padding: 15px 0 10px 60px;
}
#mypage #tabs>a:nth-child(1)>span.t{
	background: url(/img/icn/mypage_member.svg) 0 2px no-repeat;
	background-size: 40px auto;
}
#mypage #tabs>a:nth-child(2)>span.t{
	background: url(/img/icn/mypage_address.svg) 0 2px no-repeat;
	background-size: 41px auto;
}
#mypage #tabs>a:nth-child(3)>span.t{
	background: url(/img/icn/mypage_history.svg) 0 0 no-repeat;
	background-size: 46px auto;
}
#mypage #tabs>a:nth-child(4)>span.t{
	background: url(/img/icn/mypage_favorit.svg) 0 2px no-repeat;
	background-size: 42px auto;
}
main .error-cap{
	display: none;
	margin: 0 auto 30px;
	border: 1px solid #db4c4d;
	padding: 12px 40px 12px 90px;
	line-height: 0;
	background: url(/img/icn/error_cap.svg) left 40px center no-repeat;
	background-size: 28px auto;

}
main .error-cap p{
	font-size: 1.6rem;
	color: #db4c4d;
	line-height: 140%;
	font-weight: bold;
}

main h2{
	font-size: 2.2rem;
	line-height: 120%;
	margin: 0 auto 40px;
	font-family: "Noto Sans JP","游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}
main p.title{
	font-size: 2.1rem;
	line-height: 120%;
	padding: 0 0 15px;
	margin: 0 auto 20px;
	border-bottom: 1px solid #ccc;
}


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

}

@media screen and (max-width:767px){

	main h2{
		border-bottom: 2px solid #ccc;
		text-align: center;
		padding: 0 0 10px;
		margin: 0 -20px 30px;
	}
	main p.title{
		padding: 0;
		border: none;
		font-size: 1.8rem;
		margin: 0 auto 10px;
	}

	#mypage{
		background: #fff;
		padding: 40px 0 30px;
		margin: 0 auto 30px;
		position: relative;
	}
	#mypage::after{
		content: '';
		width: 126px;
		height: 1px;
		background: #ccc;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -63px;
	}
	main #mypage h2{
		margin-bottom: 20px;
		padding: 0;
		border: none;
	}
	#mypage p.tx{
		letter-spacing: -0.5px;
	}
	#mypage #tabs>a{
		display: block;
		width: auto;
		padding: 15px 5px 15px 15px;
		margin: 0 auto 20px;
		text-align: left;
		min-height: 100px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#mypage #tabs>a:nth-child(2){
		padding-bottom: 5px;
	}
	#mypage #tabs>a:last-child{
		margin-bottom: 0;
	}
	#mypage #tabs>a>span{
		font-size: 1.4rem;
		line-height: 120%;
	}
	#mypage #tabs>a>span.t{
		display: block;
		margin: 0 auto 10px;
		padding: 5px 0 4px 40px;
	}
	#mypage #tabs>a:nth-child(1)>span.t{
		background-size: 26px auto !important;
	}
	#mypage #tabs>a:nth-child(2)>span.t{
		background-size: 27px auto !important;
	}
	#mypage #tabs>a:nth-child(3)>span.t{
		background-size: 30px auto !important;
	}
	#mypage #tabs>a:nth-child(4)>span.t{
		background-size: 28px auto !important;
	}

}