/* --- START OF FILE css/mypage.css --- */

:root {
    --primary-color: #71a1d1;
    --primary-dark: #4a7ab0;
    --primary-light: #e6f0ff;
    --accent-pink: #ff8fa3;
    --accent-yellow: #fff2cc;
    --text-main: #333;
    --text-sub: #666;
    --bg-color: #f0f2f5;
    --card-bg: #fff;
    
    --shadow-soft: 0 10px 25px rgba(88, 142, 196, 0.15);
    --shadow-hover: 0 15px 35px rgba(88, 142, 196, 0.25);
    
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* 教科トップページではページ内ナビゲーションを非表示にする */
.page-header .page-navigation {
    display: none;
}
/* 教科トップページで、スクロールアップ時のヘッダー再表示を無効化する */
header.page-header.is-hidden-locked {
    transform: translateY(-100%) !important;
}
/* 教科トップページのヘッダーの「sticky」動作を無効化し、通常のスクロールにする */
header.page-header {
    position: relative;
}
/* 黒いバーの文字の色の濃さを変える */
.indicator-subtitle {
    opacity: 1;
}
header.page-header {
    pointer-events: none;
}

/* ★修正: iOS Safariでの横揺れを防ぐため html にも overflow-x: hidden を指定（二重スクロールバーは縦方向のみの制御で回避） */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
    background-image: linear-gradient(to bottom, #fff 15.7%, #dfe5ed 15.7%, #dfe5ed 20%, #f0f2f5 45%);
    background-color: #f0f2f5; /* グラデーションより下の背景色 */
	background-size: 100% 600px;
    background-repeat: no-repeat;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: var(--text-main);
}

.page-indicator-bar  {
	z-index:10;
	position:relative;
}

#mypage-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 0px;
    padding-bottom: 0px;
    margin-top: -82px; /* ヘッダーとの調整 */
	z-index:0;
	position:relative;
}

/* アニメーション定義 */
.fade-in-up {
    animation: fadeInUp 0.6s var(--ease-smooth) forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* 画面遷移用コンテナ制御 */
.view-section {
    transition: transform 0.4s var(--ease-smooth), opacity 0.4s var(--ease-smooth);
    width: 100%;
	max-width:500px;
	margin:0 auto;

}
.view-section.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
    z-index: 1;
}
.view-section.hidden-left {
    opacity: 0;
    transform: translateX(-50px);
    pointer-events: none;
    position: absolute;
    top: 20px; left: 20px; right: 20px;
}
.view-section.hidden-right {
    opacity: 0;
    transform: translateX(50px);
    pointer-events: none;
    position: absolute;
    top: 20px; left: 20px; right: 20px;
}

/* =========================================
   学習ダッシュボードエリア
========================================= */
.dashboard-hero {
    background: #0e2957;
    border-radius: 24px;
    padding: 25px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    transform: translateZ(0);
}

@media (max-width: 500px) {
.dashboard-hero {
    margin-bottom: 0px;
    border-radius: 0px;
    padding: 30px 20px;
    box-shadow: none;
    border: none;
	z-index: 0;
	position:relative;
    overflow: visible;
}
}
@media (min-width: 501px) {
.dashboard-hero {
	margin-top:30px;
}
}


