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

/* =========================================
   アニメーション定義 (Animations)
   ========================================= */
@keyframes moveGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes slideIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* =========================================
   基本設定 & レイアウト (Base & Layout)
   ========================================= */
html, body {
    color: var(--text-main);
    font-family: "Helvetica Neue", Arial, sans-serif;
    /* メイン背景 */
    background-image: linear-gradient(to bottom, #fff 15.7%, #cdd1d4 15.7%, #f9f9f9 70%, #f9f9f9 93%);
    background-color: #f9f9f9;
    background-size: 100% 600px;
    background-repeat: no-repeat;
    /* 横スクロール防止の安全策 */
    overflow-x: hidden;
    width: 100%;
}

#top-page-container {
    /* ヒーローヘッダーがなくなった場合でもレイアウトが崩れないよう調整 */
    margin-top: -82px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0px;
}

/* ヘッダー調整 */
.page-header .page-navigation {
    display: none;
}

header.page-header.is-hidden-locked {
    transform: translateY(-100%) !important;
}

header.page-header {
    position: relative;
    background-color: transparent;
    z-index: 10;
}

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

/* ダッシュボード コンテナ */
.dashboard-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 20px 80px;
    /* 黒いセクションの下に余白を追加 */
    padding-top: 60px;
}

/* セクション共通マージン */
.dashboard-section {
    margin-top: 10px;
}

.dashboard-section:first-child {
    margin-top: 0;
}

.install-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 30px 20px 40px;
    background-color: #111;
    overflow: visible;
	box-sizing: border-box;
}
@media screen and (min-width: 501px) {
.install-container {
    border-radius:20px;
    padding: 35px 35px 40px;
}
}

.about-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.section-header {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.section-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0;
    font-family: inherit; /* 親要素（全体のフォント設定）に従う */
}
/* Installセクション（黒背景）内のヘッダー文字色調整 */
.install-container .section-header {
    margin-bottom: 20px; /* バナーとの間隔調整 */
}
.install-container .section-title {
    color: #fff !important;
}
.install-container .section-description {
    color: #ccc !important;
}

/* もともとinstall-bannerに設定していた margin-top をリセット */
.install-banner {
    margin-top: 0; 
}

/* 明るい背景用 */
#features-section .section-title,
#install-section .section-title,
#about-section .section-title,
#main-content-area .section-title,
#how-to-use-section .section-title {
    color: #333; 
}

.section-description {
    font-size: 0.85rem;
    color: var(--text-sub);
	margin-top:2px;
}


/* =========================================
   マイページ誘導セクション (Black CTA)
   ========================================= */
#mypage-promo-section {
    background-color: #000;
    width: 100%;
	max-width:500px;
    padding: 55px 20px 60px;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    border-top: 1px solid #222; 
    box-shadow: 0;
}
@media screen and (min-width: 501px) {
#mypage-promo-section {
    border-radius:20px;
    padding: 35px 35px 50px;
}
}

.cta-inner-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;    /* 左右中央揃え */
}

.mypage-promo-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 650px; 
    padding: 25px;
    box-sizing: border-box;
    text-decoration: none;
    color: #f0f2f5;
    border-radius: 24px;
    position: relative;
    z-index: 1;
    background: transparent;
    box-shadow: 0 0 20px rgba(164, 213, 235, 0.25), 0 0 40px rgba(164, 213, 235, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mypage-promo-card::before {
    content: '';
    position: absolute;
    z-index: -2;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    background: linear-gradient(90deg, 
        var(--accent-blue), 
        var(--accent-pink), 
        var(--accent-yellow), 
        var(--accent-pink), 
        var(--accent-blue)
    );
    background-size: 200% auto;
    animation: moveGradient 6s linear infinite;
    border-radius: 29px; 
    transition: background 0.5s ease;
}

.mypage-promo-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #111;
    border-radius: 24px;
}

.mypage-promo-card > * {
    position: relative;
    z-index: 2;
}

.mypage-promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 35px rgba(164, 213, 235, 0.5), 0 0 60px rgba(164, 213, 235, 0.2);
}

/* --- プロモーションアイコン --- */
.promo-icon-wrapper {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2a2a2a, #333); 
    border: 1px solid #444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    
    /* 背景画像共通設定 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50px 50px;
}

/* アイコン指定 (../images/...) */
.promo-icon-wrapper.icon-mypage-large {
    background-image: url('../images/topPageIconL_mypage.svg');
}

.promo-text-content {
    flex-grow: 1;
    min-width: 0; 
}

.promo-label {
    font-size: 0.75rem;
    font-weight: 900;
    
    /* ▼▼▼ 変更: 文字色を透明にし、背景グラデーションを文字型に切り抜く ▼▼▼ */
    color: transparent; 
    background: linear-gradient(90deg, 
        var(--accent-blue), 
        var(--accent-pink), 
        var(--accent-yellow), 
        var(--accent-pink), 
        var(--accent-blue)
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    
    /* ▼▼▼ 外枠と同じアニメーションを適用 ▼▼▼ */
    animation: moveGradient 6s linear infinite;
    
    /* その他のスタイルは維持 */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
    display: inline-block; /* グラデーションを綺麗に見せるため */
}

.promo-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 6px 0;
    color: #fff;
    line-height: 1.2;
}
.promo-title .text-highlight {
    font-size: 1.6em; /* 親文字サイズの1.2倍にする */
}

.promo-desc {
    font-size: 12px;
    color: #aaa;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promo-arrow {
    width: 32px;
    height: 32px;
    background: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    transition: background 0.3s;
    flex-shrink: 0;
}

.promo-arrow::after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-left: -2px;
}

