@charset 'utf-8';

/* =============================================================
   プライバシーポリシー（/privacy_policy/）
   design : PC 1440px / SP 375px

   - page-privacy_policy.php   .p-privacy
   - 本文は ACF の繰り返しフィールド（inc/acf-privacy.php）

   写真の FV を持たないページなので共通パーツ template-parts/fv.php
   は使わず、薄いグレー地の上に見出しを置くだけの構成にしている。
   下の余白は c-contact 側の padding-bottom が持つので付けない。
   ============================================================= */
.p-privacy {
    background-color: var(--color-light-gray);
}


/* =============================================================
   見出し（パンくず ＋ タイトル）
   ============================================================= */
/* html body に fixed ヘッダーぶんの padding-top が入っているので、
   ここではヘッダー下からの 20px だけを足す */
.p-privacy__head {
    padding-top: calc(20 * var(--u));
}

/* 左位置は FV ページのパンくず（.c-fv__bread）と同じ式 */
.p-privacy__bread {
    padding-inline: max(calc(20 * var(--u)), calc((100% - 1200px) / 2 - 88px));
}

/* 写真の上ではないので、パンくずは濃色になる */
.p-privacy__bread .c-fv__breadList {
    color: var(--color-dark-gray);
}

.p-privacy__bread .c-fv__breadItem a {
    color: var(--color-midium-gray);
}

.p-privacy__bread .c-fv__breadItem a:hover {
    color: var(--color-hamabo-blue);
}

.p-privacy__bread .c-fv__breadItem::after {
    background-color: var(--color-dark-gray);
}

.p-privacy__ttl {
    margin-top: calc(124 * var(--u));
}

.p-privacy__ttl .c-secTtl__en {
    color: var(--color-hamabo-blue);
    letter-spacing: 0.0353em;   /* 3px */
    text-transform: uppercase;
}

.p-privacy__ttl .c-secTtl__ja {
    column-gap: calc(12 * var(--u));
    color: var(--color-dark-gray);
}


/* =============================================================
   本文
   ============================================================= */
/* 本文カラムは 898px の中央寄せ（内容幅 1200 より狭い）。
   .l-inner と同じく max-width に左右余白ぶんを足しておく */
.p-privacy__body {
    max-width: calc(898 * var(--u) + 2 * var(--inner-pad));
    margin-inline: auto;
    padding-inline: var(--inner-pad);
    /* main 直下の要素は 1px 重ねている（common.css の main > *）。ボタンがこの箱の下端ぴったりにあるので、
       そのままだと下の CONTACT がボタンの下の枠線 1px に重なって切れて見える。重なるぶんだけ余白を足す */
    padding-bottom: 1px;
}

.p-privacy__block {
    margin-top: calc(73 * var(--u));
}

.p-privacy__block + .p-privacy__block {
    margin-top: calc(99 * var(--u));
}

/* 大見出し。下に細い罫線、その左端に太い青の線を重ねる */
.p-privacy__block-ttl {
    position: relative;
    padding-bottom: calc(11 * var(--u));
    border-bottom: 1px solid var(--color-light-silver);
    color: var(--color-hamabo-blue);
    font-size: calc(36 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0278em;   /* 1px */
    line-height: calc(66 / 36);
}

.p-privacy__block-ttl::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: calc(-1 * var(--u));
    width: calc(64 * var(--u));
    height: calc(2 * var(--u));
    background-color: var(--color-hamabo-blue);
}

/* 本文の文字組み（リード文・セクション本文・締めの文章で共通） */
.p-privacy__text {
    color: var(--color-dark-gray);
    font-size: calc(16 * var(--u));
    font-weight: 400;
    letter-spacing: 0.0625em;   /* 1px */
    line-height: 2;
}

.p-privacy__text > :first-child {
    margin-top: 0;
}

.p-privacy__text p {
    margin-top: calc(14 * var(--u));
}

.p-privacy__text a {
    color: var(--color-hamabo-blue);
    text-decoration: underline;
}

.p-privacy__text a:hover {
    text-decoration: none;
}

/* 電話番号のリンクは本文と同じ色のまま（common.css の .c-tel）。
   .p-privacy__text a の青が勝ってしまうため、ここで打ち消す */
.p-privacy__text a.c-tel {
    color: inherit;
}

