@charset "UTF-8";

/*
========================================

	/common/css/top.css
 
========================================
*/

body.sitetop {
  background: #fff;
}

/*hero image title*/

section#hero {
  background: #fff;
  padding: 32px 0;
}

section#hero h1 {
  font-weight: 700;
  font-size: clamp(2.25rem, 1.909rem + 1.7vw, 3rem); /*-----36px-48px 320px-1024px*/
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.75) !important;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
  -webkit-text-stroke: 1px #333 !important;
  line-height: 1.35;
  padding: 1rem 1.25rem 1.25rem 1.25rem;
}

section#hero p.copy {
  font-size: clamp(0.813rem, 0.756rem + 0.28vw, 0.938rem); /*-----13px-15px 320px-1024px*/
  padding: 0 1.5rem 2rem 1.5rem;
}

@media (min-width: 1024px) {
  section#hero {
    padding: 16px 0 52px 0;
  }

  section#hero h1 {
    font-weight: 700;
    font-size: clamp(3rem, 0.714rem + 3.57vw, 5rem); /*-----48px-80px 1024px-1920px*/
    text-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
    padding-top: 3rem;
  }

  section#hero p.copy {
    font-size: clamp(0.938rem, 0.438rem + 0.78vw, 1.375rem); /*-----15px-22px 1024px-1920px*/
    /*padding-bottom: 32vh;*/
    padding-bottom: 22vh;
  }

  .hero_title_box {
    position: relative;
    height: 64vh;
  }

  .hero_title {
    position: absolute;
    top: 0;
    left: 12.5%; /*=left-1/8*/
    width: 38%; /* 微調整　w-3/8 = 37.5%*/
    margin-left: -3px; /* 微調整*/
    height: 64vh;
    background: rgba(153, 204, 255, 0.5) url(/common/cmn_img/bg_h1.svg) no-repeat;
    /*background-position:bottom -32px center;*/
    background-position: center;
    background-size: cover;
    z-index: 10;
  }

  .hero_title div.cut_bg {
    height: 100%;
    overflow: hidden;
  }

  .carousel_box {
    position: absolute;
    width: 100%;
  }
}

@media (min-width: 1440px) {
  section#hero h1 {
    padding: 1rem 1.5rem 1.25rem 1.5rem;
  }

  section#hero p.copy {
    padding-bottom: 15vh;
  }
}

@media (min-width: 1536px) {
  section#hero h1 {
    padding: 1rem 1.5rem 1.25rem 1.5rem;
  }

  section#hero p.copy {
    padding-left: 2rem;
    padding-right: 2rem;
    /*padding-bottom: 27.5vh;
    padding-bottom: 20vh;*/
    padding-bottom: 12vh;
  }
}

@media (min-width: 1920px) {
  section#hero h1 {
    padding: 1rem 2.25rem;
  }

  section#hero p.copy {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/*
========================================

	/splide/css/top_splide.css
 
========================================
*/

.splide__track {
  background: #f5f7fb;
}

@media (min-width: 1024px) {
  .splide__track {
    background: #fff;
  }
}

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.splide__slide img.cut {
  /*
  左上と右下をカット
  --cut: 40px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  -webkit-clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  */
  /*transition: clip-path 0.3s ease;*/
  --x: 80px;
  --y: 44px;
  clip-path: polygon(var(--x) 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 var(--y));
  -webkit-clip-path: polygon(var(--x) 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 var(--y));
}

@media (min-width: 1024px) {
  .splide__slide img.cut {
    --x: 120px;
    --y: 70px;
  }
}

.splide__slide a img {
  opacity: 1;
  filter: brightness(1) saturate(0.9);
}

.splide__slide {
  overflow: hidden;
}

.splide__slide.is-active img {
  opacity: 1 !important;
}

.splide__slide a:hover img {
  /*opacity: 1 !important;*/
  filter: brightness(1.1) saturate(1.1);
  clip-path: inset(0);
  /*clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 0);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 0);*/
  transform: scale(1.1);
}

.splideBox {
  display: block;
  position: relative;
  height: 100%;
}

.splideBox div.inner_splideBox {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 99;

  display: flex;
  flex-direction: column;
  /*justify-content: flex-end;*/
  justify-content: space-between;
  /*align-items: center;*/
}

a.splideBox div.inner_splideBox div.tag p {
  display: inline-flex;
  padding: 0.25rem 1.5rem;
  color: #fff;
  background-image: linear-gradient(90deg, rgba(12, 25, 102, 0.6) 0%, rgba(12, 25, 102, 0.5) 50%, rgba(12, 25, 102, 0.1) 100%); /*#0c1966 --deep_blue*/
  font-weight: 700;
  font-size: clamp(0.625rem, 0.511rem + 0.57vw, 0.875rem); /*10px-14px in 320px-1024px*/
}

a.splideBox div.inner_splideBox div.tag.company p {
  background-image: linear-gradient(90deg, rgba(12, 25, 102, 0.8) 0%, rgba(12, 25, 102, 0.6) 50%, rgba(12, 25, 102, 0.1) 100%); /*#0c1966 --deep_blue*/
}

