/* ============================================================
 * 資格トップページ（aws-com/com_index.php ＋ com_top_*.php）固有のスタイル
 *   - パーシャル内に <style> を書かず、ここへ集約する（docs/index-template-design.md §4.4）
 *   - 共通 CSS（main.css / com.css / {kbn}.css）より先に読み込まれるため、
 *     既存セレクタに負ける箇所だけ !important を使う（新規セレクタには使わない）
 * ============================================================ */

/* ---- 会員特典ブロック（com_top_member_benefit.php） ----
 * 2026-09-11: PC は 上=メッセージ／中=画像 2 枚（ダッシュボード・模試結果）／下=ボタン横並び。
 *             スマホは メッセージ→ボタン→画像 2 枚縦積み（ファーストビューに CTA を入れる方針は維持）。 */
.member-benefit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "eyebrow"
        "lead"
        "subtext"
        "visuals"
        "buttons";
    align-items: start;
    margin: 14px 10px 30px;   /* 2026-09-11: 導入部を外しページ先頭に来るため上に余白 */
}
/* アイブロウ（試験の正式名称＋試験コード。見出しの上の小見出し） */
.member-benefit-eyebrow {
    grid-area: eyebrow;
    margin: 0 0 6px !important;
    padding: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #555;
}
.member-benefit-subtext {
    grid-area: subtext;
    padding: 0 10px;
    text-align: center;
}
.member-benefit-actions {
    grid-area: buttons;
}
.member-benefit-lead {
    grid-area: lead;
    margin-bottom: 6px !important;
    padding: 0;
    font-size: 43px !important;
    font-weight: 700;
    line-height: 1.4;
    color: #232f3e;
    text-align: center;
}
/* 画像 2 枚（左=ダッシュボード・右=模試結果。いずれも 950×837）。模試の無い資格は 1 枚を中央に。
 * 2026-09-11: 列構成を下のボタン列（.member-benefit-actions）と同じ 2 列・同じ間隔にし、各画像を直下のボタンの真上に置く。
 *             画像は列幅いっぱい（本文幅に収まる最大。PC 1000px 幅で 1 枚 333×293px 程度） */
.member-benefit-visuals {
    grid-area: visuals;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 5%;          /* 2026-09-11: 左右の余白と 2 枚の間隔をそれぞれ本文幅の 5% に（ボタン列も同じ値） */
    padding: 0 5%;
    margin: 18px 0 6px;
}
.member-benefit-visuals.is-single {
    grid-template-columns: minmax(0, 1fr);
    width: calc(50% - 8px);
    margin-left: auto;
    margin-right: auto;
}
.member-benefit-visual {
    text-align: center;
}
/* メインメッセージのスマホ専用改行（PC は 2 行、スマホは 4 行） */
.member-benefit-lead br.sp-only {
    display: none;
}
.member-benefit-visual a {
    display: block;
    overflow: visible;
}
.member-benefit-visual img {
    width: 100%;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    box-shadow: 0 10px 24px rgba(35,47,62,.16);
    transition: transform .2s ease, box-shadow .2s ease;
    transform-origin: center;
    position: relative;
}
.member-benefit-visual:hover img,
.member-benefit-visual:focus img {
    transform: scale(1.1);
    box-shadow: 0 16px 32px rgba(35,47,62,.24);
    z-index: 1;                          /* 隣の画像より手前に */
}
.member-benefit-note {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}
.member-benefit-btn {
    background: #FFA500 !important;      /* ベンダー色は要素の style 属性で上書き */
    color: #fff !important;
    font-weight: bold;
    padding: 13px 16px !important;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    margin: 20px 30px;
}
.member-benefit-btn + .member-benefit-btn {
    margin-top: 10px;
}
/* 主ボタン（トライアル）と補足 */
.member-benefit-btn.is-primary {
    font-size: 1.05em;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);   /* ベンダー色（橙 / 青）のどちらにも合う中立の影 */
}
.member-benefit-btn-note {
    display: block;
    margin: -12px 30px 14px;
    font-size: 12px;
    color: #666;
    text-align: center;
}
/* ゲスト向けのテキストリンク（会員の方はログイン）。2026-09-10 */
.member-benefit-link {
    display: block;
    margin: -6px 30px 16px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
/* PC: ボタンを画像と同じ 2 列に置き（各画像の真下）、補足文とテキストリンクは 2 列ぶち抜きで下に置く
 * （DOM 順は 主ボタン→補足→副ボタン→リンク。com_top_cta.php は締めの CTA と共用なので CSS の order で並べ替える） */
@media only screen and (min-width: 769px) {
    .member-benefit-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 5%;      /* 画像列（.member-benefit-visuals）と同じ余白・間隔 */
        padding: 0 5%;
        align-items: center;
        margin: 8px 0 0;
    }
    .member-benefit-actions .member-benefit-btn {
        margin: 10px 0;
        min-width: 0;
    }
    /* ボタンが 1 つだけ（模試の無い資格のプレミアム会員など）は 2 列の中央に */
    .member-benefit-actions a.member-benefit-btn:only-of-type {
        grid-column: 1 / -1;
        justify-self: center;
        min-width: 260px;
    }
    .member-benefit-actions .member-benefit-btn-note {
        grid-column: 1 / -1;
        order: 10;
        margin: -2px 0 6px;
    }
    .member-benefit-actions .member-benefit-link {
        grid-column: 1 / -1;
        order: 11;
        margin: 2px 0 0;
    }
}
@media only screen and (max-width: 768px) {
    .member-benefit {
        /* モバイルはボタンを画像より上に置き、ファーストビューに CTA を入れる */
        grid-template-areas:
            "eyebrow"
            "lead"
            "subtext"
            "buttons"
            "visuals";
        row-gap: 14px;
        margin-left: 0;
        margin-right: 0;
    }
    .member-benefit-eyebrow {
        font-size: 13px;
        margin-bottom: -6px !important;   /* row-gap 14px と相殺して見出しに寄せる */
    }
    .member-benefit-lead {
        margin-bottom: 0 !important;
    }
    .member-benefit-lead br.sp-only {
        display: inline;
    }
    .member-benefit-visuals,
    .member-benefit-visuals.is-single {
        grid-template-columns: 1fr;
        row-gap: 20px;
        width: auto;
        padding: 0;
        margin: 0;
    }
    .member-benefit-visual img {
        width: 70%;
    }
    /* スマホ：タップで貼り付く :hover 拡大を無効化し、is-zoomed で拡大 */
    .member-benefit-visual:hover img,
    .member-benefit-visual:focus img {
        transform: none;
        box-shadow: 0 10px 24px rgba(35,47,62,.16);
    }
    .member-benefit-visual.is-zoomed img {
        transform: scale(1.4);
        box-shadow: 0 16px 32px rgba(35,47,62,.24);
        z-index: 1;
    }
}

