@charset "UTF-8";

:root {
  --paper: #f8f7f2;
  --ink: #353b35;
  --muted: #63695f;
  --green: #526c55;
  --line: #dcded3;
  --font: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  font-size: 14px;
  line-height: 2.1;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 5px; }
a:hover { color: var(--green); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
::selection { background: #dce4cf; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 25px; font-weight: 600; letter-spacing: .06em; line-height: 1.7; }
h3 { font-size: 16px; font-weight: 600; line-height: 1.9; }
p { overflow-wrap: anywhere; }
.wrap { width: min(1000px, calc(100% - 80px)); margin-inline: auto; }
.section { padding-block: 66px; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 8px 15px; background: white; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-header { display: flex; justify-content: space-between; align-items: center; height: 108px; position: relative; z-index: 2; }
.brand { display: flex; gap: 12px; align-items: center; font-size: 32px; font-weight: 600; letter-spacing: .16em; text-decoration: none; }
.brand > span { font-size: 12px; font-weight: 400; letter-spacing: .08em; }
.desktop-nav { display: flex; gap: 30px; font-size: 12px; }
.desktop-nav a { text-decoration: none; }
.desktop-nav a:last-child { border-bottom: 1px solid #a7b29b; }
.mobile-nav { display: none; }
.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: center; padding-block: 62px 76px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.place { font-size: 12px; color: var(--green); letter-spacing: .08em; margin-bottom: 20px; }
h1 { font-size: clamp(29px, 3.3vw, 39px); font-weight: 500; line-height: 1.8; letter-spacing: .04em; margin-bottom: 24px; }
.hero-copy > p:not(.place) { font-size: 13px; color: var(--muted); line-height: 2.2; }
.text-link { display: inline-flex; align-items: center; gap: 40px; margin-top: 28px; font-size: 12px; text-decoration: none; border-bottom: 1px solid #a7b29b; padding-bottom: 4px; }
.company-note { position: relative; padding: 39px 34px 25px; background: #eeeedf; border-radius: 3px 3px 18px 3px; transform: rotate(1deg); }
.note-tab { position: absolute; top: -11px; left: 25px; padding: 3px 18px; background: #d6dfca; font-size: 10px; transform: rotate(-3deg); letter-spacing: .08em; }
.company-note .note-title { color: var(--green); font-size: 16px; font-weight: 500; margin-bottom: 15px; }
.company-note > p:not(.note-title) { font-size: 12px; line-height: 2.2; }
.company-note > p + p { margin-top: 16px; }
.note-sign { display: block; text-align: right; margin-top: 22px; font-size: 10px; color: var(--muted); }
.section-heading { margin-bottom: 28px; }
.section-kicker { display: block; font-size: 11px; color: var(--green); margin-bottom: 7px; }
.section-heading > p { font-size: 13px; color: var(--muted); margin-top: 14px; }
.about { display: grid; grid-template-columns: 230px 1fr; gap: 50px; }
.about-copy { padding-top: 6px; color: var(--muted); }
.about-copy p + p { margin-top: 16px; }
.services { background: #eeefe8; }
.service-list { border-top: 1px solid #cfd4c6; }
.service-list article { display: grid; grid-template-columns: 230px 1fr; gap: 50px; padding-block: 24px; border-bottom: 1px solid #cfd4c6; align-items: baseline; }
.service-list article p { color: var(--muted); font-size: 13px; }
.service-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; margin-top: 32px; }
.service-notes h3 { font-size: 14px; margin-bottom: 8px; }
.service-notes p { color: var(--muted); font-size: 12px; line-height: 2; }
.ai-note { padding-left: 28px; border-left: 1px solid #cfd4c6; }
.company { display: grid; grid-template-columns: 230px 1fr; column-gap: 50px; }
.company-details { margin: 0; border-top: 1px solid var(--line); }
.company-details > div { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding-block: 17px; border-bottom: 1px solid var(--line); font-size: 13px; }
.company-details dt { color: var(--muted); }
.company-details dd { margin: 0; overflow-wrap: anywhere; }
.company-details a { text-decoration: none; }
.source-note { grid-column: 2; font-size: 10px; color: var(--muted); margin-top: 16px; }
.contact { background: #e7ebdf; }
.contact-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-block: 44px; }
.contact h2 { font-size: 23px; }
.contact p { font-size: 12px; color: var(--muted); margin-top: 12px; }
.contact-number > span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.contact-number a { font: 28px/1.5 Arial, sans-serif; color: var(--ink); text-decoration: none; letter-spacing: .025em; }
.contact-number a:hover { text-decoration: underline; }
.contact-number .contact-email { display: block; font-size: 16px; margin-top: 12px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 27px; font-size: 11px; }
.site-footer small { font-size: 9px; color: var(--muted); margin-left: auto; }
.site-footer a { font-size: 10px; color: var(--muted); text-decoration: none; margin-left: 30px; }

@media (max-width: 850px) {
  .hero { gap: 35px; }
  .company-note { padding-inline: 25px; }
  .desktop-nav { gap: 20px; font-size: 11px; }
  .about, .company, .service-list article { grid-template-columns: 175px 1fr; gap: 30px; }
  .service-notes { gap: 30px; }
  .wide-only { display: none; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 40px); }
  .section { padding-block: 44px; }
  .site-header { height: 82px; }
  .brand { font-size: 29px; gap: 10px; }
  .brand > span { font-size: 11px; }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .mobile-nav summary { list-style: none; cursor: pointer; font-size: 11px; padding: 8px 0 8px 10px; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary::after { content: '＋'; margin-left: 8px; }
  .mobile-nav[open] summary::after { content: '−'; }
  .mobile-nav nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border: 1px solid var(--line); padding: 9px 18px; box-shadow: 0 10px 15px #353b350c; }
  .mobile-nav nav a { display: block; text-decoration: none; padding: 10px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
  .mobile-nav nav a:last-child { border-bottom: 0; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 35px 37px; }
  .place { font-size: 11px; margin-bottom: 17px; }
  h1 { font-size: clamp(27px, 7vw, 36px); line-height: 1.8; margin-bottom: 20px; }
  .hero-copy > p:not(.place) { font-size: 12px; }
  .hero-copy > p > br { display: none; }
  .text-link { margin-top: 22px; }
  .company-note { width: calc(100% - 9px); margin: 0 auto; padding: 30px 27px 22px; }
  .company-note > p:not(.note-title) { font-size: 12px; }
  .company-note > p + p { margin-top: 13px; }
  .note-sign { margin-top: 15px; }
  .about, .company { grid-template-columns: 1fr; gap: 0; }
  .section-heading { margin-bottom: 23px; }
  h2 { font-size: 23px; }
  .about-copy { padding-top: 0; font-size: 13px; }
  .service-list article { grid-template-columns: 1fr; gap: 10px; padding-block: 22px; }
  .service-list article h3 { font-size: 16px; }
  .service-list article p { font-size: 12px; }
  .service-notes { grid-template-columns: 1fr; gap: 25px; margin-top: 27px; }
  .ai-note { padding: 22px 0 0; border-left: 0; border-top: 1px solid #cfd4c6; }
  .company-details > div { grid-template-columns: 85px 1fr; gap: 13px; font-size: 11px; padding-block: 16px; }
  .source-note { grid-column: 1; font-size: 9px; }
  .contact-inner { flex-direction: column; align-items: flex-start; padding-block: 36px; gap: 22px; }
  .contact-number a { font-size: 27px; }
  .site-footer { flex-wrap: wrap; gap: 12px; padding-block: 22px; }
  .site-footer small { order: 3; flex-basis: 100%; margin: 0; }
  .site-footer a { margin-left: auto; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}