/* ==================================================
   Tailwind Preflight無効化時のセルフチェック専用リセット
   CMS共通の見出し・パンくず・リンクには影響させない
================================================== */
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal),
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) *,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) *::before,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h1,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h2,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h3,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h4,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h5,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h6,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) p,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) blockquote,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) figure,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) dl,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) dd {
    margin: 0;
}

:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h1,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h2,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h3,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h4,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h5,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) h6 {
    font-size: inherit;
    font-weight: inherit;
}

:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) ol,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) ul,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) a {
    color: inherit;
    text-decoration: inherit;
}

:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) button,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) input,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) optgroup,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) select,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) textarea {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) button,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) select {
    text-transform: none;
}

:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) button,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) [type='button'],
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) [type='reset'],
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) [type='submit'] {
    appearance: button;
    background-color: transparent;
    background-image: none;
}

:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) img,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) svg,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) video,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) canvas,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) audio,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) iframe,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) embed,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) object {
    display: block;
    vertical-align: middle;
}

:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) img,
:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) video {
    max-width: 100%;
    height: auto;
}

:where(#graduation-check-app, .mobile-site-header, .gc-confirm-modal, .image-modal) [hidden] {
    display: none !important;
}

/* Base & Visual Styles */
html { scroll-behavior: smooth; }
:focus-visible { outline: 3px solid rgba(0, 43, 102, 0.45); outline-offset: 3px; }
.academic-clean-bg {
    background-color: #ffffff;
    background-image: 
        radial-gradient(at 0% 0%, rgba(163, 35, 41, 0.02) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(0, 43, 102, 0.01) 0px, transparent 50%);
}
.premium-magenta-gradient {
    background: linear-gradient(135deg, #a32329 0%, #661115 100%);
    position: relative;
}
.premium-magenta-gradient::before {
    content: ""; position: absolute; inset: 0; opacity: 0.07;
    background: repeating-linear-gradient(90deg, transparent, transparent 4px, #ffffff 4px, #ffffff 8px);
    pointer-events: none;
}
.shadow-academic { box-shadow: 0 10px 30px -10px rgba(163, 35, 41, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02); }
#graduation-check-app p, #graduation-check-app li { font-size: 0.875rem; line-height: 1.85; }
@media (min-width: 640px) { #graduation-check-app p, #graduation-check-app li { font-size: 0.9375rem; } }

/* Route Badge & Section Headers */
.route-badge {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem;
    border-radius: 9999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em;
}
.route-badge-red { background-color: #fdf2f2; color: #a32329; border: 1px solid rgba(163, 35, 41, 0.25); }
.route-badge-blue { background-color: #eef5ff; color: #002b66; border: 1px solid rgba(0, 43, 102, 0.25); }

/* Buttons & Navigation Components */
.primary-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    min-height: 3rem; padding: 0.75rem 1.15rem; border-radius: 0.55rem;
    background: #a32329; color: #ffffff; font-size: 0.9375rem; font-weight: 700;
    transition: background-color .2s ease, transform .2s ease;
}
.primary-action:hover { background: #661115; transform: translateY(-1px); }

.tab-btn {
    min-height: 4.1rem; border: 1px solid #e5e7eb; border-radius: 0.55rem;
    background: #ffffff; color: #4b5563; padding: 0.7rem 0.75rem; font-weight: 700;
    text-align: left; display: flex; align-items: center; gap: .7rem;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.tab-btn:hover { border-color: rgba(163, 35, 41, 0.45); color: #a32329; }
.tab-btn.is-active { border-color: #a32329; background: #a32329; color: #ffffff; }

.step-number {
    width: 1.85rem; height: 1.85rem; display: grid; place-items: center; flex: 0 0 auto;
    border-radius: 999px; background: #f3f4f6; color: #a32329; font-size: .78rem; font-weight: 900;
}
.tab-btn.is-active .step-number { background: #ffffff; color: #a32329; }
.step-label small { display: block; margin-bottom: .1rem; font-size: .62rem; line-height: 1; opacity: .7; font-weight: 800; }
.step-label strong { display: block; font-size: .8rem; line-height: 1.35; font-weight: 800; }

/* ==================================================
   Anxiety Navigation Grid（レスポンシブ・縦中央揃え・文字折り返し最適化）
================================================== */
.anxiety-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* スマホ：1列 */
    gap: .75rem;
}

@media (min-width: 768px) {
    .anxiety-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* タブレット：2列 */
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .anxiety-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)); /* PC：6カラム構成 */
    }
}

/* カード共通設定 (Flexbox制御で横並びを確実に保護) */
.anxiety-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 7.5rem;
    padding: .9rem 1rem;
    border: 1px solid #e3e6ea;
    border-radius: .72rem;
    background: #ffffff;
    text-align: left;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.anxiety-card:hover {
    transform: translateY(-1px);
    border-color: rgba(163, 35, 41, .45);
    box-shadow: 0 10px 24px -20px rgba(31, 41, 55, .6);
}

/* テキストエリア：幅が狭い場合は自動折り返し */
.anxiety-copy {
    flex: 1 1 0%;
    min-width: 0; /* Flexbox内で文字の折り返しを有効化 */
    padding-right: .75rem;
}

.anxiety-copy strong {
    display: block;
    color: #30343b;
    font-size: .88rem;
    line-height: 1.55;
    font-weight: 800;
}

.anxiety-copy small {
    display: block;
    margin-top: .35rem;
    color: #777f89;
    font-size: .68rem;
    line-height: 1.55;
    font-weight: 600;
}

/* イラスト領域：つぶれ防止（flex-shrink: 0） */
.anxiety-illustration {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
}

.anxiety-illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.illustration-fallback {
    width: 4rem;
    height: 4rem;
    display: none;
    place-items: center;
    border-radius: 999px;
    background: #f3f6fb;
    color: #31558e;
    font-size: 1.45rem;
}

/* 矢印アイコン */
.anxiety-arrow {
    flex-shrink: 0;
    margin-left: .5rem;
    color: #a32329;
    font-size: .72rem;
}

/* STEP 1 / 3 Readability Alignment */
.step-body-text, .step-body-list { color: #4b5563; font-size: 0.875rem; line-height: 1.8; font-weight: 400; }
.step-lead-text { color: #333333; font-weight: 500; }
.step-info-title, .step-subheading { display: block; margin-bottom: .55rem; color: #333333; font-size: 0.875rem; line-height: 1.55; font-weight: 800; }
.step-subheading-magenta { color: #a32329; }
.step-subheading-blue { color: #002b66; }
.step-inline-heading { display: block; margin-bottom: .2rem; color: #333333; font-size: 0.875rem; line-height: 1.65; font-weight: 800; }
.step-form-label { color: #333333; font-size: 0.875rem; line-height: 1.5; font-weight: 700; }

.step3-important { padding: 1rem 1.05rem; border: 1px solid #ead7d8; border-left: 4px solid #a32329; border-radius: .75rem; background: #fffafa; }
.step3-important-list { margin-top: .65rem; padding-left: 1.25rem; list-style: disc; }
.step3-important-list li + li { margin-top: .35rem; }
.step3-important-note { margin-top: .7rem; font-weight: 600; color: #333333; }

.step3-accordion { overflow: hidden; border: 1px solid #e1e5e9; border-radius: .75rem; background: #ffffff; }
.step3-accordion-summary { position: relative; display: flex; align-items: center; gap: .55rem; min-height: 3.25rem; padding: .8rem 2.75rem .8rem 1rem; color: #333333; font-size: .875rem; line-height: 1.55; font-weight: 800; cursor: pointer; list-style: none; }
.step3-accordion-summary::-webkit-details-marker { display: none; }
.step3-accordion-summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: #a32329; font-size: 1.2rem; line-height: 1; font-weight: 900; }
.step3-accordion[open] .step3-accordion-summary::after { content: "−"; }
.step3-accordion-summary:hover { background: #f8f9fa; }
.step3-accordion-body { padding: 1rem; border-top: 1px solid #eceff2; background: #ffffff; }

.step3-notes-fixed { overflow: hidden; border: 1px solid #e1e5e9; border-radius: .75rem; background: #ffffff; }
.step3-notes-heading { display: flex; align-items: center; gap: .55rem; min-height: 3.25rem; padding: .8rem 1rem; border-bottom: 1px solid #eceff2; color: #4b5563; font-size: .875rem; font-weight: 800; }
.step3-notes-body { padding: 1rem; background: #ffffff; }

/* FAQ & Interactive Table Styles */
.faq-item { border: 1px solid #e5e7eb; border-radius: 0.8rem; overflow: hidden; background: #ffffff; }
.faq-item summary { list-style: none; cursor: pointer; padding: 1rem 3.25rem 1rem 1rem; position: relative; font-size: 0.9375rem; font-weight: 700; line-height: 1.65; color: #333333; background: #f8f9fa; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: #ffffff; border: 1px solid #d1d5db; color: #a32329; font-size: 1.1rem; line-height: 1; }
.faq-item[open] summary { background: #fdf2f2; color: #a32329; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 1.1rem 1rem 1.25rem; border-top: 1px solid #e5e7eb; color: #333333; }

.row-interactive {
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}
.row-interactive:hover {
    background-color: #F1F5F9 !important;
}
.row-selected {
    background-color: #FDF2F8 !important;
    outline: 2px solid #EC4899;
    outline-offset: -2px;
}
.row-related {
    background-color: #E0F2FE !important;
    outline: 2px solid #0284C7;
    outline-offset: -2px;
}
.cell-yellow-highlight {
    background-color: #FEF08A !important;
    outline: 2px solid #EAB308 !important;
    font-weight: bold;
    color: #854D0E !important;
}
.col-selected {
    background-color: #EFF6FF !important;
}

.arrow-badge {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 38px;
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    transition: transform 0.15s ease, filter 0.15s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.arrow-badge::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
}
.arrow-badge-navy {
    background-color: #0b2239;
}
.arrow-badge-navy::after {
    border-top: 9px solid #0b2239;
}
.arrow-badge-red {
    background-color: #991b1b;
}
.arrow-badge-red::after {
    border-top: 9px solid #991b1b;
}
.arrow-badge:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
}

.guide-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    color: #92400E;
    border: 1px solid #FCD34D;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 9999px;
    margin-left: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}
.row-interactive:hover .guide-badge {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #F59E0B;
    transform: scale(1.05);
}

/* Image Zoom Modal & Navigation Links */
.image-zoom-trigger { position: relative; display: block; width: 100%; cursor: zoom-in; border: 0; padding: 0; background: transparent; text-align: center; }
.image-zoom-hint { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .65rem; min-height: 2.75rem; padding: .55rem .9rem; border: 1px solid #d8dce1; border-radius: .55rem; background: #ffffff; color: #4b5563; font-size: .82rem; font-weight: 800; }

.image-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1rem; }
.image-modal.is-open { display: flex; }
.image-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(15, 23, 42, .82); }
.image-modal-content { position: relative; z-index: 1; width: min(96vw, 75rem); max-height: 94vh; overflow: auto; padding: 3rem 1rem 1rem; border-radius: .85rem; background: #ffffff; box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
.image-modal-close { position: absolute; top: .65rem; right: .65rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid #d8dce1; border-radius: 999px; background: #ffffff; color: #333333; font-size: 1.15rem; }
.image-modal-img { display: block; width: auto; max-width: 100%; max-height: 78vh; margin: 0 auto; object-fit: contain; }
.image-modal-caption { margin-top: .75rem; color: #4b5563; font-size: .875rem; text-align: center; }

.step-navigation { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 2rem; padding-top: 1.35rem; border-top: 1px solid #e5e7eb; }
.step-return-link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid #d8dce1; border-radius: .6rem; background: #ffffff; color: #4b5563; font-size: .875rem; font-weight: 800; text-decoration: none; transition: border-color .18s ease, color .18s ease, background-color .18s ease; }
.step-return-link:hover, .step-return-link:focus-visible { border-color: #a32329; background: #fdf2f2; color: #a32329; outline: none; }

.next-step-link { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid #a32329; border-radius: .6rem; background: #a32329; color: #ffffff; font-size: .875rem; font-weight: 900; transition: background-color .18s ease, border-color .18s ease; }
.next-step-link:hover, .next-step-link:focus-visible { border-color: #661115; background: #661115; outline: none; }

.step2-albo-link { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.875rem; padding: .7rem 1rem; border: 1px solid #002b66; border-radius: .75rem; background: #002b66; color: #fff !important; font-size: .875rem; font-weight: 800; text-decoration: none !important; }
.step2-albo-link:hover { background: #001f49; border-color: #001f49; }

#gc-save:hover, #gc-save:focus-visible { background-color: #002b66 !important; color: #ffffff !important; border-color: #002b66 !important; }
#gc-save:hover i, #gc-save:focus-visible i { color: #ffffff !important; }

/* STEP 3 Confirmation Modal & Summary Panel */
.checker-summary-panel { margin-top: 1.5rem; padding: 1.5rem; border: 2px solid #d8e2ef; border-radius: 1rem; background: #f8fbff; }
.checker-summary-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.checker-summary-title { display: block; color: #333333; font-size: .875rem; line-height: 1.5; font-weight: 900; }
.checker-summary-desc { max-width: 33rem; color: #4b5563; font-size: .875rem; line-height: 1.7; font-weight: 700; text-align: right; }

.gc-result-badge { display: inline-block; padding: .45rem .8rem; border: 1px solid; border-radius: .55rem; font-size: .78rem; line-height: 1.3; font-weight: 900; }
.gc-result-badge-neutral { border-color: #d8dce1; background: #f3f4f6; color: #6b7280; }
.gc-result-badge-ok { border-color: #b9cce5; background: #eef5ff; color: #002b66; }
.gc-result-badge-lack { border-color: #e4b9bc; background: #fff1f2; color: #a32329; }

.checker-result-warning { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid #ead7a4; border-left: 4px solid #b7791f; border-radius: .7rem; background: #fffaf0; color: #4b5563; font-size: .84rem; line-height: 1.75; }
.checker-result-warning > i { margin-top: .2rem; color: #9a6700; flex: 0 0 auto; }

body.gc-modal-open { overflow: hidden !important; touch-action: none; }
.gc-confirm-modal { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.gc-confirm-modal.is-open { display: flex; }
.gc-confirm-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(15, 23, 42, .76); }
.gc-confirm-modal-dialog { position: relative; z-index: 1; width: min(calc(100vw - 2rem), 40rem); max-height: calc(100vh - 2rem); overflow: hidden; border-radius: .9rem; background: #ffffff; box-shadow: 0 24px 80px rgba(0, 0, 0, .32); }
.gc-confirm-modal-scroll { max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.4rem; }
.gc-confirm-modal-close { position: absolute; z-index: 2; top: .65rem; right: .65rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid #d8dce1; border-radius: 999px; background: #ffffff; color: #333333; font-size: 1.05rem; }
.gc-confirm-modal-title { margin: 0 3rem .85rem 0; color: #282828; font-size: 1.2rem; line-height: 1.45; font-weight: 900; }
.gc-confirm-modal-text { color: #4b5563; font-size: .875rem; line-height: 1.8; }
.gc-template-selection { display: grid; gap: .5rem; margin-bottom: .9rem; padding: .8rem; border: 1px solid #dbe4ef; border-radius: .65rem; background: #f5f8fc; }
.gc-template-selection p { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: .55rem; color: #4b5563; font-size: .82rem; line-height: 1.6; }
.gc-confirm-checks { display: grid; gap: .75rem; margin-top: 1rem; }
.gc-confirm-check { min-height: 3.25rem; display: flex; align-items: flex-start; gap: .75rem; padding: .85rem; border: 1px solid #d8dce1; border-radius: .7rem; background: #ffffff; cursor: pointer; }
.gc-confirm-check input { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; margin-top: .15rem; accent-color: #a32329; }
.gc-confirm-modal-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.gc-confirm-primary, .gc-confirm-secondary { min-height: 2.85rem; display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1rem; border-radius: .65rem; font-size: .84rem; font-weight: 900; }
.gc-confirm-primary { border: 1px solid #a32329; background: #a32329; color: #ffffff; }
.gc-confirm-primary:disabled { border-color: #cfd4da; background: #e5e7eb; color: #8a919b; cursor: not-allowed; }
.gc-confirm-secondary { border: 1px solid #c9cfd6; background: #ffffff; color: #4b5563; }

/* Accessibility Styles */
#graduation-check-app { min-width: 0; }
.step2-albo-action { margin: .75rem 0 1rem; }
.inline-action-link { appearance: none; display: inline; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; text-align: left; }
.inline-action-link:focus-visible, .step2-albo-link:focus-visible, .tab-btn:focus-visible, .image-zoom-trigger:focus-visible { outline: 3px solid rgba(0, 43, 102, .35); outline-offset: 3px; }
.faq-item.is-focus-highlighted { animation: faq-accessible-highlight 2.2s ease-out; }
@keyframes faq-accessible-highlight { 0%, 35% { box-shadow: 0 0 0 4px rgba(163, 35, 41, .22); } 100% { box-shadow: 0 0 0 0 rgba(163, 35, 41, 0); } }
[role="tabpanel"][hidden] { display: none !important; }

/* Completed checker states, follow-up actions, and STEP2 keyboard controls */
.gc-special-notes { margin-top: 1rem; padding: 1rem; border: 1px solid #ead7d8; border-left: 4px solid #a32329; border-radius: .75rem; background: #fffafa; }
.gc-special-notes-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; color: #a32329; font-size: .875rem; font-weight: 900; }
.gc-row-lack { background: #fffafa !important; }
.gc-row-lack .gc-fusoku { background: #fff1f2 !important; }
.gc-row-ok .gc-fusoku { color: #002b66; background: #eef5ff !important; }
.checker-lacking-area { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dbe4ef; }
.checker-lacking-title { display: block; margin-bottom: .6rem; color: #a32329; font-size: .82rem; font-weight: 900; }
.checker-lacking-item { padding: .65rem .75rem; border: 1px solid #e4b9bc; border-radius: .6rem; background: #ffffff; color: #4b5563; line-height: 1.6; }
.checker-followup-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dbe4ef; }
.checker-followup-link { min-height: 2.85rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem .85rem; border: 1px solid #c9d2dd; border-radius: .65rem; background: #ffffff; color: #4b5563; font-size: .82rem; font-weight: 900; text-decoration: none !important; }
.checker-followup-link:hover, .checker-followup-link:focus-visible { border-color: #002b66; background: #eef5ff; color: #002b66; outline: none; }
.checker-followup-primary { border-color: #002b66; background: #002b66; color: #ffffff !important; }
.checker-followup-primary:hover, .checker-followup-primary:focus-visible { background: #001f49; color: #ffffff !important; }
[data-step2-column]:focus-visible, [data-step2-row]:focus-visible, [data-step2-reset]:focus-visible { outline: 3px solid rgba(0, 43, 102, .45); outline-offset: -3px; }
[data-step2-row][tabindex="0"] { cursor: pointer; }
#dynamic-content:focus { outline: none; }
.checker-summary-status { margin-top: .45rem; }

/* Responsive Media Queries */
@media (max-width: 767px) {
    .mobile-site-header { padding: .78rem 1rem; }
    .site-title-main { display: block; font-size: 1.02rem; }
    .site-title-sub { display: block; margin-top: .12rem; color: rgba(255,255,255,.86); font-size: .76rem; font-weight: 700; }
    .site-title-sub::before, .site-title-sub::after { content: ""; }
    
    /* モバイル時のカード内部調整（幅が狭い場合でも横並びを崩さないための最適化） */
    .anxiety-card { min-height: 5.8rem; padding: .7rem .85rem; }
    .anxiety-illustration { width: 3.2rem; height: 3.2rem; }
    
    .primary-action, .step2-albo-link, .step-return-link, .next-step-link { width: 100%; }
    .step-navigation { flex-direction: column-reverse; align-items: stretch; gap: .6rem; }
    #content-step3 select, #content-step3 input[type="number"], #content-step3 input[type="text"] { min-height: 2.75rem; font-size: 1rem !important; }
    .checker-toolbar { align-items: stretch !important; padding: .85rem !important; }
    .checker-toolbar-actions { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: .55rem !important; }
    .checker-toolbar-actions button:first-child { grid-column: 1 / -1; }
    .checker-table-wrap { overflow: visible !important; padding: .75rem; background: #f8f9fa; }
    #checker-table, #checker-table tbody { display: block; width: 100%; }
    #checker-table thead { display: none; }
    #checker-tbody { display: grid; gap: .75rem; }
    #checker-tbody tr { display: block; overflow: hidden; border: 1px solid #e0e4e8; border-radius: .72rem; background: #ffffff !important; }
    #checker-tbody tr td { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .62rem .75rem !important; border-bottom: 1px solid #edf0f2; text-align: right !important; }
    #checker-tbody tr td::before { content: attr(data-label); color: #4b5563; font-size: .82rem; font-weight: 800; text-align: left; }
    #checker-tbody tr td:first-child { display: block; padding: .75rem !important; background: #f7f8fa !important; color: #282828; font-size: .95rem; text-align: left !important; }
    #checker-tbody tr td:first-child::before { display: none; }
    #checker-tbody input { width: 7rem !important; max-width: 46%; padding: .45rem .55rem !important; text-align: right !important; }
    #checker-summary-panel .text-right { text-align: left !important; }
    .checker-summary-header { flex-direction: column; }
    .checker-summary-desc { max-width: none; text-align: left; }
    .checker-followup-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto !important; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .faq-item.is-focus-highlighted { animation: none !important; }
}

/* STEP 3: 簡易チェッカー説明枠
   サイト共通CSSで border-width が上書きされても、左線だけ太く保つ */
#graduation-check-app #content-step3 .step3-intro-panel {
    border: 1px solid rgba(163, 35, 41, 0.20) !important;
    border-left: 4px solid rgba(163, 35, 41, 0.20) !important;
    background-color: #fdf2f2 !important;
}

/* ==================================================
   STEP 3：主要アクションボタン
   CMS共通CSSの button 背景指定より優先する
================================================== */
#graduation-check-app #gc-applyTpl {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #002b66 !important;
    background-color: #002b66 !important;
    border: 1px solid #002b66 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 43, 102, 0.15) !important;
}

#graduation-check-app #gc-applyTpl:hover,
#graduation-check-app #gc-applyTpl:focus-visible {
    background: #001f49 !important;
    background-color: #001f49 !important;
    border-color: #001f49 !important;
    color: #ffffff !important;
}

#graduation-check-app #gc-applyTpl i {
    color: #ffffff !important;
}

#graduation-check-app #gc-judge {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #a32329 !important;
    background-color: #a32329 !important;
    border: 1px solid #a32329 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(163, 35, 41, 0.16) !important;
}

#graduation-check-app #gc-judge:hover,
#graduation-check-app #gc-judge:focus-visible {
    background: #661115 !important;
    background-color: #661115 !important;
    border-color: #661115 !important;
    color: #ffffff !important;
}

#graduation-check-app #gc-judge i {
    color: #ffffff !important;
}