.mypage-promo-card:hover .promo-arrow {
    background: var(--accent-blue);
}
.mypage-promo-card:hover .promo-arrow::after {
    border-color: #000;
}

/* モバイル対応 */
@media (max-width: 480px) {
    .mypage-promo-card {
        padding: 20px 15px;
		padding-left:10px;
        flex-direction: row;
        align-items: center;
    }
    .promo-icon-wrapper {
        width: 60px;
        height: 60px;
        margin-right: 10px;
        background-size: 50px 50px;
    }
   
    .promo-arrow {
        display: none;
    }
}

/* =========================================
   特徴セクション (Features)
   ========================================= */
/* コンセプトメッセージ */
.features-concept-message {
    background-color: #333;
    color: #fff;
    padding: 20px;
    border-radius: 20px;
    margin: 35px 0 30px;
    line-height: 1.6;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 1px solid #444;
	position:relative;
}
.features-concept-message:after {
    content: "";
    position: absolute;
    background: url('../images/topPage-balloonImg_tako.svg') top right 20px no-repeat;
    background-size: auto;
    width: 100%;
    height: 40px;
    top: -32px;
	left:0;
    z-index: 3;
}

/* スマホ形式（1カラム）で統一 */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 20px;
    width: 100%;
}

/* 基本カード設定 */
.feature-card {
    background-color: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 0px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease;
    color: #333;
    border: 1px solid #eee;
}

/* --- feature-icon 共通設定 --- */
.feature-icon {
    width: 50px;
    height: 50px;
    background-color: #9da5ab;
    border-radius: 12px;
    margin-bottom: 15px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* アイコン画像表示 (::after) */
.feature-icon::after {
    content: '';
    display: block;
    width: 36px;  /* アイコンサイズ */
    height: 36px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* --- サポート機能のアイコンパス --- */
.feature-icon.icon-support-dashboard::after { background-image: url('../images/topPage_icon-graph.svg'); background-size: 32px;  }
.feature-icon.icon-support-review::after    { background-image: url('../images/topPage_icon-review.svg'); }
.feature-icon.icon-support-mypage::after    { background-image: url('../images/topPage_icon-myPage.svg'); }
.feature-icon.icon-support-clip::after      { background-image: url('../images/topPage_icon-qrip.svg');}
.feature-icon.icon-support-share::after     { background-image: url('../images/topPage_icon-share.svg'); }
.feature-icon.icon-support-game::after      { background-image: url('../images/topPage_icon-trophy.svg'); }
.feature-icon.icon-support-print::after     { background-image: url('../images/topPage_icon-printer.svg'); }
.feature-icon.icon-support-ui::after        { background-image: url('../images/topPage_icon-swipe.svg'); }
.feature-icon.icon-support-web::after       { background-image: url('../images/topPage_icon-pc.svg'); }
.feature-icon.icon-support-data::after      { background-image: url('../images/topPage_icon-data.svg'); }


/* デフォルト見出しスタイル */
.feature-card h3 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #111;
}

.feature-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    flex-grow: 1;
	text-align: justify;
}

/* マイページ連携カード */
.highlight-card {
    border: 5px solid #98a9b5;
    background: linear-gradient(to bottom right, #ebeff2, #ebeff2);
}

.feature-link-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 20px;
    background-color: #7696ad;
    color: #fff;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 20px;
    text-decoration: none;
    transition: opacity 0.3s;
}
.feature-link-btn:hover { opacity: 0.8; }


/* =========================================
   Core Features (4つの学習モード)
   ========================================= */

/* カードレイアウト */
.mode-card {
    position: relative;          
    overflow: visible;           
    margin-top: 40px; 
    padding-top: 38px;           
    border: 5px solid #ccc;
    background-color: #fff;
    border-radius: 20px;
    align-items: stretch;        
}

/* モードカード用アイコン (枠) */
.mode-card .feature-icon {
    position: absolute;          
    top: 0;                      
    left: 50%;                   
    transform: translate(-50%, -50%); 
    margin-bottom: 0;            
    width: 60px;                 
    height: 60px;
    border-radius: 16px;           
    border: 6px solid #fff;      
    z-index: 2;
}

/* モードカード用アイコン (画像・サイズ) */
.mode-card .feature-icon::after {
    width: 40px; 
    height: 40px;
}

/* 各モードのアイコンパス */
.feature-icon.icon-mode-card::after    { background-image: url('../images/menuPage-icon_card_top.svg'); }
.feature-icon.icon-mode-quiz::after    { background-image: url('../images/menuPage-icon_quiz_top.svg'); }
.feature-icon.icon-mode-list::after    { background-image: url('../images/menuPage-icon_list_top.svg'); }
.feature-icon.icon-mode-details::after { background-image: url('../images/menuPage-icon_details_top.svg'); }

