/* カラーパレット */
:root {
    --color-main: #E0AE9E;
    --color-accent: #4e4449;
    --color-base: #E0AE9E;
    --color-light: #ffcebd;
    --color-primary-action: #5f3731;
    --color-primary-action-hover: #4e2d29;
    --color-primary-action-shadow: rgba(95, 55, 49, 0.24);
    --color-mobile-heading: #4e3437;
    --color-mobile-text: #513f42;
    --color-mobile-muted: #80666a;
    --color-mobile-soft: #6f4b45;
    --dot-color: rgba(224, 174, 158, 0.25);
    --dot-size: 2px;
    --dot-gap: 16px;
}

body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
    /* 上にドットのパターン、その一番下は無地の背景色（メインカラー） */
    background-color: var(--color-base);
    background-attachment: fixed;
    color: #262626;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

/* エラーメッセージ：改行を表示 */
.error-message-box__body {
    white-space: pre-line;
    margin-top: 0.25rem;
}

/* ボタン・リンクはポインター（outline は削除しない） */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"] {
    cursor: pointer;
}

/* フォーカス時は見やすい輪郭を表示 */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ユーティリティ */
.hidden {
    display: none !important;
}

/* 画像の比率維持:
   Tailwind の w-64 / h-64 で幅・高さが固定されるため、object-fit を指定して伸び縮みを防ぎます。 */
img.w-64.h-64 {
    width: min(48rem, 90vw); /* 約1.5倍サイズ（高さは画像比率に従う） */
    height: auto !important; /* w-64/h-64 の固定高さで余白が出るのを防ぐ */
    object-fit: contain;
    object-position: center;
    display: block;
}

/* アプリ風カード・セクション（ドット調） */
.app-card {
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgba(78, 68, 73, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 2px dotted rgba(78, 68, 73, 0.2);
    background-image: radial-gradient(circle at 2px 2px, rgba(224, 174, 158, 0.15) 1px, transparent 1px);
    background-size: 12px 12px;
    background-color: var(--color-base);
    overflow: visible;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-accent);
    letter-spacing: -0.02em;
}

.section-desc {
    margin-bottom: 1.5rem;
    color: #525252;
    line-height: 1.65;
}

.diagnosis-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.diagnosis-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
}

.btn-primary,
.btn-secondary {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    min-height: 48px;
}

.btn-primary {
    background: linear-gradient(135deg, #6d4039 0%, var(--color-primary-action) 100%);
    color: #ffffff;
    border: 2px dotted rgba(255, 249, 238, 0.28);
    box-shadow: 0 4px 14px var(--color-primary-action-shadow);
}

.btn-primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #5f3731 0%, var(--color-primary-action-hover) 100%);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(95, 55, 49, 0.32);
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

#diagnoseButton {
    padding: 1rem 3.5rem;
    font-size: 1.125rem;
    min-height: 56px;
    min-width: 280px;
}

#diagnoseButton:hover {
    color: #ffffff;
}

.btn-secondary {
    background: #f0eeea;
    color: var(--color-accent);
    border: 2px dotted rgba(78, 68, 73, 0.2);
}

.btn-secondary:hover {
    background: #e5e5e5;
    transform: translateY(-1px);
}

/* スクリーンリーダー専用のテキスト（視覚的に隠す） */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 500px; /* Adjusted for radar and bar charts */
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    border-radius: 0.5rem;
    height: 300px; /* Tailwind: h-72 */
}

@media (min-width: 768px) {
    .chart-container {
        height: 350px; /* Tailwind: h-80 approx */
         max-width: 600px;
    }
}

.section-card {
    background-color: #fff;
    background-image: radial-gradient(circle at 2px 2px, rgba(224, 174, 158, 0.08) 1px, transparent 1px);
    background-size: 14px 14px;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    margin-bottom: 2rem;
    border: 1px dotted rgba(78, 68, 73, 0.15);
}

/* ヘッダーバナー：幅100%・高さはアスペクト比維持 */
.header-banner {
    width: 100%;
    overflow: hidden;
}

.header-banner__img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}

.header-banner-bg {
    background-color: rgba(224, 174, 158, 0.25);
}

