@charset "utf-8";

/*# cmn
=============================================== */
.pcmn_sec_ttl{
  font-size: 3.8rem;
  font-weight: 500;
  line-height: var(--lh-sub);
}
.pcmn_sec_ttl > *[lang="en"]{
  position: relative;
  display: block;
  margin-top: 10px;
  padding-left: 17px;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--main-color);
}
.pcmn_sec_ttl> *[lang="en"]::before{
  position:absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--main-color);
  border-radius: 50%;
}
@media screen and (max-width :834px){
  .pcmn_sec_ttl{
    font-size: 2.7rem;
  }
  .pcmn_sec_ttl > *[lang="en"]{
    margin-top: 3px;
    padding-left: 13px;
    font-size: 1.4rem;
  }
}

/*sec_blog----------------------------------*/
.sec_blog{
  position: relative;
  padding: 86px 0 96px;
  overflow: hidden;
}
.sec_blog>*{
  position: relative;
  z-index: 2;
}
.sec_blog::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--bg-glay);
  z-index: 0;
}
.sec_blog .area_splide{
  margin-top: 64px;
  z-index: 3;
  margin-left: 50px;
  padding-left: calc(calc(100vw - 1380px) / 2);
}
.area_splide .splide__track{
  padding-bottom: 4px;
  overflow: visible;
}
.area_splide.is-slide .splide__slide.is-prev{
  opacity: 1;
}
.area_splide .splide__slide.is-prev{
  opacity: 0;
}
.area_splide .area_control{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 64px;
  padding-right:calc(calc(100vw - 1380px) / 2);
}
.area_splide .splide-controller{
  flex:1;
  align-items: center;
  height: 48px;
  margin-right: 88px;
}
.area_splide .splide__arrow{
  width: 48px;
  height: 48px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.area_splide .splide__arrow.splide__arrow--prev{
  transform: scale(-1, 1);
}
.area_splide .carousel-progress{
  flex: 1;
  margin: 0 20px;
  height: 1px;
  background: #bac7e6;
}
.area_splide .carousel-progress_bar{
  background: #fff;
  height: 1px;
  transition: width 1000ms ease;
  width: 0;
}
.sec_blog .cmn_menu_index > li .box_img > .thumb {
  padding-top: 56%;
}
.sec_blog .cmn_menu_index > li .box_text .ttl{
  margin-top: 10px;
  padding-right: 0;
  line-height: 1.684;
}
.sec_blog .cmn_menu_index > li .box_text .cmn_cate{
  margin-bottom: 0;
}
.sec_blog .carousel-progress{
  background: #d0d0d0;
}
.sec_blog .carousel-progress_bar{
  background:var(--main-color);
}
@media screen and (max-width :834px){
  .sec_blog{
    padding:56px 0 64px;
  }
  .sec_blog::after{
    width:55.5%;
    max-width: 433px;
    aspect-ratio: 433 / 664;
  }
  .sec_blog .area_splide{
    margin-top: 35px;
    margin-left: 5.2vw;
    padding-right: 0;
  }
  .area_splide .area_control{
    margin-top: 40px;
    padding-right:0;
  }
  .area_splide .splide-controller{
    height: 40px;
    margin-right: 32px;
  }
  .area_splide .splide__arrow{
    width: 40px;
    height: 40px;
  }
  .area_splide .carousel-progress{
    margin: 0 12px;
  }
  .sec_blog .cmn_menu_index > li .box_text .ttl{
    line-height: 1.4;
  }
}

/*sec_service----------------------------------*/
.sec_service {
  position: relative;
}

.sec_service::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.1;
  background-image: -moz-linear-gradient(-30deg, rgba(40, 81, 174, 0.99608) 0%, rgb(86, 119, 195) 65%, rgb(131, 157, 215) 100%);
  background-image: -webkit-linear-gradient(-30deg, rgba(40, 81, 174, 0.99608) 0%, rgb(86, 119, 195) 65%, rgb(131, 157, 215) 100%);
  background-image: -ms-linear-gradient(-30deg, rgba(40, 81, 174, 0.99608) 0%, rgb(86, 119, 195) 65%, rgb(131, 157, 215) 100%);
}

.sec_service h2 {
  margin-bottom: 30px;
  text-align: center;
  font-weight: 500;
  font-size: 2.4rem;
  list-style: var(--lh-sub);
}

@media (min-width :1025px) {
  .sec_service .wrap_inner {
    padding: 54px 0 64px;
    position: relative;
    width: 100%;
    z-index: 1;
  }
}

@media (max-width :1024px) {
  .sec_service h2 {
    margin-bottom: 20px;
    font-size: 1.9rem;
  }

  .sec_service .wrap_inner {
    padding: 30px 0 40px;
  }

  .sec_service .cmn_btn>* {
    width: 100%;
  }
}