:root {
  --orange: #f28a18;
  --orange-dark: #d96f00;
  --red: #d8271f;
  --ink: #22313f;
  --muted: #637282;
  --line: #e4e8ec;
  --soft: #f6f8fb;
  --paper: #fffaf2;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.75;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.header-inner,
.inner {
  max-width: 1160px;
  margin: 0 auto;
}

.header-inner {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.brand-mark {
  position: relative;
  width: 42px;
  height: 38px;
  flex: none;
}

.brand-mark::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 30px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 6px;
  background: linear-gradient(135deg, #ffb13b, #f06d12);
  box-shadow: 0 3px 0 rgba(217, 111, 0, .35), 0 0 0 2px #f28a18;
  transform: rotate(-8deg);
}

.brand-mark::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffd465;
  box-shadow: 0 0 0 3px rgba(255, 212, 101, .35);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #f07712;
}

.brand-sub {
  font-size: 11px;
  color: #667382;
  font-weight: 700;
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 800;
  color: #354251;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--orange-dark);
}

.header-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff3df;
  border: 1px solid #ffd2a1;
  color: #9a4d00;
  font-weight: 900;
}

.page-hero {
  background: linear-gradient(180deg, #fff7e9 0%, #fff 92%);
  border-bottom: 1px solid #f5e3c8;
}

.page-hero .inner {
  padding: 52px 20px 44px;
}

.kicker {
  margin: 0 0 8px;
  color: var(--orange-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.2;
  letter-spacing: 0;
  color: #1f2f3d;
}

.page-hero p:last-child {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--muted);
}

.page-body {
  padding: 46px 20px 68px;
}

.page-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 30px;
  align-items: start;
}

.page-content {
  min-width: 0;
}

.page-content h2,
.page-content h3 {
  margin: 34px 0 10px;
  color: #263746;
  line-height: 1.35;
  letter-spacing: 0;
}

.page-content h2:first-child,
.page-content h3:first-child {
  margin-top: 0;
}

.page-content h3 {
  font-size: 23px;
}

.page-content h3.small {
  font-size: 20px;
}

.page-content h4 {
  margin: 24px 0 8px;
  font-size: 18px;
  color: #263746;
}

.page-content p {
  margin: 0 0 18px;
  color: #536373;
}

.page-content .bo,
.page-content .b {
  font-weight: 900;
  color: #1f2f3d;
}

.page-content a {
  color: #d66d00;
  font-weight: 900;
}

.page-content a:hover {
  text-decoration: underline;
}

.page-content .box_case_l {
  display: grid;
  gap: 18px;
  margin: 24px 0 32px;
}

.page-content .box_case_l h4 {
  margin: 0 0 8px;
}

.page-content .box_case_l p {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(36, 51, 67, .06);
}

.page-content .box_case_l p img {
  float: left;
  max-width: 170px;
  margin: 4px 18px 8px 0;
  border-radius: 10px;
}

.clr {
  clear: both;
}

table {
  width: 100%;
  border-collapse: collapse;
}

#company,
#spec {
  margin: 18px 0 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(36, 51, 67, .06);
}

#company th,
#spec th {
  padding: 14px 16px;
  background: #fff0d8;
  color: #8a4b00;
  text-align: left;
  font-size: 16px;
}

#company td,
#spec td {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: #536373;
}

#company .c2,
#spec .c2 {
  width: 31%;
  background: #fbfcfe;
  color: #263746;
  font-weight: 900;
}

font[color="red"] {
  color: #c91f18;
}

form.mp20 {
  margin: 0;
}

input.text,
textarea.text,
select {
  width: min(100%, 440px);
  max-width: 100%;
  padding: 11px 12px;
  border: 1px solid #ccd5de;
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}

textarea.text {
  width: min(100%, 560px);
  min-height: 150px;
  resize: vertical;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #f34637, #c91f18);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(39, 51, 65, .11);
  cursor: pointer;
}

.btn-secondary,
.page-side .btn-secondary {
  background: #fff;
  color: #9a4d00;
  border-color: #ffd1a1;
}

.btn-ghost,
.page-side .btn-ghost {
  background: #fff;
  color: #24384a;
  border-color: #d9e0e7;
  box-shadow: none;
}

.page-side {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 16px;
}

.side-panel {
  padding: 22px;
  border: 1px solid #f0d5ae;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff6e8, #fff);
}

.side-panel h2,
.side-panel h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  color: #263746;
}

.side-panel p {
  margin: 8px 0 16px;
  color: #5d6a78;
  font-size: 14px;
}

.side-actions {
  display: grid;
  gap: 10px;
}

.side-actions a {
  width: 100%;
}

.footer-cta {
  padding: 46px 20px;
  background: #263746;
  color: #fff;
}

.footer-cta .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-cta h2 {
  margin: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1.3;
}

.footer-cta p {
  margin: 8px 0 0;
  color: #cfd8df;
}

.site-footer {
  padding: 34px 20px;
  background: #172330;
  color: #d4dde5;
}

.footer-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
}

.footer-brand {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

.footer-links {
  display: grid;
  gap: 8px;
  font-size: 14px;
}

.footer-links a:hover {
  text-decoration: underline;
}

address {
  font-style: normal;
  color: #d4dde5;
}

.copy {
  margin-top: 10px;
  color: #9dadbb;
  font-size: 12px;
}

@media (max-width: 960px) {
  .header-inner {
    align-items: flex-start;
  }

  .nav {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .page-grid {
    grid-template-columns: 1fr;
  }

  .page-side {
    position: static;
  }

  .footer-cta .inner {
    display: block;
  }

  .footer-cta .btn {
    margin-top: 18px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .header-inner {
    display: block;
  }

  .brand {
    margin-bottom: 12px;
  }

  .nav {
    justify-content: flex-start;
    font-size: 13px;
  }

  .header-contact {
    min-height: 34px;
    padding: 0 10px;
  }

  .page-hero .inner {
    padding: 36px 16px 34px;
  }

  .page-body {
    padding: 36px 16px 50px;
  }

  .page-content h3 {
    font-size: 21px;
  }

  .page-content .box_case_l p img {
    float: none;
    max-width: 100%;
    margin: 0 0 12px;
  }

  #company,
  #spec,
  #company tbody,
  #spec tbody,
  #company tr,
  #spec tr,
  #company th,
  #spec th,
  #company td,
  #spec td {
    display: block;
    width: 100%;
  }

  #company td,
  #spec td {
    border-top: 1px solid var(--line);
  }

  #company .c2,
  #spec .c2 {
    width: 100%;
  }

  .footer-cta h2 {
    font-size: 25px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}