.nav-brand {
    color: #FFF9EE;
    text-decoration: none;
}

.diagnosis-result-block {
    background-color: #FFF9EE;
    border: 1px solid rgba(224, 174, 158, 0.4);
    box-shadow: 0 4px 20px rgba(78, 68, 73, 0.06);
}

.diagnosis-result-block.result-visible {
    animation: resultFadeIn 0.35s ease-out;
}

@keyframes resultFadeIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.diagnosis-result-title,
.recommended-job-name {
    color: var(--color-accent);
}

.diagnosis-result-block > p {
    color: #57534e;
}

.diagnosis-result-grid {
    background: #ffffff;
    padding: 1.25rem;
    border-radius: 0.5rem;
}

.share-result-block {
    background-color: rgba(255, 249, 238, 0.8);
    border: 1px solid rgba(224, 174, 158, 0.35);
}

.job-list-link-block {
    margin-top: 1.5rem;
    text-align: right;
}

.diagnosis-survey {
    margin-top: 2rem;
    padding: 1.25rem 1rem;
    background: rgba(255, 249, 238, 0.85);
    border: 1px solid rgba(224, 174, 158, 0.4);
    border-radius: 0.75rem;
}

.diagnosis-survey__title {
    margin: 0 0 0.35rem;
    color: var(--color-accent);
    font-size: 1.0625rem;
    font-weight: 700;
}

.diagnosis-survey__lead {
    margin: 0 0 1rem;
    color: #57534e;
    font-size: 0.875rem;
    line-height: 1.55;
}

.diagnosis-survey__frame-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #ffffff;
}

.diagnosis-survey__frame {
    display: block;
    width: 100%;
    min-height: 748px;
    height: 748px;
    border: 0;
}

.job-list-link-btn {
    background: var(--color-primary-action);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(78, 68, 73, 0.12);
}

.job-list-link-btn:hover {
    background: var(--color-primary-action-hover);
    color: #ffffff;
}

.share-result-block__title {
    color: var(--color-accent);
}

.share-preview-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(224, 174, 158, 0.35);
    background: #ffffff;
    border-radius: 0.5rem;
}

.share-image-preview {
    display: block;
    flex-shrink: 0;
    width: 220px;
    height: 220px;
    object-fit: contain;
    border-radius: 0.5rem;
    border: 1px solid rgba(224, 174, 158, 0.4);
    background: #fafafa;
}

.share-image-preview.hidden {
    display: none;
}

.share-preview-box__text {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
}

.share-preview-box__text:focus {
    box-shadow: none;
}

.copy-result-btn {
    background: var(--color-primary-action);
    color: #ffffff;
}

.copy-result-btn:hover {
    background: var(--color-primary-action-hover);
    color: #ffffff;
}

/* 単体で使う場合の share-text-preview（枠内では .share-preview-box__text で上書き） */
.share-text-preview {
    border: 1px solid rgba(224, 174, 158, 0.35);
    background: #ffffff;
}

.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--color-accent);
    backdrop-filter: blur(10px);
    border-bottom: 2px dotted rgba(255, 249, 238, 0.2);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.nav-link {
    color: #FFF9EE;
    font-weight: 700;
    transition: color 0.3s ease;
    text-decoration: none;
}

.nav-link:hover {
    color: #fff;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(255, 249, 238, 0.35);
    border-radius: 0.5rem;
    background: rgba(255, 249, 238, 0.08);
    color: #FFF9EE;
}

.nav-toggle__bar {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.diagnosis-progress {
    position: sticky;
    top: 3.75rem;
    z-index: 30;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: #FFF9EE;
    border: 1px dotted rgba(78, 68, 73, 0.25);
    border-radius: 0.5rem;
    box-shadow: 0 8px 18px rgba(78, 68, 73, 0.12);
}

.diagnosis-progress__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.9375rem;
}

.diagnosis-progress__track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(78, 68, 73, 0.14);
}

.diagnosis-progress__fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--color-light);
    transition: width 0.2s ease;
}

.chart-category-legend {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem 0.75rem;
    margin: 0.75rem auto 0;
    max-width: 420px;
    width: 100%;
    font-size: 0.8125rem;
    color: #44403c;
}

