/*=== body内共通 ===============================================================*/
.myPageBody{
	width					:100%;
	margin-top			:-5rem;
	overflow-x			:hidden;
}
.smallText{
	font-size			:0.6em;
	font-weight			:400;
}

.myPageTaskArea{
	width					:calc(100% - 3rem);
	height				:calc(100dvh - 22rem);
	overflow-x			:hidden;
	overflow-y   		:scroll;
	margin				:0 1.5rem;
	position				:absolute;
	top					:22rem;
	left					:0;
	&::-webkit-scrollbar {
    display: none;
  }
	scrollbar-width	:none;
	background			:#f8f6f1;
	border-radius		:10px 10px 0 0;	
}

.mobileFooter{
	width					:100vw;
	height				:6rem;
	position				:fixed;
	bottom				:0;
	left					:0;
	background			:#fff;
	border-top			:1px solid #ddd;
	z-index				:5;
	display				:flex;
}
.mobileFooter_box{
	width					:calc(100% / 5);
	height				:100%;
	position				:relative;
	text-align			:center;
}
.mobileFooter_box img{
	width					:auto;
	height				:calc(100% - 2rem);
	margin-top			:0.5rem;
	opacity				:0.6;
}
.mobileFooter_box p{
	font-size			:1rem;
}
.mobileFooter_box a{
	position				:absolute;
	inset					:0;
}
.mobileFooter_box button{
	width					:100%;
	height				:6rem;
	background			:none;
	border				:none;
}
.mobileFooter_box button img{
	width					:auto;
	height				:calc(100% - 2rem);
	margin-top			:0.5rem;
	opacity				:0.6;
}
.mobileFooter_box button p{
	font-size			:1rem;
}
	
