@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/aos/aos.css);
/* @import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css); */
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
business
==============================*/

.btw { text-align: center; margin-top: 6rem; }
.biz-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 4.6rem; }
@media screen and (max-width:896px) { /* m */
  .biz-wrap { grid-template-columns: 1fr; gap: 4.8rem; }
}

.clip.-biz_01 { clip-path: url(#clip-bisImg); max-width: 48rem; aspect-ratio: 480 / 378; }
.tp-wrap { display: flex; align-items: center; gap: 7rem; }
.tp-wrap .pw { width: 32%; }
.tp-wrap .pw .clip { width: 150%; float: right; }
.tp-wrap .tw { width: calc(68% - 7rem); }
.tp-wrap .tw p { font-weight: 500; }
.txt-wrap { display: grid; grid-template-columns: 1fr; row-gap: 6rem; column-gap: 4.2rem; }
.txt-wrap h4 { margin-top: 2rem; color: #327C4C; }
.txt-wrap p,
.c0 {color: #000; }
.txt-wrap.-col { grid-template-columns: 1fr 1fr; }
.imgs { margin-top: 5.2rem; }
.imgs img { border-radius: 2rem; }
.banners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; margin-top: 8rem; }
.banners.col2 li { width: calc(50% - 1rem); }
.banners.col3 li { width: calc((100% - 4rem) / 3); }
.banners.col4 li { width: calc((100% - 6rem) / 4); }
.h3.-d3 a { color: #990003; }
@media screen and (max-width:1300px) {
  .tp-wrap { gap: 3rem; }
  .tp-wrap .pw { width: 40%; }
  .tp-wrap .pw .clip { width: 100%; }
  .tp-wrap .tw { width: calc(60% - 3rem); }
}
@media screen and (max-width:1024px) { /* l */
  .banners li { min-width: 30rem; }
}
@media screen and (max-width:896px) { /* m */
  .tp-wrap { flex-direction: column; }
  .tp-wrap .pw { width: 100%; }
  .tp-wrap .pw .clip { float: none; margin: auto; }
  .tp-wrap .tw { width: 100%; }
  .txt-wrap.-col { grid-template-columns: 1fr; }
}
@media screen and (max-width:480px) { /* s */
  .clip.-biz_01 { max-width: 80%; }
  .banners { margin-top: 4rem; }
}