.chart-category-legend__item {
    display: grid;
    grid-template-columns: 2.75rem 1fr auto;
    gap: 0.35rem 0.5rem;
    align-items: baseline;
}

.chart-category-legend dt {
    color: var(--color-accent);
    font-weight: 700;
}

.chart-category-legend__desc {
    margin: 0;
}

.chart-category-legend__score {
    margin: 0;
    font-weight: 700;
    color: var(--color-primary-action);
    white-space: nowrap;
    text-align: right;
}

@media (min-width: 769px) {
    .chart-with-legend {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }

    .chart-with-legend .chart-container {
        flex: 1 1 52%;
        margin: 0;
        max-width: none;
    }

    .chart-with-legend .chart-category-legend {
        flex: 1 1 48%;
        margin: 0;
        max-width: none;
    }
}

h1, h2, h3 {
    color: var(--color-accent);
}

.section-card > h2 {
    color: var(--color-accent);
}

.jobs-page-header {
    background-color: #FFF9EE;
    background-image: radial-gradient(circle at 2px 2px, rgba(224, 174, 158, 0.18) 1px, transparent 1px);
    background-size: 12px 12px;
    padding: 1.25rem 1rem;
}

.jobs-page-title {
    color: var(--color-mobile-heading);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.jobs-page-lead {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-mobile-muted);
}

@media (min-width: 769px) {
    .jobs-page-header {
        padding: 1.5rem 1rem;
    }

    .jobs-page-title {
        font-size: 1.5rem;
    }

    .jobs-page-lead {
        font-size: 0.9375rem;
    }
}

/* 職種一覧：1職種を1カードにまとめる */
#jobList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.job-list-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem;
    background: #FFF9EE;
    border: 1px solid rgba(224, 174, 158, 0.45);
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(78, 68, 73, 0.06);
}

.job-list-card__media {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.job-list-card__img {
    display: block;
    width: min(100%, 200px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 0.75rem;
    background: #ffffff;
    border: 1px solid rgba(224, 174, 158, 0.35);
}

.job-list-card__img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 200px);
    aspect-ratio: 1;
    border-radius: 0.75rem;
    background: #ffffff;
    border: 1px solid rgba(224, 174, 158, 0.35);
    color: var(--color-mobile-muted);
    font-size: 0.875rem;
}

.job-list-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
}

.job-list-title {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    color: var(--color-mobile-heading);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background-image: linear-gradient(var(--job-title-underline, var(--color-main)), var(--job-title-underline, var(--color-main)));
    background-repeat: no-repeat;
    background-size: 100% 0.32em;
    background-position: 0 92%;
    padding: 0 0.08em 0.02em;
}

.job-list-description {
    margin: 0;
    padding: 0.875rem 1rem;
    color: var(--color-mobile-text);
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.7;
    white-space: pre-line;
    background: #ffffff;
    border: 1px solid rgba(224, 174, 158, 0.35);
    border-radius: 0.75rem;
}

@media (min-width: 769px) {
    #jobList {
        gap: 1.25rem;
    }

    .job-list-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1.25rem 1.5rem;
    }

    .job-list-card__media {
        width: 220px;
        flex-shrink: 0;
        justify-content: flex-start;
    }

    .job-list-card__img,
    .job-list-card__img-placeholder {
        width: 220px;
    }

    .job-list-title {
        font-size: 1.375rem;
    }

    .job-list-description {
        font-size: 1rem;
        padding: 1rem 1.15rem;
    }
}

/* 職種タイトル下線：色相は維持しつつ、ベース(#E0AE9E)に馴染むくすみパステルへ */
.job-list-title--ceo {
    --job-title-underline: #cbb6d8;
}

.job-list-title--ciso {
    --job-title-underline: #c2d18f;
}

.job-list-title--pentest {
    --job-title-underline: #e8a8a0;
}

.job-list-title--soc {
    --job-title-underline: #a9c4de;
}

.job-list-title--analyst {
    --job-title-underline: #a9c7b2;
}

.job-list-title--forensics {
    --job-title-underline: #e4b892;
}

