@import url("/fonts/portfolio/fonts.css");

/* 公開画面だけに適用し、管理画面のテーマ設定を継承しない。 */
.public-site,
.pf {
  --paper: #fffffe;
  --paper-raised: #d8eefe;
  --ink: #094067;
  --graphite: #5f6c7b;
  --rule: #90b4ce;
  --ember: #3da9fc;
  --site-body: "Portfolio Inter", "Portfolio Noto Sans JP", sans-serif;
  --site-display: var(--site-body);
  --site-mono: var(--site-body);
  --site-gutter: 48px;
  --site-width: 1440px;
  --site-display-size: 3rem;
  --site-body-size: 1.75rem;
  --site-label-size: 1.0625rem;
  --color-background: var(--paper);
  --color-background-surface: var(--paper-raised);
  --color-surface: var(--paper);
  --color-surface-raised: var(--paper);
  --color-surface-subtle: var(--paper-raised);
  --color-surface-hover: var(--paper-raised);
  --color-ink: var(--ink);
  --color-ink-rgb: 9 64 103;
  --color-ink-muted: var(--graphite);
  --color-ink-muted-rgb: 95 108 123;
  --color-border: var(--rule);
  --color-primary: var(--ink);
  --color-primary-rgb: 9 64 103;
  --color-primary-panel: var(--paper-raised);
  --color-primary-light: var(--ink);
  --color-primary-lighter: var(--ink);
  --color-on-primary: var(--paper);
  --color-accent: var(--ember);
  --color-accent-rgb: 61 169 252;
  background: var(--paper);
  color: var(--graphite);
  color-scheme: light;
  font: var(--site-body-size)/1.8 var(--site-body);
  min-height: 100dvh;
  margin: 0;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
html:has(.public-site), html:has(body.pf) { background: #fffffe; }
:is(.public-site, .pf) *,
:is(.public-site, .pf) *::before,
:is(.public-site, .pf) *::after { box-sizing: border-box; }
:is(.public-site, .pf) ::selection { background: var(--ink); color: var(--paper); }
:is(.public-site, .pf) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}
:is(.public-site, .pf) a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
:is(.public-site, .pf) a:hover { text-decoration-thickness: 2px; }
:is(.public-site, .pf) :is(h1, h2, h3, h4) {
  color: var(--ink);
  font-family: var(--site-body);
  font-weight: 650;
  text-wrap: pretty;
  line-height: 1.4;
}
:is(.public-site, .pf) h1 { font-size: var(--site-display-size); }
:is(.public-site, .pf) h2 { font-size: var(--site-body-size); }
:is(.public-site, .pf) :is(h3, h4, small, button, input, select, textarea) { font-size: var(--site-label-size); }
:is(.public-site, .pf) img { max-width: 100%; height: auto; }
:is(.public-site, .pf) :is(button, input, select, textarea) { font-family: inherit; }
:is(.public-site, .pf) button { cursor: pointer; }
:is(.public-site, .pf) button:disabled { cursor: not-allowed; }
.site-skip-link {
  position: absolute;
  top: 8px;
  left: var(--site-gutter);
  transform: translateY(-200%);
  padding: 16px;
  background: var(--paper);
  font-size: var(--site-label-size);
  /* ヘッダーより前に表示するキーボード操作用の層。 */
  z-index: 1;
}
.site-skip-link:focus { transform: none; }
.site-header, .pf-header {
  width: min(100%, var(--site-width));
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  background: var(--paper);
}
.site-nav {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px 64px;
  padding-block: 20px;
}
:is(.public-site, .pf) :is(.site-brand, .pf-brand) {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  color: var(--ink);
  font-size: var(--site-label-size);
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
}
.site-brand img, .pf-brand img { flex: 0 0 30px; width: 30px; height: auto; }
.site-nav nav { display: flex; align-items: center; flex-wrap: wrap; gap: 24px 40px; font-size: var(--site-label-size); }
.site-nav nav a { padding-block: 20px; }
.site-content { min-height: 55vh; }
.site-content:focus { outline: none; }
.site-footer, .pf-footer {
  width: min(100%, var(--site-width));
  margin: 192px auto 0;
  padding: 80px var(--site-gutter) 48px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--site-label-size);
}
.site-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 96px; }
.site-footer p { margin-top: 0; }
.site-footer .site-brand { margin-bottom: 0; }
.site-footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer-copyright { display: block; margin-top: 6px; font-size: var(--site-label-size); }
.site-footer-description { max-width: 28em; margin: 48px 0 0; }
.site-footer-label { font-weight: 600; }
:is(.site-footer, .pf-footer) :is(a, p, .site-brand, .pf-brand) { color: var(--paper); }
:is(.site-footer, .pf-footer) a:focus-visible { outline-color: var(--paper); }
.site-colophon { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 48px; }
.site-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.site-page { width: min(100%, var(--site-width)); margin-inline: auto; padding: 128px var(--site-gutter) 32px; }
.site-page-narrow { max-width: 1024px; }
.site-page > a, .public-site .legal-back { font-size: var(--site-label-size); }
.public-site .legal-back { display: inline-block; margin-bottom: 32px; }
.public-site .page-heading { margin-bottom: 112px; }
.public-site .page-heading h1 { margin: 0 0 48px; font-size: var(--site-display-size); letter-spacing: -.03em; }
.public-site .page-heading > p { margin: 0 0 48px; }
.public-site .page-heading > p:first-child { font-size: var(--site-label-size); color: var(--ink); }
.public-site .site-prose { color: var(--graphite); font-size: var(--site-body-size); line-height: 1.8; }
.public-site .site-prose h2 { margin: 128px 0 48px; scroll-margin-top: 64px; }
.public-site .site-prose :is(h3, h4) { margin: 64px 0 32px; scroll-margin-top: 64px; }
.public-site .site-prose :is(p, ul, ol) { line-height: inherit; margin: 0 0 48px; }
.public-site .site-prose :is(ul, ol) { padding-left: 44px; }
.public-site .site-prose li + li { margin-top: 16px; }
/* 文書の区切りは罫線を使わず、前後の余白で表す。 */
:is(.public-site, .pf) hr { height: 0; border: 0; margin-block: 64px; }
.public-site .site-prose blockquote { margin: 64px 0; padding: 48px; }
.public-site .site-prose blockquote p:last-child { margin-bottom: 0; }
.public-site .legal-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 48px; }
.public-site .legal-list li { margin: 0; min-width: 0; }
.public-site .legal-list a { display: block; padding-block: 24px; font-size: var(--site-body-size); }
.public-site .legal-document > :is(nav, header) { margin-bottom: 64px; }
.public-site .legal-document nav { font-size: var(--site-label-size); }
.public-site .legal-document h1 { margin: 0 0 48px; font-size: var(--site-display-size); }
.public-site .legal-document :is(.subtitle, .metadata, .last-updated) { font-size: var(--site-label-size); }
.public-site .legal-document > .subtitle { margin: 0 0 64px; }
.public-site .language-nav { display: flex; flex-wrap: wrap; gap: 32px 64px; margin-top: 64px; }
.public-site .legal-document article { margin-top: 112px; }
.public-site .legal-document :is(.highlight, .contact-info) { margin-block: 64px; padding: 48px; background: var(--paper-raised); color: var(--graphite); }
.public-site .legal-document :is(.last-updated, footer) { margin-top: 96px; padding-top: 48px; font-size: var(--site-label-size); }
@media (max-width: 960px) {
  .site-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; }
}
@media (max-width: 767px) {
  .site-nav { align-items: flex-start; flex-direction: column; gap: 24px; }
  .site-nav nav { gap: 16px 24px; }
  .site-page { padding-top: 80px; }
  .public-site .page-heading { margin-bottom: 64px; }
  .site-footer, .pf-footer { margin-top: 128px; padding-top: 64px; }
  .site-footer-grid { grid-template-columns: minmax(0,1fr); gap: 64px; }
  .public-site .legal-document :is(.highlight, .contact-info),
  .public-site .site-prose blockquote { padding: 24px; }
}
@media (max-width: 620px) { .public-site, .pf { --site-gutter: 36px; } }
@media (prefers-reduced-motion: reduce) {
  html:has(.public-site), html:has(.pf) { scroll-behavior: auto; }
  :is(.public-site, .pf) *, :is(.public-site, .pf) *::before, :is(.public-site, .pf) *::after {
    scroll-behavior: auto !important; animation: none !important; transition: none !important;
  }
}
@media print { :is(.public-site, .pf) { background: white; color: black; } }

.public-site :is(.page-heading > p, .legal-document .subtitle, .legal-document .metadata) { line-height: inherit; }
.public-site .site-prose code { font-family: var(--site-body); font-size: var(--site-label-size); }