/* プライバシーポリシーと利用規約の2ページ専用のスタイル。
   このファイルは該当ページからだけ読み込む。
   common.css の後・ページ別CSSの前に読み込むため、
   ページ側からの上書きは従来どおり効く。 */

.pp-hero{background:var(--bg-sub);position:relative;overflow:hidden;padding:32px 16px 28px;border-bottom:1px solid var(--border);}
.pp-hero::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(239,68,48,0.10),rgba(239,68,48,0) 70%);right:-80px;top:-80px;}
.pp-hero .inner{position:relative;max-width:760px;margin:0 auto;}
.pp-hero .eyebrow{font-family:var(--font-en);font-weight:700;font-size:var(--text-xs);letter-spacing:0.22em;color:var(--primary);text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;}
.pp-hero .eyebrow::before{content:"";width:24px;height:2px;background:var(--primary);}
.pp-hero h1{font-size:var(--text-xl);font-weight:900;margin:0 0 8px;line-height:1.3;letter-spacing:-0.01em;}
.pp-hero p{font-size:var(--text-sm);color:var(--text-sub);margin:0;line-height:1.85;}
.pp-wrap{max-width:760px;margin:0 auto;padding:24px 16px 56px;}
.pp-card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:28px 22px 30px;}
.pp-lead{font-size:var(--text-sm);line-height:2;margin:0 0 8px;color:var(--text);}
.pp-sec{border-top:1px solid var(--border);padding-top:24px;margin-top:24px;}
.pp-sec h2{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-base);font-weight:800;margin:0 0 12px;line-height:1.5;letter-spacing:0.01em;}
.pp-sec h2 .n{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-weight:800;font-size:var(--text-xs);margin-top:2px;}
.pp-sec h3{font-size:var(--text-sm);font-weight:700;margin:16px 0 6px;color:var(--text);}
.pp-sec p{font-size:var(--text-sm);line-height:2;margin:0 0 10px;color:var(--text-sub);}
.pp-sec p:last-child{margin-bottom:0;}
.pp-sec ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px;}
.pp-sec ul li{position:relative;padding-left:16px;font-size:var(--text-sm);line-height:1.85;color:var(--text-sub);}
.pp-sec ul li::before{content:"";position:absolute;left:0;top:0.7em;width:6px;height:6px;border-radius:50%;background:var(--primary-soft);border:1.5px solid var(--primary);}
.pp-note{background:var(--bg-sub);border:1px dashed var(--border-strong);border-radius:12px;padding:12px 16px;font-size:var(--text-xs);line-height:1.85;color:var(--text-sub);margin:12px 0 0;}
.pp-sec a{color:var(--primary);font-weight:700;}
.pp-contact{background:var(--bg-sub);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-top:12px;}
.pp-contact .name{font-size:var(--text-base);font-weight:800;margin:0 0 12px;}
.pp-contact dl{margin:0;display:grid;gap:10px;}
.pp-contact .row{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:var(--text-sm);line-height:1.7;}
.pp-contact dt{flex-shrink:0;width:100px;font-weight:700;color:var(--text-sub);font-size:var(--text-xs);}
/* 値には 220px の基準幅を与えている。ラベルと並べて置けない狭さになると
   .row の flex-wrap により値が次の行へ落ち、枠いっぱいを使えるようになる。
   メールアドレスが語の途中で改行されるのを防ぐための指定。 */
.pp-contact dd{margin:0;flex:1 1 220px;min-width:0;color:var(--text);font-weight:600;}
.pp-contact dd a{color:var(--primary);text-decoration:none;font-weight:700;}
.pp-date{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--text-mute);line-height:1.9;}
.pp-back{display:inline-flex;align-items:center;gap:8px;margin-top:24px;color:var(--text-sub);text-decoration:none;font-size:var(--text-sm);font-weight:700;}
.pp-back svg{width:15px;height:15px;}
@media (min-width:760px){
.pp-hero{padding:48px 24px 40px;}
.pp-hero h1{font-size:var(--text-2xl);}
.pp-hero p{font-size:var(--text-base);}
.pp-wrap{padding:40px 24px 72px;}
.pp-card{padding:44px 48px 48px;}
.pp-sec h2{font-size:var(--text-lg);}
.pp-sec p,.pp-sec ul li{font-size:var(--text-base);}
.pp-lead{font-size:var(--text-base);}
}
@media (hover:hover) and (pointer:fine){
.pp-back{transition:color .18s ease;}
.pp-back svg{transition:transform .18s ease;}
.pp-back:hover{color:var(--primary);}
.pp-back:hover svg{transform:translateX(-3px);}
}