.job-list-title--engineer {
    --job-title-underline: #a9cbd6;
}

.job-list-title--sales {
    --job-title-underline: #e6d19a;
}

.job-list-title--consultant {
    --job-title-underline: #e0b0c4;
}

/* 見出しマーカー（蛍光ペン風） */
.heading-marker {
    display: inline-block;
    background: linear-gradient(transparent 60%, var(--color-light) 60%);
}

.accent-1 { color: var(--color-main); }
.accent-2 { color: #65a30d; }
.accent-3 { color: #0284c7; }
.accent-4 { color: #8b5cf6; }
.accent-5 { color: #ec4899; }

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #d4d4d4; /* neutral-300 */
    padding: 0.5rem; /* p-2 */
    text-align: center;
}

th {
    background-color: #f5f5f5; /* neutral-100 */
}

.category-icon {
    font-size: 2rem; /* text-3xl */
    margin-bottom: 0.5rem; /* mb-2 */
}

.question-group {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--color-base);
    background-image:
        radial-gradient(circle at center, rgba(255, 249, 238, 0.35) 2px, transparent 2px),
        linear-gradient(160deg, var(--color-base) 0%, var(--color-light) 50%, var(--color-light) 100%);
    background-size: 16px 16px, 100% 100%;
    background-position: 0 0, 0 0;
    border-left: 4px dotted var(--color-main);
    border-radius: 0.5rem;
}

.question-group h4 {
    color: #FFF9EE;
    margin-bottom: 0.75rem;
    white-space: nowrap;
    overflow-x: auto;
    min-width: fit-content;
}

/* 脚注マーカーのスタイル */
sup {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: super;
}

.question-item {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background-color: #fff;
    border-radius: 0.375rem;
    border: 1px dotted rgba(224, 174, 158, 0.3);
    box-shadow: 0 1px 2px 0 rgba(78, 68, 73, 0.06);
}

.radio-label {
    margin-left: 0.5rem;
    cursor: pointer;
}

.radio-input {
    cursor: pointer;
}

/* スマホ専用スタイル */
.mobile-device .section-card {
    padding: 1rem; /* スマホではパディングを小さく */
    margin-bottom: 1rem;
}

.mobile-device h1 {
    font-size: 1.75rem; /* スマホではタイトルを小さく */
    line-height: 1.2;
    color: var(--color-mobile-heading);
}

.mobile-device h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--color-mobile-heading);
}

.mobile-device h3 {
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--color-mobile-heading);
}

.mobile-device .category-icon {
    font-size: 1.5rem; /* スマホではアイコンを小さく */
}

