*,
*::before,
*::after {
  min-width: 0px;
  min-height: 0px;
}
:root {
  --elevation: 0 8px 20px 8px rgba(0, 0, 0, 0.06), 0 4px 12px 4px rgba(0, 0, 0, 0.12);
}

html {
  /* 最小値13pxを保証し、1200px未満では最大22pxまでフォントサイズが流動する */
  font-size: clamp(13px, var(--font-size-base), 22px);

  @media screen and (min-width: 1200px) {
    font-size: clamp(0.1rem, var(--font-size-base), 24px);
  }
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background-color: var(--snow);
  letter-spacing: 0.12em;
  font-weight: 500;
}

#root {
  margin: 0 auto;
}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  line-height: inherit;
}

img, iframe {
  max-width: 100%;
}
iframe {
  border: none;
  box-shadow: none;
}

a, a:hover {
  color: var(--ink);
}

[id] {
  scroll-margin-top: 3.75rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

button {
  position: relative;
  appearance: none;
  cursor: pointer;
  box-shadow: none;
  border: 0;
  outline: none;
  background: none;
  padding: 0;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1.5rem;
  list-style: disc outside none;

  & > p {
    margin: 0;
    display: list-item;
  }
}

.webgene-pagination {
  & ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding: 0;
    margin: 0;

    & li {
      & a {
        display: inline-block;
        width: 3rem;
        line-height: 3rem;
        text-align: center;
        background-color: var(--ink);
        color: var(--snow);
        &:hover {
          text-decoration: none;
        }
      }

      &.selected {
        & a {
          background: var(--grad-orange);
          &:hover {}
        }
      }
    }
  }
}

.webgene-no-items {
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
}