/* ---- 無料問題カード（com_top_free_questions.php の .lp-stat。定義は main.css） ----
 * Azure では main_azure.css の `.sentence a:not([href$="gif"])…:not(.btn)` が background を !important で当てるため
 * （詳細度 0,5,1）、main.css の `.lp-stat { background:#fff !important }`（0,1,0）が負けてカードが下線グラデーションになる。
 * #main_contents で修飾して詳細度（1,2,1）で勝たせる（プレミアム案内の .premium-guest-cta-btn と同じ手法。2026-09-11） */
#main_contents .lp-stats a.lp-stat {
    background: #fff !important;
    background-image: none !important;
}
#main_contents .lp-stats a.lp-stat:hover {
    background: #f7f7f7 !important;
}

/* ---- 学習サポート機能の図版（com_top_support_function.php の <figure>） ---- */
.top-sec figure {
    border: 2px solid #d3d3d3;
    border-radius: 5px;
    padding: 5px;
    display: block;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
}
.top-sec figcaption {
    font-size: 14px;
    color: #555;
}
@media only screen and (max-width: 768px) {
    .top-sec figure {
        margin-left: 0px;
        margin-right: 0px;
    }
}

/* ---- 締めの CTA（com_top_closing_cta.php） ---- */
.top-closing {
    border: 1px solid #FFD9A0;
    border-radius: 10px;
    background: #fff8ec;
    padding: 6px 16px 10px;
    /* 左右 20px は「受験の感想・アドバイス」の引用枠（{kbn}.css の blockquote: margin 20px）と端を揃える（2026-09-11） */
    margin: 30px 20px 0;
}
/* Azure は枠色をプレミアム案内のゲスト向け導線（com.css の .premium-guest-cta。--pg-accent = #0078d4）と同じベンダー色に */
.top-closing.is-azure {
    border-color: var(--tc-accent, #0078d4);
}
.top-closing h3 {
    margin-top: 10px;
}
.top-closing-actions {
    max-width: 520px;
    margin: 0 auto;
}
.top-closing-actions .member-benefit-btn {
    margin: 12px 0;
}
.top-closing-actions .member-benefit-btn-note {
    margin: -4px 0 12px;
}
.top-closing-actions .member-benefit-link {
    margin: 0 0 12px;
}
.top-closing-note {
    text-align: center;
}
body.night .top-closing {
    background: transparent;
}

/* ---- 次に受験したい資格（com_top_next_certs.php。「アンケート結果」内の小見出し） ---- */
/* アンケートの横バー。資格名を <a> にしたいので canvas ではなく HTML + CSS で描く。
   見た目は合格対策ダッシュボードの「サービス別の成績」（css/report.css の .metric-* / .score-bar）に合わせ、
   定義だけをここへ複写する（top.css だけで完結させ、report.css は読み込まない）。
   1 行 = 資格名（バーの左上）＋ バーと割合。report.css の 480px 以下と同じ縦積みを全幅で使う */
.top-nextbars {
    /* 左右 20px は「受験の感想・アドバイス」の引用枠（{kbn}.css の blockquote: margin 20px）に合わせる（2026-09-09） */
    margin: 6px 20px 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.top-nextbars .metric-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
    padding: 11px 0;                    /* 左右は .top-nextbars の margin 側で取る（引用枠の外縁と資格名・バー・割合の端をそろえる） */
    border-bottom: 1px solid #e6eaf0;   /* report.css の var(--line) */
}
.top-nextbars .metric-row:last-child {
    border-bottom: 0;
}
.top-nextbars a.metric-row {
    color: inherit;
    text-decoration: none;
    /* main_ja.css の .sentence a:not(...) は詳細度が高く（属性セレクタ 3 つ分）通常の指定では勝てないため
       下線グラデーションと左右パディングの打ち消しだけ !important を使う */
    background: none !important;
    padding: 11px 0 !important;
}
.top-nextbars a.metric-row:hover {
    background: #fff8ef !important;
}
.top-nextbars .metric-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
.top-nextbars .metric-name {
    font-size: 15px;
    /* report.css は bold（成績の主役が資格名）だが、ここは割合を読ませる図なので通常の太さにする（2026-09-08） */
    font-weight: normal;
    color: #33414f;
    line-height: 1.35;
}
.top-nextbars .metric-name b {
    font-weight: normal;
    color: inherit;   /* .sentence b の色指定を打ち消す */
}
.top-nextbars .metric-group {
    display: grid;
    /* 割合は小数第 1 位まで出すので、report.css の 42px（整数前提）より少し広く取る */
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.top-nextbars .metric-chart-box {
    height: 14px;
    border-radius: 7px;
    background: #edf0f5;
    overflow: hidden;
}
.top-nextbars .score-bar {
    height: 14px;
    border-radius: 7px;
    background: #f59331;   /* report.css の var(--orange)。成績と違い割合なので値による色分けはしない */
    transition: width .5s ease;
}
.top-nextbars .metric-pct {
    font-size: 15px;
    font-weight: normal;   /* report.css は 800。資格名と揃えて通常の太さにする（2026-09-08） */
    color: #33414f;
    text-align: right;
    white-space: nowrap;
}
body.night .top-nextbars .metric-chart-box {
    background: #444;
}
body.night .top-nextbars a.metric-row:hover {
    background: #333 !important;
}
body.night .top-nextbars .metric-name,
body.night .top-nextbars .metric-pct {
    color: inherit;
}

/* ---- 次に目指す資格のカード（next_survey が無い資格のフォールバック） ---- */
.top-next-cards .lp-stat {
    position: relative;
    padding-top: 22px !important;
}
.top-next-desc {
    display: block;
    font-size: 12px;
    color: #555;
    margin-top: 4px;
    line-height: 1.5;
}
.top-next-tag {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 10px;
    color: #fff;
    background: #FF9900;
    border-radius: 3px;
    padding: 1px 6px;
}
.top-next-hub {
    text-align: center;
}

/* ---- アンケート結果（com_top_survey.php の円グラフ。データは data/site/index/{kbn}.yaml） ---- */
/* 学習期間と職種を横並び。見出しとグラフをそれぞれ同じ行に置き、列をまたいで上端をそろえる */
.top-survey-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
}
.top-survey-head  { grid-column: 1; grid-row: 1; }
.top-survey-head2 { grid-column: 2; grid-row: 1; }
.top-survey-chart {
    /* 凡例を出さずスライス内にラベルを描くため、円はできるだけ大きく取る */
    grid-column: 1;
    grid-row: 2;
    position: relative;
    height: 300px;
    margin: 4px 0 18px;
}
.top-survey-chart2 { grid-column: 2; grid-row: 2; }
@media only screen and (max-width: 768px) {
    /* スマホは 1 列に積む（行指定を解除して記述順に並べる） */
    .top-survey-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
    .top-survey-head, .top-survey-head2,
    .top-survey-chart, .top-survey-chart2 {
        grid-column: 1;
        grid-row: auto;
    }
    .top-survey-chart {
        height: 300px;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- 受験の感想・アドバイス: 出典の属性行（2026-09-14） ----------
   各引用（{kbn}.css の blockquote。斜体・灰地）の末尾に「合格・1ヵ月・エンジニア（2026年4月）」を右寄せで出す。
   本文と区別できるよう小さめ・薄め・非斜体。文言は data/site/index/{kbn}.yaml の voices[].meta から組む */
.top-voice-meta {
    display: block;
    margin-top: 6px;
    text-align: right;
    font-size: 0.85em;
    font-style: normal;
    color: #888;
}