/* テキスト配置 */
.mode-card .mode-subtitle,
.mode-card h3 {
    text-align: center;
    width: 100%;
}
.mode-card .mode-subtitle {
    margin-top: 5px;
    margin-bottom: 4px;
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
    color: #888;
}
.mode-card h3 {
    margin-top: 2px;
    margin-bottom: 30px;
}
.mode-card .mode-lead {
    font-weight: bold;
    color: #111;
    margin-bottom: 12px;
    font-size: 0.95rem;
    text-align: left;
}

/* 詳細リスト */
.mode-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}
.mode-detail-list li {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 8px;
    color: #555;
    padding-left: 0;
}
.mode-detail-list li:last-child { margin-bottom: 0; }
.mode-detail-list .label {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-right: 6px;
    color: #fff;
    vertical-align: middle;
}
.mode-detail-list .label.role { background-color: #888; }
.mode-detail-list .label.merit { background-color: #666; }
.mode-detail-list .point {
    background-color: #f9f9f9;
    padding: 8px;
    border-radius: 8px;
    color: #444;
    border-left: 3px solid #ccc;
    margin-top: 4px;
}

/* 各モードの色設定 */
/* Card */
.mode-card.mode-card-card { border-color: var(--accent-yellow); }
.mode-card.mode-card-card .feature-icon { background-color: var(--accent-yellow); }
.mode-card-card .mode-detail-list .point { border-left-color: var(--accent-yellow); }
/* Quiz */
.mode-card.mode-card-quiz { border-color: var(--accent-pink); }
.mode-card.mode-card-quiz .feature-icon { background-color: var(--accent-pink); }
.mode-card-quiz .mode-detail-list .point { border-left-color: var(--accent-pink); }
/* List */
.mode-card.mode-card-list { border-color: var(--accent-blue); }
.mode-card.mode-card-list .feature-icon { background-color: var(--accent-blue); }
.mode-card-list .mode-detail-list .point { border-left-color: var(--accent-blue); }
/* Details */
.mode-card.mode-card-details { border-color: var(--accent-green); }
.mode-card.mode-card-details .feature-icon { background-color: var(--accent-green); }
.mode-card-details .mode-detail-list .point { border-left-color: var(--accent-green); }


/* =========================================
   Features セクション全体のレイアウト
   ========================================= */
.feature-sub-section {
    margin-bottom: 60px;
}
.feature-sub-section.support-area {
    margin-bottom: 0;
    padding-top: 40px;
    border-top: 1px dashed #ddd; 
}
.sub-section-header {
    text-align: center;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.sub-section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--accent-blue);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    background: rgba(164, 213, 235, 0.35);
    padding: 4px 16px;
    border-radius: 20px;
}
.sub-section-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #333;
    margin: 0 0 10px 0;
}
.sub-section-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
	text-align:left;
}
@media (max-width: 768px) {
    .sub-section-title { font-size: 1.5rem; }
}

/* メインイメージ画像 */
.cycle-feature-img {
    width: 80%;
    max-width: 400px;
    height: 320px; 
    margin: 0px auto 0;
    background-image: url('../images/topPage-image_4appFeature.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* =========================================
   Support Functions (サポート機能) のスタイル調整
   ========================================= */

/* グリッド調整: アイコンが飛び出す分、縦間隔を広げる */
.support-area .feature-grid {
    row-gap: 50px;
    margin-top: 30px; 
}

/* カードレイアウト変更: アイコン中央配置用 */
.support-area .feature-card {
    position: relative;
    overflow: visible;
    padding-top: 45px;   /* アイコンが被らないよう内部余白追加 */
    align-items: center; /* 中央揃え */
    text-align: center;  /* 中央揃え */
}

/* アイコン位置: 中央上部に飛び出す */
.support-area .feature-card .feature-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 0;
    
    border: 6px solid #fff;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    z-index: 2;
}

/* フォントサイズ縮小 (26px -> 22px) */
.support-area .feature-card h3 {
    font-size: 22px;
}

.support-area .feature-card p {
    margin-top: 5px;
	text-align: justify;
}


/* =========================================
   How to Use セクション (使用方法)
   ========================================= */

/* 導入ボックス */
.usage-intro-box {
    background: #333;
	color:#fff;
    padding: 25px;
    border-radius: 20px;
    margin: 52px 0 60px;
    border-left: 1px solid #444;
    box-shadow: 0 4px 0px rgba(0,0,0,0.1);
	position:relative;
}
.usage-intro-box:after {
    content: "";
    position: absolute;
    background: url('../images/topPage-balloonImg_tako.svg') top right 20px no-repeat;
    background-size: auto;
    width: 100%;
    height: 52px;
    top: -44px;
	left:0;
    z-index: 3;
}
.usage-intro-box h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #bbb;
}
.usage-intro-box p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #fff;
}

/* --- Stepブロック共通設定 --- */
.usage-step-block {
    background: #fff;
    border-radius: 20px;
    /* ▼ 変更: 矢印アイコンを表示するスペースを確保するため広げる */
    margin-bottom: 80px;
    
    box-shadow: 0 4px 0 rgba(0,0,0,0.05);
    border: 1px solid #eee;
    
    /* バッジと矢印を飛び出させるための設定 */
    position: relative;
    overflow: visible; 
}