/*==============================================================================*/

	
/*=== プロフィール =============================================================*/
.profileBox{
	background			:linear-gradient(90deg, #D8F0FF, #B8C6E5 30%, #E6E4F0);
	width					:100%;
	padding				:0 1.5rem;
	padding-top			:4rem;
	padding-bottom		:7rem;
	box-sizing			:border-box;
	display				:flex;
	position				:sticky;
	top					:0;
	left					:0;
	z-index				:0;
}

.beginner_background{
	background: linear-gradient(45deg, #3A3A3A 0%, #5C5C5C 45%, #9E9E9E 70%, #5C5C5C 85%, #3A3A3A 90% 100%);
}
.bronze_background{
	background: linear-gradient(45deg, #A67D3D 0%, #D49D4F 45%, #EBC28E 70%, #D49D4F 85%, #A67D3D 90% 100%);
}
.silver_background{
	background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}
.gold_background{
	background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}
.platinum_background{
	background: linear-gradient(45deg, #B0B0B0 0%, #DCDCDC 45%, #EBEBEB 70%, #DCDCDC 85%, #B0B0B0 90% 100%);
}
.diamond_background{
	background: linear-gradient(45deg, #E0E0E0 0%, #FFFFFF 30%, #C9EBFB 50%, #FFFFFF 70%, #E0E0E0 95%);
}

.beginner_background p{
	color					:#fff;
}
.profileBody{
	box-sizing			:border-box;
}
.profileBody:nth-of-type(1){
	width					:40%;
}
.profileBody:nth-of-type(2){
	width					:60%;
}
	
.profileBody p:nth-of-type(1){
	font-size			:1.6rem;
	line-height			:1;
}
.profileBody p:nth-of-type(2){
	font-size			:1.1rem;
	line-height			:1;
}
.profileBody p:nth-of-type(3){
	font-size			:1.6rem;
	margin-top			:2rem;
}
.profileBody p:nth-of-type(4){
	font-size			:2.5rem;
	font-weight			:900;
	line-height			:1;
}
.profileBody p:nth-of-type(5){
	font-size			:1.6rem;
	margin-top			:1rem;
}
.profileBody p:nth-of-type(6){
	font-size			:2.5rem;
	font-weight			:900;
	line-height			:1;
}

.changeForPaid, .changeForFree{
	width					:100%;
	padding				:1rem 2rem;
	box-sizing			:border-box;
	border-radius		:15px;
	position				:relative;
	height				:fit-content;
	text-align			:center;
}
.changeForPaid a, .changeForFree a{
	position				:absolute;
	inset					:0;
}

.changeForPaid{
	background			:linear-gradient(180deg, #333 0%, #111 100%);
}
.changeForFree{
	background			:#fff;
	border				:1px solid #1f222e;
}
	
.changeForPaid p .changeForFree p{
	font-size			:1.6rem;
}
.changeForPaid p{
	color					:#fff;	
}
.changeForFree p{
	color					:#1f222e;
}

	
/*==============================================================================*/


/*=== 保有ストーン =============================================================*/
.stoneBox{
	width					:100%;
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	padding				:2rem;
	box-sizing			:border-box;
	border-radius		:10px;
	position				:relative;
	z-index				:1;
}
.stoneBody{
	width					:100%;
	padding-bottom		:2rem;
	border-bottom		:1px solid #fff;
}
.stoneBody p{
	color					:#fff;
}
.stoneBody p:nth-of-type(1){
	font-size			:1.6rem;
	font-weight			:900;
}
.stoneBody p:nth-of-type(2){
	font-size			:4rem;
	font-weight			:900;
}
	
.giftBtn{
	position				:relative;
	width					:100%;
	padding-top			:2rem;
}
.giftBtn:after{
	content				:"";
	display				:block;
	clear					:both;
}
.giftBtn p{
	line-height			:2rem;
	color					:#fff;
}
.giftBtn p:nth-of-type(1){
	float					:left;
	font-size			:1.4rem;
	font-weight			:900;
}
.giftBtn p:nth-of-type(2){
	float					:right;
	font-size			:2rem;
}
.giftBtn a{
	position				:absolute;
	inset					:0;
}

.stone_inquiryBox{
	width					:100%;
	margin-top			:1.5rem;
}
.stone_inquiryBox button{
	width					:calc(100% - 5px);
	border				:1px solid #eee;
	background			:#f8f6f1;
	border-radius		:10px;
	box-shadow			:2px 2px 4px #c8c8c8;
	padding				:1rem;
	box-sizing			:border-box;
}
.stone_inquiryBox button:after{
	content				:"";
	display				:block;
	clear					:both;
}
.stone_inquiryBox button p{
	line-height			:2rem;
	color					:#666;
}
.stone_inquiryBox button p:nth-of-type(1){
	float					:left;
	font-size			:1.2rem;
	font-weight			:900;
}
.stone_inquiryBox button p:nth-of-type(2){
	float					:right;
	font-size			:1.6rem;
}
	
/*==============================================================================*/


/*=== ストーンアップバナー =====================================================*/
.stupBannerArea{
	width					:100%;
	margin				:2rem 0;
}
.stupBannerArea img{
	width					:100%;
}
	
/*==============================================================================*/


/*=== 大抽選会 =================================================================*/
.lotteryNewBox{
	width					:100%;
	border-radius		:20px;
	box-sizing			:border-box;
	overflow				:hidden;
	position				:relative;
}
.lotteryNewBox img{
	width					:100%;
}
.lotteryNewBox a{
	position				:absolute;
	inset					:0;
}
	
/*==============================================================================*/


/*=== お友だち紹介 =============================================================*/
.refererBox{
	width					:calc(100% - 5px);
	padding				:1rem 2rem;
	border-radius		:10px;
	margin-top			:5rem;
	background			:#fff;
	box-sizing			:border-box;
	box-shadow			:2px 2px 4px #c8c8c8;
	border				:1px solid #eee;
}
.refererBox p{
	font-size			:1.4rem;
	color					:#888;
}
	
.refererBox_countDown{
	width					:fit-content;
	padding				:0.5rem;
	box-sizing			:border-box;
	border-radius		:5px;
	background			:#eee;
}
.refererBox_countDown p{
	font-size			:1.6rem;
	color					:#1f222e;
}
.countdown{
	background			:#fff;
	padding				:0 0.25rem;
	margin				:0 0.25rem;
}

.refererBox_index{
	width					:100%;
	margin-top			:1rem;
}
.refererBox_index p:nth-of-type(1){
	font-size			:1.8rem;
	color					:#1f222e;
	font-weight			:900;
}
.refererBox_index p:nth-of-type(1) span{
	font-size			:1.5em;
	color					:#3f48cc;
}
.refererBox_index p:nth-of-type(2){
	font-size			:1.4rem;
	font-weight			:900;
	color					:#1f222e;
}

.refererBox button{
	width					:80%;
	margin				:0 10%;
	margin-top			:2rem;
	border-radius		:15px;
	border				:none;
	box-sizing			:border-box;
	background			:#C5DFFF;
	color					:#3f48cc;
	text-align			:center;
	font-size			:1.8rem;
	font-weight			:900;
	padding				:0.5rem;
}

/*==============================================================================*/


/*=== monthBox =================================================================*/
.monthGetStoneBox{
	width					:calc(100% - 5px);
	margin-top			:5rem;
	padding				:1rem 2rem;
	box-sizing			:border-box;
	border				:1px solid #eee;
	background			:#FFF;
	border-radius		:10px;
	box-shadow			:2px 2px 4px #c8c8c8;
}
.monthGetStoneBox p:nth-of-type(1){
	font-size			:1.6rem;
}
.monthGetStoneBox p:nth-of-type(2){
	font-size			:3rem;
	font-weight			:900;
	line-height			:1;
}

.monthGetStoneBarBox{
	width					:100%;
}
.monthGetStoneBar_outer{
	width					:100%;
	padding-top			:2rem;
	padding-bottom		:2.5rem;
	position				:relative;
}
.monthGetStoneBar_inner{
	width					:100%;
	height				:2rem;
	background			:#ddd;
	border-radius		:0 10px 10px 0;
	position				:relative;
	z-index				:0;
	box-shadow			:2px 2px 4px #c8c8c8;
}
.monthGetStoneBar{
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	border-radius		:0 10px 10px 0;
	height				:2rem;
	position				:absolute;
	left					:0;
	top					:0;
	z-index				:1;
	transform			:scaleX(0); /* 最初は幅を0にする */
  	transform-origin	:left; /* アニメーションの起点（左端）を指定 */
  	transition			:transform 1s cubic-bezier(0.23, 1, 0.32, 1); /* アニメーションの時間とイージングを設定 */
}
.monthGetStoneBar.is-visible {
  transform				:scaleX(1); /* 100%の幅まで伸びる */
}
.monthGetStoneBar_nextLevelMarker{
	width					:1.9rem;
	height				:1.9rem;
	border-radius		:50%;
	z-index				:2;
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	position				:absolute;
	top					:50%;
	left					:75%;
	transform			:translateY(-50%);
}
.monthGetStoneBar_nextLevelName{
	position				:absolute;
	top					:0;
	left					:75%;
	font-size			:1.4rem;
}
.monthGetStoneBar_nextLevelNum{
	position				:absolute;
	bottom				:0;
	left					:75%;
	font-size			:1.4rem;
}

/*==============================================================================*/


/*=== タスクボックス ===========================================================*/
.taskBox{
	width					:calc(100% - 5px);
	margin-top			:5rem;
	padding				:1rem 2rem;
	box-sizing			:border-box;
	border				:1px solid #eb1c24;
	background			:#FFF;
	border-radius		:10px;
	box-shadow			:2px 2px 4px #c8c8c8;
}

.taskBox p{
	width					:100%;
	font-size			:1.4rem;
	color					:#888;
	margin-top			:2rem;
}

.taskBox_body{
	width					:100%;
	display				:flex;
}

.taskBox_left{
	width					:63%;
	margin-right		:2%;
}
.taskBox_left p{
	font-size			:1.8rem;
	font-weight			:900;
	color					:#1f222e;
	line-height			:1.2;
	margin				:0;
}
.taskBox_left p:nth-of-type(1) span, .taskBox p span{
	display				:inline-block;
}
.taskBox_left p:nth-of-type(2){
	margin-top			:1rem;
}
.taskBox_left p:nth-of-type(2) span{
	font-size			:1.5em;
	font-weight			:900;
	color					:#eb1c24!important;
}
.taskBox_right{
	width					:35%;
}
.taskBox_right button{
	width					:100%;
	border				:none;
	border-radius		:5px;
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	color					:#f8f6f1;
	font-weight			:900;
	font-size			:1.4rem;
	padding				:0.5rem 0;
	box-shadow			:2px 2px 4px #c8c8c8;
	white-space			:nowrap;
}
#checkinBtn p, #bonusBtn p{
	margin-top			:0;
	width					:100%;
	border-radius		:5px;
	background			:#ddd;
	color					:#888;
	text-align			:center;
	font-weight			:900;
	font-size			:1.4rem;
	padding				:0.5rem 0;
	box-shadow			:2px 2px 4px #c8c8c8;
	white-space			:nowrap;
}
	
.taskBoxBtn{
	position				:relative;
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	border-radius		:5px;
	padding				:0.5rem 0;
	box-shadow			:2px 2px 4px #c8c8c8;
	text-align			:center;
}
.taskBoxBtn p{
	font-size			:1.4rem;
	color					:#f8f6f1;
	font-weight			:900;
	white-space			:nowrap;
	margin-top			:0;
}
.taskBoxBtn a{
	position				:absolute;
	inset					:0;
}

/*チェックインボックス*/
.checkinBoxArea{
	width					:100%;
	overflow-x			:scroll;
	display				:flex;
	&::-webkit-scrollbar {
    display: none;
  }
	scrollbar-width	:none;
	padding-top			:2rem;
}
.checkinBox{
	flex-shrink			:0;
	width					:calc(100% / 4.5);
	aspect-ratio		:1 / 1;
	position				:relative;
	border				:2px solid #eb1c24;
	border-radius		:10px;
	margin-right		:1rem;
	background			:rgba(235, 28, 36, 0.5);
}
.checkin_cnp{
	border				:2px solid #888;
	background			:#ddd;
}
.checkin_cnp img, .checkin_cnp p{
	position				:absolute;
	top					:50%;
	left					:50%;
	transform			:translate(-50%, -50%);
}
.checkin_cnp img{
	width					:80%;
	aspect-ratio		:1 / 1;
}

.checkinBox p{
	font-size			:2rem;
	font-weight			:900;
	display				:block;
	color					:#1f222e;
	text-align			:center;
	white-space			:nowrap;
}

.checkinStonUp:before{
	content				:'';
	display				:block;
	background-image	:url('https://syokutsu.adpentas.com/mypage/img/stone_up_arrow.png');
	background-size	:cover;
	position				:absolute;
	top					:-1rem;
	right					:-1rem;
	width					:2rem;
	height				:2rem;
}

/*ボーナス受取*/
.bonusCount{
	margin-top			:2rem;
}
.bonusCount p{
	font-size			:1.6rem;
	color					:#888;
}

/*アイテム閲覧*/
.itemcheckBar{
	width					:100%;
	margin-top			:2rem;
	overflow				:hidden;
}
.itemcheckBar_outer{
	width					:100%;
	display				:flex;
	&::-webkit-scrollbar {
    display: none;
  }
	scrollbar-width	:none;
	overflow-x			:scroll;
	position				:relative;
}

.itemcheckBar_line{
	position				:absolute;
	top					:1.5rem;
	left					:0;
	transform			:translateY(-50%);
	height				:1rem;
	border-radius		:5px;
	width					:calc(calc(3rem * 10) + calc(2rem * 10));
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
}

.itemcheckBar_inner{
	position				:relative;
	flex-shrink			:0;
	text-align			:center;
	margin				:0 1rem;
}


.itemcheckBar_circle{
	background			:#f8f6f1;
	border				:1px solid #eb1c24;
	width					:3rem;
	height				:3rem;
	border-radius		:50%;	
}

.itemcheckBar_num{
	font-size			:1.4rem;
}

.itemCnp img{
	width					:100%;
	height				:100%;
}

/*記事閲覧*/
.articleCheck_boxArea{
	width					:100%;
	margin-top			:2rem;
}
.articleCheck_boxArea_outer{
	width					:100%;
	overflow-x			:scroll;
	display				:flex;
}
.articleCheck_boxArea_inner{
	flex-shrink			:0;
	margin-right		:1rem;
	width					:calc(100% / 2.5);
	text-align			:center;
}
.articleCheck_boxArea_num{
	font-size			:1.6rem;
}
.articleCheck_boxArea_box{
	position				:relative;
	border				:1px solid transparent;
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	border-radius		:5px;
}
.articleCheck_boxArea_box p{
	font-size			:1.4rem;
	color					:#f8f6f1;
	margin-top			:0;
	padding				:2rem 0;
}
.articleCheck_boxArea_box a{
	position				:absolute;
	inset					:0;
}

.articleCnp{
	background			:#eee;
	border				:1px solid #888;
}
.articleCnp p{
	color					:#888;
}
	
/*==============================================================================*/


/*=== 目安箱 ===================================================================*/
.voiceArea{
	width					:100%;
	margin-top			:5rem;
	padding-bottom		:1rem;
	border-bottom		:2px solid #888;
	text-align			:center;
}
.voiceArea a{
	color					:#888;
	text-decoration	:none;
	font-size			:1.6rem;
	font-weight			:900;
}
	
/*==============================================================================*/


/*=== 規約 =====================================================================*/
.termsArea{
	width					:100%;
	margin-top			:2rem;
	margin-bottom		:10rem;
}
.termsArea p{
	font-size			:1.4rem;
	color					:#aaa;
}
.termsArea p a{
	color					:#888;
	font-weight			:900;
	text-decoration	:none;
}
	
/*==============================================================================*/


/*=== リザルト =================================================================*/
.resultMessageBox_outer{
	width					:100vw;
	height				:100vh;
	position				:fixed;
	top					:0;
	left					:0;
	z-index				:calc(Infinity);
	background			:rgba(31,34,46,0.5);
	display				:none;
}
.resultMessageBox_inner{
	width					:100%;
	height				:100%;
	position				:relative;
}
.resultMessageBox{
	position				:absolute;
	top					:50%;
	left					:50%;
	transform			:translate(-50%, -50%);
	max-width			:50%;
	min-width			:25%;
	aspect-ratio		:1 / 1;
	background			:#f8f6f1;
	border-radius		:20px;
	padding				:2rem;
	box-sizing			:border-box;
}
.resultMessageBox_index{
	width					:fit-content;
	margin				:0 auto;
	padding				:0.5rem 2rem;
	box-sizing			:border-box;
	background			:linear-gradient(to right bottom, #eb1c24, rgb(207,0,8));
	border-radius		:10px;	
}
.resultMessageBox_index p{
	font-size			:2rem;
	font-weight			:900;
	color					:#f8f6f1;
}
.resultMessageBox_message{
	width					:100%;
	margin-top			:1rem;
	text-align			:center;
}
.resultMessageBox_message p{
	font-size			:1.6rem;
	font-weight			:900;
}
	
/*==============================================================================*/