/* 全体ベース：マイページ共通の生成り色を適用 */
body {
    background-color: #f8f6f1 !important;
    margin: 0;
    padding: 0;
}

.new-mypage-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 15px 100px;
    font-family: "MS PMincho", "serif";
    color: #1f222e;
}

.new-mypage-container header:after{
	content				:"";
	display				:block;
	clear					:both;
}



/* ヘッダー導線 */
.support-navigation {
    margin-bottom: 20px;
}

.btn-stone-support {
    display: inline-flex;
    align-items: center;
    color: #888;
    text-decoration: none;
    font-size: 1.2rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}
.btn-stone-support:nth-of-type(1){
	float:left;
}
.btn-stone-support:nth-of-type(2){
	float:right;
}

/* ユーザーサマリーカードの流用 */
.user-summary-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.user-summary-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(to right, #eb1c24, #f8f6f1);
}

.rank-circle-visual {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 2px solid #eb1c24;
}

.rank-circle-visual span {
    font-size: 1.8rem; font-weight: 900; color: #eb1c24;
}

/* 資産表示グリッドの流用 */
.asset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 20px;
}

.asset-item .label {
   display: block; 
	font-size: 1.3rem;
	color: #888;
	margin-bottom: 5px;
}

.asset-item .value {
    font-weight: bold; color: #1f222e;
}

.asset-item small {
    font-size: 0.8rem; margin-left: 4px;
}

/* 賞品告知：オファーカードデザイン */
.instinct-offer-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 40px;
    background: #000;
    color: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.offer-bg-image { 
	position: relative;
	height: 300px;
	overflow: hidden;
    pointer-events: none;
}
/* スライドを横に並べて動かすトラック */
.carousel-track {
    display: flex;
    width: 500%; /* 画像5枚分（100% × 5） */
    height: 100%;
    animation: infinity-scroll 80s linear infinite; 
}

.carousel-track .hero-beef {
    width: 20%; /* 100 / 5枚 = 20% */
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* マイページのデザインを継承 */
}

/* 無限ループアニメーションの設定 */
@keyframes infinity-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-90%); } /* 5枚中、最後の1枚（最初のコピー）の手前まで動かす */
}

.hero-beef { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.image-overlay {
   position: absolute;
	inset: 0;
   background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.9) 100%);
   z-index: 2;
}

.offer-content {
    position: relative; margin-top: -60px;
    padding: 0 20px 25px; text-align: center; z-index: 2;
}

.offer-badge {
   background: #eb1c24; 
	color: #fff; 
	font-size: 1.6rem;
   padding: 4px 15px;
	border-radius: 20px;
	font-weight: bold;
	display: inline-block;
}

/* タスクカードデザイン */
.task-card {
    background: #fff;
    border-radius: 18px;
    padding: 2rem 4rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    margin-bottom: 15px;
}

.task-category {
   font-size: 1.2rem;
	font-weight: bold; color: #eb1c24;
   text-transform: uppercase; letter-spacing: 0.05em;
}

.task-title { 
	font-size: 1.4rem;
	font-weight: bold;
	color: #1f222e;
	margin: 5px 0 10px;
}

.lottery-description { 
	font-size: 1.2rem;
	color: #444;
	margin-bottom: 15px; }

/* 応募ボタン：タスクアクションデザイン */
.btn-lottery-trigger {
    display: block;
    width: 100%;
    padding: 12px;
    background: #eb1c24;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    font-size: 1.4rem;
    border: none;
    box-shadow: 0 4px 15px rgba(235, 28, 36, 0.2);
    cursor: pointer;
}

/* ステータスカードデザイン */
.status-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.status-card h3 { 
	font-size: 1.2rem;
	color: #888;
	margin-bottom: 15px; 
}

.nav-list p { 
	font-size: 1.4rem;
	color: #666;
	line-height: 1.6;
	margin: 0;
}