/* ▼▼▼ 追加: ブロック間の下向き矢印アイコン設定 ▼▼▼ */
/* 最後のブロック(Step4)以外に適用 */
.usage-step-block:not(:last-of-type)::after {
    content: '';
    position: absolute;
    /* 親ブロックの下端から中央へ配置 */
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    
    /* 画像のサイズ（必要に応じて調整してください） */
    width: 160px;
    height: 40px;
    
    /* 画像指定 */
    background-image: url('../images/topPage-icon_down-arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    z-index: 1;
    opacity: 0.8; /* 少し柔らかく見せる場合 */
}

/* Stepヘッダーエリア */
.step-header {
    padding: 30px 20px 15px; /* バッジが乗るため上部余白多め */
    border-bottom: 1px solid #f0f0f0;
    border-radius: 20px 20px 0 0;
    text-align: center;
    position: relative;
}
.step-header h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #222;
    margin: 0;
}

/* ヘッダー背景色バリエーション */
.step-header.header-yellow { background: #fff9c4; }
.step-header.header-red    { background: #ffcdd2; }
.step-header.header-blue   { background: #e1f5fe; }
.step-header.header-green  { background: #e8f5e9; }

/* --- Stepバッジ（中央配置・飛び出しデザイン） --- */
.step-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央配置かつ半分上にずらす */
    
    background: #000;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 900;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    
    border: 4px solid #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 2;
}

/* ボディエリア */
.step-body {
    padding: 25px;
}
.step-lead {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 20px;
}

/* Step 1: 操作ガイド */
.operation-guide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 600px) {
    .operation-guide { grid-template-columns: 1fr; }
}

.guide-box {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 12px;
}
.guide-box h4 {
    font-size: 0.9rem;
    font-weight: bold;
    color: #588ec4;
    margin-bottom: 8px;
}
.guide-box ul {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}
.step-note {
    font-size: 0.85rem;
    color: #888;
    margin-top: 15px;
}

/* Step 2: リスト */
.step-detail-list {
    background: #fff5f5;
    padding: 15px 15px 15px 35px;
    border-radius: 12px;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}
.step-detail-list li { margin-bottom: 8px; }

/* Step 3: サブ機能 */
.step-sub-feature {
    display: flex;
    flex-direction: column;
    gap: 15px;
	background: #f4f4f4;
    padding: 15px;
    border-radius: 12px;
}

.sub-feature-content h4 {
    font-size: 0.95rem;
    font-weight: bold;
    color: #2e617d;
    display: flex;
    align-items: center;
}
.sub-feature-content p {
    font-size: 0.9rem;
    color: #555;
    margin: 13px 0 0;
    line-height: 1.6;
}

/* Step 4: ハイライトBOX */
.highlight-feature-box {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 12px;
}
.highlight-feature-box h4 {
    font-size: 0.95rem;
    font-weight: bold;
    color: #2e7d32;
    display: flex;
    align-items: center;
}
.highlight-feature-box h4 .icon {
    font-size: 1.2em;
    margin-right: 5px;
}
.highlight-feature-box p {
    font-size: 0.9rem;
    color: #555;
    margin: 13px 0 0;
    line-height: 1.6;
}

/* =========================================
   Linkage Block (すべてはマイページへ)
   ========================================= */

/* 連携機能ブロック（黒いエリア） */
.linkage-block {
    background: linear-gradient(135deg, #222 0%, #333 100%);
    border-radius: 20px;
    padding: 45px 30px 30px; /* 上部の余白を広げてアイコンとの被りを防ぐ */
    color: #fff;
    position: relative;
    
    /* ▼▼▼ 変更: アイコンをはみ出させるため visible に変更 ▼▼▼ */
    overflow: visible; 
    
    /* ▼▼▼ 追加: 上にはみ出すアイコン分のスペース確保 ▼▼▼ */
    margin-top: 110px;
    
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* ▼▼▼ 追加: 上にはみ出すメインアイコン ▼▼▼ */
.linkage-main-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* これで完全に中心が上辺に来ます */
    
    width: 70px;
    height: 70px;
    background-color: #aaa; /* アイコンの背景色 */
    border-radius: 18px;
    
    /* 外枠（白い枠）をつけて背景から浮き立たせる */
    border: 8px solid #222; 
    
    /* アイコン画像の指定 */
    background-image: url('../images/myPage_iconL_mypage-book.svg'); /* ← 適当なアイコンパス */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px;
    
    z-index: 5;
}

/* 内部コンテンツのラッパー */
.linkage-inner {
    position: relative;
    z-index: 2;
    text-align: center; /* 全体を中央寄せにする */
}

/* タイトル */
.linkage-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    
    /* アイコンの下に来るので少し余白を調整 */
    margin-top: 10px;
}

/* 説明文 */
.linkage-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #ddd;
    margin-bottom: 30px;
    text-align: justify; /* 必要であれば左揃え or 両端揃え */
}

/* カードグリッド */
.linkage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* 幅を調整 */
    gap: 20px;
}

/* 内部カード */
.linkage-card {
    background: rgba(255,255,255,0.08); /* 半透明の白 */
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    text-align: left;
    transition: transform 0.3s ease, background-color 0.3s;
}

.linkage-card:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-3px);
}

