@charset "UTF-8";
main { padding-top: var(--size-4-10); }

@media (max-width: 1400px) { main { padding-top: var(--size-4-4); } }

@media (max-width: 1200px) { main { padding-top: var(--size-4-0); } }

@media (max-width: 968px) { main { padding-top: var(--size-4-0); } }

.home-image-box { --bs-gutter-x: var(--size-4-1); --bs-gutter-y: var(--size-4-1); --home-image-box-height: 250px; }

.home-image-box img { width: 100%; height: var(--home-image-box-height); object-fit: cover; object-position: center; border-radius: var(--radius-m); }

@media (max-width: 992px) { .home-image-box img { height: 125px; } }

/**======================================================================== ⭐ About ========================================================================**/
#home-about { display: flex; align-items: stretch; justify-content: space-between; gap: var(--size-4-8); }

#home-about .home-about__l { flex: 4; }

@media (min-width: 1200px) { #home-about .home-about__l h1 { font-size: 2.75rem; } }

@media (max-width: 576px) { #home-about .home-about__l h1 { font-size: calc(1.35rem + 1.5vw); } }

#home-about .home-about__r { flex: 3; display: block; }

#home-about .home-about__r img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--radius-l); }

@media (max-width: 968px) { #home-about { flex-direction: column-reverse; gap: var(--size-4-7); padding-top: 0; } #home-about .home-about__l p { font-size: var(--font-m); } #home-about .home-about__r img { height: 225px; border-radius: 0; width: 100vw; margin-left: calc(-50vw + 50%); } }

#home-about .section__body .banner { padding: var(--size-4-6) var(--size-4-8); --banner-color: var(--color-primary) !important; --banner-border: var(--color-thin) !important; --banner-border-style: solid !important; --banner-border-width: var(--border-width) !important; --banner-bg: white !important; }

#home-about .section__body .banner .banner__header { font-size: var(--font-m); }

#home-about .section__body .banner .banner__header::before { content: "\\\\"; color: orange; font-size: 1.2em; }

#home-about .section__body .banner .banner__header::after { content: "//"; color: orange; font-size: 1.2em; }

#home-about .section__body .banner .banner__infobox { display: flex; align-items: center; gap: var(--size-4-2); flex-wrap: wrap; font-size: var(--font-xs) !important; margin-top: var(--size-4-2); }

#home-about .section__body .banner .banner__infobox li:first-child { margin-right: auto; color: var(--color-faint); }

#home-about .section__body .banner .banner__infobox li:not(:first-child) { color: var(--color-faint); font-size: var(--font-xs); font-weight: var(--weight-bold); }

#home-about .section__body .banner .banner__infobox li:not(:first-child)::before { content: "#"; }

@media (max-width: 468px) { #home-about .section__body .banner .banner__infobox li:not(:first-child) { display: none; } }

/**======================================================================== ⭐ Banner ========================================================================**/
/**======================================================================== ⭐ Service ========================================================================**/
#home-service ul.home-service__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-4-3); }

#home-service ul.home-service__cards .card__title { margin-bottom: var(--size-4-3); }

@media (max-width: 1200px) { #home-service ul.home-service__cards { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 768px) { #home-service ul.home-service__cards { grid-template-columns: repeat(1, 1fr); grid-template-rows: auto; } }

/**======================================================================== ⭐Article ========================================================================**/
#home-article .article__group { display: flex; flex-direction: column; gap: var(--size-4-2); }

#home-article .article__group li.article__item a.article__in { display: flex; align-items: center; font-size: var(--font-xs); padding: var(--size-4-3) var(--size-4-8) var(--size-4-3) var(--size-4-4); gap: var(--size-4-4); border: var(--divider); border-radius: var(--radius-m); background-color: var(--color-white); }

#home-article .article__group li.article__item a.article__in .article__item-type { display: flex; align-items: center; text-transform: uppercase; justify-content: center; border-radius: var(--radius-m); font-size: 13px; padding: 0 var(--size-4-2); text-align: center; width: 80px; text-align: center; font-weight: var(--weight-bold); background-color: var(--color-primary-alt); color: var(--color-primary); }

#home-article .article__group li.article__item a.article__in .article__item-type::before { content: "#"; }

@media (max-width: 768px) { #home-article .article__group li.article__item a.article__in .article__item-type { display: none; } }

#home-article .article__group li.article__item a.article__in .article__item-title { text-decoration: underline; }

/**======================================================================== ⭐ Company ========================================================================**/
#home-company .section__body dl { display: grid; grid-template-columns: 150px 1fr; }

#home-company .section__body dl dt { font-weight: var(--weight-bold); }

#home-company .section__body dl dt, #home-company .section__body dl dd { font-size: var(--font-xs); padding: var(--size-4-4) 0; border-bottom: var(--divider-strong); word-break: break-all; }

#home-company .section__body dl dt:nth-child(even), #home-company .section__body dl dd:nth-child(even) { padding-left: var(--size-4-3); }

#home-company .section__body .row { --bs-gutter-x: var(--size-4-10); margin-left: auto; margin-right: auto; }

#home-company .section__body .home-company__l img { border: 2px dashed var(--color-thin); background-color: var(--color-white); width: 100%; height: 100%; object-fit: contain; object-position: center; }

@media (max-width: 768px) { #home-company .section__body .home-company__l { display: none; } }

/**======================================================================== ⭐ Area ========================================================================**/
#home-area .section__body p span { color: var(--color-primary); background-color: var(--color-primary-alt); border-radius: var(--radius-s); border: 2px solid var(--color-primary); padding: var(--size-4-1) var(--size-4-2); margin: 0 var(--size-4-1); white-space: nowrap; }

#home-area .section__body .home-area__images { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-4-2); }

#home-area .section__body .home-area__images img { width: 100%; height: 100%; object-fit: contain; object-position: center; max-height: 200px; background-color: var(--color-white); }

/**======================================================================== ⭐ Water Animation ========================================================================**/
@keyframes water-border-radius { 0% { border-radius: var(--size-4-16) var(--radius-l) var(--size-4-16) var(--radius-l); }
  20% { border-radius: var(--radius-l) var(--size-4-16) var(--radius-l) var(--size-4-16); }
  40% { border-radius: var(--size-4-14) var(--size-4-16) var(--size-4-16) var(--size-4-14); }
  60% { border-radius: var(--size-4-16) var(--size-4-14) var(--size-4-14) var(--size-4-16); }
  80% { border-radius: var(--radius-l) var(--size-4-16) var(--size-4-16) var(--radius-l); }
  100% { border-radius: var(--size-4-16) var(--radius-l) var(--size-4-16) var(--radius-l); } }