@charset "utf-8";
main {
  position: relative;
  padding-bottom: 8rem;
}

.top-section {
  position: relative;
  padding-top: 4.5rem;
  background: linear-gradient(135deg, #ebf7ff, #f1fcde);
}

.top-section::before {
  content: "";
  width: 25.5rem;
  height: 25.5rem;
  position: absolute;
  left: -8rem;
  bottom: -7rem;
  background: url("../images/main/circle_visual.svg") no-repeat left top;
  background-size: 100%;
}

.top-section::after {
  content: "";
  width: 54.2rem;
  height: 49rem;
  position: absolute;
  right: -15rem;
  bottom: 0;
  background: url("../images/main/ci_visual.svg") no-repeat left top;
  background-size: 100%;
}

.top-section .inner {
  display: grid;
  grid-template-columns: 57% 41%;
  gap: 4.8rem 2%;
  transform: translateY(7.6rem);
  z-index: 1;
}

.top-section .inner .copyright {
  position: relative;
  padding-bottom: 3rem;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.top-section .inner .copyright::before {
  content: "";
  width: 30.4rem;
  height: 24.6rem;
  position: absolute;
  right: 0;
  bottom: 0;
  background: url("../images/main/obj_visual.png") no-repeat left top;
  background-size: 100%;
}

.top-section .inner .copyright .title {
  position: relative;
  padding-top: 2rem;
  margin-bottom: 2rem;
  font-size: 4.8rem;
  font-weight: 700;
}

.top-section .inner .copyright .sub {
  position: relative;
  max-width: 40rem;
  font-size: 2rem;
  font-weight: 500;
}

.top-section .inner .right {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
}

.info-number .tit {
  position: relative;
  display: inline-block;
  padding: 0.4rem 2rem 0.1rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  background: var(--color-primaryDark);
  border-radius: 1rem 1rem 0 0;
}

.info-number .tit::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  left: 0;
  bottom: -1.2rem;
  background: var(--color-primaryDark);
}

.info-number .info {
  padding: 1.2rem 2.4rem 1.1rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 0.6rem;
  border: 3px solid var(--color-primaryDark);
  border-radius: 1.2rem;
  background: #fff;
}

.info-number .info dl {
  flex-basis: calc(50% - 0.4rem);
  display: flex;
  align-items: center;
  gap: 2%;
}

.info-number .info dl dt {
  flex-basis: 48%;
  flex-shrink: 0;
  min-width: 10.2rem;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  line-height: 2.1rem;
  background: var(--color-primary);
  border-radius: 4rem;
}

.info-number .info dl dd {
  flex-grow: 1;
  font-weight: 500;
  font-family: "Roboto";
}

.info-number .info dl.sec dt {
  background: var(--color-secondary);
}

.info-number .info dl.sec dd {
  font-weight: 600;
}

.top-section .inner .banner {
  margin-top: 2rem;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  border-radius: 2rem;
}

.top-section .inner .banner .box {
  position: relative;
  flex-grow: 1;
  padding: 5.5%;
  background-color: var(--color-primary);
  background-image: url("../images/main/obj_banner2.png");
  background-repeat: no-repeat;
  background-size: 18rem;
  background-position: right bottom;
}

.top-section .inner .banner .box.dark {
  background-color: var(--color-primaryDark);
  background-image: url("../images/main/obj_banner1.png");
}

.top-section .inner .banner .box .tit {
  margin-bottom: 2rem;
  font-weight: 600;
  font-size: 2.2rem;
  color: #fff;
}

.top-section .inner .banner .box .tit span {
  position: relative;
}

.top-section .inner .banner .box .tit span::before {
  content: "";
  position: absolute;
  left: 0;
  right: -0.2rem;
  bottom: -0.2rem;
  height: 1rem;
  background: #53950d;
}

.top-section .inner .banner .box.dark span::before {
  background: #ffffff20;
}

.top-section .inner .banner .box .tit span i {
  position: relative;
}

.top-section .inner .banner .box a {
  display: block;
  padding: 0.7rem 0;
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  border: 1px solid #fff;
  border-radius: 5rem;
}

.top-section .inner .banner .box a:hover,
.top-section .inner .banner .box a:hover {
  color: var(--text-primary);
  background: #fff;
}

.top-section .inner .button {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display: flex;
  justify-content: space-between;
}

.top-section .inner .button a {
  display: block;
  padding: 2.4rem 0 2.2rem;
  flex-basis: 18%;
  text-align: center;
  background: #fff;
  border-radius: 2rem;
  box-shadow: var(--shadow1);
}

.top-section .inner .button a:hover,
.top-section .inner .button a:focus {
  color: #fff;
  background: var(--color-primary);
}

.top-section .inner .button a span {
  font-size: 1.7rem;
  font-weight: 600;
}

.top-section .inner .button a span::before {
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.7rem;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: left top;
}

.top-section .inner .button a.btn1 span::before {
  background-image: url("../images/main/ico_button1.svg");
}
.top-section .inner .button a.btn2 span::before {
  background-image: url("../images/main/ico_button2.svg");
}
.top-section .inner .button a.btn3 span::before {
  background-image: url("../images/main/ico_button3.svg");
}
.top-section .inner .button a.btn4 span::before {
  background-image: url("../images/main/ico_button4.svg");
}
.top-section .inner .button a.btn5 span::before {
  background-image: url("../images/main/ico_button5.svg");
}

.btm-section {
  margin-top: 7.6rem;
  padding-top: 6.6rem;
  display: flex;
  justify-content: space-between;
}

.btm-section .tit-wrap {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
}

.btm-section .tit-wrap a {
  width: 3.2rem;
  height: 3.2rem;
  background: url("../images/ico/ico_add_white.svg") no-repeat center
    var(--color-dark);
  background-size: 1.2rem;
  border-radius: 5rem;
}

.btm-section .left {
  width: 73.6%;
}

.btm-section .news .swiper .swiper-slide {
  border: 1px solid var(--border-light);
  border-radius: 1.5rem;
}

.btm-section .news .swiper .swiper-slide:hover,
.btm-section .news .swiper .swiper-slide:focus {
  border: 0;
  background: linear-gradient(135deg, #6fba2c, #f58220);
}

.btm-section .news .swiper .swiper-slide a {
  display: block;
  position: relative;
  padding: 9.5%;
}

.btm-section .news .swiper .swiper-slide a:hover,
.btm-section .news .swiper .swiper-slide a:focus {
  padding: calc(9.5% + 1px);
}

.btm-section .news .swiper .swiper-slide a:hover::before,
.btm-section .news .swiper .swiper-slide a:focus::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 1.2rem;
}

.btm-section .news .swiper .swiper-slide a .stitle3 {
  height: 6.6rem;
  overflow: hidden;
  position: relative;
  text-overflow: inherit;
  white-space: inherit;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: 500;
}

.btm-section .news .swiper .swiper-slide a .caption1 {
  height: 7.2rem;
  position: relative;
  margin: 2.4rem 0 5.6rem;
  overflow: hidden;
  text-overflow: inherit;
  white-space: inherit;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.btm-section .news .swiper .swiper-slide a .date {
  position: relative;
  font-size: 1.5rem;
  color: #888;
}

.btm-section .right {
  width: 24.3%;
}

.btm-section .quick-wrap a {
  display: block;
  position: relative;
  padding: 1.4rem 5.8%;
  font-weight: 500;
  border-radius: 1rem;
  border: 1px solid var(--border-light);
}

.btm-section .quick-wrap a + a {
  margin-top: 1.2rem;
}

.btm-section .quick-wrap a::before {
  content: "";
  width: 2.2rem;
  height: 2.2rem;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  background: url("../images/ico/ico_arr_right.svg") no-repeat left top;
  background-size: 100%;
}

.btm-section .quick-wrap a:hover,
.btm-section .quick-wrap a:focus {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
}

.btm-section .quick-wrap a:hover::before,
.btm-section .quick-wrap a:focus::before {
  filter: brightness(10);
}

.btm-section .quick-wrap a span {
  display: block;
}

.btm-section .quick-wrap a:hover span,
.btm-section .quick-wrap a:focus span {
  color: #fff;
}

.btm-section .quick-wrap a span i {
  width: 3.8rem;
  height: 3.8rem;
  position: relative;
  vertical-align: middle;
  display: inline-block;
  margin-right: 1.6rem;
  background-color: #fef3e9;
  border-radius: 50%;
}

.btm-section .quick-wrap a:hover span i,
.btm-section .quick-wrap a:focus span i {
  background-color: #ffffff10;
}

.btm-section .quick-wrap a span i::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: left top;
}

.btm-section .quick-wrap a:hover span i::before,
.btm-section .quick-wrap a:focus span i::before {
  filter: brightness(10);
}

.btm-section .quick-wrap a.quick1 span i::before {
  background-image: url("../images/main/ico_quick1.svg");
}
.btm-section .quick-wrap a.quick2 span i::before {
  background-image: url("../images/main/ico_quick2.svg");
}
.btm-section .quick-wrap a.quick3 span i::before {
  background-image: url("../images/main/ico_quick3.svg");
}
.btm-section .quick-wrap a.quick4 span i::before {
  background-image: url("../images/main/ico_quick4.svg");
}

@media screen and (max-width: 1200px) {
  .top-section .inner .copyright::before {
    width: 24rem;
    height: 19rem;
  }

  .btm-section .left {
    width: 67%;
  }

  .btm-section .right {
    width: 30%;
  }
}

/* tablet */
@media screen and (max-width: 1024px) {
  .top-section {
    padding-top: 9rem;
    background: url("../images/main/bg_visual_m.png") no-repeat center top;
    background-size: 100%;
  }

  .top-section::before {
    display: none;
  }

  .top-section::after {
    width: 45rem;
    height: 41rem;
    bottom: auto;
    right: -11rem;
    top: 5rem;
  }

  .top-section .inner {
    display: block;
    transform: none;
  }

  .top-section .inner .copyright {
    padding-bottom: 5rem;
  }

  .top-section .inner .right {
    margin-bottom: 4rem;
  }

  .top-section .inner .banner {
    display: block;
  }

  .top-section .inner .banner .box {
    padding: 2.4rem;
    background-size: 50%;
    background-position: right -1rem bottom;
  }

  .top-section .inner .banner .box {
    background-size: 20rem;
  }

  .top-section .inner .banner .box a {
    width: 60%;
    max-width: 20rem;
  }

  .btm-section {
    display: block;
    padding-top: 0;
    margin-top: 6rem;
  }

  .btm-section .left {
    width: 100%;
    margin-bottom: 6rem;
  }

  .btm-section .right {
    width: 100%;
  }

  .btm-section .quick-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 2%;
  }

  .btm-section .quick-wrap a {
    padding: 1.4rem 2rem;
    flex-basis: 49%;
  }

  .btm-section .quick-wrap a + a {
    margin-top: 0;
  }
}

