@keyframes scroll-down {
  0% {
    opacity: 1;
    transform: translateY(-100%);
  }

  35% {
    opacity: 1;
    transform: translateY(0);
  }

  70% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(100%);
  }
}

@keyframes blob-morph {
  0%,
  100% {
    d: path("M564.582 136.989C529.863 86.333 448.853 33.265 430.336 24.8224C347.422 -12.9819 241.41 -6.21461 159.528 35.677C95.8765 68.2415 -16.8993 235.888 2.13533 386.65C13.7084 478.312 125.966 604.952 200.033 629.074C274.1 653.196 393.302 633.898 510.189 604.952C627.077 576.006 636.335 402.329 639.807 362.528C643.279 322.727 599.301 187.645 564.582 136.989Z");
  }

  16.67% {
    d: path("M545 148C515 95 455 38 428 26C350 -8 255 8 170 48C108 78 0 228 18 380C28 465 130 590 198 615C266 640 378 625 490 598C602 571 625 413 632 373C637 333 585 205 545 148Z");
  }

  33.33% {
    d: path("M520 165C495 112 445 48 418 33C342 -3 248 12 168 52C110 83 10 218 25 368C35 452 132 582 196 607C260 632 368 618 478 593C588 568 618 425 625 385C630 345 565 222 520 165Z");
  }

  50% {
    d: path("M540 152C510 98 450 40 423 28C345 -6 252 10 172 50C112 80 5 223 20 373C30 458 128 585 195 610C262 635 372 622 482 597C592 572 622 418 628 378C633 338 580 210 540 152Z");
  }

  66.67% {
    d: path("M555 142C520 88 458 35 430 25C352 -10 258 5 175 45C115 75 -5 230 15 382C25 467 127 592 197 617C267 642 380 628 492 602C604 576 628 410 635 370C640 330 590 198 555 142Z");
  }

  83.33% {
    d: path("M560 138C525 85 460 32 432 24C354 -11 245 2 165 42C105 72 -8 233 12 385C22 470 128 595 198 620C268 645 382 630 495 605C608 580 630 408 637 368C642 328 595 193 560 138Z");
  }
}

#home .l-message-content {
  background: url("/assets/img/index/bg_tree.svg") no-repeat var(--color-green2);
  color: var(--color-green2-subtle);
  overflow: hidden;
  position: relative;
}

#home .l-message-content::before,
#home .l-message-content::after {
  content: "";
  display: block;
  position: absolute;
}

#home .l-message-content::before {
  background: url("/assets/img/index/bg_annual-ring.svg") no-repeat center/contain;
}

#home .l-message-content::after {
  background: url("/assets/img/index/bg_roots.svg") no-repeat center/contain;
}

#home .l-message-content > * {
  position: relative;
  z-index: 10;
}

#home .l-message-content .c-message-cycle {
  display: block;
}

.p-main-area {
  color: var(--color-mono100);
  display: flex;
  flex-direction: row-reverse;
}

.p-main-area .p-main-area__title {
  color: inherit;
  font-weight: bold;
  line-height: 1.5;
}

