/* ==========================================================================
   セキュリティページ（クラス接頭辞 secpage-。TOP の .security-* と衝突させない）
   Figma「セキュリティ｜TOP共通デザイン」1440 幅。
   セクションは共通で padding 96/120、内側 1200px、見出しとの間は 40px。
   ========================================================================== */

/* TOP ではヘッダーをヒーローに重ねるため absolute にしているが、
   このページは Figma でもヘッダーが通常フロー（y=88 からセクションが始まる） */
header {
    position: static;
}

.secpage-section {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 96px clamp(40px, 8.3333vw, 120px);
    box-sizing: border-box;
}

/* 背景色が付くのは、導入文より下の 4 節（チェックシート・対策項目・運用体制・
   よくあるご質問）。導入文だけ body の白のまま */
.secpage-section--gray::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background-color: #F8F9FA;
    z-index: -1;
}

/* 見出しは行の長さを揃えて、最終行に 1 語だけ残るのを防ぐ */
.secpage-title,
.secpage-card-title,
.secpage-doc-title,
.secpage-ops-title {
    text-wrap: balance;
}

/* TOP と同じく、PC だけ見出しの字間を少し広げる */
@media (min-width: 1241px) {
    .secpage-title,
    .secpage-card-title,
    .secpage-doc-title,
    .secpage-ops-title,
    .secpage-faq-q {
        letter-spacing: 0.03em;
    }
}

/* セクション見出し。h1 と h2 で同じ見た目 */
.secpage-title {
    margin: 0;
    color: #3A5D7F;
    font-weight: bold;
    font-size: 40px;
    line-height: 52px;
}

/* 節の見出し（h2）はページ見出し（h1）より 1 段階小さくする。
   比は TOP と同じく 24〜39px は 1.4 倍 */
h2.secpage-title {
    font-size: 32px;
    line-height: 45px;
}

/* --- ページ見出しと導入文 --- */
.secpage-head-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.secpage-lead {
    margin: 0;
    /* 日本語は 1 行 40 字前後が目安。字間 0.02em ぶんを足して 41em */
    max-width: 41em;
    color: #475467;
    font-size: 16px;
    line-height: 28px;
}

/* グレーの節が 3 つ続くので、96px の上下が二重になって 192px 空いていた。
   地色が同じなら節の間は 1 つぶんでよい。見出しとカードの間が 40px なので、
   その 2 倍の 80px（40 + 40）を節の間に取る */
.secpage-section--intro {
    padding-bottom: 40px;
}

.secpage-section--gray {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* 最後の節だけは、次の CTA セクションとの間を元の幅で取る */
#security-faq {
    padding-bottom: 96px;
}

/* --- セキュリティ対策カード 6 枚 --- */
.secpage-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 40px;
}

.secpage-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-radius: 8px;
    /* Figma の枠は内側 1px。border だと高さが増えて行の高さが揃わない */
    box-shadow: inset 0 0 0 1px #DEE4EB;
}

/* 見出しと図版を横に並べ、図版は右端に固定幅で置く */
.secpage-card-head {
    display: flex;
    align-items: center;
    gap: 24px;
}

.secpage-card-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    color: #3A5D7F;
    font-weight: bold;
    font-size: 24px;
    line-height: 34px;
}

.secpage-card-art {
    display: block;
    flex: 0 0 auto;
    width: 160px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
}

.secpage-card-art img {
    display: block;
    width: 100%;
    height: 100%;
    /* Figma の画像の収め方は FIT。切り抜かずに枠内へ収める */
    object-fit: contain;
}

.secpage-card-desc {
    margin: 0;
    color: #475467;
    font-size: 16px;
    line-height: 28px;
}

/* --- 情報保護と運用体制 --- */
.secpage-ops {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.secpage-ops-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #DEE4EB;
}

.secpage-ops-icon {
    display: block;
    flex: 0 0 auto;
    /* Figma は上揃えだが、本文が 2〜3 行で高さが変わるため上に寄って見える。
       カードの高さに対して上下中央に置く */
    align-self: center;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.secpage-ops-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.secpage-ops-title {
    margin: 0;
    color: #3A5D7F;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
}

.secpage-ops-desc {
    margin: 0;
    color: #475467;
    font-size: 16px;
    line-height: 28px;
}

/* --- よくあるご質問 --- */
.secpage-faq {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.secpage-faq-item {
    padding: 24px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #DEE4EB;
}

.secpage-faq-q,
.secpage-faq-a {
    /* 先頭の Q / A を外に出し、本文はその右で折り返す（ぶら下げ） */
    display: flex;
    gap: 12px;
}

.secpage-faq-q::before,
.secpage-faq-a::before {
    flex: 0 0 24px;
    font-weight: bold;
    font-size: 20px;
}

.secpage-faq-q::before {
    content: "Q";
    line-height: 30px;
}

/* TOP の答えと同じオレンジ */
.secpage-faq-a::before {
    content: "A";
    color: #F79009;
    line-height: 28px;
}

.secpage-faq-q {
    margin: 0;
    color: #3A5D7F;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    /* TOP の課題カードと同じ罫線。質問と回答の切れ目に引く */
    padding-bottom: 16px;
    border-bottom: 1px solid #E4E7EC;
}

.secpage-faq-a {
    margin: 16px 0 0;
    color: #475467;
    font-size: 16px;
    line-height: 28px;
}

/* --- 第三者評価とセキュリティ資料 --- */
.secpage-docs {
    display: flex;
    gap: 28px;
}

.secpage-doc {
    display: flex;
    /* 左に見出しと本文、右にバッジとボタンを積む。
       カードが 1 枚で全幅のため、縦積みだと右側が大きく空く */
    align-items: center;
    gap: 40px;
    flex: 1 1 0;
    min-width: 0;
    padding: 32px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    /* 対策項目・運用体制のカードと同じ地と枠にする */
    box-shadow: inset 0 0 0 1px #DEE4EB;
    border-radius: 8px;
}

.secpage-doc-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
}

/* 右列。バッジは右上、ボタンは右下。幅はボタンに合わせる */
.secpage-doc-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    flex: 0 0 320px;
}

