@charset "UTF-8";
:root {
  --colorPrimary: #8ea459;
  --colorPrimaryDark: #6d8042;
  --colorPrimaryLight: #a8b87a;
  --colorSecondary: #5a7a3d;
  --colorSecondaryDark: #456230;
  --colorAccent: #d4a259;
  --colorHamburger: #fef4f4;
  --colorHamburgerOpen: #f5b1aa;
  --colorHamburgerHayabusa: #5b7e91;
  --colorText: #333333;
  --colorTextLight: #555555;
  --colorTextMuted: #888888;
  --colorBg: #ffffff;
  --colorBgSub: #f8f9f5;
  --colorBgDark: #2c3e2d;
  --colorBgHeader: #90a558;
  --colorBgHeaderHayabusa: #fef4f4;
  --colorBgHeaderBorder: #fef4f4;
  --colorBorder: #e0e0e0;
  --colorBorderLight: #f0f0f0;
}

:root {
  --fontFamily: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fontFamilySerif: "Noto Serif JP", Georgia, "Times New Roman", serif;
  --fontFamilyEn: "Inter", "Helvetica Neue", Arial, sans-serif;
  --fontSizeBase: 1.6rem;
  --fontSizeSm: 1.4rem;
  --fontSizeXs: 1.2rem;
  --fontSizeLg: 1.8rem;
  --fontSizeXl: 2.4rem;
  --fontSize2xl: 3.2rem;
  --fontSize3xl: 4rem;
  --lineHeightNormal: 1.8;
  --lineHeightTight: 1.4;
  --lineHeightLoose: 2;
  --letterSpacing: 0.05em;
  --letterSpacingWide: 0.1em;
}

:root {
  --spacingXs: 8px;
  --spacingSm: 16px;
  --spacingMd: 24px;
  --spacingLg: 40px;
  --spacingXl: 60px;
  --spacing2xl: 80px;
  --spacing3xl: 120px;
}

:root {
  --zPageTransition: 999;
  --zHamburger: 998;
  --zSpMenu: 900;
  --zLoading: 800;
  --zModal: 700;
  --zHeader: 500;
  --zOverlay: 400;
  --zContent: 100;
  --zFooter: 50;
  --zHero: 1;
}

:root {
  --transitionFast: 0.15s ease;
  --transitionNormal: 0.3s ease;
  --transitionSlow: 0.5s ease;
}

:root {
  --shadowSm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadowMd: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadowLg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

:root {
  --radiusSm: 4px;
  --radiusMd: 8px;
  --radiusLg: 16px;
  --radiusRound: 50%;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: linear-gradient(135deg, var(--colorBgSub) 0%, var(--colorBg) 100%);
  padding: 100px 20px 60px;
}
@media (min-width: 768px) {
  .hero {
    padding: 120px 30px 80px;
  }
}
.hero__container {
  max-width: 900px;
  text-align: center;
}
.hero__catch {
  font-size: var(--fontSizeXl);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: var(--spacingMd);
  color: var(--colorText);
}
@media (min-width: 768px) {
  .hero__catch {
    font-size: var(--fontSize3xl);
    line-height: 1.5;
  }
}
.hero__subCatch {
  font-size: var(--fontSizeSm);
  color: var(--colorTextLight);
  line-height: var(--lineHeightLoose);
  margin-bottom: var(--spacingLg);
}
@media (min-width: 768px) {
  .hero__subCatch {
    font-size: var(--fontSizeBase);
  }
}
.hero__contact {
  font-size: var(--fontSizeSm);
  color: var(--colorTextMuted);
}
.hero__contact a {
  color: var(--colorPrimary);
}
.hero__contact a:hover {
  text-decoration: underline;
}
.hero__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: var(--colorTextMuted);
  font-size: var(--fontSizeXs);
  letter-spacing: var(--letterSpacingWide);
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 40px;
  background-color: var(--colorTextMuted);
  -webkit-animation: scrollLine 1.5s ease-in-out infinite;
          animation: scrollLine 1.5s ease-in-out infinite;
}

@-webkit-keyframes scrollLine {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  51% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}

@keyframes scrollLine {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  51% {
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}
.about__content {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.about__text {
  font-size: var(--fontSizeBase);
  line-height: var(--lineHeightLoose);
  margin-bottom: var(--spacingMd);
}
@media (min-width: 768px) {
  .about__text {
    font-size: var(--fontSizeLg);
  }
}
.about__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  font-size: var(--fontSizeSm);
  color: var(--colorTextLight);
}

.services__list {
  display: grid;
  gap: var(--spacingMd);
}
@media (min-width: 768px) {
  .services__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacingLg);
  }
}
@media (min-width: 1024px) {
  .services__list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.services__item {
  background-color: var(--colorBg);
  padding: var(--spacingMd);
  border-radius: var(--radiusMd);
  border: 1px solid var(--colorBorderLight);
  -webkit-transition: var(--transitionNormal);
  transition: var(--transitionNormal);
}
@media (min-width: 768px) {
  .services__item {
    padding: var(--spacingLg);
  }
}
.services__item:hover {
  border-color: var(--colorPrimary);
  -webkit-box-shadow: var(--shadowSm);
          box-shadow: var(--shadowSm);
}
.services__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacingSm);
  color: var(--colorPrimary);
}
.services__title {
  text-align: center;
  font-size: var(--fontSizeLg);
  font-weight: 700;
  margin-bottom: 10px;
}
.services__desc {
  font-size: var(--fontSizeSm);
  color: var(--colorTextLight);
  line-height: var(--lineHeightNormal);
}
.services__link {
  display: inline-block;
  margin-top: 15px;
  font-size: var(--fontSizeSm);
  color: var(--colorPrimary);
}
.services__link:hover {
  text-decoration: underline;
}
.services__link::after {
  content: " →";
}
.services__note {
  text-align: center;
  margin-top: var(--spacingLg);
  font-size: var(--fontSizeSm);
  color: var(--colorTextMuted);
}

.works__list {
  display: grid;
  gap: var(--spacingMd);
}
@media (min-width: 768px) {
  .works__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacingLg);
  }
}
.works__item {
  display: block;
}
.works__card {
  height: 100%;
}
.works__more {
  text-align: center;
  margin-top: var(--spacingLg);
}

.timeline__link {
  color: var(--colorPrimary);
}
.timeline__link:hover {
  opacity: 0.8;
  color: var(--colorText);
}
.timeline__list {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  padding-left: 30px;
}
.timeline__list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--colorPrimary);
}
.timeline__item {
  position: relative;
  padding-bottom: var(--spacingLg);
}
.timeline__item:last-child {
  padding-bottom: 0;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 5px;
  width: 10px;
  height: 10px;
  background-color: var(--colorPrimary);
  border-radius: var(--radiusRound);
}
.timeline__year {
  font-size: var(--fontSizeSm);
  font-weight: 700;
  color: var(--colorPrimary);
  margin-bottom: 5px;
}
.timeline__content {
  font-size: var(--fontSizeBase);
  color: var(--colorText);
}

.contact__content {
  text-align: center;
}
.contact__text {
  font-size: var(--fontSizeBase);
  margin-bottom: var(--spacingMd);
  color: var(--colorTextLight);
}
.contact__email {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  font-size: var(--fontSizeLg);
  color: var(--colorPrimary);
  font-weight: 500;
}
@media (min-width: 768px) {
  .contact__email {
    font-size: var(--fontSizeXl);
  }
}
.contact__email:hover {
  text-decoration: underline;
}