/* 全体的なスタイル */
html, body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}
#diagnosis-container-final {
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    color: #333;
    box-sizing: border-box;
    line-height: 1.6;
}
#diagnosis-container-final * {
    box-sizing: border-box;
    font-family: inherit;
}
#diagnosis-container-final h1,
#diagnosis-container-final h2,
#diagnosis-container-final p,
#diagnosis-container-final ul,
#diagnosis-container-final li {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none;
}
/* メインラッパーのスタイル */
#diagnosis-container-final #mainwrap {
    max-width: 640px; /* PC向けに最大幅を640pxに調整 */
    width: calc(100% - 40px); /* 左右に20pxのパディングを確保しつつ幅を調整 */
    margin: 30px auto; /* 中央寄せ */
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 10px 40px rgba(0, 0, 0, 0.1);
    padding:35px 25px; /* PC向けにパディングを調整 */
    position:relative;
    min-height: 600px;
}
/* ロゴ画像のスタイル (150%拡大) */
#diagnosis-container-final .logo-img { display:block; margin:0 auto 20px auto; width:210px; /* 140px * 1.5 = 210px */ max-width:60vw; /* 40vw * 1.5 = 60vw */ }
/* PC向け文字サイズの調整 */
#diagnosis-container-final h1.main-title { font-size:1.4rem; font-weight:700; text-align:center; color:#0d47a1; margin:15px 0 10px 0; }
#diagnosis-container-final h1.page-subtitle { font-size:1.2rem; font-weight:700; text-align:center; color:#0d47a1; margin:5px 0 20px 0; }
#diagnosis-container-final .intro-text-wrapper { padding: 0 10px; margin-bottom: 25px; }
#diagnosis-container-final .intro-text { font-size:1rem; color:#37474f; background:#f5f7fa; border-radius:12px; padding:20px 18px; text-align:left; line-height:1.75; word-break:break-word; overflow-wrap: break-word; }
#diagnosis-container-final .intro-text span { display: block; margin-bottom: 15px; }
#diagnosis-container-final .intro-text span:last-child { margin-bottom: 0; }
#diagnosis-container-final .intro-text strong { color: #1976d2; font-weight: 700; }
#diagnosis-container-final .page-desc { font-size: 1rem; color: #455a64; text-align: center; margin: -12px 10px 10px 10px; line-height: 1.65; }
#diagnosis-container-final .interaction-guide { text-align: left; font-size: 0.9rem; color: #37474f; background-color: #f0f4f8; padding: 8px 12px; border-radius: 8px; margin-top: 10px; margin-bottom: 15px; border: 1px solid #d0d9e0; line-height: 1.5; }
#diagnosis-container-final .progress { text-align:center; color:#1565c0; margin-top:8px; font-size:1rem; font-weight: 500; min-height: 1.2em; }

/* ページ全体の初期表示はJavaScriptで制御するため、CSSからは削除 */
/* .page { display: none; } */ /* この行は削除しました */

/* 結果ページを強制的に表示 */
#diagnosis-container-final #page10 {
    display: block !important; /* 最も強力な表示強制 */
}