.linkage-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.linkage-card strong.yellow-text { color: #e0d66e; }
.linkage-card strong.blue-text   { color: #a4d5eb; }

.linkage-card span {
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.6;
    display: block;
}


/* =========================================
   インストール誘導 (Install)
   ========================================= */

/* コンテナ：光る枠が見切れないように overflow を visible に */
/* .install-container は Base & Layout で定義済みですが、詳細設定をここでも確認 */

/* バナー本体：基本設定 */
.install-banner {
    /* 背景色は擬似要素(::after)で指定するため透明に */
    background: transparent;
    border-radius: 20px;
    padding: 30px;
    color: #fff;
    text-align: center;
    position: relative;
    /* 重要：光る枠をはみ出させるため overflow: visible に変更 */
    overflow: visible; 
    margin-top: 50px;
    /* バナー自体を浮き上がらせる */
    transform: translateZ(0); 
    z-index: 1;
}
@media screen and (min-width: 501px) {
.install-banner {
    margin-top: 35px;
}
}

/* ▼▼▼ 1. 光る外枠 (ブルー系グラデーション) ▼▼▼ */
.install-banner::before {
    content: '';
    position: absolute;
    z-index: -2; /* 最背面 */
    
    /* 枠の太さ */
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    
    /* ブルー系のグラデーション (シアン -> ロイヤルブルー -> アクセント -> ロイヤルブルー -> シアン) */
    background: linear-gradient(90deg, 
        #00c6fb, 
        #005bea, 
        var(--accent-blue), 
        #005bea, 
        #00c6fb
    );
    background-size: 200% auto;
    
    /* 光が動くアニメーション */
    animation: moveGradient 3s linear infinite;
    
    border-radius: 24px; /* 本体より少し丸く */
    
    /* ぼかしを入れて発光感を出す */
    filter: blur(6px); 
    opacity: 0.9;
}

/* ▼▼▼ 2. 背景と内部の装飾 (黒背景 + 左上の光) ▼▼▼ */
.install-banner::after {
    content: '';
    position: absolute;
    z-index: -1; /* コンテンツより後ろ、光る枠より前 */
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* 背景色(黒グラデ) と 左上の光る円(radial-gradient) を重ねて指定 */
    background-image: 
        /* 左上の光る円飾り */
        radial-gradient(circle at 0% 0%, rgba(0, 198, 251, 0.15) 0%, transparent 50%),
        /* メインの背景色 */
        linear-gradient(135deg, #333 0%, #000 100%);
        
    border-radius: 20px;
    
    /* 内側に少し影を落として奥行きを出す */
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}

/* テキストやボタンのスタイルはそのまま維持 */
.install-text h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
	text-align: left;
	/* ▼ 追加: アイコンと文字を横並びにする設定 */
    display: flex;
    align-items: center;
    gap: 8px; /* アイコンと文字の間隔 */
}

/* ▼ 追加: アイコンを表示する擬似要素 */
.install-text h3::before {
    content: '';
    display: inline-block;
    width: 38px; 
    height: 38px;
    background-image: url('../images/icon/apple-touch-icon.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px; /* アイコンの角丸 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    flex-shrink: 0; /* 画面が狭くてもアイコンが潰れないように */
	border:2px solid #fff;
}

.install-text p {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 20px;
    text-align: justify;
    line-height: 1.5em;
}

/* ボタンのデザインを少し強化（光に負けないように） */
.install-btn {
    background: linear-gradient(90deg, var(--accent-blue), #00c6fb);
    color: #000;
    border: none;
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    box-shadow: 0 4px 15px rgba(0, 198, 251, 0.4);
}

.install-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 25px rgba(0, 198, 251, 0.6);
    filter: brightness(1.1);
}

#home-install-guide-link {
    margin-top: 20px;
}

.text-link {
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
    opacity: 0.8;

    /* ▼▼▼ ここを追加・変更 ▼▼▼ */
    display: inline-block;             /* アイコン表示のためにブロック要素的性質を持たせる */
    padding-right: 22px;               /* 右側に矢印が入るスペースを確保 */
    background-image: url('../images/myPage_icon_arrow.svg');
    background-repeat: no-repeat;
    background-position: right center; /* 右端・中央に配置 */
    background-size: 14px;             /* アイコンのサイズ（適宜調整してください） */
    
    /* もしアイコンの色を水色に合わせたい場合は、以下のフィルター調整などを試してください */
    /* filter: sepia(100%) hue-rotate(170deg) saturate(500%); */
}

.text-link:hover {
    border-bottom-color: var(--accent-blue);
}

/* バナー全体を「押せるボタン」として見せる */
.install-banner {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.install-banner:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 10px 20px rgba(0, 198, 251, 0.15);
}

/* 内部のテキストリンクは、クリック判定を親（バナー）に譲る */
.text-link {
    pointer-events: none;
    position: relative;
    padding-bottom: 2px;
}

/* ホバー時にテキストリンクの下線を表示して「ここに行ける」感を出す */
.install-banner:hover .text-link {
    border-bottom-color: var(--accent-blue);
}

/* 「インストールする」ボタン（もし表示されたら）は個別に押せるようにする */
#home-install-button {
    pointer-events: auto;
    position: relative;
    z-index: 10;
}
/* =========================================
   トップページ用 データ管理セクション
   ========================================= */
#data-section {
    margin-top: 60px; /* インストールバナーとの間隔 */
    padding: 0 0px;
}
@media screen and (min-width: 501px) {
#data-section {
    margin-top: 45px;
}
}