a.splideBox div.inner_splideBox div.tag.business p {
  background-image: linear-gradient(90deg, rgba(63, 91, 217, 0.7) 0%, rgba(63, 91, 217, 0.5) 50%, rgba(63, 91, 217, 0.1) 100%);
}

a.splideBox div.inner_splideBox div.tag.case p {
  background-image: linear-gradient(90deg, rgba(151, 149, 240, 0.8) 0%, rgba(151, 149, 240, 0.6) 50%, rgba(151, 149, 240, 0.1) 100%);
}

a.splideBox:hover div.inner_splideBox {
  background: rgba(12, 25, 102, 0.5); /*#0c1966 --deep_blue*/
}

a.splideBox div.inner_splideBox div.title {
  width: 100%;
  min-height: 40%;
  /*background: rgba(0, 0, 0, 0.4);*/
  background-image: linear-gradient(to top, rgba(12, 25, 102, 0.5) 0%, rgba(12, 25, 102, 0) 100%); /*#0c1966 --deep_blue*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

a.splideBox div.inner_splideBox div.title p {
  width: fit-content;
  height: fit-content;
  padding: 0.5rem 1rem;
  color: #fff;
  font-weight: 700;
  /*font-size: clamp(0.625rem, 0.455rem + 0.85vw, 1rem);10px-16px in 320px-1024px*/
  font-size: clamp(0.625rem, 0.511rem + 0.57vw, 0.875rem); /*10px-14px in 320px-1024px*/
  line-height: 1.5;
}

.splideBox div.inner_splideBox div.info {
  visibility: hidden;
}

.splideBox div.inner_splideBox div.info div.central {
  display: none;
}

.splideBox div.inner_splideBox img.logo {
  height: auto;
  width: 90%;
  max-height: 32px;
  /*max-height: 48px;*/
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: bottom;
  object-position: bottom;
  overflow: hidden;
  margin: 0.5rem auto;
  /*border: 1px solid #c33;ガイド*/
}

@media (min-width: 1024px) {
  a.splideBox div.inner_splideBox div.title {
    min-height: fit-content;
  }

  a.splideBox div.inner_splideBox div.title p {
    padding: 0.75rem 1rem;
    /*font-size: clamp(1rem, 0.857rem + 0.22vw, 1.125rem); -----16px-18px 1024px-1920px*/
    /*font-size: clamp(0.875rem, 0.589rem + 0.45vw, 1.125rem); -----14px-18px 1024px-1920px*/
    font-size: clamp(0.75rem, -0.107rem + 1.34vw, 1.5rem); /*-----12px-24px 1024px-1920px*/
  }

  .splideBox:hover div.inner_splideBox div.info {
    display: block;
    visibility: visible;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .splideBox div.inner_splideBox div.info div.central {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 92%;
    height: 100%;
    max-width: 520px;
    margin: auto;
  }

  .splideBox div.inner_splideBox div.info div.central p.text {
    width: fit-content;
    color: #fff;
    /*font-size: clamp(0.75rem, 0.607rem + 0.22vw, 0.875rem); -----12px-14px 1024px-1920px*/
    font-size: clamp(0.75rem, 0.321rem + 0.67vw, 1.125rem); /*-----12px-18px 1024px-1920px*/
  }

  .splideBox div.inner_splideBox img.logo {
    height: auto;
    width: 90%;
    /*max-height: 32px;
    max-height: 48px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: bottom;
    object-position: bottom;
    overflow: hidden;
    margin: 8px auto;*/
  }

  a.splideBox:hover div.inner_splideBox img.logo {
    filter: brightness(200%);
  }
}

@media (min-width: 1536px) {
  .splideBox div.inner_splideBox div.info div.central {
    width: 90%;
    height: 100%;
    max-width: 520px;
    margin: auto;
    /*border: 1px solid #fc3;ガイド*/
  }

  .splideBox div.inner_splideBox img.logo {
    height: auto;
    width: 75%;
    max-height: 54px;
    /*max-height: 36px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: bottom;
    object-position: bottom;
    overflow: hidden;*/
    /*margin:24px auto 0 auto;
    margin: 12px auto;*/
  }
}

@media (min-width: 1920px) {
  a.splideBox div.inner_splideBox div.title p {
    padding: 1rem;
  }

  .splideBox div.inner_splideBox div.info div.central {
    max-width: 560px;
  }

  .splideBox div.inner_splideBox img.logo {
    max-height: 54px;
    margin: 1rem auto;
  }
}

/*splide.css */
/* Add numbers to pagination buttons by CSS */

.splide__arrow {
  /*splide_min.css*/
  background: #000 !important;
}
.splide__arrow svg {
  fill: #fff !important;
}

.object-right-bottom {
  -o-object-position: right bottom;
  object-position: right bottom;
}

body.sitetop h2 {
  /*News*/
  /*letter-spacing: -0.05em;*/
  font-size: clamp(2rem, 1.6rem + 2vw, 4rem);
}

/*----------------------
  news (top only)
----------------------*/

.news_card img.news_img,
.news_card span.badge.badge-tag.company {
  display: none;
}

.news_card p.text {
  padding-top: 0;
  padding-bottom: 0;
}

.badge-new {
  margin-top: 2px;
}

@media (min-width: 768px) {
  .news_card .badge_box {
    padding-top: 0;
    padding-bottom: 0;
  }
}