@charset "UTF-8";

/* =========================================================
   Base
========================================================= */

* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family:
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;

    background:
        linear-gradient(
            180deg,
            #f4f8fc 0%,
            #edf3f9 100%
        );

    color: #333;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* 上部ライン */

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #003366,
            #00aaff,
            #003366
        );

    z-index: 1000;
}

/* =========================================================
   Layout
========================================================= */

.container {
    max-width: 860px;
    margin: 50px auto 5px;
    padding: 48px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 10px 30px rgba(0, 51, 102, 0.08);

    position: relative;
    overflow: hidden;

    border-top: 4px solid #00aaff;
}

/* 背景装飾 */

.container::after {
    content: "SECURITY CHECK";

    position: absolute;
    top: -10px;
    right: 10px;

    font-size: 72px;
    font-weight: 900;

    color: rgba(0, 51, 102, 0.03);

    pointer-events: none;
    z-index: 0;
}

/* =========================================================
   Index Page
========================================================= */

body.page-index {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.page-index .container {
    width: 100%;
    max-width: 760px;

    margin: 0;
    padding: 36px 42px;
}

.page-index .container::after {
    font-size: 54px;
    top: 0;
}

/* =========================================================
   Typography
========================================================= */

h1 {
    color: #003366;

    text-align: center;

    font-size: 28px;
    letter-spacing: 0.05em;

    margin-top: 0;
    margin-bottom: 18px;

    position: relative;
    z-index: 1;
}

.page-index h1 {
    font-size: 26px;
}

/*h2 {
    color: #003366;

    font-size: 22px;

    border-left: 6px solid #005599;

    padding: 5px 15px;

    margin-bottom: 24px;

    background:
        linear-gradient(
            90deg,
            #f0f7ff,
            transparent
        );
}*/
h2 {
    border-left: none;
    border-bottom: 2px solid transparent;
    background-image: linear-gradient(90deg, #00aaff, #003366);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;

    padding-bottom: 8px;
}

.description {
    text-align: center;

    margin-bottom: 28px;

    color: #4a5568;

    position: relative;
    z-index: 1;
}

.page-index .description {
    font-size: 14px;
    line-height: 1.6;
}

.note {
    text-align: center;
    font-size: 12px;
    padding-bottom: 50px;

    color: #6b7280;

    position: relative;
    z-index: 1;
}

/* =========================================================
   Form Layout
========================================================= */

.page-index form {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

/* =========================================================
   Form Card
========================================================= */

.form-group {
    background: #ffffff;

    border: 1px solid #e1e8ef;

    padding: 18px;

    border-radius: 10px;

    transition: all 0.25s ease;

    position: relative;
    z-index: 1;

    backdrop-filter: blur(6px);
}

.form-group:hover {
    border-color: #00aaff;

    box-shadow:
        0 5px 15px rgba(0, 170, 255, 0.10);

    transform: translateY(-1px);
}

/* =========================================================
   Label
========================================================= */

label {
    display: block;

    margin-bottom: 10px;

    font-size: 14px;
    font-weight: bold;

    color: #003366;
}

/* =========================================================
   Logo
========================================================= */

.logo {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 120px;
    height: auto;
    z-index: 1;
}

/* ロゴを表示する.containerは、ロゴの専有スペース分だけ
   上部余白を広げて他コンテンツと重ならないようにする。
   .logoの幅・位置を変える場合はこのpadding-topも合わせて調整すること。 */
.container.has-logo {
    padding-top: 90px;
}

/* =========================================================
   Select（シンプル版）
========================================================= */

.select-wrap {
    position: relative;
}

.select-wrap::after {
    content: "";

    position: absolute;

    right: 16px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-right: 2px solid #5b6b7c;
    border-bottom: 2px solid #5b6b7c;

    transform:
        translateY(-70%)
        rotate(45deg);

    pointer-events: none;
}

select {
    width: 100%;
    height: 46px;

    padding: 0 40px 0 14px;

    border: 1px solid #d8e2eb;
    border-radius: 6px;

    background: #fff;

    color: #003366;

    font-size: 14px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    outline: none;

    transition:
        border-color 0.2s,
        background 0.2s;
}

/* hover */

select:hover {
    border-color: #b9d9f3;
}

/* focus */

select:focus {
    border-color: #00aaff;
}

/* 未選択 */

select:invalid {
    color: #7a8a9a;
}

/* =========================================================
   Button
========================================================= */

button {
    grid-column: 1 / -1;

    display: block;

    width: auto;

    min-width: 300px;

    margin: 10px auto 0;

    padding: 18px 42px;

    background: #02162F;

    color: #fff;

    border: none;

    font-size: 17px;
    font-weight: bold;

    border-radius: 50px;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow:
        0 4px 15px rgba(0, 51, 102, 0.2);

    position: relative;
    z-index: 1;
}

button:hover {
    background: #005599;

    transform: translateY(-2px);

    box-shadow:
        0 6px 20px rgba(0, 51, 102, 0.3);
}

/* =========================================================
   Result Cards
========================================================= */

.card {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfdff
        );

    border: 1px solid #e1e8ef;

    padding: 34px;

    margin-bottom: 24px;

    border-radius: 12px;

    position: relative;
    z-index: 1;

    box-shadow:
        0 5px 20px rgba(0, 51, 102, 0.05);
}

.card ul {
    padding-left: 0;
    margin: 0;
}

.card li {
    list-style: none;

    border-bottom: 1px solid #eef2f6;

    padding: 14px 0;

    position: relative;

    padding-left: 28px;
}

.risk-card li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    color: #00aaff;
    font-weight: bold;
}

.measure-card details li::before { 
	content: "✓";
	
	position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    color: #00aaff;
    font-weight: bold;
}

/* =========================================================
   Score Area
========================================================= */

.score-box {
    text-align: center;

    padding: 40px;

    background:
        linear-gradient(
            135deg,
            #003366,
            #02162F
        );

    color: #fff;

    border-radius: 14px;

    margin-bottom: 40px;
}

.score-num {
    font-size: 64px;
    font-weight: bold;

    color: #00ffcc;

    line-height: 1;

    margin: 10px 0;
}

.rank-text {
    display: inline-block;

    font-size: 24px;

    padding: 5px 20px;

    border-radius: 4px;

    background: rgba(255,255,255,0.1);
}

/* =========================================================
   Contact Area
========================================================= */

.contact-form {
    background: #f4f7fa;

    padding: 40px 24px;

    border-radius: 12px;

    margin-top: 50px;

    border: 1px solid #e1e8ef;

    text-align: center;
}

.contact-form h3 {
    color: #003366;

    font-size: 22px;

    margin-top: 0;
    margin-bottom: 15px;
}

.contact-form p {
    color: #444;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 30px;
}

.contact-form a,
.back-button {
    display: inline-block;

    min-width: 280px;

    padding: 16px 40px;

    background: #02162F;

    color: #ffffff !important;

    font-size: 17px;
    font-weight: bold;

    text-decoration: none;

    border-radius: 50px;

    transition: all 0.3s ease;

    box-shadow:
        0 4px 15px rgba(0, 51, 102, 0.2);
}

.contact-form a:hover,
.back-button:hover {
    background: #005599;

    transform: translateY(-2px);

    box-shadow:
        0 6px 20px rgba(0, 51, 102, 0.3);
}

.contact-form a::after {
    content: "〉";

    margin-left: 12px;

    font-size: 0.8em;

    display: inline-block;

    transition: transform 0.3s;
}

.contact-form a:hover::after {
    transform: translateX(5px);
}

/* =========================================================
   Responsive
========================================================= */

@media screen and (max-width: 768px) {

    body.page-index {
        display: block;
        padding: 16px;
    }

    .container {
        padding: 28px 22px;
    }

    .container::after {
        font-size: 40px;
    }

    .logo {
        width: 64px;
        top: 14px;
        left: 14px;
    }

    .container.has-logo {
        padding-top: 88px;
    }

    .page-index form {
        grid-template-columns: 1fr;
    }

    button {
        min-width: auto;
        width: 100%;
    }

    .contact-form a,
    .back-button {
        width: 100%;
        min-width: auto;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 18px;
    }
}

.measure-meta {
    margin-top: 6px;
    font-size: 13px;
    color: #6b7a8c;
}

/* =========================================================
   Priority Highlight (Top 3 vs Others)
========================================================= */

.card li {
    position: relative;
    padding-left: 28px; /* ←これを必ず維持 */
}

/* =========================================================
   上位3件（主役）
========================================================= */

.card li.is-top3 {
    background: linear-gradient(180deg, #f0f7ff, #ffffff);

    margin: 10px 0;

    /* 上下・右だけ調整、左は触らない */
    padding-top: 16px;
    padding-right: 14px;
    padding-bottom: 16px;
    padding-left: 28px; /* ←チェックと完全整合 */

    font-size: 16px;
    line-height: 1.8;

    box-shadow: 0 4px 14px rgba(0, 170, 255, 0.10);
}

/* チェックアイコンも少し強く */
.card li.is-top3::before {
    color: #005599;
    font-size: 16px;
}

/* タイトル部分（対策名）をさらに強調したい場合 */
.card li.is-top3 strong {
    font-size: 17px;
}

.measure-card li strong a {
    color: inherit;
    text-decoration: none;
}

.measure-card li strong a:hover {
    color: #005599;
    text-decoration: underline;
}

/* =========================================================
   その他（脇役）
========================================================= */

.card li.is-others {
    opacity: 0.55;

    font-size: 13.5px;
    line-height: 1.5;

    padding: 10px 0;
}

/* hoverで少し戻す */
.card li.is-others:hover {
    opacity: 1;
    background: #f9fbfd;
}

/* =========================================================
   Rank Badge (Top 3 only)
========================================================= */

.rank-badge {
    display: inline-block;
    position: absolute;

    left: 12px;
    top: 14px;

    font-size: 12px;
    font-weight: bold;

    padding: 4px 8px;
    border-radius: 999px;

    color: #fff;
    background: #003366;

    line-height: 1;

    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* 上位カードは左余白を確保（バッジ分） */
.card li.is-top3 {
    position: relative;
    padding-left: 60px; /* ←バッジスペース */
}

/* 1位 */
.rank-1 {
    background: linear-gradient(135deg, #ffb300, #ff8f00);
}

/* 2位 */
.rank-2 {
    background: linear-gradient(135deg, #90a4ae, #607d8b);
}

/* 3位 */
.rank-3 {
    background: linear-gradient(135deg, #a1887f, #6d4c41);
}

/* =========================================================
   リスク一覧
========================================================= */

.risk-card ul {
    margin-top: 10px;
}

.risk-card li {
    font-size: 14px;
    line-height: 1.45;
    color: #555;

    padding-top: 6px;
    padding-bottom: 6px;
}

/* =========================================================
   選定理由・防げる脅威
========================================================= */

.measure-card details {
    margin-top: 6px;
}

.measure-card details summary {
    font-size: 12px;
    cursor: pointer;
    color:#003366;
    font-weight:bold;
}

.measure-card details ul {
    margin: 6px 0 0;
    padding: 8px 12px;
    border-radius: 4px;
}

.measure-card details li {
    font-size: 11px;
    line-height: 1.3;
    color: #666;

    padding: 5px 0 5px 20px;

    border-bottom: none;
}

.measure-card details li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    color: #00aaff;
    font-weight: bold;
    font-size: 11px;
}



.measure-card .threat-list,
.threat-card .threat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    padding: 0;
}

.measure-card .threat-list li,
.threat-card .threat-list li {
    display: inline-block;
    list-style: none;
    padding: 4px 10px;
    margin: 0;

    background: #eef7ff;
    border: 1px solid #b8dfff;
    border-radius: 999px;

    font-size: 11px;
    color: #005599;
}

.measure-card .threat-list li::before,
.threat-card .threat-list li::before {
    display: none;
}

.threat-list li a{
    display:block;
    color:#005599;
    text-decoration:none;
}

.threat-list li a:hover{
    color:#003366;
}

/* =========================================================
   脅威解説ページ（threat.php）
   ※ 箱の外枠(.card)・キャプション文言(.measure-meta)・
     ピルタグ(.threat-list)は共通スタイルを再利用し、
     このページ固有の差分のみを以下に追加する
========================================================= */

.threat-page .description,
.measure-page .description {
    text-align: left;
}

.threat-toc-label {
    display: block;

    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: #6b7a8c;

    margin-bottom: 10px;
}

.threat-toc ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 16px;

    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.threat-toc li {
    border-bottom: none;
    padding: 0;
}

.threat-toc a {
    display: block;

    font-size: 13px;
    color: #003366;
    text-decoration: none;

    padding: 3px 0;
    border-bottom: 1px dotted transparent;
}

.threat-toc a:hover {
    color: #00aaff;
    border-bottom-color: #00aaff;
}

.threat-card {
    scroll-margin-top: 20px;
}

.threat-card h2 {
    font-size: 19px;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.threat-overview-text {
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e1e8ef;
}

.threat-section-label {
    display: block;

    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: #6b7a8c;

    margin: 14px 0 8px;
}

.threat-card .threat-section-label:first-of-type {
    margin-top: 0;
}

.threat-block-text {
    margin: 0 0 4px;
}

.threat-stat {
    background: #eef7ff;
    border: 1px solid #b8dfff;
    border-radius: 8px;

    padding: 12px 16px;
    margin-bottom: 4px;
}

.threat-stat p {
    margin: 0;
    font-size: 14px;
}

.threat-stat-source {
    margin-top: 8px !important;

    font-size: 11px;
    color: #6b7a8c;
    line-height: 1.6;
}

.threat-stat-source a {
    color: #005599;
    text-decoration: none;
}

.threat-stat-source a:hover {
    color: #003366;
}

.threat-measures-empty {
    font-style: italic;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .threat-toc ul {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================
   診断結果PDFダウンロード（ブラウザ印刷機能）
========================================================= */

.pdf-download-area {
    text-align: center;
    margin-bottom: 30px;
}

.pdf-download-hint {
    display: inline-block;
    margin-top: 10px;

    font-size: 12px;
    color: #6b7a8c;
}

@media print {

    @page {
        margin: 12mm;
    }

    .no-print {
        display: none !important;
    }

    body::before,
    .container::after {
        display: none !important;
    }

    .container {
        box-shadow: none;
        border-top: none;
        margin: 0;
        max-width: 100%;
        padding: 0;
    }

    .card {
        box-shadow: none;
        padding: 16px;
        margin-bottom: 12px;
    }

    .card li {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .card li.is-top3 {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* 対策名・優先度・コストの見出し部分は分割せず、直後の内容と一緒に次ページへ送る */
    .measure-header {
        break-inside: avoid;
        break-after: avoid-page;
    }

    /* 防げる脅威・選定理由の各行（ピル／リスト項目）は1行の途中で割れないようにする */
    .measure-card details li {
        break-inside: avoid;
    }

    h2, h3 {
        break-after: avoid-page;
    }
}