.data-accordion-wrapper {
    background-color: #222; /* 背景色 */
    border: 1px solid #333;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* アコーディオンヘッダー */
.data-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
	padding-left:12px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.data-accordion-header .header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* データアイコンのスタイル変更 */
.data-accordion-header .data-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    flex-shrink: 0;
    
    /* 背景設定 */
    background-color: #586875; /* 落ち着いたグリーン系 */
    background-image: url('../images/topPage_icon_save.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    
    /* 以前のフォント設定をリセット */
    font-size: 0; 
    display: block;
}

/* タイトル文字の調整（必要であれば） */
.data-accordion-header .header-title {
    font-size: 1rem;
    font-weight: bold;
    color: #eee;
}


.header-title {
    font-size: 1rem;
    font-weight: bold;
    color: #eee;
}

/* =========================================
   データ管理セクション - 修正版
   ========================================= */

/* アイコンエリア */
.data-accordion-header .header-arrow {
    width: 24px;
    height: 24px;
    position: relative;
    /* 以前の矢印スタイルをリセット */
    border: none;
    transform: none;
    margin-top: 0;
    background: rgba(255,255,255,0.1); /* 背景を少し明るく */
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.3s, background-color 0.3s;
}

/* ＋－の棒線を作成 */
.data-accordion-header .header-arrow::before,
.data-accordion-header .header-arrow::after {
    content: '';
    position: absolute;
    background-color: #aaa; /* アイコン色 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
}

/* 横棒 */
.data-accordion-header .header-arrow::before {
    width: 10px;
    height: 2px;
}
/* 縦棒 */
.data-accordion-header .header-arrow::after {
    width: 2px;
    height: 10px;
}

/* --- 開いている状態 (.is-open) --- */
/* 回転して背景色変更 */
.data-accordion-wrapper.is-open .header-arrow {
    background: var(--accent-blue);
    transform: rotate(180deg);
}
/* 縦棒を消してマイナスにする */
.data-accordion-wrapper.is-open .header-arrow::after {
    height: 0;
}
/* 横棒の色変更 */
.data-accordion-wrapper.is-open .header-arrow::before {
    background-color: #000; /* 背景が青になるので文字色は黒 */
}


/* アコーディオン中身 */
.data-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: #1a1a1a;
    border-top: 1px solid #333;
}

.data-body-inner {
    padding: 20px 20px 25px;
}

.data-desc {
    font-size: 0.85rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 20px;
}

.data-desc strong {
    color: var(--accent-blue);
}

/* ボタングリッド */
.data-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* アクションボタン共通 */
.data-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.data-action-btn:hover {
    background-color: #333;
    transform: translateY(-2px);
}

.data-action-btn:active {
    transform: scale(0.98);
}

/* アイコン画像 (header-commonと同じSVGを使用) */
.data-action-btn .btn-icon {
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: 8px;
    opacity: 0.8;
}

.data-action-btn.export .btn-icon {
    background-image: url('../images/menuIcon_export.svg');
    /* アイコンがない場合のフォールバック色 (黒背景用) */
    background-color: transparent; 
    filter: invert(1); /* 黒用アイコンなら白反転、白用ならそのまま */
}

.data-action-btn.import .btn-icon {
    background-image: url('../images/menuIcon_import.svg');
    background-color: transparent;
    filter: invert(1);
}

.data-action-btn .btn-label {
    font-size: 0.95rem;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.data-action-btn .btn-label small {
    font-size: 0.7rem;
    color: #888;
    font-weight: normal;
}

/* ホバー時の色変化 */
.data-action-btn.export:hover {
    border-color: #588ec4;
    box-shadow: 0 0 10px rgba(88, 142, 196, 0.2);
}
.data-action-btn.import:hover {
    border-color: #d977a3;
    box-shadow: 0 0 10px rgba(217, 119, 163, 0.2);
}


/* =========================================
   About App (先生向け・AI活用)
   ========================================= */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.about-card {
    background-color: #fff;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    display: flex;
    gap: 16px;
    align-items: flex-start;
	color:#555;
}

.teacher-card {
    background-color: #fcfcfc;
}
.ai-card {
    background-color: #fcfcfc;
}

.about-icon {
    font-size: 2rem;
    flex-shrink: 0;
    background: #f0f4f8;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.about-content h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    color: #111;
}

.about-content p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 12px;
}

.about-btn {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--accent-blue);
    background: none;
    border: 1px solid var(--accent-blue);
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.about-btn:hover {
    background-color: var(--accent-blue);
    color: #000;
}


/* =========================================
   セクション開閉 (Collapsible Sections) - 修正版
   ========================================= */

/* ヘッダーをクリッカブルに */
.js-collapsible-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 80px; /* ボタンが最大74pxになるので */
    transition: opacity 0.3s;
}

.js-collapsible-header:hover {
    opacity: 0.7;
}

