/* 個人情報保護方針 専用CSS
   Ctrl+Fで「01 メイン画像」「03 番号付き本文」などを検索。
   ヘッダー・フッター・本文の基本字体はcommon.cssを再利用。
   padding＝内側余白、margin＝外側余白、gap＝項目間隔。 */

/* #region 00 共通設定・本文幅 */
.pp-page { color: #102235; background: #fff; }
.pp-container { width: min(1500px, calc(100% - 80px)); margin: 0 auto; }
.pp-page :focus-visible { outline: 3px solid #00a6a6; outline-offset: 4px; }
.pp-skip { position: absolute; top: -100px; left: 16px; z-index: 200; padding: 12px 20px; background: #fff; }
.pp-skip:focus { top: 10px; }
/* #endregion */

/* #region 01 メイン画像・タイトル・上下余白 */
.pp-hero {
    color: #fff;
    background: linear-gradient(90deg, #001827e6 0%, #00182799 36%, #00182700 74%), url("../images/Privacy Policy/未来型サイバーセキュリティシールド.png.webp") center / cover no-repeat;
}
/* 上部バナーの高さはmin-height、上下余白はpaddingで調整 */
.pp-hero-inner { position: relative; min-height: 310px; padding: 26px 0 34px; }
.pp-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; letter-spacing: .08em; margin-bottom: 18px; }
.pp-hero h1 { font: 500 clamp(34px, 4.5vw, 64px)/1.4 "Yu Mincho", "YuMincho", serif; letter-spacing: .06em; margin-bottom: 6px; }
.pp-english { font: 14px/1.8 Georgia, serif; letter-spacing: .18em; margin-bottom: 20px; }
.pp-hero-copy { font-size: 16px; line-height: 1.8; letter-spacing: .05em; }
.pp-side { position: absolute; right: 0; bottom: 26px; font: 600 11px/1.7 Georgia, serif; letter-spacing: .14em; text-shadow: 0 1px 5px #001827; }
/* #endregion */

/* #region 02 本文全体・導入文 */
.pp-content { padding: 26px 0 24px; font-size: 14px; line-height: 1.85; letter-spacing: .025em; }
.pp-intro { margin-bottom: 26px; }
/* #endregion */

/* #region 03 番号付き本文・見出し・各項目の間隔 */
.pp-section { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 16px; margin-bottom: 22px; }
.pp-number { align-self: start; color: #82afe0; font: 500 40px/1.1 Georgia, serif; }
.pp-number::after { content: ""; display: block; width: 46px; height: 1px; background: #bbd4ef; margin-top: 8px; }
.pp-section h2 { font: 600 clamp(21px, 2.2vw, 29px)/1.5 "Yu Mincho", "YuMincho", serif; border-bottom: 1px solid #b1cff1; padding-bottom: 3px; margin-bottom: 7px; }
.pp-section-body > p { margin-bottom: 7px; }
/* #endregion */

/* #region 04 青い囲み・利用目的と例外のリスト */
.pp-list { list-style: none; counter-reset: policy-item; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 10px 32px; background: #f0f5fa; border-radius: 3px; padding: 13px 20px; margin: 9px 0; }
.pp-list li { counter-increment: policy-item; position: relative; break-inside: avoid; min-height: 26px; padding-left: 40px; margin: 0; font-size: 13px; line-height: 1.75; }
.pp-list li::before { content: counter(policy-item); position: absolute; display: flex; align-items: center; justify-content: center; left: 0; top: 0; width: 26px; height: 26px; background: #347fbb; color: #fff; border-radius: 50%; text-align: center; font: 14px/1 Georgia, serif; letter-spacing: 0; }
/* #endregion */

/* #region 05 お問い合わせ窓口・制定日 */
.pp-office { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 24px; background: #f0f5fa; padding: 20px 24px; border-radius: 3px; margin-top: 8px; font-size: 13px; overflow-wrap: anywhere; }
.pp-office-name { font-weight: 600; border-right: 1px solid #b9cddd; padding-right: 24px; }
.pp-office a { display: inline-block; color: #064776; text-decoration: underline; text-underline-offset: 4px; margin-top: 4px; }
.pp-signature { text-align: right; font-size: 12px; line-height: 1.8; }
/* #endregion */

/* #region 06 タブレット・スマートフォン */
@media (max-width: 1000px) {
    .pp-side { display: none; }
    .pp-office { grid-template-columns: 1fr; gap: 12px; }
    .pp-office-name { border-right: 0; border-bottom: 1px solid #b9cddd; padding: 0 0 12px; }
}
@media (max-width: 767px) {
    .pp-container { width: calc(100% - 40px); }
    .pp-hero { background-image: linear-gradient(90deg, #001827ed, #00182788), url("../images/Privacy Policy/未来型サイバーセキュリティシールド.png.webp"); background-position: 65% center; }
    .pp-hero-inner { min-height: 320px; padding: 22px 0 34px; }
    .pp-hero h1 { font-size: clamp(27px, 6.5vw, 44px); letter-spacing: .02em; }
    .pp-hero-copy { font-size: 14px; }
    .pp-content { font-size: 14px; padding-top: 24px; }
    .pp-section { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; margin-bottom: 26px; }
    .pp-number { font-size: 29px; }
    .pp-number::after { width: 32px; }
    .pp-section h2 { font-size: 21px; }
    .pp-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 12px; padding: 14px 12px; }
    .pp-list li { min-height: 24px; padding-left: 34px; margin: 0; }
    .pp-list li::before { width: 24px; height: 24px; }
    .pp-office { padding: 16px; }
}
/* #endregion */