/* PC ではリンクにしない（common.css の .c-tel と同じ扱い）。
   下線は .p-privacy__text a のほうが強いので、ここで打ち消す */
@media screen and (min-width: 769px) {

    .p-privacy__text a.c-tel {
        text-decoration: none;
    }
}

.p-privacy__text strong { font-weight: 700; }

.p-privacy__text ul,
.p-privacy__text ol {
    margin-top: calc(14 * var(--u));
    padding-left: 1.25em;
}

.p-privacy__text ul { list-style: disc; }
.p-privacy__text ol { list-style: decimal; }

.p-privacy__lead {
    margin-top: calc(29 * var(--u));
}

.p-privacy__secs {
    margin-top: calc(41 * var(--u));
}

/* リード文がないブロックでは、罫線からの間隔をリード文と同じにする */
.p-privacy__block-ttl + .p-privacy__secs {
    margin-top: calc(29 * var(--u));
}

.p-privacy__sec + .p-privacy__sec {
    margin-top: calc(32 * var(--u));
}

.p-privacy__sec-ttl {
    color: var(--color-hamabo-blue);
    font-size: calc(18 * var(--u));
    font-weight: 700;
    letter-spacing: 0.0556em;   /* 1px */
    line-height: calc(32.4 / 18);
}

.p-privacy__sec-body {
    margin-top: calc(14 * var(--u));
}

.p-privacy__sec-ttl + .p-privacy__sec-body {
    margin-top: calc(14 * var(--u));
}

.p-privacy__foot {
    margin-top: calc(36 * var(--u));
    /* 日付・社名・代表者名はデザインどおり右寄せ */
    text-align: right;
}

.p-privacy__btn-wrap {
    margin-top: calc(20 * var(--u));
}

.p-privacy__btn {
    width: calc(280 * var(--u));
}

/* CONTACT との間隔。c-contact 既定（PC 158px）ではなく 147px（デザイン実測） */
@media screen and (min-width: 769px) {

    .p-privacy .c-contact {
        padding-top: calc(147 * var(--u));
    }
}


/* =============================================================
   SP
   ============================================================= */
@media screen and (max-width: 768px) {

    /* ---------- 見出し ---------- */
    .p-privacy__head {
        padding-top: calc(15 * var(--u));
    }

    .p-privacy__bread {
        padding-inline: var(--inner-pad);
    }

    /* PRIVACY POLICY は 3px の字送りだと 375px に収まらないため、
       デザインでも SP だけ字送り 0 になっている */
    .p-privacy__ttl .c-secTtl__en {
        letter-spacing: 0;
    }

    .p-privacy__ttl {
        margin-top: calc(53 * var(--u));
    }

    .p-privacy__ttl .c-secTtl__ja {
        font-size: calc(14 * var(--u));
    }

    /* ---------- 本文 ---------- */
    .p-privacy__body {
        max-width: none;
    }

    .p-privacy__block {
        margin-top: calc(50 * var(--u));
    }

    .p-privacy__block-ttl {
        padding-bottom: calc(19 * var(--u));
        font-size: calc(24 * var(--u));
        letter-spacing: 0;
        line-height: calc(42 / 24);
    }

    .p-privacy__text {
        letter-spacing: 0;
    }

    .p-privacy__secs {
        margin-top: calc(40 * var(--u));
    }

    .p-privacy__sec + .p-privacy__sec {
        margin-top: calc(40 * var(--u));
    }

    .p-privacy__sec-ttl {
        letter-spacing: 0;
    }

    /* SP の CONTACT との間隔は c-contact 既定の 42px ではなく 80px */
    .p-privacy .c-contact {
        padding-top: calc(80 * var(--u));
    }
}

/* 英語版 SP：見出しの左にマークが並ぶぶん、36px では「PRIVACY POLICY」が画面からはみ出すので
   1 行に収まる大きさにする（字送りも日本語版 SP と同じ 0）。
   common.css の英語版見出しの指定より詳細度を上げるため、同じ :not() を付けている */
@media screen and (max-width: 768px) {
    html[lang^="en"] .p-privacy__ttl.c-secTtl:not(.p-requirements__ttl):not(.c-fv *) .c-secTtl__en {
        font-size: calc(30 * var(--u));
        letter-spacing: 0;
    }
}