/* タイトル行 */
.header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* アイコンのベース */
.header-toggle-arrow {
    box-sizing: border-box; /* ★追加: 32pxの正円を保つために必須 */
    width: 32px; /* 開いている時は丸 */
    height: 32px;
    border-radius: 20px; /* 角丸・丸両対応 */
    background-color: #ddd; /* 通常時（開いている時）の背景 */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* 中央配置。ボタン自体は回転させない */
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, color 0.4s ease, padding 0.4s ease;
    
    /* テキストのスタイル */
    font-size: 12px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0); /* 開いている時は文字を透明に */
    overflow: hidden;
    white-space: nowrap;
    
    /* フレックスボックスを使わず行高で縦中央揃え */
    line-height: 32px;
    padding-left: 0; /* ★開いている時は0にして正円のレイアウト崩れを防ぐ */
}

/* ＋－の棒線を作成 (共通) */
.header-toggle-arrow::before,
.header-toggle-arrow::after {
    content: '';
    position: absolute;
    background-color: #555; /* 棒の色 */
    top: 50%;
    right: 16px; /* 右から固定距離に配置 */
    transform: translate(50%, -50%); /* 中央配置 */
    transition: transform 0.4s ease, height 0.4s ease, background-color 0.4s ease;
    border: none;
}

/* 横棒（常に表示） */
.header-toggle-arrow::before {
    width: 14px;
    height: 2px;
}

/* 縦棒（閉じている時＝プラスの時に表示） */
.header-toggle-arrow::after {
    width: 2px;
    height: 0; /* 開いている時はマイナス表示にするため潰す */
}

/* --- 閉じている状態 (.is-closed) --- */

/* ボタンを横長にして色を変更、テキストを表示 */
.js-collapsible-section.is-closed .header-toggle-arrow {
    background-color: #6eafcc;
    width: 82px; /* ★幅を縮めて文字とアイコンを近づける */
    padding-left: 14px; /* ★文字の左余白を設定 */
    color: #dae9f0;
    box-shadow: 0 3px 0px #4c91b0;
}

/* 棒の色を白にし、回転させる */
.js-collapsible-section.is-closed .header-toggle-arrow::before,
.js-collapsible-section.is-closed .header-toggle-arrow::after {
    background-color: #fff;
    transform: translate(50%, -50%) rotate(180deg);
}

/* 縦棒を復活させて「＋」にする */
.js-collapsible-section.is-closed .header-toggle-arrow::after {
    height: 14px;
}

/* アニメーション設定 */
.js-collapsible-body {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    /* 時間を 1.0s に変更してゆっくりにする */
    transition: grid-template-rows 1.0s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 1.0s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 1.0s;
}

.collapsible-content-inner {
    min-height: 0; /* Gridアニメーションのガタつき防止に重要 */
    overflow: hidden;
}

/* 閉じている状態 */
.js-collapsible-section.is-closed .js-collapsible-body {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden; /* 閉じたときにタブ移動などでフォーカスされないようにする */
    margin-top: 0;
}

.js-collapsible-section.is-closed .section-description {
    color: #888;
}

/* 閉じるボタン */
.section-close-area {
    margin-top: 40px;
	margin-bottom:30px;
    display: flex;
    justify-content: center;
    padding-top: 30px;
	padding-bottom:60px;
    border-top: 1px dashed #ddd;
	border-bottom: 1px solid #ccc;
}
.btn-close-section {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #465b70;
    color: #fff;
    border: 2px solid #33485c;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
	box-shadow: 0 4px 0px #a1abb5;
}
.btn-close-section:hover {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(164, 213, 235, 0.4);
}
.btn-close-section .check-icon {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 4px;
    position: relative;
}
.btn-close-section .check-icon::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
	color:#e3b6b6;
}

/* =========================================
   ニュースティッカー (News Ticker)
   ========================================= */
.tickerArea {
    width: 100%;
    /* INFORMATIONの文字が上にくるため、上に余白を追加 */
    margin-top: 12px;
    margin-bottom: 24px;
    font-family: inherit;
    box-sizing: border-box;
}

.ticker-wrap {
    width: 100%;
    /* マイページカードと同じ最大幅に合わせる */
    max-width: 500px; 
    margin: 0 auto;
    position: relative;
}

/* "INFORMATION" ラベルの設定 */
.ticker-wrap::before {
    content: "INFORMATION"; /* 文字変更 */
    position: absolute;
    /* 位置を上部に移動 */
    top: -20px;
    left: 4px;
    /* 垂直方向のセンター配置(transform)を解除 */
    transform: none;
    color: #444;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0em;
    z-index: 2;
    pointer-events: none;
    /* 少しアイコンっぽく装飾 */
    display: flex;
    align-items: center;
    gap: 6px;
}

.ticker-container {
    height: 36px;
    position: relative;
    overflow: hidden;
    background-color: #222;
    border-radius: 30px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
    border: 1px solid #000;
    margin-bottom: 20px;
    
    /* ▼▼▼ 変更箇所: 横幅を100%にし、左マージンを削除 ▼▼▼ */
    margin-left: 0; 
    width: 100%;
}

