:root {
  --ink: #343d32;
  --accent: #4d6348;
  --line: #c6cec0;
  --page-gutter: clamp(24px, 6vw, 88px);
}
*, *::before, *::after { box-sizing: border-box; }
body.main-redesign, body.main-site-inner {
  margin: 0;
  background: #fcfaf6;
  color: var(--ink);
  font: 500 1rem/1.9 "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif;
}
.main-redesign a { color: inherit; }
.main-redesign a:focus-visible, .main-redesign button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
.main-logo {
  position: absolute;
  inset: 20px auto auto var(--page-gutter);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font: 750 clamp(.86rem, 2vw, 1.1rem)/1 system-ui, sans-serif;
  letter-spacing: .08em;
}
.main-logo img { width: 56px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
.main-redesign .jh-header__toggle { padding: 5px 8px; height: 34px; background: transparent; }
.main-wrap { width: min(1120px, 100% - 2 * var(--page-gutter)); margin-inline: auto; }
.main-hero, .main-panel { display: grid; align-items: center; }
.main-hero { min-height: clamp(460px, 72svh, 740px); padding-block: clamp(112px, 15vh, 168px) clamp(64px, 10vh, 110px); }
.main-panel { padding-block: clamp(80px, 10vw, 150px); }
.main-hero { position: relative; isolation: isolate; background: #f8f4ed; }
.main-hero__image, .main-insert img { width: 100%; height: 100%; display: block; object-fit: cover; }
.main-hero__image { position: absolute; inset: 0; z-index: -2; object-position: 63% center; }
.main-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#fcfaf6 0%,#fcfaf6e8 25%,#fcfaf660 54%,transparent 72%); }
.main-hero h1 { margin: .65rem 0 1.4rem; font-size: clamp(2.4rem, 6.3vw, 6.25rem); font-weight: 750; line-height: 1.23; letter-spacing: .035em; }
.main-hero p { margin-block: 0; }
.main-label { margin: 0 0 .65rem; color: var(--accent); font-size: .8rem; font-weight: 750; letter-spacing: .19em; }
.main-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(24px, 6vw, 86px); }
.main-heading { position: relative; isolation: isolate; min-width: 0; }
.main-heading__word { position: absolute; z-index: -1; left: -.035em; top: -.43em; color: #43594124; font: 800 clamp(3.35rem, 8vw, 7.5rem)/1 system-ui, sans-serif; letter-spacing: -.065em; pointer-events: none; }
.main-panel h2 { margin: 0; font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.3; text-wrap: balance; }
.main-intro { margin: 0 0 1.2rem; font-size: clamp(1.15rem, 2.3vw, 1.8rem); font-weight: 700; line-height: 1.6; }
.main-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: clamp(72px, 12vw, 146px);
  background: #fffdfa;
}
.main-divider span {
  width: 12px;
  height: 12px;
  border-radius: 75% 25% 75% 25%;
  background: #b8c9ab;
  transform: rotate(-30deg);
}
.main-divider span:nth-child(2) { background: #dbbc9f; }
.main-divider span:nth-child(3) { background: #cad4bd; }
.main-about {
  position: relative;
  isolation: isolate;
  background: #faf7ef;
}
.main-about__image, .main-about::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.main-about__image {
  z-index: -2;
  object-fit: cover;
  object-position: 36% center;
}
.main-about::before {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, #fffdf620, #fffdf653 30%, #fffdf6d6 58%, #fffdf6eb);
}
@media (max-width: 700px) {
  .main-about__image { object-position: 28% center; }
  .main-about::before { background: linear-gradient(#fffdf657, #fffdf6b5 45%, #fffdf6e8); }
}
.main-product { background: #f0f3ec; }
.main-contact { background: #f8f1e9; }
.main-services { display: grid; gap: .8rem; margin-block: 1.7rem; }
.main-services div { padding-block: .65rem; border-top: 1px solid var(--line); }
.main-services h3, .main-services p { margin: 0; }
.main-services a { text-underline-offset: .2em; }
.main-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.2rem; margin-top: 1rem; border: 1px solid var(--accent); border-radius: 999px; text-decoration: none; font-weight: 700; transition: background-color .25s ease, color .25s ease; }
.main-button:hover { color: #fff; background: var(--accent); }
.main-insert { width: 100%; height: 33svh; margin: 0; }
.main-footer-links__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.main-footer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-height: clamp(118px, 19vw, 245px);
  padding: clamp(12px, 4vw, 60px);
  background-color: #465444;
  background-position: center;
  background-size: cover;
  color: #fff;
  text-decoration: none;
  font-size: clamp(.9rem, 2.5vw, 2rem);
  font-weight: 750;
  transition: box-shadow .3s ease;
}
.main-footer-links__organization {
  background-image: linear-gradient(#1d291d70, #1d291d94), url("../images/main-about-workshop.webp");
}
.main-footer-links__contact {
  background-image: linear-gradient(#1d291d70, #1d291d94), url("../images/main-packing.webp");
}
.main-footer-links a span:last-child { transition: transform .25s ease; }
.main-footer-links a:hover { box-shadow: inset 0 0 0 200px #20301c35; }
.main-footer-links a:hover span:last-child { transform: translateX(4px); }
.main-redesign .jh-footer { margin-top: 0; border-radius: 0; }
@media (max-width: 700px) {
  .main-split { grid-template-columns: 1fr; }
  .main-logo { top: 12px; }
  .main-hero { align-items: start; }
  .main-hero::after { background: linear-gradient(180deg,#fcfaf6f5 0%,#fcfaf6d4 40%,#fcfaf625 70%,transparent 90%); }
  .main-hero__image { object-position: 68% center; }
}
@media (prefers-reduced-motion: reduce) {
  .main-button, .main-footer-links a, .main-footer-links a span:last-child, .main-redesign .jh-header__toggle span, .main-redesign .jh-menu, .main-redesign .jh-menu__link { transition: none; }
  .main-footer-links a:hover span:last-child { transform: none; }
}
html.js body:is(.main-redesign, .main-site-inner) [data-reveal], html.js body:is(.main-redesign, .main-site-inner) [data-reveal].is-visible { clip-path: none; }

body.main-site-inner {
  --jh-brown: #343d32;
  --jh-accent: #4d6348;
  --jh-paper: #fcfaf6;
  --jh-line: #c6cec0;
  --lr-brown: #343d32;
  --lr-accent: #4d6348;
  --lr-paper: #fcfaf6;
  --lr-cream: #f0f3ec;
  --lr-line: #c6cec0;
}
body.main-site-inner:not(#index) { padding-top: 0; }
.main-subhero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(375px, 58svh, 570px);
  padding-block: clamp(110px, 14vw, 150px) clamp(54px, 8vw, 100px);
}
.main-subhero__image, .main-subhero::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.main-subhero__image {
  z-index: -2;
  object-fit: cover;
  object-position: center;
}
.main-subhero::after {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, #fcfaf6f7 0%, #fcfaf6de 38%, #fcfaf633 75%);
}
.main-subhero__copy h1 {
  margin: .5rem 0 .8rem;
  color: var(--ink);
  font: 750 clamp(2.25rem, 6vw, 5rem)/1.22 "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif;
  letter-spacing: .015em;
}
.main-subhero__copy p { margin: 0; color: var(--ink); }
.main-subhero__copy p:first-child {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .16em;
}
.main-subhero__copy em { color: inherit; font-style: normal; }
.main-site-inner :is(.section, .ap-section, .work-support-section) {
  --content: 1120px;
}
.main-site-inner :is(.button, .ap-button, .c-button, .btnRadius),
.main-redesign :is(.main-button, .main-footer-links a) {
  display: inline-flex;
  align-items: center;
  line-height: 1.35;
}
.main-redesign .main-footer-links a { display: flex; }
.main-site-inner .button--dark, .main-site-inner .contact-workspace .button--dark {
  background: #4d6348;
  color: #fff;
}
.main-site-inner .button--cream, .main-site-inner .contact-workspace .button--cream {
  background: #e8eee2;
  color: #343d32;
}
body:is(.main-redesign, .main-site-inner) .jh-footer {
  margin-top: 0;
  border-radius: 0;
  background: #e8eee2;
  color: #343d32;
}
body:is(.main-redesign, .main-site-inner) .jh-footer a {
  color: #343d32 !important;
  transition: color .25s ease, border-color .25s ease;
}
body:is(.main-redesign, .main-site-inner) .jh-footer a:hover { color: #4d6348 !important; }
body:is(.main-redesign, .main-site-inner) :is(.jh-footer__nav a, .jh-footer__bottom) { border-color: #c6cec0; }
body:is(.main-redesign, .main-site-inner) .jh-footer__brand img { mix-blend-mode: multiply; }
@media (max-width: 700px) {
  .main-subhero::after { background: linear-gradient(90deg, #fcfaf6ed, #fcfaf682); }
}
@media (prefers-reduced-motion: reduce) {
  body:is(.main-redesign, .main-site-inner) .jh-footer a { transition: none; }
}

body.main-site-inner {
  --brown: #343d32;
  --cream: #f0f3ec;
  --paper: #fcfaf6;
  --accent: #4d6348;
  --line: #c6cec0;
  --olive: #343d32;
  --orange: #4d6348;
  --ws-brown: #343d32;
  --ws-accent: #4d6348;
  --ws-cream: #f0f3ec;
  --ws-paper: #fcfaf6;
  --ws-line: #c6cec0;
}

body:is(.main-site-inner, .main-redesign) main > section.main-photo-cta {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(54px, 8vw, 112px) 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(95deg, #243325eb, #243325a6), url("../images/main-about-workshop.webp") center / cover no-repeat;
  color: #fff;
  text-align: left;
}
body:is(.activity-prototype, .work-support-page) main > section.main-photo-cta {
  background-image: linear-gradient(95deg, #243325eb, #243325a6), url("../images/main-packing.webp");
}
.main-photo-cta :is(h2, h3, p, .main-label, .eyebrow, .work-support-cta__label) {
  color: #fff !important;
}
.main-photo-cta h2 {
  margin: 0 0 .65rem;
  font-size: clamp(1.65rem, 4vw, 3.25rem);
  font-weight: 750;
  line-height: 1.35;
}
.main-photo-cta p { max-width: 42rem; }
body:is(.main-site-inner, .main-redesign) :is(.main-button, .button, .ap-button, .c-button) {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 48px;
  padding: .65rem 1.1rem;
  border: 1px solid #4d6348;
  border-radius: 999px;
  box-shadow: none;
  text-align: left;
  line-height: 1.35;
  font-weight: 700;
  text-decoration: none;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
body.main-site-inner :is(.ap-button, .c-button) { background: #fcfaf6; color: #343d32; }
body:is(.main-site-inner, .main-redesign) .main-photo-cta :is(.main-button, .button, .ap-button, .c-button) {
  background: #fcfaf6;
  border-color: #fcfaf6;
  color: #343d32;
}
body:is(.main-site-inner, .main-redesign) :is(.main-button, .button, .ap-button, .c-button):hover {
  background: #4d6348;
  color: #fff;
  transform: none;
}
.main-photo-cta .guide-links a {
  color: #fff;
  border-color: #ffffff80;
  transition: opacity .25s ease;
}
.main-photo-cta .guide-links a:hover { opacity: .8; }
.main-site-inner :is(.contact-note, .form-status) {
  color: #343d32;
  background: #f0f3ec;
  border-color: #4d6348;
}
.main-site-inner :is(.form-field label, .faq-item summary, .contact-guide > a) { color: #343d32; }
.main-site-inner .form-field label span { background: #e8eee2; color: #343d32; }
.main-site-inner .consent input { accent-color: #4d6348; }

@media (prefers-reduced-motion: reduce) {
  body:is(.main-site-inner, .main-redesign) :is(.main-button, .button, .ap-button, .c-button),
  .main-photo-cta .guide-links a { transition: none; }
}

body:is(.main-site-inner, .main-redesign) .main-logo { color: #343d32; }
.main-site-inner :is(.ap-card__visual, .work-support-photo, .work-support-work__image-wrap, .work-support-steps__visual) {
  border-radius: 16px;
}
.main-site-inner :is(.ap-button, .c-button) b {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: #e8eee2;
  color: #343d32;
  transition: background-color .25s ease, color .25s ease;
}
.main-site-inner :is(.ap-button, .c-button):hover b { transform: none; }
.main-site-inner :is(.quote-band, .work-support-day) { background-color: #f0f3ec; }
.main-site-inner .quote-band :is(p, strong, .quote-band__line) { color: #343d32; }
.main-site-inner .quote-band__mark { color: #d6e2d0; }

body.main-site-inner[class^="page-"] main > .section:not(.main-photo-cta) {
  padding-block: clamp(42px, 5.5vw, 80px);
}
body.main-site-inner[class^="page-"] .feature-card,
body.main-site-inner.work-support-page .work-support-feature {
  min-height: 0;
  padding-block: 1.4rem;
}
body.main-site-inner[class^="page-"] .feature-card h2,
body.main-site-inner.work-support-page .work-support-feature__title {
  min-height: 0;
  margin: .85rem 0 .6rem;
  font-weight: 650;
}
body.main-site-inner[class^="page-"] .feature-card p {
  margin-bottom: .9rem;
}
body.main-site-inner[class^="page-"] .quote-band {
  min-height: 0;
  padding-block: clamp(48px, 6vw, 90px);
  background: #f0f3ec;
}
body.main-site-inner .quote-band .quote-band__text,
body.main-site-inner .quote-band .quote-band__text strong {
  color: #343d32;
}
html.js body.main-site-inner main :is([data-reveal], .scroll-reveal) {
  opacity: 1;
  clip-path: none;
  transition-property: transform;
}

body.main-site-inner .main-photo-cta .section-label {
  color: #fff !important;
}

body.main-site-inner:not(#index),
body.main-site-inner:not(#index) :is(button, input, textarea, select) {
  font-family: "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif !important;
  font-weight: 500;
}
body.main-site-inner:not(#index) main :is(h1, h2, h3, h4) {
  font-weight: 750 !important;
  letter-spacing: .015em;
}
body.main-site-inner:not(#index) main :is(p, li, dd) {
  font-weight: 500 !important;
}
body.main-site-inner:not(#index) main :is(.kicker, .work-support-hero__kicker, .ap-kicker, .page-intro__lead) {
  font-weight: 700 !important;
}

body:is(.main-redesign, .main-site-inner) :is(.main-logo, .jh-header, .jh-footer) {
  font-family: "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 500;
}
body:is(.main-redesign, .main-site-inner) :is(.main-logo, .jh-menu__brand, .jh-footer__brand) {
  font-weight: 750;
}
body:is(.main-redesign, .main-site-inner) .jh-menu__link {
  font-weight: 500;
}