.secpage-doc-label {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    box-sizing: border-box;
    border-radius: 4px;
    /* 塗りはなく枠線のみ。枠線の色はこのページのカードと同じ #DEE4EB で揃える */
    border: 1px solid #DEE4EB;
    color: #667085;
    font-weight: bold;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

/* カード内の見出し。対策項目カードの見出し（.secpage-card-title）と同じ 24/34 */
.secpage-doc-title {
    margin: 0;
    color: #3A5D7F;
    font-weight: bold;
    font-size: 24px;
    line-height: 34px;
}

.secpage-doc-desc {
    margin: 0;
    color: #475467;
    font-size: 16px;
    line-height: 28px;
}

/* Figma: 320x48。幅はカードに収まる範囲で詰める */
.secpage-doc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(320px, 100%);
    height: 48px;
    padding: 12px 24px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
}

.secpage-doc-cta-icon {
    flex: 0 0 auto;
    /* 日本語の字面は line-box の中心より約 1px 下にある */
    position: relative;
    top: 1px;
}

/* ==========================================================================
   タブレット・スマホ
   PC ビュー確定後に実機で詰める。現状は縦積みにするまで
   ========================================================================== */
@media (max-width: 1023px) {
    .secpage-section {
        padding: 64px clamp(40px, 8.3333vw, 120px);
        gap: 32px;
    }

    .secpage-section--intro {
        padding-bottom: 32px;
    }

    .secpage-section--gray {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    #security-faq {
        padding-bottom: 64px;
    }

    .secpage-title {
        font-size: 30px;
        line-height: 42px;
    }

    h2.secpage-title {
        font-size: 26px;
        line-height: 36px;
    }

    .secpage-cards {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }

    .secpage-docs {
        flex-direction: column;
    }

    /* 左列が 300px 台まで痩せるので、この幅から縦積みにする */
    .secpage-doc {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .secpage-doc-side {
        flex: 0 0 auto;
        align-items: stretch;
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .secpage-section {
        padding: 48px 18px;
        gap: 24px;
    }

    .secpage-section--intro {
        padding-bottom: 24px;
    }

    .secpage-section--gray {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    #security-faq {
        padding-bottom: 48px;
    }

    .secpage-title {
        font-size: 24px;
        line-height: 34px;
    }

    h2.secpage-title {
        font-size: 20px;
        line-height: 30px;
    }

    .secpage-card {
        padding: 24px;
    }

    .secpage-card-head {
        gap: 16px;
    }

    .secpage-card-title,
    .secpage-doc-title {
        font-size: 20px;
        line-height: 30px;
    }

    /* カードの本文は TOP と同じ 14/24 に落とす。
       導入文（.secpage-lead）は 16px のまま残して、段差を付ける */
    .secpage-card-desc,
    .secpage-ops-desc,
    .secpage-faq-a {
        font-size: 14px;
        line-height: 24px;
    }

    .secpage-card-art {
        width: 120px;
        height: 75px;
    }

    .secpage-ops-item {
        gap: 16px;
        padding: 20px;
    }

    .secpage-ops-icon {
        width: 48px;
        height: 48px;
    }

    .secpage-ops-title,
    .secpage-faq-q {
        font-size: 18px;
        line-height: 27px;
    }

    .secpage-faq-q,
    .secpage-faq-a {
        gap: 10px;
    }

    .secpage-faq-q {
        padding-bottom: 12px;
    }

    .secpage-faq-a {
        margin-top: 12px;
    }

    .secpage-faq-q::before,
    .secpage-faq-a::before {
        flex: 0 0 20px;
        font-size: 18px;
    }

    .secpage-faq-q::before {
        line-height: 27px;
    }

    .secpage-faq-a::before {
        line-height: 24px;
    }

    .secpage-faq-item {
        padding: 20px;
    }

    .secpage-doc {
        padding: 24px;
    }

    .secpage-doc-cta {
        width: 100%;
    }
}