/* privacy-policy.css */

.privacy-policy-page {
    max-width: 976px;
    width: calc(100% - 40px);
    margin: 0 auto;
    /* 上：ヘッダー実高さ(67px)+54px */
    padding: 121px 0 120px;
}

.privacy-policy__title {
    margin: 0 0 40px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #17BAE5;
    color: #000;
    font-family: var(--font-base);
    font-size: 28px;
    font-weight: 500;
    line-height: 42px;
    text-align: left;
}

.privacy-policy__content {
    color: #333;
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 28px;
}

.privacy-policy__content p {
    margin: 0 0 8px;
}

.privacy-policy__content h2 {
    margin: 36px 0 12px;
    color: #17bae5;
    font-family: var(--font-base);
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
}

.privacy-policy__content a {
    color: #008cd5;
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.privacy-policy__content a:hover {
    text-decoration: none;
    opacity: 0.7;
}

.privacy-policy__contact {
    margin-top: 20px;
}

/* TELの直前の「（仮称）協働プレイス」だけ、.privacy-policy__contactのmargin-topと
   同じ分だけ上に余白を確保する */
.privacy-policy__content .privacy-policy__contact-name {
    margin-top: 20px;
}

/* SPの時だけ改行させたい箇所（それ以外の幅では改行しない）。displayをnoneにすると
   <br>そのものが無効になるので、PC/タブレットではdisplay:noneにしておく */
.privacy-policy__break--mobile {
    display: none;
}

/* ・や（1）などのリスト、TEL/住所のまとまりは、手動のスペースではなく
   display:tableで「ラベル＋本文」に分けて折り返し位置を揃える
   （text-indentのマイナス値を使うぶら下げインデントはSafariで折り返し幅が
   ズレる既知の癖があるため使わない。詳細はaccess__info-label/valueと同じ考え方） */
.privacy-policy__list {
    display: table;
    width: 100%;
}

.privacy-policy__list-label {
    display: table-cell;
    white-space: nowrap;
    padding-right: 0;
}

.privacy-policy__list-value {
    display: table-cell;
    width: 100%;
}

/* TEL・住所は文字数が違うので、ラベル幅を揃えて本文の開始位置を合わせる。
   「※」の行は対象外にしたいので、コンテナ全体ではなく専用の修飾クラスに絞る */
.privacy-policy__list--fixed-label .privacy-policy__list-label {
    width: 3em;
    padding-right: 0.5em;
}

.privacy-policy__content .privacy-policy__date {
    margin-top: 40px;
}

/* 782px〜1279px：PC版(1366px基準)のサイズ感をvwでそのまま縮小 */
@media (max-width: 1279px) {
    .privacy-policy-page {
        width: calc(100% - 2.928vw);
        /* 上：ヘッダー実高さ(可変。.site-header__topのpadding0.878vw×2+ロゴ3.075vw+枠線1px)+54px(3.953vw) */
        padding: calc(8.784vw + 1px) 0 8.784vw;
    }

    .privacy-policy__title {
        margin-bottom: 2.928vw;
        padding-bottom: 0.586vw;
        font-size: 2.05vw;
        line-height: 3.075vw;
    }

    .privacy-policy__content {
        font-size: 1.171vw;
        line-height: 2.05vw;
    }

    .privacy-policy__content p {
        margin-bottom: 0.586vw;
    }

    .privacy-policy__content h2 {
        margin: 2.636vw 0 0.879vw;
        font-size: 1.171vw;
        line-height: 2.05vw;
    }

    .privacy-policy__contact {
        margin-top: 1.464vw;
    }

    .privacy-policy__content .privacy-policy__contact-name {
        margin-top: 1.464vw;
    }

    .privacy-policy__content .privacy-policy__date {
        margin-top: 2.928vw;
    }
}

/* 375px(Figmaスマホ実測値)基準：782pxまでvwで滑らかに拡大縮小する。SP専用のFigmaフレーム実測値 */
@media (max-width: 782px) {
    .privacy-policy-page {
        box-sizing: border-box;
        width: 100%;
        /* 上：ヘッダー実高さ(51px)+44px(Figma実測)=95px */
        padding: 25.333vw 4.267vw 20vw;
    }

    .privacy-policy__title {
        /* タイトル下(枠線まで)11px、枠線から本文まで28px */
        margin-bottom: 7.467vw;
        padding-bottom: 2.933vw;
        font-size: 6.4vw;
        line-height: 9.6vw;
    }

    .privacy-policy__content {
        font-size: 4.267vw;
        line-height: 8vw;
    }

    .privacy-policy__content p {
        margin-bottom: 2.133vw;
    }

    .privacy-policy__content h2 {
        margin: 8vw 0 3.2vw;
        font-size: 4.267vw;
        line-height: 7.467vw;
    }

    .privacy-policy__contact {
        margin-top: 5.333vw;
    }

    .privacy-policy__content .privacy-policy__contact-name {
        margin-top: 5.333vw;
    }

    .privacy-policy__content .privacy-policy__date {
        margin-top: 8vw;
    }

    /* SPの時だけこの改行を有効にする */
    .privacy-policy__break--mobile {
        display: inline;
    }
}

/* 600px以下：header.css側でヘッダーがposition:stickyに切り替わり、通常フロー上の
   高さ(51px)を持つようになるため、上のpaddingからその分を差し引き隙間(44px)だけ残す */
@media (max-width: 600px) {
    .privacy-policy-page {
        padding-top: 11.733vw;
    }
}