.ticker-item {
    position: absolute;
    color: #bbb;
    font-size: 13px;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(100%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* アニメーション定義 */
.ticker-item.active {
    animation: slideIn 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards, 
               slideDown 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards 5s; /* 5秒後に消える */
}

/* =========================================
   About App (リッチデザイン・アニメーション版) - 修正版
   ========================================= */

.about-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* アコーディオンの外枠 */
.about-accordion-wrapper {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.05); /* 境界線を薄く */
    border-radius: 20px; /* 丸みを強く */
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 0px rgba(0,0,0,0.08); /* 柔らかい影 */
}

/* 開いたときの状態（少し浮き上がる） */
.about-accordion-wrapper.is-open {
    box-shadow: 0 5px 2px rgba(0,0,0,0.15);
    border-color: rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

/* --- ヘッダー部分 --- */
.about-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
	padding-left:12px;
    background: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    position: relative;
    z-index: 2;
}

.about-accordion-header .about-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    flex-shrink: 0;
    
    /* 背景画像共通設定 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px; /* アイコン画像のサイズ */
    
    /* 以前のグラデーションやFlex設定をリセット */
    background-color: #eee; /* デフォルト色 */
    display: block;
    box-shadow: none;
    margin-right: 0;
}

/* 個別のアイコン設定（背景色と画像パス） */
/* 色味はLibraryのデザイン（青・紫・グレー系）に合わせて調整しています */

/* 1. 学校の先生方へ */
.about-icon.icon-teacher {
    background-color: #99b1c4; /* Libraryの「教科」と同じ落ち着いた青 */
    background-image: url('../images/topPage_icon_teacher.svg');
}

/* 2. コンテンツ作成について */
.about-icon.icon-create {
    background-color: #ac99c4; /* Libraryの「資格」と同じ落ち着いた紫 */
    background-image: url('../images/topPage_icon_create-pen.svg');
}

/* 3. 免責事項 */
.about-icon.icon-disclaimer {
    background-color: #b0b0b0; /* ニュートラルなグレー */
    background-image: url('../images/topPage_icon_disclaimer.svg');
}

/* ヘッダー左側のレイアウト微調整（アイコンと文字の間隔をLibraryに合わせる） */
.about-accordion-header .header-left {
    display: flex;
    align-items: center;
    gap: 15px; /* 間隔を16px→15pxに微調整 */
}

.header-text-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-accordion-header .header-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #222;
    letter-spacing: 0.02em;
}

.about-accordion-header .header-sub {
    font-size: 0.8rem;
    color: #888;
    font-weight: 500;
}

/* アイコンのベース */
.about-accordion-header .header-arrow {
    width: 28px; /* 少し大きめに調整 */
    height: 28px;
    background: #f5f5f5;
    border-radius: 50%;
    position: relative;
    transition: transform 0.3s, background-color 0.3s; /* 回転アニメーション追加 */
    /* 以前の回転アニメーションをリセット */
    transform: none !important; 
}

/* ＋－の棒線を作成 */
.about-accordion-header .header-arrow::before,
.about-accordion-header .header-arrow::after {
    content: '';
    position: absolute;
    background: #666; /* 棒の色 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    /* 以前の矢印スタイルをリセット */
    border: none; 
    margin: 0;
}

/* 横棒 */
.about-accordion-header .header-arrow::before {
    width: 12px;
    height: 2px;
}
/* 縦棒 */
.about-accordion-header .header-arrow::after {
    width: 2px;
    height: 12px;
}

/* --- 開いている状態 (.is-open) --- */
/* 回転して背景色変更 */
.about-accordion-wrapper.is-open .header-arrow {
    background: var(--accent-blue);
    transform: rotate(180deg);
}

/* マイナスにする（縦棒を消す） */
.about-accordion-wrapper.is-open .header-arrow::after {
    height: 0;
}
/* 棒の色を白に */
.about-accordion-wrapper.is-open .header-arrow::before {
    background: #fff;
}


/* --- ボディ部分（展開エリア） --- */
.about-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: #ddd; /* 背景色を少しリッチに */
}

.about-body-inner {
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- リッチカード（内部コンテンツ） --- */
.about-rich-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 0px 3px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.03);
    
    /* アニメーション初期状態 */
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* アコーディオンが開いたときのアニメーション発火 */
.about-accordion-wrapper.is-open .about-rich-card {
    opacity: 1;
    transform: translateY(0);
}

/* 時間差（スタガー）演出 */
.about-accordion-wrapper.is-open .about-rich-card:nth-child(1) { transition-delay: 0.1s; }
.about-accordion-wrapper.is-open .about-rich-card:nth-child(2) { transition-delay: 0.2s; }
.about-accordion-wrapper.is-open .about-rich-card:nth-child(3) { transition-delay: 0.3s; }


.rich-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
}

.rich-card-icon {
    font-size: 1.1rem;
    width: 32px; height: 32px;
    background: #f0f4f8;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}

.rich-card-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #333;
}

.rich-card-text {
    font-size: 0.9rem;
    line-height: 1.75;
    color: #555;
    text-align: justify;
}

/* 文章内の強調 */
.rich-card-text strong {
    color: #222;
    background: linear-gradient(transparent 65%, rgba(164, 213, 235, 0.3) 65%);
    font-weight: bold;
    padding: 0 2px;
}

/* リスト表示 */
.rich-list {
    margin-top: 10px;
    padding-left: 0;
    list-style: none;
}
.rich-list li {
    font-size: 0.9rem;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    color: #555;
    line-height: 1.6;
}
.rich-list li::before {
    content: '✔';
    position: absolute;
    left: 0; top: 0;
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 0.8rem;
}

/* =========================================
   スクロール連動アニメーション (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);
}


#share-actions-container {
    margin-bottom: 65px;
}

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