* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: #333;
  font: 700 18px/2 "Noto Sans JP", sans-serif;
  letter-spacing: .05em;
}
h1, h2, p, dl, dd { margin: 0; }
a { color: inherit; }

.site-logo {
  width: 55%;
  margin: 180px auto 140px;
}
.site-logo img {
  display: block;
  width: 100%;
  height: auto;
}
main {
  width: min(940px, calc(100% - 80px));
  margin-inline: auto;
}
.intro, .origin {
  color: #000;
  letter-spacing: .1em;
}
.intro {
  margin-bottom: 100px;
  text-align: center;
}
.intro-mobile { display: none; }
.intro h1, .intro h2 {
  margin-bottom: 10px;
  font-size: 52px;
  line-height: 2;
}
.intro p { font-size: 26px; line-height: 2.1; }
.origin h2 {
  margin-bottom: 50px;
  font-size: 32px;
  line-height: 1.5;
  text-align: center;
}
.origin p { line-height: 2.1; }

.credit {
  margin: 30px 0 140px;
  border: 1px solid #cfd3db;
  padding: 16px;
  font-size: 16px;
  text-align: center;
}
.credit p { margin-bottom: 8px; }
.notice {
  margin-bottom: 150px;
  padding: 38px 30px 36px 20px;
  background: rgba(238, 238, 238, .49);
  font-size: 14px;
  text-align: center;
}
.notice h2 { padding-bottom: 6px; font-size: 18px; }
.notice a { display: block; overflow-wrap: anywhere; }
.notice .note { padding-top: 5px; }
.notice .mail { margin-top: 16px; font-size: 16px; }

.company { margin: 0 5px 150px; }
.company h2 {
  margin-bottom: 24px;
  color: #000;
  font-size: 28px;
  letter-spacing: .1em;
  text-align: center;
}
.company dl { border-top: 1px solid #cfd3db; }
.company dl > div {
  display: grid;
  grid-template-columns: 15% 85%;
  border-bottom: 1px solid #cfd3db;
}
.company dt, .company dd { padding: 16px 10px; }
.company dd { padding-left: 0; }
.company .company-name { padding-top: 14px; }
.company-name dt, .company-name dd { padding-top: 0; }
.company-name small { display: block; margin-top: 6px; font-size: 14px; }
footer {
  padding: 20px 0 40px;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 768px) {
  .intro h1, .intro p, .origin h2, .origin p, .company h2 { font-size: 20px; }
  .credit { margin: 0 0 40px; font-size: 14px; }
  .notice, .company { margin-bottom: 100px; }
  .notice h2, .notice .mail, .company dl { font-size: 14px; }
}

@media (max-width: 480px) {
  .site-logo { width: 70%; margin: 80px auto; }
  main { width: calc(100% - 48px); }
  .intro-wide, .origin { display: none; }
  .intro-mobile { display: block; margin-bottom: 60px; }
  .intro-mobile h1 { margin-bottom: 8px; font-size: 24px; }
  .intro-mobile h2 { margin-bottom: 8px; font-size: 20px; }
  .intro-mobile p { font-size: 16px; text-align: left; }
  .intro-mobile .reading { margin-bottom: 40px; font-size: 12px; }
  .credit { margin-bottom: 0; text-align: left; }
  .notice, .company { margin-bottom: 80px; }
  .notice { padding-inline: 30px; }
  .notice, .notice .mail { font-size: 11px; }
  .company h2 { margin-bottom: 16px; }
  .company dl > div { grid-template-columns: 1fr; }
  .company dt { padding-bottom: 4px; }
  .company dd { padding: 0 10px 16px; }
  .company-name small { font-size: 11px; }
  footer { padding: 30px 0; font-size: 12px; }
}

/* Keep tracking proportional to each text size, including smaller notices. */
.credit, .notice, .notice h2, .notice .mail, .company dl, .company-name small, footer {
  letter-spacing: .05em;
}

@media (max-width: 480px) {
  .credit a { display: block; overflow-wrap: anywhere; }
  .notice { padding-inline: 20px 30px; }
  .notice h2, .notice p, .notice .note { margin-inline: 10px; }
  .company { margin-inline: 0; }
  .company h2 { margin-bottom: 16px; }
  .company dt, .company dd { margin-inline: 10px; padding-inline: 0; }
  .company-name dd { margin-right: 20px; }
  .company dl > div:last-child dt { padding-bottom: 0; }
}