.p-main-area .p-main-area__side {
  align-items: flex-end;
  color: inherit;
  display: flex;
  text-orientation: mixed;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.p-main-area .p-main-area__en-catch {
  line-height: 1.2;
  width: -moz-fit-content;
  width: fit-content;
}

.p-main-area .p-main-area__scroll {
  display: flex;
  flex-direction: row-reverse;
  font-weight: bold;
  overflow: hidden;
  position: relative;
}

.p-main-area .p-main-area__scroll::before {
  animation: scroll-down 2.5s ease infinite;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTYxIiB2aWV3Qm94PSIwIDAgMTAgMTYxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAwVjE2MEw5IDE1MC4zMTciIHN0cm9rZT0iI0Y1RjVGNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49ImJldmVsIi8+Cjwvc3ZnPgo=") no-repeat 0 0 / contain;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
}

.l-catalog-area {
  background-color: rgb(255 255 255 / 70%);
}

.l-catalog-area .c-catalog-caption {
  color: var(--color-mono5);
  text-align: center;
}

.l-hero-area {
  height: 100dvh;
  position: relative;
}

.l-hero-area > * {
  z-index: 10;
}

.l-hero-area .p-hero-img {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.l-hero-area .p-hero-img__photo {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.l-hero-area .p-hero-img__photo::before {
  background-color: rgb(0 0 0 / 20%);
  content: "";
  display: block;
  inset: 0;
  position: absolute;
  z-index: 10;
}

.l-hero-area .p-hero-img__photo:first-of-type {
  z-index: 1;
}

.l-hero-area .p-hero-img__photo img,
.l-hero-area .p-hero-img__photo picture {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.l-hero-area .p-hero-img__photo img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.l-hero-area .p-hero-img__caption {
  bottom: var(--u-16);
  color: var(--color-mono100);
  font-size: var(--u-12);
  font-weight: bold;
  position: absolute;
  right: var(--u-24);
  z-index: 11;
}

.l-hero-area .p-main-area {
  position: absolute;
}

.l-hero-area .l-catalog-area {
  position: absolute;
  right: 0;
}

.c-catalog-list {
  display: flex;
}

.c-catalog-item {
  position: relative;
  text-align: center;
}

.c-catalog-item .c-catalog-item__img {
  aspect-ratio: 80/113;
  bottom: 100%;
  display: block;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
}

.c-catalog-item .c-catalog-item__link {
  text-decoration: none;
}

.c-catalog-item .c-catalog-item__title {
  color: var(--color-mono5);
  font-weight: bold;
  line-height: 1.4;
}

.c-catalog-item .c-catalog-item__btn {
  background-color: var(--color-ocher2);
  color: var(--color-mono100);
  outline: none;
}

.c-catalog-caption::before {
  aspect-ratio: 1/1;
  background-color: var(--color-mono5);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
  display: inline-block;
  width: 0.8em;
}

.p-info-title {
  line-height: 1.6;
}

.p-info-title .p-info-title__main {
  font-weight: bold;
}

.p-info-title .p-info-title__en {
  color: var(--color-green1);
  line-height: 1.2;
}

.p-message-head > * {
  color: inherit;
}

.p-message-head .p-message-head__subtitle {
  font-weight: bold;
  line-height: 1.6;
}

.p-message-head .p-message-head__title {
  font-weight: bold;
  line-height: 1.5;
}

.p-message-text {
  font-weight: bold;
  line-height: 1.6;
}

.p-message-text > p + p {
  margin-top: 1em;
}

.c-message-image {
  position: relative;
}

.c-message-image .c-message-image__svg {
  display: block;
  height: auto;
  width: 100%;
}

.c-message-image .c-message-image__blob {
  animation: blob-morph 8s linear infinite;
}

.p-about-head {
  font-weight: bold;
}

.p-about-head__subtitle {
  background-color: var(--color-green1);
  border-radius: var(--u-4);
  color: var(--color-mono100);
  line-height: 1.6;
  text-align: center;
}

.p-about-head__title {
  line-height: 1.5;
}

.l-about {
  background-color: var(--color-green3-subtle);
  border-block: var(--u-16) solid var(--color-green1);
}

.p-about-item {
  background-color: var(--color-mono100);
  border-radius: var(--u-4);
}

.p-about-item .p-about-item__title {
  color: var(--color-green1);
  font-size: var(--u-20);
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: var(--u-8);
}

.p-group-info-head {
  margin-inline: auto;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
}

.p-group-info-head .p-group-info-head__subtitle {
  align-items: center;
  color: var(--color-mono30);
  display: flex;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
}

.p-group-info-head .p-group-info-head__subtitle::before,
.p-group-info-head .p-group-info-head__subtitle::after {
  background-color: var(--color-mono60);
  content: "";
  display: block;
  height: 1px;
  width: 100%;
}

.p-group-info-head .p-group-info-head__title {
  font-weight: bold;
  line-height: 1.5;
}

.p-group-info-head__accent {
  color: var(--color-ocher1);
  text-decoration: underline;
  text-decoration-thickness: var(--u-2);
  text-underline-offset: var(--u-8);
}

.l-group-info {
  background-color: var(--color-green4);
  border: 1px solid var(--color-green1);
  border-radius: var(--u-4);
}

.p-group-item .p-group-item__name {
  color: var(--color-mono5);
  font-weight: bold;
  margin-block: var(--u-8);
}

.p-group-item .p-group-item__img {
  aspect-ratio: 25/12;
  background-color: var(--color-mono100);
  border: 1px solid var(--color-mono80);
  border-radius: var(--u-4);
  overflow: hidden;
  width: 100%;
}

.p-group-item .p-group-item__img > img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.p-group-item .p-group-item__biz > li {
  align-items: flex-start;
  display: flex;
  font-size: var(--u-14);
  gap: var(--u-2);
  line-height: 1.71;
}

.p-group-item .p-group-item__biz > li::before {
  aspect-ratio: 1/1;
  background: radial-gradient(circle at 50%, var(--color-green1) 50%, transparent 51%);
  content: "";
  display: block;
  min-width: var(--u-16);
  translate: 0 calc((1.71em - var(--u-16)) / 2);
}

#home .l-top-banner {
  background-color: var(--color-mono90);
}

.l-top-banner__inner {
  margin-inline: auto;
  width: -moz-fit-content;
  width: fit-content;
}

.l-top-banner .c-banner-item {
  height: auto;
}

.l-top-banner .c-banner-item__link {
  align-items: center;
  background-color: var(--color-mono100);
  border-radius: var(--u-8);
  box-shadow: 0 0 var(--u-12) 0 rgb(0 0 0 / 10%);
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.l-top-banner .c-banner-item__link img,
.l-top-banner .c-banner-item__link picture {
  display: block;
  height: 100%;
  width: 100%;
}

.l-top-banner .c-banner-item__link img {
  -o-object-fit: cover;
  object-fit: cover;
}

.p-info-more {
  margin-top: var(--u-40);
  text-align: center;
}

@media (min-width: 768px) {
  #home .l-site-header {
    position: fixed;
  }
  #home .l-site-header.is-transition-enabled {
    transition: background-color 0.3s ease;
  }

  #home .l-site-header.is-transition-enabled .c-logo svg path {
    transition: fill 0.3s ease;
  }

  #home .l-site-header.is-transition-enabled .c-gnav__link {
    transition: color 0.3s ease;
  }

  #home .l-site-header.is-transition-enabled .c-btn {
    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      border-color 0.3s ease;
  }
  #home .l-message-content {
    background-position: center min(39.792vw, 573px);
    background-size: min(44.444vw, 640px) auto;
  }
  #home .l-message-content::before {
    height: min(64.444vw, 928px);
    left: max(-386px, -24.125rem);
    top: max(-145px, -9.063rem);
    width: min(59.028vw, 850px);
  }
  #home .l-message-content::after {
    height: min(50.208vw, 723px);
    right: max(-90px, -5.625rem);
    top: max(-40px, -2.5rem);
    width: min(54.583vw, 786px);
  }
  #home .l-message-content .p-message-head {
    margin-bottom: var(--u-40);
  }
  #home .l-message-content .c-message-image {
    left: min(612px, 38.25rem);
    position: absolute;
    top: max(-32px, -2rem);
    width: min(640px, 40rem);
  }
  #home .l-message-content .c-message-cycle {
    margin-top: var(--u-120);
  }
  .p-main-area {
    gap: var(--u-32);
  }
  .p-main-area .p-main-area__title {
    font-size: clamp(48px, 48 / 1440 * 100vw, 72px);
  }
  .p-main-area .p-main-area__side {
    gap: clamp(8px, 8 / 1440 * 100vw, 12px);
    padding-top: clamp(16px, 16 / 1440 * 100vw, 24px);
  }
  .p-main-area .p-main-area__en-catch {
    font-size: clamp(32px, 32 / 1440 * 100vw, 48px);
  }
  .p-main-area .p-main-area__scroll {
    font-size: clamp(12px, 12 / 1440 * 100vw, 18px);
    height: clamp(160px, 160 / 1440 * 100vw, 240px);
    width: clamp(28px, 28 / 1440 * 100vw, 42px);
  }
  .p-main-area .p-main-area__scroll::before {
    height: clamp(160px, 160 / 1440 * 100vw, 240px);
    width: clamp(12px, 12 / 1440 * 100vw, 18px);
  }
  .l-catalog-area {
    border-radius: var(--u-16) 0 0 var(--u-16);
    padding: var(--u-80) var(--u-64) var(--u-24) var(--u-40);
  }
  .l-catalog-area .c-catalog-caption {
    font-size: var(--u-14);
    margin-top: var(--u-16);
  }
  .l-hero-area {
    min-height: calc(118px + 28.25rem);
    padding-top: 118px;
  }
  .l-hero-area .p-main-area {
    bottom: var(--u-72);
    filter: drop-shadow(0 0 var(--u-8) rgb(0 0 0 / 40%));
    left: var(--u-64);
  }
  .l-hero-area .l-catalog-area {
    bottom: var(--u-72);
  }
  .c-catalog-list {
    gap: var(--u-40);
  }
  .c-catalog-item .c-catalog-item__img {
    max-height: max(226px, 14.125rem);
    max-width: max(160px, 10rem);
    min-height: min(226px, 14.125rem);
    min-width: min(160px, 10rem);
  }
  .c-catalog-item .c-catalog-item__title {
    margin-block: var(--u-12);
  }
  .c-catalog-item .c-catalog-item__btn {
    padding-block: var(--u-8);
  }
  .p-info-title .p-info-title__main {
    font-size: var(--u-24);
  }
  .p-info-title .p-info-title__en {
    font-size: var(--u-20);
    margin-top: var(--u-4);
  }
  .l-top-info {
    display: flex;
    gap: var(--u-64);
  }
  .l-top-info .p-info-title {
    flex-basis: min(240px, 15rem);
  }
  .l-top-info .p-info-list {
    flex-grow: 1;
  }
  .p-message-head .p-message-head__subtitle {
    font-size: var(--u-24);
    margin-bottom: var(--u-8);
  }
  .p-message-head .p-message-head__title {
    font-size: var(--u-48);
  }
  .p-message-text {
    font-size: var(--u-20);
  }
  .p-about-head {
    text-align: center;
  }
  .p-about-head__subtitle {
    margin-bottom: var(--u-16);
    margin-inline: auto;
    padding: var(--u-8) var(--u-24);
    width: -moz-fit-content;
    width: fit-content;
  }
  .p-about-head__title {
    font-size: var(--u-40);
  }
  .l-about .p-about-head {
    margin-bottom: var(--u-40);
  }
  .l-about .l-group-info {
    margin-top: var(--u-40);
  }
  .p-about-item {
    padding: var(--u-24) var(--u-40);
  }
  .p-about-list {
    display: grid;
    gap: var(--u-16);
    grid-template-columns: repeat(2, 1fr);
  }
  .p-group-info-head .p-group-info-head__subtitle {
    font-size: var(--u-20);
    gap: var(--u-24);
    margin-bottom: var(--u-8);
  }
  .p-group-info-head .p-group-info-head__title {
    font-size: var(--u-32);
  }
  .l-group-info {
    padding: var(--u-56) var(--u-64);
  }
  .l-group-info .p-group-info-head {
    margin-bottom: var(--u-56);
  }
  .l-group-list {
    display: grid;
    gap: var(--u-24);
    grid-template-columns: repeat(4, 1fr);
  }
  .l-top-banner {
    padding-block: var(--u-40);
  }
  .l-top-banner__inner {
    display: grid;
    gap: var(--u-32);
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
  }
  .l-top-banner .c-banner-item {
    aspect-ratio: 40/11;
    display: flex;
    width: min(320px, 20rem);
  }
}

