/* 安全な土台 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: clip;
}

/* 一時的な保険。根本原因は後述の特定で潰す */
img,
video,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    table-layout: fixed;
}

pre,
code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* フルブリード背景が必要なときの安全レシピ（layoutには%を使う） */
.section--bleed {
    width: 100dvw;
    margin-inline: calc(50% - 50dvw);
}

.page-header {
    margin: 3rem 5rem;
}

.privacy-section {
    margin: 3rem 5rem;
}



/* 全ページ共通でリンク色を統一する */
a:link,
a:visited {
    color: #ffffff;
    font-weight: 600;
    /* 好きな色に変更してください */
    text-decoration: none;
}

a:hover,
a:focus {
    color: #ffffff;
    /* hover時の色 */
    text-decoration: underline;
}

/* Tablet */
@media (max-width: 1024px) {

    .page-header,
    .privacy-section {
        margin: 2.5rem 2rem;
        /* 横に十分な余白を確保 */
    }

    /* 読みやすさ向上（任意） */
    .privacy-section .content-inner {
        padding-inline: 1rem;
    }

    .privacy-section .policy-item p,
    .privacy-section .policy-item li {
        line-height: 1.9;
    }
}

/* Mobile L */
@media (max-width: 768px) {

    .page-header,
    .privacy-section {
        margin: 2rem 1.5rem;
        /* スマホでも左右にしっかり余白 */
    }

    .privacy-section .content-inner {
        padding-inline: 1rem;
    }

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

/* Mobile M */
@media (max-width: 640px) {

    .page-header,
    .privacy-section {
        margin: 1.75rem 1.25rem;
        /* 端末幅が狭い機種向けに微調整 */
    }
}

/* Mobile S */
@media (max-width: 480px) {

    .page-header,
    .privacy-section {
        margin: 1.5rem 1rem;
        /* 最小端末でも本文が窮屈にならない余白 */
    }
}

/* Ultra-narrow (一部の小型端末) */
@media (max-width: 360px) {

    .page-header,
    .privacy-section {
        margin: 1.25rem 0.75rem;
    }
}