/* 背景装飾 */
.dashboard-hero::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(88,142,196,0.1) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.page-title {
    font-size: 22px;
    font-weight: 900;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.icon-chart::before {
    content: '';
    display: block;
    width: 28px; height: 28px;
    background: url('../images/menuPage_icon_graph.svg') no-repeat center/contain;
}

.level-badge {
    background: linear-gradient(135deg, #f7aa0f 0%, #e09600 100%);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.level-label { font-size: 12px; }
.level-value { font-size: 18px; line-height: 1; }

/* 統計カードグリッド (Primary) */
.stats-primary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.stat-card {
    background: #f8fbff;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    transition: transform 0.2s ease;
}

/* 上段と下段のレイアウト */
.stat-card.primary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 15px; 
    background: #031430;
    text-align: left;
    gap: 10px; /* 上段と下段の間隔 */
}

/* 上段（アイコンとラベル） */
.stat-header {
    display: flex;
    align-items: center;
    gap: 5px; /* アイコンと文字の隙間 */
}

.stat-icon {
    width: 30px; 
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.icon-word { background-image: url('../images/menuIcon_cardW.svg'); }
.icon-time { background-image: url('../images/menuIcon_stopwatchW.svg'); }

.stat-label {
    display: block;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
}

.stat-number-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.stat-card.primary .stat-number-wrapper {
    justify-content: flex-start;
}

.stat-number {
    font-size: 46px;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
}
.stat-number-mini {
    display: inline-block;
    font-size: 36px;
    margin-top: 4px;
    line-height: 1;
    margin-right: 0px;
}

.stat-number,
.stat-number-mini {
    font-family: 
        "Bahnschrift", 
        "Avenir Next Condensed", 
        "Helvetica Neue Condensed", 
        sans-serif-condensed, 
        "Arial Narrow", 
        sans-serif;
    font-stretch: condensed;
    font-weight: 900; 
    color: var(--primary-color);
    line-height: 1;
}

.stat-unit {
    font-size: 11px;
    color: #666;
    font-weight: bold;
}

/* 統計カードグリッド (Secondary) */
.stats-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3等分 */
    gap: 8px;
    margin-bottom: 8px; 
    position: relative;
    z-index: 1;
}

.stat-card.secondary {
    padding: 10px 5px;
    background: #031430;
    text-align: center;
}


.stat-unit-mini,
.stat-unit {
    font-size: 14px;
    color: #fff;
	opacity:0.8;
	font-weight: bold;
}

/* ======================================================= */
/* トロフィーサマリー (マイページ用) */
/* ======================================================= */
.trophy-summary-section {
    background: #031430;
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 25px; /* カレンダーとの隙間を確保する */
    position: relative;
    z-index: 1;
}

.trophy-summary-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.trophy-summary-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.trophy-summary-icon {
    width: 22px; 
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* アイコン指定 */
.trophy-summary-icon.icon-crown { background-image: url('../images/quizTrophy-crown-silhouette.svg'); }
.trophy-summary-icon.icon-gold { background-image: url('../images/quizTrophy-gold-silhouette.svg'); }
.trophy-summary-icon.icon-silver { background-image: url('../images/quizTrophy-silver-silhouette.svg'); }
.trophy-summary-icon.icon-bronze { background-image: url('../images/quizTrophy-bronze-silhouette.svg'); }

.trophy-summary-count {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.trophy-summary-count .multiply {
    font-size: 11px;
    color: #888;
    font-weight: normal;
}

.trophy-summary-count .number {
    font-size: 30px; 
    font-weight: 900;
    color: var(--primary-color); 
    font-family: "Bahnschrift", "Avenir Next Condensed", "Helvetica Neue Condensed", sans-serif-condensed, "Arial Narrow", sans-serif;
    font-stretch: condensed;
}

/* 学習カレンダーエリア */
.heatmap-section {
    border-top: 2px solid #355994;
    padding-top: 20px;
    position: relative;
    z-index: 1;
}

.section-title-mini {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
	opacity:0.5;
}
.dashboard-header .section-title-mini {
    margin-bottom: 0px;
}


/* 左右分割レイアウト */
.dashboard-split-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* 下揃え */
    gap: 15px;
}

/* --- 左側：カレンダー --- */
.calendar-container {
    flex: 0 0 auto;
    width: calc(100% - 170px);
}
.weekly-stats-card {
    margin-bottom: 15px; /* カレンダーとの間隔 */
    width: 100%;         /* 幅をカレンダーコンテナに合わせる */
    box-sizing: border-box;
    padding: 10px 15px !important; /* パディング微調整 */
}
.weekly-stats-card .stat-header {
    width: 100%;
}

.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 10px;
    color: #aaa;
    margin-bottom: 5px;
    font-weight: bold;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(4, 1fr); /* 4週間分 */
    gap: 6px; /* マスとマスの間隔 */
}

.calendar-cell {
    aspect-ratio: 1 / 1; /* 正方形を保つ */
    border-radius: 50%; /* 丸にする */
    background-color: #f0f2f5; /* 未学習の色（薄いグレー） */
    color: #ccc;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s;
    position: relative;
}

/* 今日の日付強調 */
.calendar-cell.is-today {
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 0 2px rgba(88, 142, 196, 0.2);
}

/* 未来の日付（枠線のみなどで表現） */
.calendar-cell.is-future {
    background: transparent;
    border: 1px dashed #e0e0e0;
}

/* 色レベル定義 */
.calendar-cell[data-level="0"] { background-color: #f0f2f5; color: #bbb; }
.calendar-cell[data-level="1"] { background-color: #bbf7c9; color: #357a40; }
.calendar-cell[data-level="2"] { background-color: #7ce695; color: #1a5c27; }
.calendar-cell[data-level="3"] { background-color: #46d446; color: #fff; }
.calendar-cell[data-level="4"] { background-color: #21a321; color: #fff; }

/* 凡例（Legend）スタイル */
.calendar-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-left: 2px;
}
.legend-label {
    font-size: 10px;
    color: #bbb;
    font-weight: bold;
}
.legend-dots {
    display: flex;
    gap: 4px;
}
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.legend-dot[data-level="0"] { background-color: #f0f2f5; }
.legend-dot[data-level="1"] { background-color: #bbf7c9; }
.legend-dot[data-level="2"] { background-color: #7ce695; }
.legend-dot[data-level="3"] { background-color: #46d446; }
.legend-dot[data-level="4"] { background-color: #21a321; }


/* --- 右側：キャラクターエリア --- */
.character-area {
    flex: 1; /* 残りのスペースを使う */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    padding-bottom: 0; /* 下端を合わせる */
}

/* 吹き出し */
.char-balloon {
    background: #fff;
    padding: 6px 12px;
    border-radius: 15px;
    color: #222;
    /* キャラクターの頭上に配置するための位置調整 */
    margin-bottom: -5px; 
    margin-right: 10px; /* 少し左にずらす */
    position: absolute;  /* これも自由に配置できるようにする */
	bottom: 222px;       /* キャラクター画像の高さ分くらい上に上げる */
    left: 0px;
    z-index: 3;
    width: 160px; /* 文字が入り切るように少し広め */
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
	box-shadow:  0 5px #d6d6d6;
}

/* 吹き出しのしっぽ */
.char-balloon::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 40px;
    width: 40px;
    height: 25px;
    background-image: url(../images/topPage-balloon_tail.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    border: none;
}

/* ★追加: 吹き出しテキストとタイピングアニメーション */
.char-balloon p {
    font-size: 14px;
    font-weight: 700;
    color: #222;
    margin: 0;
    padding: 0;
    line-height: 1.25;
    text-align: left;
    width: 100%;
}

.typing-text {
    border-right: 2px solid #555;
    padding-right: 2px;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 100% { border-color: #555; }
    50% { border-color: transparent; }
}


@keyframes floatBalloon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* キャラクター画像 */
.char-img {
    width: 200px;
	position: absolute; /* 絶対配置にする */
    bottom: -15px;          /* 親要素の下端に合わせる */
    right: -40px;       /* マイナス値を入れると右側にはみ出します（数値を調整してください） */
    
    /* 画像の比率（180:200 = 0.9）を保つ */
    aspect-ratio: 180 / 200;

    background-image: url('../images/menuPage_vispo-mypage.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain; /* 全体が入るように調整 */
}

/* =========================================
   メインコンテンツ全般
========================================= */

.main-contents{
    padding:0 20px;
}

/* 単語帳セクションの背景色とレスポンシブ */
.mynote-section {
    margin-top: 0px;
    background-color: #becbd4;
    padding: 50px 20px 55px;
}
@media screen and (max-width: 500px) {
    .mynote-section {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 0;
    }
}
@media screen and (min-width: 501px) {
    .mynote-section {
        border-radius: 24px;
		margin-top: 35px;
    }
}

/* マイ単語帳より下のセクションに区切り線を追加（実線） */
/* ※ハイライツエリア(.highlights-section)は区切り線を入れない */
.search-and-library-section,
.bookmarks-section {
    margin-top: 45px;
    padding-top: 45px;
    border-top: 2px solid #dce2e8;
}

/* ハイライツエリアの上余白のみ設定 */
.highlights-section {
    margin-top: 45px;
}

/* =========================================
   セクションタイトル (プロンプト風)
========================================= */
.select-menu-prompt {
    text-align: center;
    width: 100%;
    margin: 0 auto 24px; 
    position: relative;
    z-index: 1;
}

.select-menu-title {
    height: 30px;
    width: 200px; 
    margin: 0 auto 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ★マイ単語帳・お気に入り・ハイライト・ライブラリ・詳細画面のプロンプトのアイコン画像を疑似要素で追加 */
.prompt-mydecks,
.prompt-favorites,
.prompt-highlights,
.prompt-library,
.prompt-contents,
.prompt-change {
    position: relative;
    padding-top: 100px; /* アイコン分の高さを確保 */
    margin-top: -10px;
}
.prompt-mydecks::before,
.prompt-favorites::before,
.prompt-highlights::before,
.prompt-library::before,
.prompt-contents::before,
.prompt-change::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.prompt-mydecks::before {
    background-image: url('../images/myPageIcon-myDecks.svg');
}
.prompt-favorites::before {
    background-image: url('../images/myPageIcon-favorites.svg');
}
.prompt-highlights::before {
    background-image: url('../images/myPageIcon-highlights.svg');
}
.prompt-library::before {
    background-image: url('../images/myPageIcon-library.svg');
}
.prompt-contents::before {
    background-image: url('../images/myPageIcon-contents.svg');
}
.prompt-change::before {
    background-image: url('../images/myPageIcon-change.svg');
}

/* ★タイトルの左上の吹き出し */
.prompt-mydecks .title-mydecks,
.prompt-favorites .title-favorites,
.prompt-highlights .title-highlights,
.prompt-library .title-library,
.prompt-contents .title-contents,
.prompt-change .title-change {
    position: relative; 
}
.prompt-mydecks .title-mydecks::after,
.prompt-favorites .title-favorites::after,
.prompt-highlights .title-highlights::after,
.prompt-library .title-library::after,
.prompt-contents .title-contents::after,
.prompt-change .title-change::after {
    content: '';
    position: absolute;
    top: -100px;      
    left: -65px;     /* 左側に配置 */
    width: 100px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 10;
}
.prompt-mydecks .title-mydecks::after {
    background-image: url('../images/myPage-ballloon-mydecks.svg');
}
.prompt-favorites .title-favorites::after {
    background-image: url('../images/myPage-ballloon-favorites.svg');
}
.prompt-highlights .title-highlights::after {
    background-image: url('../images/myPage-ballloon-highlights.svg');
}
.prompt-library .title-library::after {
    background-image: url('../images/myPage-ballloon-library.svg');
}
.prompt-contents .title-contents::after {
    background-image: url('../images/myPage-ballloon-contents.svg');
}
.prompt-change .title-change::after {
    background-image: url('../images/myPage-ballloon-change.svg');
}

/* 各画像クラス */
.select-menu-title.title-continued { background-image: url('../images/menuPage-btnArea-phrase-continued.svg'); }
.select-menu-title.title-library { background-image: url('../images/myPage-btnArea-phrase-library.svg'); }
.select-menu-title.title-mydecks { background-image: url('../images/myPage-btnArea-phrase-mydecks.svg'); }
.select-menu-title.title-favorites { background-image: url('../images/myPage-btnArea-phrase-favorites.svg'); }
.select-menu-title.title-highlights { background-image: url('../images/myPage-btnArea-phrase-highlights.svg'); }
.select-menu-title.title-contents { background-image: url('../images/myPage-btnArea-phrase-contents.svg'); }
.select-menu-title.title-change { background-image: url('../images/myPage-btnArea-phrase-change.svg'); }


.select-menu-prompt .select-menu-text {
    color: #6b7175;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
}

/* 詳細画面（暗い背景）に乗るプロンプト用テキスト色調整 */
body.view-notebook-detail .prompt-contents .select-menu-text {
    color: #4a5154; /* ★修正: #bbbから#4a5154に変更 */
}

@media screen and (max-width: 500px) {
    #mypage-resume-area .select-menu-prompt .select-menu-text {
        color: #bbb;
    }
}

/* =========================================
   マイノート（単語帳）エリア
========================================= */

/* ★修正: z-index と relative を追加してタップ不可問題を解消 */
.mynote-meta-row {
    display: flex;
    justify-content: flex-end; /* ヘルプボタンを右寄せ */
    align-items: center;
    margin-bottom: 15px;
    position: relative;
    z-index: 10;
}

.mynote-meta {
    font-size: 12px;
    color: #888;
    margin: 0;
}

/* アクションボタン */
.action-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: all 0.3s var(--ease-bounce);
}

.create-btn {
    background: #0e2957;
    color: #fff;
    box-shadow: 0 4px 10px rgba(88, 142, 196, 0.3);
}
.create-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 0px rgba(0, 0, 0, 0.08);
}
.create-btn:active {
    transform: translateY(0) scale(0.95);
}
.icon-plus { margin-right: 5px; font-size: 1.2em; }

/* 単語帳グリッド */
.notebooks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 12px;  /* 上下を30px、左右を20pxに設定 */
    margin-bottom: 20px;
    perspective: 1000px;
}
@media screen and (max-width: 350px) {
    .notebooks-grid {
        grid-template-columns: 1fr;
    }
}

/* ノートブックカード（色をCSS変数で制御） */
.notebook-card {
    background-color: #fff;
    /* ノートっぽい形状 */
    border-radius: 12px 16px 16px 12px;
    padding: 18px 12px;
    position: relative;
    box-shadow: 0 4px 0px 0 rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: all 0.3s var(--ease-bounce);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px;
    z-index: 1;
    
    /* デフォルト値 */
    --card-color: #588ec4;
    border-left: 12px solid var(--card-color) !important;
}

/* ホバー時の動き */
.notebook-card:hover {
    transform: translateY(-2px) ;
    box-shadow: 0 6px 0px rgba(0,0,0,0.15);
}

.notebook-card:active {
    transform: scale(0.96);
}

.notebook-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    background-image: url('../images/myPage_icon_card.svg');
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.notebook-name {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    line-height: 1.4;
    margin-bottom: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.notebook-info {
    font-size: 11px;
    color: #999;
    text-align: right;
    margin-top: 10px;
    font-weight: bold;
}
.notebook-info .notebook-count {
    /* サイズを元の11pxの約2倍以上に設定 */
    font-size: 26px;
    
    /* .stat-number と同じフォント設定 */
    font-family: "Bahnschrift", "Avenir Next Condensed", "Helvetica Neue Condensed", sans-serif-condensed, "Arial Narrow", sans-serif;
    font-stretch: condensed;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
    margin-right: 2px;
    vertical-align: baseline; /* 文字のベースラインを揃える */
}

/* --- カード上の設定ボタン（左下に配置） --- */
.card-settings-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s;
    
    z-index: 3; /* カードのクリック領域より上 */
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-settings-btn:hover {
    background-color: rgba(0,0,0,0.05);
}
.card-settings-btn::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    background-image: url('../images/topPage_icon_trash_setting.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* 薄いグレーにする */
    opacity: 0.2; 
    filter: grayscale(100%);
}
.card-settings-btn:hover::before {
    opacity: 0.6;
}

/* =========================================
   お気に入り & ハイライト
========================================= */

.bookmarks-list, .highlights-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- ブックマークアイテム (リッチ版) --- */
.bookmark-item {
    display: flex;
    align-items: center;
    padding: 10px 15px 10px 12px;
	padding-right: 35px; /* 矢印スペース */
    
    /* ★背景の多重指定で内側を白、外側をグラデーションにする */
    border: 6px solid transparent; 
    border-radius: 22px; 
    background: 
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #94a3b8, #cbd5e1, #94a3b8) border-box;
    background-size: 100% 100%, 200% auto;
    animation: moveGradient 4s linear infinite;
    
    box-shadow: 0 5px 0px rgba(0,0,0,0.1);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 1;
}

/* 2. 右に矢印アイコンを配置 */
.bookmark-item::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
	width: 24px;
    height: 24px;
    background-image: url('../images/startBtn_arrowR-new-right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.2s ease, opacity 0.2s;
    pointer-events: none;
}

/* 3. ホバー時に矢印を濃くして少し動かす */
.bookmark-item:hover::after {
    transform: translateY(-50%) translateX(3px);
    opacity: 1;
}
.bookmark-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0px rgba(0,0,0,0.05);
}

/* ★お気に入りのサムネイル用アイコンスタイル */
.bookmark-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    position: relative;
    border: 5px solid #fff;
    box-shadow: 0 0 0 2px #aaa;
    background-color: #333;
    margin-right: 15px;
}

.bookmark-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    z-index: 1;
    box-shadow: inset 0 3px 0px rgba(0, 0, 0, 0.3);
}

/* ★追加: 右下のバッジ画像 */
.bookmark-icon::after {
    content: '';
    position: absolute;
    bottom: -10px; 
    right: -10px;
    width: 36px;
    height: 36px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    border-radius: 0;
}

.bookmark-icon.type-card::after { background-image: url('../images/iconBadge-myPage-card.svg'); }
.bookmark-icon.type-quiz::after { background-image: url('../images/iconBadge-myPage-basicQuiz.svg'); }
.bookmark-icon.type-quiz-s::after { background-image: url('../images/iconBadge-myPage-AdvancedQuiz.svg'); }
.bookmark-icon.type-list::after { background-image: url('../images/iconBadge-myPage-list.svg'); }
.bookmark-icon.type-details::after { background-image: url('../images/iconBadge-myPage-details.svg'); }

.bookmark-info {
    flex-grow: 1;
    min-width: 0;
}

.bookmark-type-label {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    background-color: #bbb;
    padding: 3px 10px;
    border-radius: 15px;
    margin-bottom: 4px;
}
/* ★クイズ・応用クイズの色を定義 */
.bookmark-type-label.type-card { background-color: #fced47; color: #111; }
.bookmark-type-label.type-quiz { background-color: #db2525; color: #fff; }
.bookmark-type-label.type-quiz-s { background-color: #294799; color: #fff; } 
.bookmark-type-label.type-list { background-color: #79b6d1; color: #fff; }
.bookmark-type-label.type-details { background-color: #7bb87b; color: #fff; }

.bookmark-title {
    font-size: 17px;
    font-weight: bold;
    color: #222;
    line-height: 1.3;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bookmark-subtitle { font-size: 13px; font-weight:bold; color: #888; }


.bookmark-delete-btn {
    width: 32px; height: 32px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: absolute; /* 親要素(.bookmark-item)を基準に配置 */
    top: -19px;           
    right: -15px;         
    opacity: 1;
    transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
    box-shadow: 0 3px 0px rgba(0,0,0,0.25);
    z-index: 2;
}
.bookmark-delete-btn:hover { 
    opacity: 1; 
    background-color: #ffebeb; 
    transform: scale(1.1);
}
.bookmark-delete-btn::before {
    content: ''; display: block;
    width: 20px; height: 20px;
    margin: 6px auto;
    background-image: url('../images/icon_closeBk.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- ハイライトカード (リッチ版) --- */
.highlight-card {
    position: relative;
    
    /* ★背景の多重指定で内側を白、外側をグラデーションにする */
    border: 6px solid transparent; 
    border-radius: 22px; 
    background: 
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #5bb4a2, #7ad3c1, #52a695, #7ad3c1, #5bb4a2) border-box;
    background-size: 100% 100%, 200% auto;
    animation: moveGradient 4s linear infinite;
    
    box-shadow: 0 5px 0px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
    z-index: 1;
}

.highlight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0px rgba(0,0,0,0.05);
}

.highlight-card-header {
    background-color: transparent; /* 背景は親で指定しているので透過 */
    padding: 15px 10px; 
    border-radius: 16px; /* 中の要素にも丸みをつける */
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    align-items: center;
    gap: 11px; /* 画像とテキストの隙間 */
    position: relative; /* 矢印アイコンと削除ボタン用 */
}

/* サムネイル画像エリア */
.highlight-thumb {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 16px;
    background-color: #333;
    position: relative;
    border: 5px solid #fff;
    box-shadow: 0 0 0 2px #aaa;
}
/* 画像の上の薄い網掛け */
.highlight-thumb::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.15); 
    border-radius: 10px;
}

/* ★ 右下アイコンの追加 */
.highlight-thumb::after {
    content: '';
    position: absolute;
    bottom: -10px; 
    right: -10px;
    width: 36px; /* ★修正: 32pxから36pxに変更 */
    height: 36px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    background-image: url('../images/iconBadge-myPage-highlights.svg');
    background-color: transparent;
    border-radius: 0;
}

/* テキスト情報エリア */
.highlight-info {
    flex-grow: 1;
    min-width: 0;
    padding-right: 30px; /* 右の削除ボタンと矢印のための余白 */
}

.highlight-card-title { 
    font-weight: bold; 
    color: #111; 
    font-size: 20px; 
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* サブテキスト（件数表示など） */
.highlight-card-meta { 
    font-size: 12px; 
    color: #888; 
    font-weight: bold;
}

/* 矢印アイコンを右に配置（ブックマークアイテム風に） */
.highlight-card-header::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('../images/startBtn_arrowR-new-right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.2s ease, opacity 0.2s;
    pointer-events: none;
}
.highlight-card-header:hover::after {
    transform: translateY(-50%) translateX(3px);
    opacity: 0.8;
}

/* 削除ボタン（絶対配置にして右上に） */
.highlight-header-actions {
    position: absolute;
    top: -19px;
    right: -15px;
    z-index: 2;
}

.highlight-delete-card-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #fff;
    cursor: pointer;
    background-image: url('../images/icon_closeBk.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s ease;
    border-radius: 50%;
    box-shadow: 0 3px 0px rgba(0,0,0,0.25);
}
.highlight-delete-card-btn:hover {
    background-color: #ffebeb;
    transform: scale(1.1);
}


.highlight-items-wrapper { padding: 15px 20px; }

.highlight-item-row {
    list-style: none; margin-bottom: 12px; line-height: 1.6;
    font-size: 14px; color: #111; position: relative; padding-left: 14px;
}
.highlight-item-row:last-child { margin-bottom: 0; }
.highlight-item-row::before {
    content: ''; 
	position: absolute; 
	left: 0; 
	top: 3px;
	left:-6px;
    width: 15px; 
	height: 15px; 
	background-color:#fce779; 
	border-radius: 50%;
}
.highlight-marker-text {
    background: linear-gradient(transparent 60%, #fffce6 60%);
    padding-bottom: 2px;
    border-radius: 2px;
    letter-spacing: 0.02em;
}

/* Empty State */
.bookmarks-empty, .highlights-empty {
    text-align: left;
    padding: 40px 30px;
    color: #999;
    background: rgba(255,255,255,0.75);
    border-radius: 16px;
    border: 2px dashed #ddd;
    font-size: 14px;
	line-height:1.6;
}

/* ヘルプボタン（丸い？アイコン） */
.help-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    border: none;
    color: #999;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    flex-shrink: 0;
	margin-top:-90px;
    
    /* ★修正: relativeとz-indexを設定してタップ可能にする */
    position: relative;
    z-index: 10;
}
.help-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: scale(1.1);
}

/* 作成ボタンの幅100%スタイル */
.full-width-btn {
    width: 100%;
    display: flex;
    justify-content: center; /* テキストを中央に配置 */
    align-items: center;
    
    position: relative;      /* アイコンを絶対配置するための基準点 */
    
    margin-top: 40px;
    padding: 12px 20px;
    font-size: 17px;
    box-shadow: 0 4px 0px rgba(0,0,0,0.2);
}

.btn-icon-plus {
    display: block;
    width: 20px;   /* アイコンサイズ */
    height: 20px;
    
    background-image: url('../images/myPage_icon_plus.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* 絶対配置で右端に固定 */
    position: absolute;
    right: 20px;   /* 右端からの距離 */
    top: 50%;      /* 上下中央の基準 */
    transform: translateY(-50%); /* 完全に上下中央に合わせる */
}

/* --- 教科選択に戻るボタン (menuPageから移植) --- */
.back-to-index-wrapper {
    background-color: #111;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-top: 60px;
    margin-top: 100px;
    text-align: center;
    position: relative; /* 疑似要素の基準 */
}

/* ★修正: back-to-index-wrapper の下部の区切り線 */
.back-to-index-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0; /* 黒背景エリアの下端に配置（フッターとの境目） */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 50px); /* スマホサイズで左右20px空ける */
    max-width: 500px; /* 最大幅500px */
    height: 1px;
    background-color: #333; /* 黒背景に合うように少し暗めのグレーに変更 */
}

.back-to-index-wrapper .next-step-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
	padding-bottom:40px;
}

.back-to-index-wrapper .button-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #111;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: 10px;
    border: 7px solid #bcc9cf;
    box-shadow: 0 4px 0px rgba(0, 0, 0, 1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* アイコン画像設定 */
.back-to-index-wrapper .button-icon.chapter-icon {
    /* 画像パスの指定 */
    background-image: url('../images/next-stepIcon_topPage.svg');
}

.back-to-index-wrapper .button-label {
    font-size: 13px;
    font-weight: bold;
    color: #bbb;
    line-height: 1.3;
}

/* ホバー時のアクション */
.back-to-index-wrapper .next-step-button:hover .button-icon {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}

.back-to-index-wrapper .next-step-button:active .button-icon {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* 一覧画面：カード内のプレビュー（ここは前回と同じ） */
.notebook-desc-preview {
    font-size: 11px;
    color: #999; /* 少し薄めのグレー */
    margin-bottom: 8px;
    line-height: 1.4;
    
    /* 2行で省略する設定 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    
    position: relative;
    z-index: 2;
    min-height: 0;
}
.notebook-desc-preview:not(:empty) {
    margin-top: 5px;
}

/* =========================================
   スクロール連動アニメーション (Scroll Reveal)
   ========================================= */
.scroll-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

/* 表示状態 */
.scroll-fade-up.is-scroll-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   アニメーションキーフレームの追加（デザイン移植用）
   ========================================= */
@keyframes moveGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes soft-glow-pulseA {
    0%, 100% {
        box-shadow: 0 0 12px var(--glow-color);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 30px var(--glow-color);
        filter: brightness(1.15);
    }
}

@keyframes stampIn {
    0% { transform: scale(1.15); opacity: 0; }
    50% { transform: scale(0.98); opacity: 1; }
    80% { transform: scale(1.01); }
    100% { transform: scale(1.0); opacity: 1; }
}


/* =========================================
   【アップグレード版】続きから始めるボタン
   ========================================= */

@media screen and (max-width: 500px) {
    #mypage-resume-area {
        background-color: #111;
        /* 親の padding(20px) を相殺して画面の左端から右端まで広げる */
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 50px;
        padding-bottom: 35px;
    }
}

@media screen and (min-width: 501px) {
    #mypage-resume-area {
        background-color: transparent;
    }
}

/* --- 続きからボタンのエリア全体（吹き出しの配置用） --- */
.resume-area {
    margin-bottom: 25px;
    position: relative;
    opacity: 0; /* stampInアニメーション用 */
    animation: stampIn 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
    animation-delay: 0.2s;
}

/* menuPage の .btn-balloon-continued 相当を疑似要素で追加 */
.resume-area::after {
    content: '';
    position: absolute;
    top: 5px; /* ボタン上部に重なるように配置 */
    left: -15px; 
    width: 80px;
    height: 80px;
    background-image: url('../images/menuPage-ballloon-continued.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 20;
    pointer-events: none; /* クリックの邪魔をしない */
    opacity: 0;
    transform: scale(0);
    transform-origin: bottom right;
    animation: stampIn 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
    animation-delay: 0.6s; /* ボタンより少し遅れてポンと出す */
}

/* --- ボタン本体のデザイン（menuPageの primary-action-button と完全同期） --- */
.special-action-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    padding-right: 40px; /* 右矢印のスペース */
    border-radius: 25px;
    text-decoration: none;
    color: #fff;
    background: transparent;
    border: none;
    box-shadow: 0 5px 0px rgba(0, 0, 0, 0.15);
    z-index: 10;
    position: relative;
    margin: 5px auto 15px; 
    width: calc(100% - 14px);
    min-height: 100px;
    --glow-color: rgba(125, 195, 227, 0.8);
    overflow: visible; /* 疑似要素がはみ出しても切れないようにする */
    box-sizing: border-box; /* ★パディング分のはみ出しを防止 */
}

.special-action-button > * {
    position: relative;
    z-index: 1;
}

/* グラデーションボーダーと光彩パルス */
.special-action-button::before {
    content: '';
    position: absolute;
    z-index: -2;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 30px;
    background-image: linear-gradient(90deg, #7dc3e3, #3bbcf0, #a4d5eb, #3bbcf0, #7dc3e3);
    background-size: 200% auto;
    animation: moveGradient 4s linear infinite, soft-glow-pulseA 2s ease-in-out infinite;
    box-shadow: 0 0 15px var(--glow-color);
    transition: box-shadow 0.3s ease, filter 0.3s ease;
}

/* 黒背景と右矢印 */
.special-action-button::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    background: url('../images/startBtn_arrowR-new-right.svg') no-repeat calc(100% - 15px) center / 24px 24px,
                linear-gradient(to right, #000, #000);
    pointer-events: none;
    opacity: 1;
    transform: none;
}

.special-action-button:hover {
    transform: scale(1.02);
}

.special-action-button:hover::before {
    box-shadow: 0 0 25px var(--glow-color);
    filter: brightness(1.2);
}


/* --- アイコン画像 (左のサムネイル) --- */
.special-action-button .button-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 15px;
    position: relative;
    border: 5px solid #000;
    box-shadow: 0 0 0 2px #666;
    background-color: #333;
}

.special-action-button .button-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    z-index: 1;
    box-shadow: inset 0 3px 0px rgba(0, 0, 0, 0.3);
}

.special-action-button .button-icon::after {
    content: '';
    position: absolute;
    bottom: -12px;
    right: -12px;
    width: 38px;
    height: 38px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    background-image: url('../images/icon-menuPage-continued.svg');
    background-color: transparent;
    border-radius: 0;
}


/* --- テキスト部分 --- */
.special-action-button .button-text-wrapper {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative; /* ★追加: ::before の基準にするため */
    z-index: 1; /* ★追加: 階層管理 */
}

/* 英語フレーズ（button-text-wrapperを利用して配置） */
.special-action-button .button-text-wrapper::before {
    content: '';
    position: absolute;
    top: -20px;       /* ★修正: 右上に配置 */
    right: -25px;     /* ★修正: 右上に配置 */
    width: 100px;
    height: 50px;
    background-image: url('../images/menuPage-btnEnglish-phrase.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    z-index: -1;      /* ★修正: テキストの背面に回す */
    pointer-events: none; 
    opacity: 0.5;
}

/* サブタイトルを「1番上」に配置 */
.special-action-button .chapter-subtitle {
    order: 1;
    font-size: 17px;
    font-weight: 900;
    opacity: 1;
    line-height: 1;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

/* タイトルを「真ん中」に配置 */
.special-action-button .chapter-title {
    order: 2;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg, #7dc3e3, #3bbcf0, #a4d5eb, #3bbcf0, #7dc3e3);
    background-size: 200% auto;
    animation: moveGradient 4s linear infinite;
    display: block;
    margin-bottom: 2px;
    position: relative; /* ★追加 */
    z-index: 2;         /* ★追加: 画像の上に表示 */
}

/* 教科（ユニット）を「1番下」に配置 */
.special-action-button .chapter-unit {
    order: 3;
    font-size: 14px;
    font-weight: 900;
    opacity: 1;
    color: #888;
    margin-top: 4px;
    letter-spacing: normal;
    text-transform: none;
}

/* --- END OF FILE css/mypage.css --- */