:root {
--pp-shell-bg: #f4f7fb;
--pp-shell-surface: #ffffff;
--pp-shell-surface-soft: #f8fafc;
--pp-shell-text: #1f2937;
--pp-shell-muted: #526075;
--pp-shell-border: #dbe3ee;
--pp-shell-border-strong: #c9d7e4;
--pp-shell-brand: #164e63;
--pp-shell-brand-strong: #0e3746;
--pp-shell-link: #0b57d0;
--pp-shell-action: #1f7a35;
--pp-shell-warning: #b4232c;
--pp-shell-focus: #0b57d0;
--pp-shell-radius-sm: 10px;
--pp-shell-radius-md: 14px;
--pp-shell-radius-lg: 18px;
--pp-shell-shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.035);
--pp-shell-shadow-md: 0 8px 26px rgba(15, 23, 42, 0.05);
--pp-shell-content: 1040px;
--pp-shell-reading: 820px;
}
* {
box-sizing: border-box;
}
html {
background: var(--pp-shell-bg);
scroll-padding-top: 84px;
}
body {
margin: 0;
padding: 0;
min-width: 0;
overflow-x: clip;
background: var(--pp-shell-bg);
color: var(--pp-shell-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
line-height: 1.7;
text-align: left;
}
a {
color: var(--pp-shell-link);
text-underline-offset: 0.16em;
}
.container p a,
.container li a,
body.blog-index-compact .breadcrumb a {
text-decoration: underline;
text-underline-offset: 0.16em;
}
body.blog-index-compact .breadcrumb a {
opacity: 1;
color: var(--pp-shell-link);
}
a:hover {
text-decoration-thickness: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--pp-shell-focus);
outline-offset: 3px;
border-radius: 5px;
}
button,
input,
select,
textarea {
font: inherit;
}
.site-header,
body > header,
.blog-header.glass-panel {
border-bottom: 1px solid var(--pp-shell-border);
background: rgba(255, 255, 255, 0.96);
color: var(--pp-shell-text);
box-shadow: none;
backdrop-filter: blur(12px);
}
.site-header__inner,
.header-inner {
width: min(var(--pp-shell-content), calc(100% - 32px));
min-height: 64px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.brand,
.site-logo,
.blog-header .brand {
color: var(--pp-shell-text);
font-weight: 800;
text-decoration: none;
}
.site-nav,
.header-inner nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px 16px;
}
.site-nav a,
.header-inner nav a {
min-height: 44px;
display: inline-flex;
align-items: center;
color: #475569;
font-size: 0.92rem;
font-weight: 650;
text-decoration: none;
}
.site-nav a:hover,
.header-inner nav a:hover,
.site-nav a:focus-visible,
.header-inner nav a:focus-visible {
color: var(--pp-shell-brand);
}
.legal-page-nav {
margin: 0 0 24px !important;
padding: 12px 14px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px 16px !important;
flex-wrap: wrap !important;
border: 1px solid var(--pp-shell-border) !important;
border-radius: var(--pp-shell-radius-sm) !important;
background: var(--pp-shell-surface-soft) !important;
font-size: 0.9rem !important;
}
.legal-page-nav a {
min-height: 40px;
display: inline-flex;
align-items: center;
color: var(--pp-shell-brand) !important;
font-weight: 750 !important;
text-decoration: none !important;
}
body > .container {
width: min(860px, calc(100% - 32px));
max-width: none;
margin: 28px auto 48px;
padding: clamp(22px, 4vw, 38px);
border: 1px solid var(--pp-shell-border);
border-radius: var(--pp-shell-radius-lg);
background: var(--pp-shell-surface);
box-shadow: var(--pp-shell-shadow-md);
}
body > .container > h1 {
margin: 0 0 22px;
padding: 0 0 16px;
border-bottom: 1px solid var(--pp-shell-border);
color: var(--pp-shell-text);
font-size: clamp(1.65rem, 4.8vw, 2.2rem);
line-height: 1.3;
text-align: left;
}
body > .container h2 {
margin-top: 2.1rem;
margin-bottom: 0.75rem;
padding-left: 0.7rem;
border-left: 4px solid var(--pp-shell-brand);
color: var(--pp-shell-text);
font-size: 1.22rem;
line-height: 1.45;
}
body > .container p,
body > .container li {
overflow-wrap: anywhere;
}
body > .container button {
min-height: 44px;
padding: 0.62rem 0.9rem;
border: 1px solid var(--pp-shell-border-strong);
border-radius: var(--pp-shell-radius-sm);
background: var(--pp-shell-surface-soft);
color: var(--pp-shell-text);
font-weight: 700;
cursor: pointer;
}
body > .container button:hover {
border-color: var(--pp-shell-link);
background: #eef4ff;
}
body > header {
position: sticky;
top: 0;
z-index: 20;
}
body > header + main {
width: min(var(--pp-shell-reading), calc(100% - 32px));
margin: 28px auto 56px;
}
body > header + main .hero {
padding: clamp(24px, 5vw, 40px);
border: 1px solid var(--pp-shell-border);
border-radius: var(--pp-shell-radius-lg);
background: var(--pp-shell-surface);
box-shadow: var(--pp-shell-shadow-md);
}
body > header + main .hero .eyebrow {
margin: 0 0 4px;
color: var(--pp-shell-brand);
font-size: 0.86rem;
font-weight: 800;
}
body > header + main .hero h1 {
margin: 0.3rem 0 0.7rem;
color: var(--pp-shell-text);
font-size: clamp(1.8rem, 5vw, 2.65rem);
line-height: 1.25;
}
body > header + main .hero .lead {
margin: 0;
color: var(--pp-shell-muted);
}
body > header + main section {
margin-top: 18px;
padding: clamp(20px, 4vw, 28px);
border: 1px solid var(--pp-shell-border);
border-radius: var(--pp-shell-radius-md);
background: var(--pp-shell-surface);
box-shadow: var(--pp-shell-shadow-sm);
}
body > header + main section h2 {
margin: 0 0 0.7rem;
color: var(--pp-shell-text);
font-size: 1.22rem;
line-height: 1.45;
}
body > header + main .links {
gap: 10px;
}
body > header + main .button {
min-height: 44px;
padding: 0.62rem 0.95rem;
border: 1px solid var(--pp-shell-link);
border-radius: 999px;
background: var(--pp-shell-surface);
color: var(--pp-shell-link);
font-weight: 750;
text-decoration: none;
}
body > header + main .button:hover {
background: #eef4ff;
}
main.container {
width: min(var(--pp-shell-content), calc(100% - 32px));
margin: 0 auto;
padding: 30px 0 56px;
}
main.container .hero,
main.container .group {
background: var(--pp-shell-surface);
border-color: var(--pp-shell-border);
}
main.container .hero {
border-radius: var(--pp-shell-radius-lg);
box-shadow: var(--pp-shell-shadow-md);
}
main.container .group {
border-radius: var(--pp-shell-radius-md);
box-shadow: var(--pp-shell-shadow-sm);
}
main.container .group h2,
main.container .hero .eyebrow {
color: var(--pp-shell-brand);
}
main.container .group-lead,
main.container .technical-note {
color: var(--pp-shell-muted);
}
main.container .region-grid a {
border-color: var(--pp-shell-border-strong);
border-radius: var(--pp-shell-radius-sm);
background: #eef7f9;
color: var(--pp-shell-brand-strong);
}
.calculator-wrapper {
width: min(860px, calc(100% - 32px));
max-width: none;
margin: 28px auto 56px;
text-align: left;
}
.calculator-wrapper > .top-bar {
margin: 0 0 18px;
padding: 12px 14px;
border: 1px solid var(--pp-shell-border);
border-radius: var(--pp-shell-radius-sm);
background: var(--pp-shell-surface);
box-shadow: none;
}
.calculator-wrapper .header-links {
gap: 10px 16px !important;
}
.calculator-wrapper .header-links a {
min-height: 40px;
display: inline-flex;
align-items: center;
color: var(--pp-shell-link) !important;
font-weight: 650;
text-decoration: none !important;
}
.calculator-wrapper > h1 {
margin: 0 0 18px;
padding: 26px clamp(22px, 4vw, 34px);
border: 1px solid var(--pp-shell-border);
border-radius: var(--pp-shell-radius-lg);
background: var(--pp-shell-surface);
color: var(--pp-shell-text);
box-shadow: var(--pp-shell-shadow-md);
font-size: clamp(1.65rem, 4.8vw, 2.2rem);
line-height: 1.3;
text-align: left;
}
.calculator-wrapper > .section {
margin: 18px 0 0;
padding: clamp(20px, 4vw, 28px);
border: 1px solid var(--pp-shell-border);
border-radius: var(--pp-shell-radius-md);
background: var(--pp-shell-surface);
box-shadow: var(--pp-shell-shadow-sm);
}
.calculator-wrapper > .section h2 {
margin-top: 0;
color: var(--pp-shell-text);
line-height: 1.45;
}
.calculator-wrapper #qa-section dt {
color: var(--pp-shell-link) !important;
}
.calculator-wrapper #qa-section dd,
.calculator-wrapper #qa-section p {
color: #475569 !important;
}
.calculator-wrapper .btn-back-home {
min-height: 44px;
padding: 0.65rem 1rem;
border: 1px solid var(--pp-shell-link);
border-radius: 999px;
background: var(--pp-shell-surface);
color: var(--pp-shell-link) !important;
box-shadow: none;
font-weight: 750;
}
.calculator-wrapper .btn-back-home:hover,
.calculator-wrapper .btn-back-home:focus-visible {
background: #eef4ff;
color: var(--pp-shell-brand) !important;
}
body.blog-index-compact {
background: var(--pp-shell-bg);
color: var(--pp-shell-text);
}
body.blog-index-compact .blog-header.glass-panel {
position: sticky;
top: 0;
z-index: 40;
}
body.blog-index-compact main {
width: min(1180px, calc(100% - 32px));
margin-left: auto;
margin-right: auto;
}
body.blog-index-compact .hero-section {
border: 1px solid var(--pp-shell-border);
border-radius: var(--pp-shell-radius-lg);
background: var(--pp-shell-surface);
box-shadow: var(--pp-shell-shadow-md);
}
body.blog-index-compact .breadcrumb,
body.blog-index-compact .hero-text,
body.blog-index-compact .filter-scroll-hint {
color: var(--pp-shell-muted);
}
body.blog-index-compact .search-container input,
body.blog-index-compact .game-filter-container select,
body.blog-index-compact .sort-btn {
min-height: 44px;
border-color: var(--pp-shell-border-strong);
border-radius: var(--pp-shell-radius-sm);
}
body.blog-index-compact .sidebar {
border-left: 1px solid var(--pp-shell-border);
}
.page-footer,
body > footer,
.site-footer {
margin-top: 28px;
padding: 26px 16px;
border-top: 1px solid var(--pp-shell-border);
background: transparent;
color: var(--pp-shell-muted);
text-align: center;
font-size: 0.88rem;
}
.page-footer a,
body > footer a,
.site-footer a {
color: var(--pp-shell-link);
}
.site-footer-trademark {
width: min(800px, 100%);
margin: 12px auto 0;
color: var(--pp-shell-muted);
font-size: 0.78rem;
line-height: 1.6;
}
img,
svg,
video,
canvas,
iframe,
table {
max-width: 100%;
}
pre,
code,
.long-url {
overflow-wrap: anywhere;
}
@media (max-width: 760px) {
.site-header__inner,
.header-inner {
min-height: auto;
padding: 10px 0;
align-items: flex-start;
flex-direction: column;
}
.site-nav,
.header-inner nav {
width: 100%;
justify-content: flex-start;
gap: 4px 12px;
}
body > .container,
body > header + main,
.calculator-wrapper,
main.container,
body.blog-index-compact main {
width: min(100% - 24px, var(--pp-shell-content));
}
body > .container {
margin-top: 16px;
padding: 20px;
border-radius: var(--pp-shell-radius-md);
}
body > header + main,
.calculator-wrapper {
margin-top: 16px;
}
body > header + main section,
.calculator-wrapper > .section {
padding: 20px;
}
.legal-page-nav,
.calculator-wrapper .header-links {
align-items: flex-start !important;
}
}
@media (max-width: 420px) {
.site-header__inner,
.header-inner,
body > .container,
body > header + main,
.calculator-wrapper,
main.container,
body.blog-index-compact main {
width: min(100% - 20px, var(--pp-shell-content));
}
.site-nav a,
.header-inner nav a,
.legal-page-nav a,
.calculator-wrapper .header-links a {
min-height: 42px;
}
body > .container,
body > header + main .hero,
body > header + main section,
.calculator-wrapper > h1,
.calculator-wrapper > .section {
padding-left: 16px;
padding-right: 16px;
}
body.blog-index-compact .blog-header .brand {
max-width: calc(100vw - 120px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
.fixed-page-quicklinks { display:flex; flex-wrap:wrap; gap:8px 12px; margin:14px 0 22px; }
.fixed-page-quicklinks a { display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; border:1px solid var(--pp-shell-border,#d7e3df); border-radius:8px; color:var(--pp-shell-link,#176773); background:var(--pp-shell-surface,#fff); font-size:14px; line-height:1.5; text-decoration:none; }
.fixed-page-quicklinks a:hover { background:var(--pp-shell-surface-soft,#edf5f2); }
.info-page h1 { font-size:clamp(24px,5vw,32px); line-height:1.5; }
@media(max-width:760px) { .info-page .calculator-wrapper { padding:18px 14px; } .info-page #update-section { margin-top:12px; } }