@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: 220px; }

.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 .home-about__in { display: flex; align-items: stretch; justify-content: space-between; gap: var(--size-4-8); }

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

#home-about .home-about__l h1 { letter-spacing: 0.01em; font-size: 3.75rem; }

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

@media (max-width: 576px) { #home-about .home-about__l h1 { font-size: 12vw; } }

#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 .home-about__in { flex-direction: column; gap: var(--size-4-6); } #home-about .home-about__r img { height: 200px; border-radius: 0; width: 100vw; margin-left: calc(-50vw + 50%); transition-delay: 0s !important; } }

#home-about .section__body .banner { padding: var(--size-4-3) var(--size-4-6); --banner-color: var(--color-primary) !important; --banner-border: var(--border-color) !important; --banner-border-style: solid !important; --banner-border-width: 2px !important; --banner-bg: var(--color-peach) !important; }

#home-about .section__body .banner .banner__header { font-size: var(--font-s); line-height: 1.5; }

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

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

#home-service ul.home-service__cards .card__desc { line-height: 1.5; }

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

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

/**======================================================================== ⭐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; }

/**======================================================================== ⭐ Electro ========================================================================**/
#home-electro .home-electro__hybrid li a { background-color: var(--color-sky); border-color: var(--border-color); border-width: 2px; }

#home-electro .home-electro__electro li a { background-color: var(--color-lime); border-color: var(--border-color); border-width: 2px; }

/**======================================================================== ⭐ 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: 1px solid var(--color-thin); 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 { background-color: var(--color-white); width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: var(--radius-m); }

@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); } }