@charset "UTF-8";
/* CSS Document */
/*---------------------------------

  mainvisual

---------------------------------*/
#mainvisual {
  background: var(--col-bg02);
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#mainvisual .slide-media, #mainvisual .thumb-media {
  position: relative;
  overflow: hidden;
}
#mainvisual .slide-media img, #mainvisual .thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*----- メイン */
#mainvisual .splide {
  z-index: 0;
  width: 96%;
  padding: 18rem 0 0;
}
#mainvisual .splide {
  overflow: visible;
}
#mainvisual .splide * {
  height: 100%;
}
#mainvisual .splide-wrapper {
  height: calc(100vh - 18rem);
}
#mainvisual .slide {
  display: block;
  overflow: hidden;
  position: relative;
}
#mainvisual .slide-media {
  display: block;
}
#mainvisual .slide-media img {
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
#mainvisual .slide-title * {
  height: auto;
}
#mainvisual .slide-title {
  color: #fff;
  font-weight: bold;
  line-height: 1.6;
  padding: 3.2rem 0;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5%;
  height: fit-content;
}
#mainvisual .slide-title ._ttl {
  font-size: 8rem;
  line-height: 1.3;
  margin-bottom: 3rem;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
}
#mainvisual .slide-title ._txt {
  font-size: 4rem;
  text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
}
#mainvisual .slide-title ._ttl + ._txt {
  font-size: 3rem;
}
#mainvisual .slide-title ._txt._txt_bg {
  background: rgba(0, 0, 0, 0.5);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 10%, rgba(0, 0, 0, .5) 90%, rgba(0, 0, 0, 0) 100%);
  padding: 3rem 6rem;
  transform: translateX(-6rem);
}
#mainvisual .slide-title .btn {
  margin: 5rem 0 0;
}
#mainvisual .slide-title .btn a {
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5);
}
/*----- サムネイル */
#mainvisual .thumb-wrapper, #mainvisual .thumb-wrapper * {
  -webkit-transition: all .3s;
  transition: all .3s;
}
#mainvisual .thumb-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 16rem);
  grid-template-rows: repeat(3, 16rem);
  position: absolute;
  top: 23rem;
  right: 5%;
  z-index: 10;
}
#mainvisual .thumb-media {
  border-radius: 50%;
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.2);
  width: 21rem;
  height: 21rem;
}
#mainvisual .thumb-media a {
  display: block;
}
#mainvisual .thumb-media svg {
  width: 100%;
  vertical-align: bottom;
}
#mainvisual .thumb-media .cls-1 {
  fill: #fff;
}
#mainvisual .thumb-media .cls-2 {
  fill: #394f6d;
}
#mainvisual .thumb-media.is-active a .cls-1, #mainvisual .thumb-media a:hover .cls-1 {
  fill: #394f6d;
}
#mainvisual .thumb-media.is-active a .cls-2, #mainvisual .thumb-media a:hover .cls-2 {
  fill: #fff;
}
#mainvisual .thumb-media._first {
  display: none;
}
#mainvisual .thumb-media._position-center {
  border: 1px solid #fff;
  display: block;
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#mainvisual .thumb-media._position-top {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}
#mainvisual .thumb-media._position-left {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
#mainvisual .thumb-media._position-right {
  grid-row: 2 / 3;
  grid-column: 3/4;
}
#mainvisual .thumb-media._position-bottom {
  grid-row: 3 / 4;
  grid-column: 2/3;
}
@media (max-width: 1440px) and (max-height: 700px), (max-height: 800px) {
  #mainvisual {
    height: 110vh;
  }
  #mainvisual .splide-wrapper {
    height: calc(110vh - 18rem);
  }
  #mainvisual .thumb-wrapper {
    grid-template-columns: repeat(3, 13rem);
    grid-template-rows: repeat(3, 13rem);
    top: 20rem;
  }
  #mainvisual .thumb-media {
    width: 17rem;
    height: 17rem;
  }
  #mainvisual .slide-title ._ttl {
    font-size: 6.2rem;
  }
  #mainvisual .slide-title ._txt {
    font-size: 3.5rem;
  }
  #mainvisual .slide-title ._ttl + ._txt {
    font-size: 2.5rem;
  }
}
@media (max-width: 1280px) and (max-height: 800px) , (max-width: 1280px) {
  #mainvisual {
    height: 110vh;
  }
  #mainvisual .splide-wrapper {
    height: calc(110vh - 18rem);
  }
  #mainvisual .thumb-wrapper {
    grid-template-columns: repeat(3, 15rem);
    grid-template-rows: repeat(3, 15rem);
  }
  #mainvisual .thumb-media {
    width: 19rem;
    height: 19rem;
  }
  #mainvisual .slide-title ._ttl {
    font-size: 6.2rem;
  }
  #mainvisual .slide-title ._txt {
    font-size: 3.5rem;
  }
  #mainvisual .slide-title ._ttl + ._txt {
    font-size: 2.5rem;
  }
}
@media (max-width: 1024px) and (max-height: 1365px) {
  #mainvisual {
    height: 80vh;
  }
  #mainvisual .splide {
    padding: 15rem 0 0;
  }
  #mainvisual .splide-wrapper {
    height: calc(80vh - 15rem);
  }
  #mainvisual .thumb-wrapper {
    grid-template-columns: repeat(3, 13rem);
    grid-template-rows: repeat(3, 13rem);
    top: 18rem;
  }
  #mainvisual .thumb-media {
    width: 17rem;
    height: 17rem;
  }
  #mainvisual .slide-title {
    top: auto;
    bottom: 10%;
  }
  #mainvisual .slide-title ._ttl {
    font-size: 6rem;
    margin-bottom: 2rem;
  }
  #mainvisual .slide-title ._txt {
    font-size: 3.2rem;
  }
  #mainvisual .slide-title ._ttl + ._txt {
    font-size: 2.2rem;
  }
}
@media (max-width: 1024px) and (max-height: 815px), (max-height: 695px) {
  #mainvisual {
    height: 100vh;
  }
  #mainvisual .splide-wrapper {
    height: calc(100vh - 15rem);
  }
  #mainvisual .slide-title {
    top: 0;
    bottom: 0;
  }
  #mainvisual .slide-title ._ttl {
    font-size: 6rem;
    margin-bottom: 2rem;
  }
  #mainvisual .slide-title ._txt {
    font-size: 3.2rem;
  }
  #mainvisual .slide-title ._ttl + ._txt {
    font-size: 2.2rem;
  }
  #mainvisual .thumb-wrapper {
    grid-template-columns: repeat(3, 12rem);
    grid-template-rows: repeat(3, 12rem);
  }
  #mainvisual .thumb-media {
    width: 15rem;
    height: 15rem;
  }
}
@media screen and (max-width: 900px) {
  #mainvisual {
    height: 80vh;
  }
  #mainvisual .splide {
    padding: 10rem 0 0;
  }
  #mainvisual .splide-wrapper {
    height: calc(80vh - 10rem);
  }
  #mainvisual .slide-title {
    top: auto;
    bottom: 5rem;
  }
  #mainvisual .slide-title ._ttl {
    font-size: 5rem;
  }
  #mainvisual .slide-title ._txt {
    font-size: 2.3rem;
  }
  #mainvisual .slide-title ._ttl + ._txt {
    font-size: 2rem;
  }
  #mainvisual .slide-title .btn {
    margin: 3rem 0 0;
  }
  #mainvisual .thumb-wrapper {
    grid-template-columns: repeat(3, 12rem);
    grid-template-rows: repeat(3, 12rem);
    top: 18rem;
  }
  #mainvisual .thumb-media {
    width: 15rem;
    height: 15rem;
  }
  /*#mainvisual .thumb-wrapper {
    grid-template-columns: repeat(3, 10rem);
    grid-template-rows: repeat(3, 10rem);
    top: 9rem;
    right: 6%;
  }
  #mainvisual .thumb-media {
    width: 13rem;
    height: 13rem;
  }*/
}
@media (max-width: 900px) and (max-height: 750px) {
  #mainvisual .thumb-wrapper {
    grid-template-columns: repeat(3, 10rem);
    grid-template-rows: repeat(3, 10rem);
    top: 15rem;
  }
  #mainvisual .thumb-media {
    width: 13rem;
    height: 13rem;
  }
}
@media (max-width: 900px) and (max-height: 605px) {
  #mainvisual .thumb-wrapper {
    top: 12rem;
  }
}
@media screen and (max-width: 480px) {
  #mainvisual {
    height: 80vh;
  }
  #mainvisual .splide {
    padding: 15rem 0 0;
    width: 100%;
  }
  #mainvisual .splide-wrapper {
    height: calc(80vh - 12rem);
  }
  #mainvisual .slide-title ._ttl {
    font-size: 3rem;
  }
  #mainvisual .slide-title ._txt {
    font-size: 2rem;
  }
  #mainvisual .slide-title ._ttl + ._txt {
    font-size: 1.6rem;
  }
  #mainvisual .thumb-wrapper {
    display: flex;
    justify-content: center;
    column-gap: .7rem;
    top: 11rem;
    right: 0;
    left: 0;
    margin: auto;
    width: 90%;
  }
  #mainvisual .thumb-media {
    width: calc(100%/4);
    height: auto;
  }
  #mainvisual .thumb-media._position-center {
    display: none;
  }
}
/*---------------------------------
  pickup
---------------------------------*/
#PickUp {
  margin: auto;
  margin-top: -6rem;
  max-width: 120rem;
  width: 90%;
}
#PickUp .splide {
  padding: 0 7rem;
}
#PickUp .splide .splide__slide .item {
  background: #fff;
  padding: .5rem;
}
#PickUp .splide .splide__slide a {
  aspect-ratio: 4/2;
  display: block;
  overflow: hidden;
}
#PickUp .splide .splide__slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  -webkit-transition: all .3s;
  transition: all .3s;
}
#PickUp .splide .splide__slide a:hover img {
  transform: scale(1.1);
}
#PickUp .splide .splide__arrows {}
#PickUp .splide .splide__arrows .splide__arrow {
  background-color: #fff;
  background-position: center;
  background-size: contain;
  border: 1px solid var(--col-main);
  cursor: pointer;
  margin: auto;
  padding: 0;
  vertical-align: bottom;
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 0;
  bottom: 0;
}
#PickUp .splide .splide__arrows .splide__arrow svg {
  display: none;
}
#PickUp .splide .splide__arrows .splide__arrow.splide__arrow--prev {
  background-image: url("../images/s_arr_prev.svg");
  left: 0;
}
#PickUp .splide .splide__arrows .splide__arrow.splide__arrow--next {
  background-image: url("../images/s_arr_next.svg");
  right: 0;
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {
  #PickUp {
    margin-top: -3rem;
  }
  #PickUp .splide {
    padding: 0 5rem;
  }
  #PickUp .splide .splide__arrows .splide__arrow {
    width: 4rem;
    height: 4rem;
  }
}
@media screen and (max-width: 480px) {
  #PickUp .splide {
    padding: 0 4rem;
  }
  #PickUp .splide .splide__arrows .splide__arrow {
    width: 3rem;
    height: 3rem;
  }
}
/*---------------------------------

  共通

---------------------------------*/
section {
  padding: 12rem 0;
}
.l-inner {
  margin: auto;
  max-width: 120rem;
  width: 90%;
}
.title {
  margin-bottom: 3rem;
}
.title ._en {
  color: var(--col-sub02);
  font-family: var(--en);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: 1.5rem;
}
.title h2 {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
}
.title h2 span {
  display: inline-block;
}
@media screen and (max-width: 1024px) {
  section {
    padding: 10rem 0;
  }
  .title h2 {
    font-size: 3.5rem;
  }
}
@media screen and (max-width: 896px) {
  .title ._en {
    font-size: 1.4rem;
  }
  .title h2 {
    font-size: 2.8rem;
  }
}
@media screen and (max-width: 480px) {
  section {
    padding: 6rem 0;
  }
  .title {
    margin-bottom: 2rem;
  }
  .title ._en {
    font-size: 1.3rem;
  }
  .title h2 {
    font-size: 2.3rem;
  }
}
/*---------------------------------

  射出成形で世界の医療を支える

---------------------------------*/
.aboutBlock {
  margin-top: 10rem;
  position: relative;
}
.aboutBlock::after {
  background: linear-gradient(0deg, #D7E7F1 0%, #87B6D7 100%);
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 60%, 50% 100%, 0 60%);
  clip-path: polygon(0 0, 100% 0%, 100% 60%, 50% 100%, 0 60%);
  content: '';
  opacity: .5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 10rem);
  width: 100%;
  z-index: -1;
}
.aboutBlock .l-inner {
  max-width: none;
}
.aboutBlock .ttlBox {
  text-align: center;
  margin-bottom: 7rem;
}
.aboutBlock .title {}
.aboutBlock .wrap {
  border-top: 1px solid #8899b0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.aboutBlock .wrap .itemBox {
  border-bottom: 1px solid #8899b0;
  position: relative;
}
.aboutBlock .wrap .itemBox:nth-child(even)::before {
  background: #8899b0;
  content: '';
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  height: calc(100% - 5rem);
}
.aboutBlock .wrap .itemBox a {
  color: var(--col-main);
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding: 5rem;
}
.aboutBlock .wrap .itemBox a * {
  transition: all .3s;
}
.aboutBlock .wrap .itemBox ._txt {}
.aboutBlock .wrap .itemBox ._txt dt {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--en);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 2.6rem;
}
.aboutBlock .wrap .itemBox ._txt dt span {
  display: block;
  font-size: 5.0rem;
  font-weight: 500;
}
.aboutBlock .wrap .itemBox ._txt dd .__ttl {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: 1rem;
}
.aboutBlock .wrap .itemBox ._txt dd .__txt {
  text-align: justify;
}
.aboutBlock .wrap .itemBox ._img {
  flex: 0 0 26rem;
}
.aboutBlock .wrap .itemBox ._img figure {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.aboutBlock .wrap .itemBox ._img figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
}
.aboutBlock .wrap .itemBox ._img::after {
  background: url("../images/arr_b.svg") no-repeat center right/1.5rem;
  content: 'View More';
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 2px;
  margin-top: 1rem;
  padding-right: 2.5rem;
  text-align: right;
  transition: all .3s;
}
.aboutBlock .wrap .itemBox a:hover ._img figure img {
  transform: scale(1.1);
}
.aboutBlock .wrap .itemBox a:hover ._img::after {
  letter-spacing: 4px;
}
.aboutBlock .btn {
  margin-top: 7rem;
}
@media screen and (max-width: 1440px) {
  .aboutBlock::after {
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 80%, 50% 100%, 0 80%);
    clip-path: polygon(0 0, 100% 0%, 100% 80%, 50% 100%, 0 80%);
    height: calc(100% - 8rem);
  }
}
@media screen and (max-width: 1350px) {
  .aboutBlock::after {
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 50% 100%, 0 70%);
    clip-path: polygon(0 0, 100% 0%, 100% 70%, 50% 100%, 0 70%);
  }
  .aboutBlock .wrap .itemBox a {
    flex-direction: column;
    gap: 2rem;
    padding: 3rem;
  }
}
@media screen and (max-width: 1280px) {
  .aboutBlock::after {
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
  }
}
@media screen and (max-width: 995px) {
  .aboutBlock .ttlBox ._txt br {
    display: none;
  }
}
@media screen and (max-width: 896px) {
  .aboutBlock {
    margin-top: 6rem;
  }
  .aboutBlock .wrap .itemBox ._txt dt {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1em;
  }
  .aboutBlock .wrap .itemBox ._txt dt span {
    font-size: 3.5rem;
  }
  .aboutBlock .wrap .itemBox ._txt dd .__ttl {
    font-size: 1.2em;
    line-height: 1.4;
  }
  .aboutBlock .wrap .itemBox ._txt dd .__txt {}
}
@media screen and (max-width: 480px) {
  .aboutBlock::after {
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    height: calc(100% - 3rem);
  }
  .aboutBlock .ttlBox {
    margin-bottom: 3rem;
  }
  .aboutBlock .wrap {
    display: block;
  }
  .aboutBlock .wrap .itemBox:nth-child(even)::before {
    content: none;
  }
  .aboutBlock .wrap .itemBox a {
    padding: 2rem;
  }
  .aboutBlock .wrap .itemBox ._txt dt span {
    font-size: 2.8rem;
  }
}
/*---------------------------------

  製品事例

---------------------------------*/
.caseBlock {
  position: relative;
  padding-bottom: 0;
}
.caseBlock::after {
  background: var(--col-bg02);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 25rem);
  width: 100%;
  z-index: -1;
}
.caseBlock .ttlBox {
  text-align: center;
  margin-bottom: 5rem;
}
.caseBlock .ttlBox p._txt {
  border-bottom: 1px solid;
  font-size: 1.2em;
  font-weight: 500;
  max-width: fit-content;
  margin: auto;
}
.caseBlock .txtBox ._menu {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin: 3rem auto;
}
.caseBlock .txtBox ._menu li {
  flex-basis: 33rem;
}
.caseBlock .txtBox ._menu li a {
  background: linear-gradient(0deg, #61636d 0%, #394f6d 100%);
  border-radius: 5rem;
  color: #fff;
  display: block;
  font-size: 1.2em;
  padding: 1.7rem 1rem;
  text-align: center;
}
.caseBlock .txtBox ._menu li a span {
  background: url("../images/arr_w.svg") no-repeat center right 2rem/2rem;
  display: block;
  font-size: 1em;
  font-weight: 500;
  z-index: 1;
  transition: all .3s;
}
.caseBlock .txtBox ._menu li a:hover {
  box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-1rem);
}
.caseBlock .txtBox ._menu li a:hover span {
  background-position: center right 1.5rem;
}
/* スライダー */
.caseBlock .slider {
  margin: 7rem 0;
}
.caseBlock .slider .splide-b {
  margin-top: 3rem;
}
.caseBlock .slider .splide__slide {}
.caseBlock .slider .splide__slide a {
  background: var(--col-sub01);
  border-radius: 1rem;
  color: var(--col-main);
  display: block;
  height: 100%;
  padding: 3rem 5rem;
  position: relative;
  overflow: hidden;
}
.caseBlock .slider .splide__slide a figure {
  aspect-ratio: 160 / 120;
  overflow: hidden;
}
.caseBlock .slider .splide__slide a figure img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  vertical-align: bottom;
  transition: all .3s;
}
.caseBlock .slider .splide__slide a p {
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.4;
  margin-top: 2rem;
  text-align: left;
}
.caseBlock .slider .splide__slide a::after {
  background: var(--col-bg01);
  content: '';
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3rem;
  height: 3rem;
}
.caseBlock .slider .splide__slide a:hover figure img {
  transform: scale(1.1);
}
/* 矢印 */
.caseBlock .slider .splide__arrows {
  display: flex;
  justify-content: center;
  margin-bottom: 4rem;
}
.caseBlock .slider .splide__arrows .splide__arrow {
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  padding: 0;
  vertical-align: bottom;
  width: 10rem;
  height: 3rem;
}
.caseBlock .slider .splide__arrows .splide__arrow::before {
  color: var(--col-main);
  display: block;
  font-family: initial;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
}
.caseBlock .slider .splide__arrows .splide__arrow svg {
  display: none;
}
.caseBlock .slider .splide__arrows .splide__arrow.splide__arrow--prev {
  background-image: url("../images/s_arr_prev.svg");
  background-position: center left;
  text-align: left;
}
.caseBlock .slider .splide__arrows .splide__arrow.splide__arrow--prev::before {
  content: 'prev';
  padding-left: 4rem;
}
.caseBlock .slider .splide__arrows .splide__arrow.splide__arrow--next {
  border-left: 1px solid #b3b3b3;
  background-image: url("../images/s_arr_next.svg");
  background-position: center right;
  text-align: right;
}
.caseBlock .slider .splide__arrows .splide__arrow.splide__arrow--next::before {
  content: 'next';
  padding-right: 4rem;
}
/* ボタン */
.caseBlock .slider + .btn {}
@media screen and (max-width: 1440px) {
  .caseBlock .slider .splide__slide a {
    padding: 2rem 3rem;
  }
}
@media screen and (max-width: 896px) {
  .caseBlock .txtBox ._menu {
    gap: 1rem;
  }
  .caseBlock .txtBox ._menu li a span {
    background-size: 1.5rem;
    background-position: center right 1rem;
  }
  .caseBlock .txtBox ._menu li a:hover span {
    background-position: center right .5rem;
  }
  .caseBlock .slider {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 480px) {
  .caseBlock .ttlBox {
    margin-bottom: 3rem;
  }
  .caseBlock .ttlBox p._txt {
    display: inline;
  }
  .caseBlock .txtBox ._menu {
    flex-wrap: wrap;
  }
  .caseBlock .txtBox ._menu li {
    flex-basis: calc(100%/2 - .5rem);
    margin: 0 0;
  }
  .caseBlock .txtBox ._menu li a {
    font-size: 1em;
  }
  .caseBlock .txtBox ._menu li a span {
    padding-right: 2rem;
  }
  .caseBlock .slider {
    margin: 4rem 0;
  }
  .caseBlock .slider .splide-b {
    margin-top: 1.5rem;
  }
  .caseBlock .slider .splide__slide a {
    padding: 1.5rem;
  }
  .caseBlock .slider .splide__slide a p {
    font-size: 1em;
    margin-top: .8rem;
    text-align: left;
  }
}
/*---------------------------------

  当社だからこそできること

---------------------------------*/
.serviceBlock {}
.serviceBlock .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5rem 7rem;
}
.serviceBlock .wrap .ttlBox {}
.serviceBlock .wrap .ttlBox h2 span {
  display: block;
  margin-bottom: 1rem;
}
.serviceBlock .wrap .itemBox {}
.serviceBlock .wrap .itemBox a {
  color: var(--col-main);
  display: block;
}
.serviceBlock .wrap .itemBox figure {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.serviceBlock .wrap .itemBox figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  transition: all .3s;
}
.serviceBlock .wrap .itemBox dl {
  margin-top: 1rem;
}
.serviceBlock .wrap .itemBox dl dt {
  font-size: 1.3em;
  font-weight: 800;
  min-height: 3.2em;
}
.serviceBlock .wrap .itemBox dl dd {
  font-size: .95em;
  margin-top: .5rem;
}
.serviceBlock .wrap .itemBox a:hover figure img {
  transform: scale(1.1);
}
@media screen and (max-width: 1440px) {
  .serviceBlock .wrap .itemBox:nth-child(5) dl dt br , .serviceBlock .wrap .itemBox:nth-child(6) dl dt br {
    display: none;
  }
}
@media screen and (max-width: 1160px) {
  .serviceBlock .l-inner {
    max-width: 75rem;
  }
  .serviceBlock .wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 5rem;
  }
  .serviceBlock .wrap .itemBox dl dt {
    min-height: auto;
  }
}
@media screen and (max-width: 896px) {
  .serviceBlock .wrap {
    gap: 3rem 3rem;
  }
}
@media screen and (max-width: 480px) {
  .serviceBlock .wrap {
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
  }
  .serviceBlock .wrap .ttlBox .title {
    margin-bottom: 1rem;
  }
  .serviceBlock .wrap .ttlBox h2 span {
    display: inline-block;
  }
  .serviceBlock .wrap .itemBox a {
    display: flex;
    gap: 2rem;
  }
  .serviceBlock .wrap .itemBox figure {
    aspect-ratio: 1;
    flex: 0 0 13rem;
  }
  .serviceBlock .wrap .itemBox dl {
    margin: 0;
  }
  .serviceBlock .wrap .itemBox dl dt {
    font-size: 1.1em;
  }
  .serviceBlock .wrap .itemBox:nth-of-type(5) dl dt br {
    display: none;
  }
  .serviceBlock .wrap .itemBox dl dd {
    font-size: .9em;
  }
}
/*---------------------------------

  技術コラム

---------------------------------*/
.columnBlock {
  position: relative;
  padding: 17rem 0;
}
.columnBlock::after {
  background: var(--col-sub01);
  border-radius: 2rem;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% - 10rem);
  width: calc(100% - 10rem);
  z-index: -1;
}
.columnBlock .ttlBox {
  text-align: center;
  margin-bottom: 7rem;
}
.columnBlock .wrap {
  margin: auto;
  max-width: 98rem;
}
.columnBlock .wrap .columBox {
  background: #fff;
  border-radius: 1.5rem;
  display: flex;
  margin-bottom: 2rem;
  overflow: hidden;
  position: relative;
  transition: all .3s;
}
.columnBlock .wrap .columBox > a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.columnBlock .wrap .columBox figure {
  flex: 0 0 20rem;
  overflow: hidden;
}
.columnBlock .wrap .columBox figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  transition: all .3s;
}
.columnBlock .wrap .columBox ._txtBox {
  display: flex;
  flex-wrap: wrap;
  padding: 3rem 4rem;
}
.columnBlock .wrap .columBox ._txtBox h3 {
  font-size: 2.2rem;
  line-height: 1.3;
  flex-basis: 100%;
}
.columnBlock .wrap .columBox ._txtBox p {
  flex-basis: 100%;
  margin: 1rem 0 2rem;
  text-align: justify;
}
.columnBlock .wrap .columBox ._txtBox time {
  color: #808080;
  font-size: .9em;
  font-family: var(--en);
  margin-right: 3rem;
}
.columnBlock .wrap .columBox ._txtBox .__tag {
  font-size: .9em;
  list-style: none;
  position: relative;
  z-index: 1;
}
.columnBlock .wrap .columBox ._txtBox .__tag li {
  display: inline-block;
  margin-right: 1rem;
}
.columnBlock .wrap .columBox ._txtBox .__tag li a {
  color: #808080;
  display: inline-block;
}
.columnBlock .wrap .columBox ._txtBox .__tag li a::before {
  content: '#';
}
.columnBlock .wrap .columBox ._txtBox .__tag li a:hover {
  color: var(--col-hover);
}
.columnBlock .wrap .columBox:hover {
  box-shadow: 0 1rem 2rem 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-.5rem);
}
.columnBlock .wrap .columBox:hover figure img {
  transform: scale(1.1);
}
.columnBlock .btn {
  margin-top: 7rem;
}
@media screen and (max-width: 1024px) {
  .columnBlock .wrap {
    max-width: 75rem;
  }
}
@media screen and (max-width: 896px) {
  .columnBlock {
    padding: 12rem 0;
  }
  .columnBlock::after {
    height: calc(100% - 5rem);
    width: calc(100% - 5rem);
  }
  .columnBlock .l-inner {
    width: 85%;
  }
  .columnBlock .wrap .columBox ._txtBox {
    padding: 2rem 3rem;
  }
}
@media screen and (max-width: 480px) {
  .columnBlock {
    padding: 6rem 0;
  }
  .columnBlock::after {
    height: calc(100% - 3rem);
    width: calc(100% - 3rem);
  }
  .columnBlock .ttlBox {
    margin-bottom: 3rem;
  }
  .columnBlock .wrap .columBox {
    display: block;
  }
  .columnBlock .wrap .columBox figure {
    aspect-ratio: 3 / 2;
  }
  .columnBlock .wrap .columBox ._txtBox {
    display: block;
    padding: 1.5rem 2rem;
  }
  .columnBlock .wrap .columBox ._txtBox h3 {
    font-size: 1.8rem;
  }
  .columnBlock .btn {
    margin-top: 3rem;
  }
}
/*---------------------------------

  よくある質問

---------------------------------*/
.faqBlock {
  position: relative;
}
.faqBlock::after {
  background: var(--col-bg01);
  content: '';
  opacity: .3;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.faqBlock .title {
  margin-bottom: 7rem;
  text-align: center;
}
.faqBlock .btn {
  margin-top: 7rem;
}
.faqBlock .wrap {}
.faqBlock .wrap .ItemBox {
  background: #fff;
  border-radius: 1.5rem;
  margin-bottom: 2rem;
}
.faqBlock .wrap .ItemBox dt._question {
  cursor: pointer;
  font-size: 2.2rem;
  font-weight: 700;
  padding: 2.5rem 2rem;
  padding-right: 7rem;
  position: relative;
}
.faqBlock .wrap .ItemBox dt._question p {
  background: url("../images/faq_Q.svg") top left/4rem no-repeat;
  line-height: 1.4;
  min-height: 4rem;
  padding: .3rem;
  padding-left: 6rem;
}
.faqBlock .wrap .ItemBox dt._question::before {
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  right: 3rem;
  bottom: 0;
  width: 25px;
  height: 2px;
  border-radius: 10px;
  background: var(--col-main);
}
.faqBlock .wrap .ItemBox dt._question::after {
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  right: 4.1rem;
  bottom: 0;
  width: 2px;
  height: 25px;
  border-radius: 10px;
  background: var(--col-main);
  transition: all 0.3s;
}
.faqBlock .wrap .ItemBox dt._question.open::before {
  transform: rotate(180deg);
}
.faqBlock .wrap .ItemBox dt._question.open::after {
  transform: rotate(270deg);
}
.faqBlock .wrap .ItemBox dd._answer {
  display: none;
  padding: 4rem 2rem;
  padding-right: 5rem;
  position: relative;
}
.faqBlock .wrap .ItemBox dd._answer::before {
  background: #ccc;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: calc(100% - 5rem);
  height: 1px;
}
.faqBlock .wrap .ItemBox dd._answer .__inner {
  background: url("../images/faq_A.svg") top left/4rem no-repeat;
  line-height: 1.4;
  min-height: 4rem;
  padding-left: 6rem;
}
.faqBlock .wrap .ItemBox dd._answer .__inner p {
  line-height: 1.6;
}
.faqBlock .wrap .ItemBox dd._answer .__inner p + p {
  margin-top: 1rem;
}
.faqBlock .wrap .ItemBox dd._answer .__inner p + .btn {
  margin-top: 3rem;
}
.faqBlock .wrap .ItemBox dd._answer .__inner p + .btn a {
  color: var(--col-main);
  padding: .3rem;
}
.faqBlock .wrap .ItemBox dd._answer .__inner p + .btn a span {
  background-color: #fff;
  border-radius: 8rem;
  background-image: url("../images/arr_b.svg");
  padding: 1.2rem 0;
}
.faqBlock .wrap .ItemBox dd._answer .__inner p + .btn a:hover {
  box-shadow: none;
  transform: none;
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {
  .faqBlock .title {
    margin-bottom: 5rem;
  }
  .faqBlock .wrap .ItemBox dt._question {
    font-size: 1.9rem;
  }
}
@media screen and (max-width: 480px) {
  .faqBlock .title {
    margin-bottom: 3rem;
  }
  .faqBlock .wrap .ItemBox dt._question {
    font-size: 1.6rem;
    padding: 1.5rem;
    padding-right: 3rem;
  }
  .faqBlock .wrap .ItemBox dt._question::before {
    right: 1.5rem;
    width: 15px;
    height: 2px;
  }
  .faqBlock .wrap .ItemBox dt._question::after {
    right: 2.2rem;
    width: 2px;
    height: 15px;
  }
  .faqBlock .wrap .ItemBox dt._question p {
    background-size: 3rem;
    min-height: 3rem;
    padding-left: 4rem;
  }
  .faqBlock .wrap .ItemBox dd._answer {
    padding: 1.5rem;
    padding-right: 2rem;
  }
  .faqBlock .wrap .ItemBox dd._answer::before {
    width: calc(100% - 2rem);
  }
  .faqBlock .wrap .ItemBox dd._answer .__inner {
    background-size: 3rem;
    min-height: 3rem;
    padding-left: 4rem;
  }
  .faqBlock .btn {
    margin-top: 3rem;
  }
}
/*---------------------------------

  運営会社

---------------------------------*/
.companyBlock {
  padding: 0 0;
  overflow: hidden;
}
.companyBlock .l-inner {
  display: flex;
  justify-content: space-between;
  max-width: 150rem;
  width: 100%;
}
.companyBlock .ttlBox {
  background: var(--col-bg02);
  max-width: 70rem;
  margin-top: 25rem;
  padding: 7rem 25rem 7rem 15rem;
}
.companyBlock .ttlBox .title {}
.companyBlock .ttlBox .btn {
  margin: 5rem 0 0;
}
.companyBlock .movieBox {
  flex: 1;
  margin-right: calc(40% - 50vw);
  transform: translateX(-15rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
#movie {
  height: 100%;
  overflow: hidden;
  width: 100%;
}
#movie a {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
}
#movie a::after {
  background: url("../images/playmovei.svg") no-repeat;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 3;
  width: 100px;
  height: 130px;
}
#movie a:hover {
  opacity: 1;
}
#movie a:hover::after {
  width: 120px;
  height: 150px;
}
#movie a .overlay, #movie a #yt_player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
#movie a .overlay {
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
#movie a #yt_player {
  z-index: -2;
}
@media screen and (max-width: 1280px) {
  .companyBlock .ttlBox {
    margin-top: 10rem;
  }
}
@media screen and (max-width: 1024px) {
  .companyBlock .ttlBox {
    max-width: 55rem;
    margin-top: 10rem;
    padding: 7rem 20rem 7rem 7rem;
  }
  .companyBlock .movieBox {
    margin-right: calc(35% - 50vw);
  }
}
@media screen and (max-width: 896px) {
  .companyBlock .l-inner {
    display: block;
    width: 100%;
  }
  .companyBlock .ttlBox {
    max-width: auto;
    padding: 5rem 5%;
    margin: 5rem auto 2rem;
    width: 90%;
  }
  .companyBlock .movieBox {
    margin-right: 0;
    transform: none;
  }
}
@media screen and (max-width: 480px) {
  .companyBlock .movieBox {}
}
/*---------------------------------

  お知らせ

---------------------------------*/
.infoBlock {
  background: var(--bg-col);
}
.infoBlock {}
.infoBlock .ttlBox {
  display: flex;
  align-items: flex-end;
  gap: 12rem;
  margin-bottom: 5rem;
}
.infoBlock .ttlBox .title {
  margin: 0;
}
.infoBlock .ttlBox .title h2 {}
.infoBlock .ttlBox .tabList {
  display: flex;
  gap: 3rem;
  list-style: none;
}
.infoBlock .ttlBox .tabList .tab {
  color: #808080;
  cursor: pointer;
  font-weight: 500;
  padding: .5rem 0;
  position: relative;
}
.infoBlock .ttlBox .tabList .tab::after {
  background: var(--col-main);
  content: '';
  position: absolute;
  bottom: -.5px;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
.infoBlock .ttlBox .tabList .tab.is-active {
  color: var(--col-main);
}
.infoBlock .ttlBox .tabList .tab:hover::after, .infoBlock .ttlBox .tabList .tab.is-active::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
.infoBlock .letterList {
  border-top: 1px dotted #b3b3b3;
  list-style: none;
}
.infoBlock .letterList li {}
.infoBlock .letterList li .item {
  border-bottom: 1px dotted #b3b3b3;
  overflow: hidden;
}
.infoBlock .letterList li .item a {
  background: url("../images/arr_b.svg") center right 1rem/2.6rem no-repeat;
  color: var(--col-main);
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 4rem 0;
  padding-right: 6rem;
}
.infoBlock .letterList li .item time {
  color: #808080;
  display: inline-block;
  flex: 0 0 auto;
  font-family: var(--en);
}
.infoBlock .letterList li .item .catTag {
  border: 1px solid #ccc;
  border-radius: 3rem;
  display: inline-block;
  flex: 0 0 auto;
  font-size: .85em;
  padding: .4rem .5rem;
  text-align: center;
  width: 16rem;
}
.infoBlock .letterList li .item p {
  font-size: 1.1em;
  font-weight: 500;
}
.infoBlock .letterList li .item a:hover {
  color: var(--col-hover);
  transform: translateX(1rem);
}
/* 一覧をみる */
.infoBlock .ListBtn {
  margin-top: 4rem;
  max-width: 22rem;
  margin-left: auto;
}
.infoBlock .ListBtn a {
  color: #333;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 500;
  padding-right: 7rem;
  position: relative;
}
.infoBlock .ListBtn a::after {
  background: url(../images/arr_w.svg), var(--col-bg01);
  background-repeat: no-repeat;
  background-position: center right 1.5rem, center;
  background-size: 2rem, auto;
  border-radius: 8rem;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  height: 5rem;
  transition: all 0.5s;
}
.infoBlock .ListBtn a span {
  padding: 1rem 0;
  position: relative;
  z-index: 2;
}
.infoBlock .ListBtn a:hover {
  color: #fff;
}
.infoBlock .ListBtn a:hover::after {
  right: 0;
  width: 100%;
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {
  .infoBlock .letterList li .item a {
    display: block;
  }
  .infoBlock .letterList li .item .catTag {
    margin-left: 2rem;
  }
  .infoBlock .letterList li .item p {
    margin-top: 1rem;
  }
}
@media screen and (max-width: 480px) {
  .infoBlock .ttlBox {
    gap: 1rem;
    margin-bottom: 3rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .infoBlock .ttlBox .tabList {
    gap: 1.5rem;
  }
  .infoBlock .letterList li .item a {
    padding: 2rem 0;
    padding-right: 6rem;
  }
  .infoBlock .ListBtn {
    margin-top: 2rem;
    max-width: 18rem;
  }
  .infoBlock .ListBtn a {
    color: #fff;
  }
  .infoBlock .ListBtn a::after {
    width: 100%;
    height: 100%;
  }
}
/*---------------------------------
　タブ切り替えスタイル
---------------------------------*/
.tab__outer .panel {
  display: none;
}
.tab__outer .panel.is-show {
  display: block;
  animation: tabAnim ease 0.6s forwards;
  -ms-animation: tabAnim ease 0.6s forwards;
}
@keyframes tabAnim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}