@media (scripting: enabled) and (min-width: 768px) {
  #home .l-site-header:not(.is-out-hero) {
    background-color: transparent;
    border-color: transparent;
    filter: drop-shadow(0 0 var(--u-8) rgb(0 0 0 / 90%));
  }

  #home .l-site-header:not(.is-out-hero) .c-logo svg path {
    fill: var(--color-mono100);
  }
  #home .l-site-header:not(.is-out-hero) .c-gnav__link {
    color: var(--color-mono100);
  }
  #home .l-site-header:not(.is-out-hero) .c-btn {
    background-color: transparent;
    border: 1px solid var(--color-mono100);
    color: var(--color-mono100);
  }
}

@media (any-hover: none) and (pointer: coarse), screen and (width < 1280px) {
  .l-catalog-area .c-catalog-caption {
    display: none;
  }
}

@media (max-width: 767px) {
  #home .l-message-content {
    background-position: center bottom;
    background-size: 110% auto;
  }
  #home .l-message-content::before {
    height: 76.8vw;
    left: -38.4vw;
    top: -19.467vw;
    width: 70.4vw;
  }
  #home .l-message-content::after {
    height: 79.2vw;
    right: -25.867vw;
    top: 0;
    width: 86.133vw;
  }
  #home .l-message-content .p-message-head {
    margin-bottom: var(--u-4);
  }
  #home .l-message-content .c-message-image {
    height: 70.4vw;
    margin-bottom: var(--u-12);
    margin-inline: auto;
    width: 70.4vw;
  }
  #home .l-message-content .c-message-cycle {
    margin-top: var(--u-32);
  }
  .p-main-area {
    gap: 2.133vw;
  }
  .p-main-area .p-main-area__title {
    font-size: 8.533vw;
  }
  .p-main-area .p-main-area__side {
    gap: 2.133vw;
    padding-top: 3.2vw;
  }
  .p-main-area .p-main-area__en-catch {
    font-size: 4.267vw;
  }
  .p-main-area .p-main-area__scroll {
    font-size: 2.667vw;
    height: 42.667vw;
    width: 6.933vw;
  }
  .p-main-area .p-main-area__scroll::before {
    height: 42.667vw;
    width: 3.2vw;
  }
  .l-catalog-area {
    border-radius: 2.133vw 0 0 8px;
    padding: 11.2vw 9.067vw 6.4vw 8.533vw;
  }
  .l-hero-area {
    aspect-ratio: 1/1.618;
    height: auto;
    width: 100%;
  }
  .l-hero-area .p-main-area {
    filter: drop-shadow(0 0 8px rgb(0 0 0 / 40%));
    left: 20px;
    top: 50px;
  }
  .l-hero-area .l-catalog-area {
    bottom: 48px;
  }
  .c-catalog-list {
    gap: 6.4vw;
  }
  .c-catalog-item .c-catalog-item__img {
    min-height: 37.6vw;
    width: 26.667vw;
  }
  .c-catalog-item .c-catalog-item__title {
    font-size: 3.2vw;
    margin-block: 2.667vw;
  }
  .c-catalog-item .c-catalog-item__btn {
    font-size: 3.2vw;
    padding: 2.133vw 3.2vw;
  }
  .p-info-title .p-info-title__main {
    font-size: var(--u-20);
  }
  .p-info-title .p-info-title__en {
    font-size: var(--u-16);
  }
  .l-top-info .p-info-title {
    margin-bottom: var(--u-20);
  }
  .p-message-head .p-message-head__subtitle {
    font-size: var(--u-20);
    margin-bottom: var(--u-12);
  }
  .p-message-head .p-message-head__title {
    font-size: var(--u-28);
  }
  .p-about-head__subtitle {
    border-radius: var(--u-4);
    font-size: var(--u-20);
    margin-bottom: var(--u-8);
    padding: var(--u-8) var(--u-24);
  }
  .p-about-head__title {
    font-size: var(--u-28);
  }
  .l-about {
    border-block-width: var(--u-8);
  }
  .l-about .p-about-head {
    margin-bottom: var(--u-24);
  }
  .l-about .l-group-info {
    margin-top: var(--u-24);
  }
  .p-about-item {
    padding: var(--u-16) var(--u-24);
  }
  .p-about-list .p-about-item + .p-about-item {
    margin-top: var(--u-16);
  }
  .p-group-info-head .p-group-info-head__subtitle {
    font-size: var(--u-14);
    gap: var(--u-8);
    margin-bottom: var(--u-10);
  }
  .p-group-info-head .p-group-info-head__title {
    font-size: var(--u-20);
  }
  .l-group-info {
    padding: var(--u-32) var(--u-20);
  }
  .l-group-info .p-group-info-head {
    margin-bottom: var(--u-24);
  }
  .l-group-list {
    padding-inline: var(--u-16);
  }
  .l-group-list .p-group-item + .p-group-item {
    margin-top: var(--u-20);
  }
  .l-top-banner .c-banner-item {
    aspect-ratio: 7/2;
    width: 74.667vw;
  }
  .l-top-banner .c-banner-item + .c-banner-item {
    margin-top: var(--u-24);
  }
}

@media (any-hover: hover) {
  .c-catalog-item .c-catalog-item__link:hover .c-catalog-item__btn,
  .c-catalog-item .c-catalog-item__link:focus .c-catalog-item__btn {
    background-color: var(--color-ocher2-hover);
  }

  .c-catalog-item .c-catalog-item__link:active .c-catalog-item__btn {
    background-color: var(--color-ocher2-active);
  }
  .p-group-item .p-group-item__link .p-group-item__img {
    opacity: 1;
  }

  .p-group-item .p-group-item__link:hover .p-group-item__img,
  .p-group-item .p-group-item__link:focus .p-group-item__img {
    opacity: 0.7;
  }
}

@media (scripting: enabled) and (any-hover: hover) {
  #home .l-site-header:not(.is-out-hero) .c-gnav__link {
    opacity: 1;
  }

  #home .l-site-header:not(.is-out-hero) .c-gnav__link:hover {
    opacity: 0.7;
  }
  #home .l-site-header:not(.is-out-hero) .c-btn:hover,
  #home .l-site-header:not(.is-out-hero) .c-btn:active {
    background-color: transparent;
    opacity: 0.7;
  }
}