.thumbnail {
  position: relative;

  &.thumbnail--16x9 {
    padding-top: 56.25%;
  }

  & img,
  &:empty::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &:empty::before {
    content: "";
    background-image: url("/system_panel/uploads/images/ogp.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

.article-body {
  & > p {
    margin: 1em 0;
  }

  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    margin: 2em 0 1em;
  }

  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child {
    margin-bottom: 0;
  }

  & a,
  & a:hover {
    color: var(--blue);
    text-decoration: underline;
  }
}

.backdrop-object {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.__mat.__mat--processed {
  word-break: keep-all;
  word-wrap: break-word;
}


.hero-title {
  padding: 0.5rem;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  background-color: var(--snow);
  color: var(--ink);
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
  
  @media (min-width: 768px) {
    padding: 1rem;
    font-size: 3rem;
  }
  @media (min-width: 1200px) {
    font-size: 4rem;
  }
}

.hero-image {
  z-index: 0;
  &::after {
    position: absolute;
    content: "";
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(from var(--ink) h s l / 5%);
    backdrop-filter: blur(2px);
    pointer-events: none;
  }
}

.field-card {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-image: var(--grad-orange);
  }
}

.button {
  display: inline-flex;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  background-color: var(--snow);
  color: var(--ink);
  border: 0;
  box-shadow: var(--elevation);
  transition: transform 200ms ease, opacity 200ms ease;
  
  &:hover {
    text-decoration: none;
    transform: scale(0.99);
    opacity: 0.85;
  }
  
  &::after {
    content: "";
    width: 1.4375rem;
    height: 1.4375rem;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M19.3363%203.51326C17.5363%201.883%2013.966%200.319844%2011.5653%200.0252441C9.5701%20-0.220081%205.81099%201.36929%204.36288%202.76785C2.7713%204.30585%200.134144%209.13477%200.00512472%2011.3406C-0.12183%2013.516%202.13859%2018.2066%203.61044%2019.7991C5.12461%2021.4377%209.39876%2022.8604%2011.5704%2022.9904C16.3555%2023.2777%2022.9251%2017.0596%2022.9974%2012.1982C23.0552%208.31178%2022.1634%206.07345%2019.3363%203.51326ZM8.84965%201.89768L6.24553%203.16624L4.22457%204.71473C5.38162%203.29415%207.031%202.16607%208.84965%201.89768ZM16.2357%2020.4124C12.3868%2022.549%209.04267%2021.2155%205.66339%2019.1229C6.32191%2019.8263%207.24465%2020.3841%208.1643%2020.8118C8.51317%2020.9743%208.88991%2021.1117%209.26045%2021.2123C9.28522%2021.401%209.03751%2021.3067%208.9281%2021.2899C6.40964%2020.8884%204.00575%2019.0117%202.7682%2016.7923C1.58432%2014.6693%200.83188%2011.8942%201.65657%209.51849C1.94145%209.56357%201.65554%2010.0228%201.65554%2010.092V12.0755C1.65554%2014.3904%203.7281%2017.9245%205.66443%2019.1229C4.66324%2018.0535%203.80552%2017.2557%203.11294%2015.92C0.475787%2010.8321%202.23458%205.41925%207.23846%202.81713C18.3011%20-2.93648%2027.4026%2014.2153%2016.2357%2020.4124ZM21.1839%2015.1557C20.9929%2015.1798%2021.1024%2014.9429%2021.1282%2014.8381C21.2458%2014.3474%2021.4006%2013.9564%2021.4781%2013.4196C21.7991%2011.197%2021.0538%208.25622%2019.9691%206.31668C19.1629%204.87618%2017.7448%203.80053%2016.4566%202.8381C18.1741%203.56883%2020.2271%205.44441%2020.9558%207.19524C21.9322%209.5426%2022.1995%2012.7937%2021.1849%2015.1568L21.1839%2015.1557Z%22%20fill%3D%22url(%23paint0_linear_130_96)%22%2F%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22paint0_linear_130_96%22%20x1%3D%2211.5%22%20y1%3D%220%22%20x2%3D%2211.5%22%20y2%3D%2223%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%23FABA16%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23DE392A%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.main-heading {
  display: flex;
  flex-direction: column;
  align-items: start;
  & p, & h1, & h2, & h3, & h4, & h5, & h6 {
    padding: 0.5rem;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    background-color: var(--ink);
    color: var(--snow);
    letter-spacing: 0.08em;
    font-feature-settings: "palt";
    &:first-child {
      padding-bottom: 0;
    }
    &:only-child {
      padding-bottom: 0.5rem;
    }
    @media (min-width: 768px) {
      padding: 0.75rem;
      font-size: 2.5rem;
      &:only-child {
        padding-bottom: 0.75rem;
      }
    }
    @media (min-width: 1024px) {
      padding: 0.875rem;
      font-size: 3rem;
      &:only-child {
        padding-bottom: 0.875rem;
      }
    }
    @media (min-width: 1200px) {
      padding: 1rem;
      font-size: 4rem;
      &:only-child {
        padding-bottom: 1rem;
      }
    }
  }
  
  &.main-heading--center {
    align-self: center;
  }
  &.main-heading--snow {
    & p, & h1, & h2, & h3, & h4, & h5, & h6 {
      color: var(--ink);
      background-color: var(--snow);
    }
  }
  &.main-heading--lg {
    & p, & h1, & h2, & h3, & h4, & h5, & h6 {
      padding: 0.75rem;
      font-size: 2rem;
      &:only-child {
        padding-bottom: 0.75rem;
      }
      @media (min-width: 768px) {
        padding: 0.75rem;
        font-size: 3rem;
        &:only-child {
          padding-bottom: 0.75rem;
        }
      }
      @media (min-width: 1024px) {
        padding: 0.875rem;
        font-size: 4rem;
        &:only-child {
          padding-bottom: 0.875rem;
        }
      }
      @media (min-width: 1200px) {
        padding: 1rem;
        font-size: 5rem;
        &:only-child {
          padding-bottom: 1rem;
        }
      }
    }
  }
}

.en-sub-heading {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  line-height: 1;
  font-style: italic;
  font-weight: 700;
  font-size: 1.5rem;
  &::before {
    content: "";
    aspect-ratio: 1 / 1;
    width: 1em;
    background-image: url("/system_panel/uploads/images/20260423144541510699.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  @media (min-width: 768px) {
    font-size: 2rem;
  }
  @media (min-width: 1024px) {
    font-size: 2.5rem;
  }
  @media (min-width: 1200px) {
    font-size: 3rem;
  }
  
  &.en-sub-heading--snow {
    color: var(--snow);
  }
}


.sub-heading {
  padding: 0.375rem 0.75rem;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  background-color: var(--ink);
  color: var(--snow);
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
  
  @media (min-width: 768px) {
    padding: 0.75rem 1rem;
    font-size: 2rem;
  }
}


.access-map {
  & iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

.company-philosophy-image {
  width: 110%;
  transform: translate(-5%);
  & img {
    width: 100%;
  }
  @media(min-width: 768px) {
    width: 100%;
    transform: none;
  }
}

.footer-contact-bg-image {
  position: absolute;
  inset: 0;
  opacity: 50%;
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  &::before,
  &::after {
    z-index: 1;
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0;
  }
  &::before {
    background-color: hsl(0deg 0% 100% / 25%);
    backdrop-filter: blur(2px);
  }
  &::after {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
  }
}

.footer-contact-illust {
  position: absolute;
  width: 19.5rem;
  bottom: 0.6875rem;
  right: -3.5rem;
  opacity: 50%;
  @media (min-width: 768px) {
    width: 30rem;
  }
  @media (min-width: 1200px) {
    width: 46.75rem;
    bottom: 1rem;
    right: -4.125rem;
  }
}

.crops-links {
  position: relative;
  display: flex;
  align-self: center;
  gap: 1.25rem;
  padding: 0.5rem 1.25rem 0.5rem 2rem;
  border-radius: 9999px;
  border: 1px solid var(--ink);
  &::after {
    content: "栽培作物";
    line-height: 1.25;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--snow);
    background-color: var(--ink);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    box-shadow: var(--elevation);
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
  }
  @media (min-width: 768px) {
    margin-left: 3.75rem;
    &::after {
      top: 50%;
      left: -3.75rem;
      transform: translateY(-50%);
    }
  }
}

.bg-cricle {
  &::before {
    content: "";
    aspect-ratio: 1 / 1;
    width: clamp(20rem, 44.4375%, 44.4375rem);
    border-radius: 9999px;
    background-image: var(--grad-orange);
    filter: blur(25px);
    opacity: 35%;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-45.0070323488%, 51.4767932489%) rotate(40deg);
  }
  &.bg-cricle--philosophy::before {
    width: clamp(20rem, 49.375%, 44.4375rem);
    right: 0;
    left: auto;
    transform: translate(-19.4092827004%, 25.3164556962%) rotate(40deg);
  }
  &.bg-cricle--commitment::before {
    width: clamp(20rem, 50.7857142857%, 44.4375rem);
    right: 0;
    left: auto;
    transform: translate(-19.4092827004%, 25.3164556962%) rotate(40deg);
  }
}

.recruit-intro-image {
  object-fit: cover;
  aspect-ratio: 4 / 3;
  position: absolute;
  top: -7rem;
  right: -3rem;
  width: clamp(15rem, 48.046875%, 38.4375rem);
  box-shadow: var(--elevation);
  @media (min-width: 1200px) {
    top: 3.75rem;
    right: -10rem;
  }
}

.category-list {
  & .webgene-blog {
    padding-block: 0.75rem;
    padding-inline: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    line-height: 1.25;
    font-size: 1rem;
    
    & a {
      display: block;
      
      &:hover {
        text-decoration: none;
      }
    }
  }
}

.blog-list {
  & .webgene-blog {
    display: grid;
    gap: 2rem;
    
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      
      & .webgene-pagination, & .webgene-no-items {
        grid-column: span 2 / span 2;
      }
    }
  }
}

.policy-philosophy-image {
  object-fit: cover;
  aspect-ratio: 4 / 3;
  position: absolute;
  top: -3rem;
  right: -3rem;
  width: clamp(12.5rem, 42.7083333333%, 38.4375rem);
  box-shadow: var(--elevation);
  @media (min-width: 1200px) {
    top: 17.5rem;
    right: -2.75rem;
  }
}

.commitment--bg-illust {
  width: 11.5rem;
  position: absolute;
  right: -1.875rem;
  bottom: -2.5rem;
  @media (min-width: 768px) {
    width: 15rem;
  }
  @media (min-width: 1024px) {
    width: 20rem;
  }
  @media (min-width: 1200px) {
    width: 35.375rem;
    right: 0.625rem;
    bottom: -3.75rem;
  }
}

.how-to-buy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--snow);
  box-shadow: var(--elevation);
  & > img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 3 / 2;
  }
  &.how-to-buy-card--on-hiatus {
    & > * {
      opacity: 15%;
    }
    &::after {
      content: "休止中";
      opacity: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      line-height: 1;
      letter-spacing: 0.08em;
      font-weight: 900;
      color: var(--snow);
      background-color: var(--ink);
      padding: 0.5rem;
      font-size: 2rem;
    }
  }
  @media (min-width: 768px) {
    flex-direction: row-reverse;
    aspect-ratio: 687 / 294;
    & > img {
      width: 18.75rem;
      aspect-ratio: unset;
    }
    &.how-to-buy-card--on-hiatus::after {
      padding: 0.625rem;
      font-size: 2.5rem;
    }
  }
  @media (min-width: 1024px) {
    flex-direction: column;
    aspect-ratio: unset;
    & > img {
      width: 100%;
      aspect-ratio: 3 / 2;
    }
    &.how-to-buy-card--on-hiatus::after {
      padding: 0.75rem;
      font-size: 3rem;
    }
  }
  @media (min-width: 1200px) {
    flex-direction: row-reverse;
    aspect-ratio: 687 / 294;
    & > img {
      width: 18.75rem;
      aspect-ratio: unset;
    }
  }
}

.swiper:not(.swiper-initialized) {
  & .swiper-wrapper {
    display: flex;
    overflow: auto;
  }
  & .sweipr-slide {
    min-width: 90%;
  }
  &.gallery-slider {
    & .sweipr-slide {
      min-width: 23%;
    }
  }
}

.gallery-slider {
  width: 100%;
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
  & .sweipr-slide {
    & img {
      object-fit: cover;
      width: 100%;
      aspect-ratio: 1 / 1;
    }
  }
}