/* カテゴリーグリッドのスタイル */
#diagnosis-container-final .grid {
  display: grid;
  grid-template-columns: repeat(3,1fr); /* PC向けに3列表示に修正 */
  gap:20px; /* PC向けにギャップを調整 */
  margin:18px auto 10px auto; /* 中央寄せ */
  width:100%; /* 親要素の幅いっぱいに */
  max-width: none; /* 最大幅を解除 */
}
#diagnosis-container-final .cell {
    aspect-ratio:1/1;
    background:#f8fafc;
    border:2px solid #cfd8dc;
    border-radius:15px;
    display:flex;
    flex-direction:column;
    align-items:center; /* セルのコンテンツを中央寄せに維持 */
    justify-content:center;
    font-size:.88rem; /* この値はそのまま */
    font-weight:500;
    color:#37474f;
    cursor:pointer;
    transition: all .2s ease-out;
    user-select:none;
    padding:5px;
    text-align:center;
    position:relative;
    box-shadow:0 3px 8px rgba(0,0,0,0.05);
    overflow:hidden;
    box-sizing: border-box;
}
#diagnosis-container-final .cell:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(69, 90, 100, 0.1); }
#diagnosis-container-final .cell.selected { background:linear-gradient(135deg, #64b5f6 0%, #42a5f5 100%)!important; border-color:#1976d2!important; color:#ffffff!important; box-shadow:0 5px 15px rgba(25, 118, 210, 0.3); transform: translateY(-1px); }
#diagnosis-container-final .cell.center {
    background: none !important; /* 中央セルの背景色を削除 */
    border: none !important; /* 中央セルの枠線を削除 */
    cursor:default!important;
    box-shadow:none; /* 中央セルの影を削除 */
    padding: 0;
}
#diagnosis-container-final .cell.center:hover { transform: none; box-shadow: none; }
#diagnosis-container-final .center-img { width: 90%; height: 90%; object-fit: contain; display: block; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.08); background: #ffffff; }
#diagnosis-container-final .lbl {font-size:0.95rem;font-weight:700; text-align: center;} /* セル内のタイトルは中央寄せに維持 */
/* 解説部分の文字色を#546e7aに固定し、中央寄せに影響するように調整 */
#diagnosis-container-final .sub {
    font-size:0.7rem;
    color:#546e7a; /* 解説の文字色 */
    margin-top:3px;
    line-height:1.2;
    text-align: center; /* セル内の解説は中央寄せに維持 */
    display: block; /* text-alignが効くようにブロック要素に */
    width: 100%; /* 親要素内で幅いっぱいに広げる */
}
#diagnosis-container-final .cell.selected .sub { color: #e3f2fd; }
#diagnosis-container-final .cell:not(.selected) .sub { color: #546e7a; } /* 選択されていない場合も同じ色 */

/* ボタンのスタイル */
#diagnosis-container-final .button-row { display:flex; flex-wrap: wrap; gap:10px; justify-content:center; margin-top:22px; }
#diagnosis-container-final .btn, #diagnosis-container-final .back-btn { 
    color:#ffffff; padding:12px 0; font-weight:500; border-radius:10px; cursor:pointer; border:none; text-align: center; transition: all .2s ease-out; box-sizing: border-box; 
    background: linear-gradient(135deg, #2979ff 0%, #2196f3 100%); /* 全てのボタンに青系グラデーションを適用 */
}

#diagnosis-container-final #page0 .button-row .btn { box-shadow: 0 3px 8px rgba(33, 150, 243, 0.2); flex-basis: 100%; max-width: 200px; font-size:1.1rem; }
#diagnosis-container-final #catPages .button-row .btn, #diagnosis-container-final #catPages .button-row .back-btn { flex-basis: calc(50% - 5px); max-width: 160px; font-size:1.1rem; }
#diagnosis-container-final #catPages .button-row .btn { box-shadow: 0 3px 8px rgba(33, 150, 243, 0.2); }
#diagnosis-container-final #catPages .button-row .back-btn { background:#e0e0e0; color:#333333; border:1px solid #bdbdbd; box-shadow: 0 3px 8px rgba(0,0,0, 0.1); }
#diagnosis-container-final #pageFilter .button-row .btn, #diagnosis-container-final #pageFilter .button-row .back-btn, #diagnosis-container-final #page9 .button-row .btn, #diagnosis-container-final #page9 .button-row .back-btn { flex-grow: 1; min-width: 100px; }
#diagnosis-container-final #pageFilter .button-row .btn, #diagnosis-container-final #page9 .button-row .btn { box-shadow: 0 3px 8px rgba(33, 150, 243, 0.2); max-width: 180px; font-size:1.1rem; }
#diagnosis-container-final #pageFilter .button-row .back-btn { background:#e0e0e0; color:#333333; border:1px solid #bdbdbd; box-shadow: 0 3px 8px rgba(0,0,0, 0.1); max-width: 180px; }

#diagnosis-container-final .btn:hover, #diagnosis-container-final .back-btn:hover { transform: translateY(-2px); }
#diagnosis-container-final #page0 .button-row .btn:hover, #diagnosis-container-final #catPages .button-row .btn:hover, #diagnosis-container-final #pageFilter .button-row .btn:hover, #diagnosis-container-final #page9 .button-row .btn:hover { box-shadow: 0 5px 12px rgba(33, 150, 243, 0.3); }
#diagnosis-container-final #catPages .button-row .back-btn:hover, #diagnosis-container-final #pageFilter .button-row .back-btn:hover, #diagnosis-container-final #page9 .button-row .back-btn:hover { background: #d5d5d5; box-shadow: 0 5px 12px rgba(0,0,0, 0.15); }
#diagnosis-container-final .btn:disabled { background:#cfd8dc !important; color:#90a4ae !important; cursor:not-allowed !important; box-shadow: none !important; transform: none !important; }