.mobile-device .question-group {
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.mobile-device .question-item {
    padding: 0.375rem;
    margin-bottom: 0.5rem;
}

.mobile-device .question-item p {
    font-size: 0.875rem; /* 質問文を小さく */
    line-height: 1.4;
    color: var(--color-mobile-text);
}

.mobile-device .radio-label {
    font-size: 0.875rem;
    color: var(--color-mobile-text);
}

.mobile-device table {
    font-size: 0.75rem; /* テーブルを小さく */
}

.mobile-device th,
.mobile-device td {
    padding: 0.25rem 0.125rem;
}

.mobile-device .chart-container {
    height: 240px;
    max-width: 100%;
}

/* モバイル結果：チャート上・凡例下で読みやすく */
.mobile-device .chart-with-legend {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.mobile-device .chart-with-legend .chart-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    height: 240px;
}

.mobile-device .chart-with-legend .chart-category-legend {
    margin: 0;
    max-width: none;
    width: 100%;
    grid-template-columns: 1fr;
    font-size: 0.8125rem;
    gap: 0.4rem;
}

.mobile-device .chart-with-legend .chart-category-legend__item {
    grid-template-columns: 2.25rem 1fr auto;
    gap: 0.25rem 0.4rem;
}

.mobile-device .sticky-nav {
    padding: 0;
}

.mobile-device .sticky-nav .container {
    padding: 0.5rem 1rem;
}

.mobile-device .sticky-nav .nav-brand {
    font-size: 0.8125rem;
    line-height: 1.3;
}

.mobile-device .nav-link {
    font-size: 0.9375rem;
    padding: 0.75rem 0;
}

.mobile-device button {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.mobile-device .grid {
    gap: 0.75rem;
}

.mobile-device .grid > div {
    padding: 0.75rem;
}

.mobile-device .grid > div p {
    font-size: 0.75rem;
    color: var(--color-mobile-text);
}

.mobile-device .grid > div h3 {
    font-size: 0.875rem;
    color: var(--color-mobile-heading);
}

/* タブレット専用スタイル */
.tablet-device .section-card {
    padding: 1.25rem;
}

.tablet-device .chart-container {
    height: 300px;
    max-width: 500px;
}

/* デスクトップ専用スタイル */
.desktop-device .section-card {
    padding: 1.5rem;
}

.desktop-device .chart-container {
    height: 350px;
    max-width: 600px;
}

/* 横スクロール対応 */
@media (max-width: 768px) {
    .sticky-nav .container {
        position: relative;
    }

    .nav-brand {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: absolute;
        top: calc(100% + 1px);
        left: 1rem;
        right: 1rem;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 1rem;
        background: var(--color-accent);
        border: 1px solid rgba(255, 249, 238, 0.25);
        border-radius: 0 0 0.5rem 0.5rem;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    }

    .nav-menu.is-open {
        display: flex;
    }

    .nav-menu.space-x-4 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0;
    }

    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px; /* テーブルの最小幅を設定 */
    }

    .chart-category-legend {
        grid-template-columns: 1fr;
        font-size: 0.75rem;
    }

    .diagnosis-progress {
        top: 3.75rem;
        padding: 0.75rem;
    }
}

/* タッチデバイス用の最適化 */
@media (hover: none) and (pointer: coarse) {
    .nav-link:hover {
        color: #fff;
    }
    
    .radio-input,
    .radio-label {
        min-height: 44px; /* タッチターゲットの最小サイズ */
        display: inline-flex;
        align-items: center;
    }
    
    button {
        min-height: 44px;
    }
}

/* 高解像度ディスプレイ対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .category-icon {
        font-weight: 500; /* 高解像度でより鮮明に */
    }
}

/* ========== モバイル専用: 1問1ページクイズUI ========== */
@media (max-width: 768px) {
    .app-card {
        border-radius: 1.5rem;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        padding: 1.25rem 1rem;
        box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(224, 174, 158, 0.12);
    }

    .section-title {
        font-size: 1.25rem;
        color: var(--color-mobile-heading);
    }

    .section-desc {
        font-size: 0.9375rem;
        color: var(--color-mobile-text);
    }
}

.mobile-quiz-container {
    width: 100%;
}

/* モバイル診断中はセクション見出しを非表示 */
#diagnosis-tool:has(.mobile-quiz-container) > .section-title {
    display: none;
}

/* モバイルで結果表示中は回答進捗を非表示 */
.mobile-device #diagnosis-tool:has(#diagnosisResult:not(.hidden)) .diagnosis-progress {
    display: none;
}

/* モバイルで結果表示中は質問カードを隠し、結果を上部から表示 */
.mobile-device #diagnosis-tool:has(#diagnosisResult:not(.hidden)) #diagnosisForm {
    display: none;
}

.mobile-device #diagnosis-tool:has(#diagnosisResult:not(.hidden)) #diagnosisResult {
    margin-top: 0;
}

/* モバイル結果表示中はバナーを隠し、結果をすぐ見せる */
.mobile-device:has(#diagnosisResult:not(.hidden)) .header-banner {
    display: none;
}