/* mobile */
@media screen and (max-width: 768px) {
  main {
    padding-bottom: 3rem;
  }

  .top-section .inner .copyright {
    padding-bottom: 4rem;
  }

  .top-section .inner .copyright::before {
    width: 14.9rem;
    height: 14.2rem;
    bottom: 1rem;
    background-image: url("../images/main/obj_visual_m.png");
  }

  .top-section::after {
    width: 28rem;
    height: 25rem;
    right: -5rem;
  }

  .top-section .inner .copyright .title {
    padding-top: 0;
    margin-bottom: 1.2rem;
    font-size: 2.6rem;
  }

  .top-section .inner .copyright .sub {
    max-width: 17rem;
    font-size: 1.3rem;
  }

  .top-section .inner .right {
    margin-bottom: 2.4rem;
  }

  .top-section .inner .banner {
    margin-top: 0;
  }

  .top-section .inner .banner .box {
    padding: 2rem;
    background-size: 14.5rem;
  }

  .top-section .inner .banner .box .tit {
    margin-bottom: 1.2rem;
    font-size: 1.8rem;
  }

  .top-section .inner .banner .box a {
    width: 70%;
    max-width: 17.2rem;
    font-size: 1.3rem;
  }

  .top-section .inner .button {
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
  }

  .top-section .inner .button a {
    flex-basis: calc((100% - 2rem) / 3);
    padding: 1.2rem 1.5rem 1rem;
    border-radius: 1.5rem;
  }

  .top-section .inner .button a span {
    font-size: 1.3rem;
    word-break: break-all;
  }

  .top-section .inner .button a span::before {
    width: 2.1rem;
    height: 2.1rem;
    margin-bottom: 0.8rem;
  }

  .btm-section .right {
    margin-bottom: 6rem;
  }

  .btm-section .tit-wrap {
    justify-content: space-between;
    margin-bottom: 1.6rem;
  }

  .btm-section .tit-wrap a {
    width: 2.7rem;
    height: 2.7rem;
    background-size: 1rem;
  }

  .btm-section .news {
    margin: 0 -2rem;
  }

  .btm-section .news .swiper .swiper-slide a {
    padding: 2rem;
  }

  .btm-section .news .swiper .swiper-slide a:hover,
  .btm-section .news .swiper .swiper-slide a:focus {
    padding: 2.1rem;
  }

  .btm-section .news .swiper .swiper-slide a .stitle3 {
    height: 4.8rem;
    font-size: 1.6rem;
  }

  .btm-section .news .swiper .swiper-slide a .caption1 {
    height: 6rem;
    margin: 1.6rem 0 3rem;
  }

  .btm-section .news .swiper .swiper-slide a .date {
    font-size: 1.2rem;
  }

  .btm-section .quick-wrap {
    display: block;
  }

  .btm-section .quick-wrap a + a {
    margin-top: 1rem;
  }

  .btm-section .quick-wrap a {
    padding: 1.5rem 2rem;
  }

  .btm-section .quick-wrap a span {
    font-size: 1.6rem;
  }

  .btm-section .quick-wrap a span i {
    width: 3rem;
    height: 3rem;
  }

  .btm-section .quick-wrap a span i {
    margin-right: 0.8rem;
  }

  .info-number .tit {
    font-size: 1.3rem;
  }

  .info-number .info {
    padding: 1.5rem 1rem;
    row-gap: 1rem;
  }

  .info-number .info dl {
    display: block;
    text-align: center;
  }

  .info-number .info dl dt {
    width: 10.7rem;
    margin: 0 auto 0.4rem;
    font-size: 1.2rem;
  }
}