/* リストとアイテムのスタイル */
#diagnosis-container-final .list{ list-style:none; padding:0 5px 0 0; margin:15px 0 0 0; max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* filter-item と item の子要素（labelとdescを囲むdiv）は左寄せに */
#diagnosis-container-final .filter-item > div, #diagnosis-container-final .item > div { /* ★修正: .item > div も追加 */
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: flex-start; /* ★修正: 左寄せに */
    flex-grow: 1; /* スペースを埋める */
}
#diagnosis-container-final .item, #diagnosis-container-final .filter-item { background:#ffffff; margin:0 0 10px; padding:12px 15px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.07); display:flex; align-items:center; gap:10px; transition:.15s; cursor: grab; }
#diagnosis-container-final .filter-item { cursor: pointer; }
#diagnosis-container-final .filter-item.selected { background: #e3f2fd; border: 2px solid #64b5f6; }
#diagnosis-container-final .item:active { cursor: grabbing; }
#diagnosis-container-final .sortable-ghost { opacity: 0.4; background: #e3f2fd; border: 1px dashed #90a4ae; }
#diagnosis-container-final .sortable-drag { opacity: 0.9; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transform: scale(1.02); }
#diagnosis-container-final .num{ width:24px;height:24px;line-height:24px; text-align:center; background:#2196f3; color:#ffffff; border-radius:50%; font-size:.9rem; flex-shrink:0; font-weight:700; }
#diagnosis-container-final .label{font-weight:500;color:#1e88e5; font-size:1rem; text-align: left;} /* ★修正: 左寄せに */
/* desc も左寄せに */
#diagnosis-container-final .desc{font-size:.9rem;color:#546e7a;margin-left:8px; text-align: left; display: block;}


/* 新しい結果カードのスタイル */
#diagnosis-container-final #resultCardsContainer {
    display: flex;
    flex-direction: column;
    gap: 20px; /* カード間のスペース */
    width: 100%;
    max-width: 400px; /* カード全体の最大幅を調整 */
    margin: 20px auto 40px auto; /* 上下の余白と中央寄せ */
}

#diagnosis-container-final .card {
    position: relative;
    padding: 20px; /* カード内のパディング */
    background: linear-gradient(140deg, #e0f2f7 0%, #c1e4f0 100%); /* #94cee3を基調とした淡いグラデーション */
    border-radius: 16px; /* 角丸 */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* 影を強調 */
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden; /* data-noがはみ出さないように */
    border: 1px solid rgba(148,206,227,0.5); /* #94cee3の半透明な枠線 */
}
#diagnosis-container-final .card:hover {
    transform: translateY(-5px) scale(1.01); /* ホバー時の効果を少し強める */
    box-shadow: 0 12px 35px rgba(0,0,0,0.2); /* ホバー時の影を強調 */
}

/* カードの番号 */
#diagnosis-container-final .card::before {
    content: attr(data-no);
    position: absolute;
    right: -5px; /* 右端に寄せる */
    bottom: -15px; /* 下に少しはみ出すように */
    font-size: 8rem; /* 大きくする */
    font-weight: 900;
    color: rgba(0,188,212,0.1); /* 青緑系の透明な色 */
    pointer-events: none; /* クリックを阻害しない */
    line-height: 1; /* 行の高さを調整してはみ出しを抑える */
}

#diagnosis-container-final .card h2 {
    margin: 0 0 0.4em; /* 下マージンを調整 */
    font-size: 1.3rem; /* 少し大きく */
    font-weight: 700; /* 太字 */
    color: #333333; /* ★修正: 価値観の単語色 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 影を調整 */
}

#diagnosis-container-final .card p {
    margin: 0;
    font-size: 1.0rem; /* 少し大きく */
    line-height: 1.7; /* 行間を調整 */
    color: #666666; /* ★修正: 内容の文字色 */
    text-shadow: none; /* 影を削除 */
}