.mobile-quiz-card {
    display: flex;
    flex-direction: column;
    /* 最長質問＋ボタン分の高さ。短文でも YES/NO 位置を揃える */
    min-height: 15.75rem;
    height: auto;
    background: #FFF9EE; /* オフホワイト */
    background-image: radial-gradient(circle at 3px 3px, rgba(224, 174, 158, 0.12) 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    border-radius: 1.25rem;
    padding: 1.5rem 1.25rem 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(78, 68, 73, 0.08);
    border: 2px dotted rgba(78, 68, 73, 0.25);
    margin-bottom: 0.5rem;
    animation: mobileQuizCardIn 0.22s ease-out both;
    will-change: opacity, transform;
}

.mobile-quiz-body {
    flex: 1 1 auto;
    min-height: 0;
}

.mobile-quiz-card.is-leaving {
    animation: mobileQuizCardOut 0.16s ease-in both;
    pointer-events: none;
}

@keyframes mobileQuizCardIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mobileQuizCardOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.985);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-quiz-card,
    .mobile-quiz-card.is-leaving {
        animation: none;
    }
}

.mobile-quiz-category {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-mobile-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    padding: 0.35rem 0.65rem;
    background: rgba(224, 174, 158, 0.25);
    border-radius: 0.5rem;
    border: 1px solid rgba(78, 68, 73, 0.2);
}

.mobile-quiz-question {
    font-size: 1.25rem;
    line-height: 1.65;
    color: var(--color-mobile-heading);
    font-weight: 700;
    margin: 0 0 0.75rem;
    letter-spacing: 0.01em;
}

.mobile-quiz-footnotes {
    font-size: 0.75rem;
    color: var(--color-mobile-muted);
    margin: 0;
    padding-left: 0.25rem;
}

.mobile-quiz-choices {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: 0.75rem;
    border: none;
    padding: 0.75rem 0 0;
    margin-top: auto;
}

.mobile-quiz-btn {
    flex: 1;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 9999px;
    border: 2px dotted rgba(78, 68, 73, 0.28);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    min-height: 52px;
    -webkit-tap-highlight-color: transparent;
    color: var(--color-mobile-heading);
    letter-spacing: 0.03em;
    box-shadow:
        0 5px 0 rgba(78, 68, 73, 0.16),
        0 12px 20px rgba(78, 68, 73, 0.08);
}