/* 診断結果ページのCTAセクションの余白調整 */
#diagnosis-container-final .cta {
    text-align:center;
    margin-top: 25px; /* result-listからの余白を調整 */
}
#diagnosis-container-final .cta-microcopy { 
    font-size: 0.9rem; /* PC版: 0.9rem */
    color: #666666; 
    margin-bottom: 25px; /* 下のボタン/リンクとの間に十分な余白を確保 */
    font-weight: 500; 
    line-height: 1.4; 
}

.line-image-link-wrapper { /* LINE画像リンク用のラッパー */
    text-align: center;
    display: block; /* ブロック要素にして中央寄せ */
    margin: 0 auto 30px auto; /* マイクロコピーと公式ページリンクの間の余白を調整 */
    max-width: 280px; /* 画像の最大幅に合わせて調整 */
    width: 100%;
}
.line-image-link-wrapper img {
    display: block; /* 画像をブロック要素にして中央寄せ */
    width: 100%; /* 親のラッパーに合わせて幅100% */
    height: auto;
    border-radius: 10px; /* 角を丸くする */
    box-shadow: 0 3px 8px rgba(0,0,0,0.15); /* 影を追加 */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.line-image-link-wrapper img:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.25);
}
.line-image-link {
    display: block; /* aタグもブロック要素にして画像全体をリンク可能にする */
    text-decoration: none; /* 下線を削除 */
}


#diagnosis-container-final a.official-link { /* 公式ページリンクのスタイル */
    display: block; /* ブロック要素にして中央寄せ */
    text-align: center;
    margin: 0 auto; /* LINE画像リンクとの余白はline-image-link-wrapperで調整済み */
    font-size: 1rem;
    color: #0d47a1; /* 青系の色 */
    text-decoration: none; /* 下線を削除 */
    transition: color 0.2s;
}
#diagnosis-container-final a.official-link:hover {
    color: #1976d2; /* ホバーで色を濃く */
}

#diagnosis-container-final .message-area { text-align: center; color: #c62828; font-size: 1rem; margin-bottom: 12px; padding: 10px; background-color: #ffcdd2; border-radius: 8px; border: 1px solid #ef9a9a; display: none; }

/* スマートフォン向けスタイル（500px以下） */
@media (max-width:500px){
    #diagnosis-container-final #mainwrap{
        max-width: calc(100% - 30px);
        margin:15px auto;
        border-radius:10px;
        padding:20px 10px 30px 10px;
    }
    /* ロゴサイズのスマートフォン向け調整 (PC版の150%拡大に合わせて) */
    #diagnosis-container-final .logo-img{width:195px; /* 130px * 1.5 = 195px */ max-width:50vw;} /* 調整 */

    #diagnosis-container-final h1.main-title {font-size:1.1rem;}
    #diagnosis-container-final h1.page-subtitle {font-size:1rem;}
    #diagnosis-container-final .intro-text {font-size:.85rem;}
    #diagnosis-container-final .page-desc { font-size: 0.82rem; margin: -10px 5px 10px 5px;}
    #diagnosis-container-final .interaction-guide { font-size: 0.78rem; }

    /* スマートフォン向けグリッドのスタイル */
    #diagnosis-container-final .grid {
        grid-template-columns: repeat(3,1fr);
        gap:10px;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
    #diagnosis-container-final .cell {
      font-size: .8rem;
    }

    /* スマートフォンでの結果表示ページのスタイル調整 */
    #diagnosis-container-final #resultCardsContainer {
        margin: 15px auto 25px auto; /* スマホでの余白調整 */
    }
    #diagnosis-container-final .card {
        padding: 12px 15px; /* スマホ向けにパディング調整 */
    }
    #diagnosis-container-final .card::before {
        font-size: 5rem; /* スマホで番号を小さく */
        right: -10px; /* 位置調整 */
        bottom: -10px;
    }
    #diagnosis-container-final .card h2 {
        font-size: 1.05rem; /* スマホ向けに調整 */
    }
    #diagnosis-container-final .card p {
        font-size: 0.85rem; /* スマホ向けに調整 */
    }
    /* スマホでのCTA要素の余白調整 */
    #diagnosis-container-final .cta {
        margin-top: 15px;
    }
    #diagnosis-container-final .cta-microcopy {
        font-size: 0.85rem; /* スマホ版: 0.85rem */
        margin-bottom: 15px;
    }
    .line-image-link-wrapper {
        margin-bottom: 20px;
    }
    #diagnosis-container-final a.official-link {
        margin-top: 0;
    }
}