.mobile-quiz-btn-yes {
    background: linear-gradient(135deg, #fff9ee 0%, #ffe6d9 100%);
    border-color: rgba(95, 55, 49, 0.34);
}

.mobile-quiz-btn-yes:hover,
.mobile-quiz-btn-yes:active {
    background: linear-gradient(135deg, #fff4dc 0%, #ffd9ca 100%);
    border-color: rgba(95, 55, 49, 0.48);
}

.mobile-quiz-btn-yes:active {
    transform: translateY(3px) scale(0.99);
    box-shadow:
        0 2px 0 rgba(78, 68, 73, 0.16),
        0 6px 12px rgba(78, 68, 73, 0.08);
}

.mobile-quiz-btn-no {
    background: linear-gradient(135deg, #f7e5df 0%, #e7c0b5 100%);
    border-color: rgba(95, 55, 49, 0.28);
}

.mobile-quiz-btn-no:hover,
.mobile-quiz-btn-no:active {
    background: linear-gradient(135deg, #f3d7cf 0%, #ddb0a4 100%);
    border-color: rgba(95, 55, 49, 0.44);
}

.mobile-quiz-btn-no:active {
    transform: translateY(3px) scale(0.99);
    box-shadow:
        0 2px 0 rgba(78, 68, 73, 0.16),
        0 6px 12px rgba(78, 68, 73, 0.08);
}

.mobile-quiz-btn[aria-pressed="true"] {
    outline: 3px solid rgba(95, 55, 49, 0.22);
    outline-offset: 3px;
}

/* モバイル時のみ診断アクションをフル幅に */
@media (max-width: 768px) {
    .diagnosis-actions {
        flex-direction: column;
        width: 100%;
    }

    .diagnosis-actions .btn-primary,
    .diagnosis-actions .btn-secondary {
        width: 100%;
    }

}

/* 診断を始める：モバイル向けCTAを押しやすく */
.start-diagnosis-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: min(100%, 20rem);
    min-height: 3.25rem;
    margin: 0.35rem auto 0;
    padding: 0.95rem 1.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 9999px;
    background: linear-gradient(135deg, #7a4a42 0%, var(--color-primary-action) 55%, #4e2d29 100%);
    border: 2px solid rgba(255, 249, 238, 0.35);
    box-shadow:
        0 8px 22px rgba(95, 55, 49, 0.3),
        0 0 0 4px rgba(255, 206, 189, 0.45);
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.start-diagnosis-btn::after {
    content: '→';
    font-size: 1.1em;
    line-height: 1;
    transition: transform 0.18s ease;
}

.start-diagnosis-btn:hover,
.start-diagnosis-btn:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 12px 28px rgba(95, 55, 49, 0.36),
        0 0 0 5px rgba(255, 206, 189, 0.55);
}

.start-diagnosis-btn:hover::after,
.start-diagnosis-btn:focus-visible::after {
    transform: translateX(3px);
}

.start-diagnosis-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow:
        0 4px 12px rgba(95, 55, 49, 0.28),
        0 0 0 3px rgba(255, 206, 189, 0.4);
}

/* Web版：診断を始めるボタンは非表示（モバイルのみ表示） */
@media (min-width: 769px) {
    .start-diagnosis-btn {
        display: none !important;
    }
}

/* 診断結果：職種説明をドットのメモ風に */
.job-description-cute__title {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 0.5rem 0;
}

.job-description-cute__body {
    margin: 0;
    line-height: 1.75;
}

.job-description-cute {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    background-color: #ffffff;
    background-image: radial-gradient(circle at 2px 2px, rgba(224, 174, 158, 0.28) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    border: 2px solid rgba(224, 174, 158, 0.65);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(78, 68, 73, 0.08);
    line-height: 1.75;
    position: relative;
    padding: 1rem 1.25rem 1rem 1.5rem;
    color: #44403c;
}

.job-description-cute::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 5px;
    background: var(--color-main);
    border-radius: 0 3px 3px 0;
    opacity: 0.85;
}

/* 診断結果：右上カラム内のカードを上から約10%下げる（PC） */
.job-result-cards-col {
    margin-top: 10%;
}

.job-result-head__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    line-height: 1.45;
}

.job-result-head__label {
    flex-shrink: 0;
}

.job-result-head .recommended-job-name {
    font-size: 1.125rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* 診断結果：こんな方にお勧め（メモとは別の項） */
.job-recommendation {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 2px solid rgba(224, 174, 158, 0.6);
    border-left: 4px solid var(--color-main);
    border-radius: 0.5rem;
    margin-top: 1rem;
    box-shadow: 0 2px 6px rgba(78, 68, 73, 0.06);
}

.job-recommendation__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 0.35rem;
}

.job-recommendation__text {
    font-size: 1rem;
    font-weight: 500;
    color: #44403c;
    line-height: 1.6;
    margin: 0;
}

/* 診断結果シェア：ボタンはCSSでレスポンシブ制御 */
.share-result-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.share-result-btn {
    display: inline-flex;
    flex: 1 1 16rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: #ffffff;
    font-size: clamp(0.8125rem, 0.7rem + 0.6vw, 1rem);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s ease;
    box-sizing: border-box;
}

.share-result-btn__mark {
    font-weight: 700;
}

.share-result-btn__label {
    min-width: 0;
}

.share-result-btn--x {
    background: #262626;
}

.share-result-btn--x:hover {
    background: #404040;
    color: #ffffff;
}

@media (max-width: 768px) {
    .share-result-block {
        padding: 1rem;
    }

    .share-result-block__title {
        font-size: 0.9375rem;
        margin-bottom: 0.75rem;
    }

    .share-preview-box {
        flex-direction: column;
    }

    .share-result-buttons {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .share-result-btn {
        flex: 1 1 auto;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.65rem 0.875rem;
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: 0.5rem;
    }
}

/* 診断結果：職種イラストを大きく表示・レスポンシブ */
.job-illustration-wrap {
    padding: 0.5rem;
}

.job-illustration {
    width: 85%;
    max-width: 280px;
    min-width: 200px;
}

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

@media (max-width: 768px) {
    /* 結果カードのはみ出し防止 */
    main.container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        max-width: 100%;
        overflow-x: clip;
    }

    #diagnosis-tool.app-card {
        margin-left: 0;
        margin-right: 0;
        padding: 0.75rem;
        max-width: 100%;
        overflow-x: clip;
        box-sizing: border-box;
    }

    #diagnosisResult.diagnosis-result-block {
        padding: 0.75rem;
        margin-top: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: clip;
    }

    #diagnosisResult > p {
        font-size: 0.875rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .diagnosis-result-title {
        font-size: 1.125rem;
        margin-bottom: 0.75rem;
    }

    #diagnosisResult .grid,
    #diagnosisResult .diagnosis-result-grid {
        gap: 0.875rem;
        padding: 0.5rem 0;
        background: transparent;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow-x: clip;
    }

    #diagnosisResult .grid > *,
    #diagnosisResult .diagnosis-result-grid > * {
        min-width: 0;
        max-width: 100%;
    }

    .job-result-head__title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        font-size: 1rem;
        margin-bottom: 0.75rem;
        max-width: 100%;
    }

    .job-result-head .recommended-job-name {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: clamp(0.95rem, 4.2vw, 1.1rem);
        font-weight: 700;
        color: var(--color-primary-action);
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .job-result-cards-col {
        margin-top: 0;
        max-width: 100%;
    }

    .job-description-cute,
    .job-recommendation {
        font-size: 0.875rem;
        padding: 0.75rem 0.875rem;
        line-height: 1.7;
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: strict;
        max-width: 100%;
        box-sizing: border-box;
    }

    .job-description-cute__title,
    .job-recommendation__title {
        font-size: 0.8125rem;
    }

    .job-description-cute__body,
    .job-recommendation__text {
        font-size: 0.875rem;
        line-height: 1.7;
    }

    .job-illustration-wrap {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    .job-illustration {
        width: 100%;
        max-width: 180px;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .chart-with-legend,
    .chart-with-legend .chart-container,
    .chart-with-legend canvas {
        max-width: 100%;
        box-sizing: border-box;
    }

    .share-result-block {
        margin-top: 1.25rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .share-image-preview {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: contain;
    }

    .share-preview-box {
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.75rem;
    }

    .share-preview-box__text,
    .share-text-preview {
        font-size: 0.8125rem;
        min-height: 5.5rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .job-list-link-block {
        text-align: center;
        margin-top: 1rem;
    }

    .job-list-link-btn {
        width: 100%;
        max-width: 100%;
        font-size: 0.9375rem;
        box-sizing: border-box;
    }
}

/* フッター：ナビと同じ色・レスポンシブ */
.site-footer {
    background-color: var(--color-accent);
    color: #e7e5e4;
    padding: 2rem 1rem;
    margin-top: 3rem;
    text-align: center;
}

.site-footer__text {
    font-size: 1rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .site-footer {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        margin-top: 2rem;
    }

    .site-footer__text {
        font-size: 0.8125rem;
        line-height: 1.5;
    }
}

/* ========== シェア用診断結果ページ ========== */
.share-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.share-landing {
    flex: 1;
    background-color: transparent;
}

.share-page .site-footer {
    margin-top: 0;
}

.share-landing__card {
    background-color: #ffffff;
    background-image: radial-gradient(circle at 2px 2px, rgba(224, 174, 158, 0.08) 1px, transparent 1px);
    background-size: 14px 14px;
    border: 1px solid rgba(224, 174, 158, 0.35);
    box-shadow: 0 8px 32px rgba(78, 68, 73, 0.12);
}

.share-landing__title {
    color: var(--color-accent);
}

.share-landing__job {
    color: var(--color-primary-action);
}

.share-landing__desc {
    background-color: #FFF9EE;
    background-image: radial-gradient(circle at 2px 2px, rgba(224, 174, 158, 0.18) 1px, transparent 1px);
    background-size: 12px 12px;
    border: 1px solid rgba(224, 174, 158, 0.4);
    color: #57534e;
}

.share-landing__cta {
    background: linear-gradient(135deg, #6d4039 0%, var(--color-primary-action) 100%);
    box-shadow: 0 4px 14px var(--color-primary-action-shadow);
    text-decoration: none;
}

.share-landing__cta:hover {
    background: linear-gradient(135deg, #5f3731 0%, var(--color-primary-action-hover) 100%);
    color: #ffffff;
}