/*body{ background:url("../img/bg_body.jpg") repeat-y left 200px / max(100%,1280px) auto}*/
#abs-logo { transition: opacity 0.5s ease;}
@media only screen and (max-width: 782px) {
  body{ background: url("../img/bg_body-sp.jpg") repeat-y left top / 100% auto;}
  body.home-header #abs-logo {
    opacity: 0;
    pointer-events: none;
  }
  #home-header {
    position: fixed;
    left: 7.5vw;
    top: 7.5vw;
    z-index: 2;
    transition: opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
  }
  body:not(.home-header) #abs-logo {
    opacity: 1;
  }
  body.home-header #home-header { opacity: 1;}
}

body.loaded.show-splash #body {
  position: absolute;
  height: 100%;
  overflow: hidden;
}
@media only screen and (min-width: 783px) {
  .show-menu #abs-logo { filter: brightness(100); z-index: 999;}
}


#splashSection {
  width: 100%;
  height: 100%;
  /*background: url("../img/home/bg_splash.jpg") no-repeat center 50% / cover;*/
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000000;
  font-size: 25px;
  letter-spacing: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
body.show-splash #splashSection { opacity: 1;}
#splashSection * { position: relative; z-index: 3; transition: all 1s ease 0.5s; opacity: 0;}
body.loaded #splashSection * {  opacity:1;}
#splashSection::before {
  content: "";
  z-index: 2;
  background: url("../img/home/bg_splash@2x.jpg") no-repeat center 50% / cover;
  transition: transform 3s linear, opacity 2s ease;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.1;
}
/*main { opacity: 0;}
body.loaded main { opacity: 1;}*/
body.loaded #splashSection::before {
  transform: scale(1.01);
  opacity: 1;
}

@media only screen and (max-width: 782px) {
  #splashSection { font-size: 16px;}
  #splashSection .logo img { width: 52px;}
}

#mainimg {
  width: calc(100% - 200px);
  height: 100vh;
  min-height: 500px;
  position: relative;
  z-index: 1;
  
}
#movie {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
#movie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 60px 60px 0;
}


#mainimgLoop {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  z-index: 2;
  display: none;
}

#mainimgLoop li {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 1s ease;
  opacity: 1;
}
#mainimgLoop li:first-of-type { opacity: 0;}
#mainimgLoop li:last-of-type { opacity: 0;}
#mainimgLoop.length2 li:first-of-type { opacity: 1;}
#mainimgLoop.length2 li:last-of-type { opacity: 0;}
#mainimgLoop li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 782px) {
  #abs-logo .text {
    font-size: 10px;
    font-family: 'Shippori Mincho B1', serif;
    letter-spacing: 0;
  }
  #mainimg { height: 133.333vw; width: 100%;}
  #movie { display: none;}
  #mainimgLoop { display: block;}
}

#missionSection {
  backdrop-filter: blur(20px);
  width: 500px;
  height: 690px;
  border-radius: 40px 40px 0 0;
  padding: 50px 50px 0;
  box-sizing: border-box;
  margin: -650px 0 0 75px;
  position: relative;
  z-index: 1;
  color: #262253;
  transition: transform 1s ease 0.5s, opacity 1s ease 0.5s;
  transform: translateY(50px);
  opacity: 0;
}
body:not(.show-splash) #missionSection {transform: translateY(0px); opacity: 1;}
#missionSection h2 {
  color: #fff;
  background: #38a4b6;
  font-size: 16px;
  padding: 8px 20px;
  letter-spacing: 0.4rem;
  line-height: 1.4;
  display: inline-block;
}
#missionSection h3 {
  font-size: 40px;
  
  letter-spacing: 0.4rem;
  line-height: 1.5;
  margin-top: 40px;
}
#missionSection p { font-weight: bold;}
#missionSection .myBtn { margin-top: 4rem;}

@media only screen and (max-width: 782px) {
  #missionSection {
    width: 90%;
    height: auto;
    border-radius: 40px 40px 0 0;
    padding: 60px 40px 0 40px;
    margin: -125px auto 0;
    transform: translateY(30px);
  }
  body:not(.show-splash) #missionSection {transform: translateY(0px); opacity: 1;}
  #missionSection h2 {
    font-size: 12px;
    padding: 6px 12px;
  }
  #missionSection h3 {
    font-size: 27px;
    margin-top: 25px;
  }
  #missionSection p { font-size: 12px;}
  #missionSection .myBtn { margin-top: 3rem;}
}
#bannerSection {
  position: relative;
  padding: 40px 0 100px;
  margin: 0 300px 0 160px;
  box-sizing: border-box;
}
#bannerSection .wrap {
  width: 90%;
    margin: 0px auto 0;
    max-width: 1040px;
  position: relative;
}
.swiper-button-next:after, .swiper-button-prev:after { font-size: 20px; color: #38a4b6;}
.swiper-pagination-bullet { background: #d6d6d6; opacity: 1;}
.swiper-pagination-bullet-active { background: #38a4b6; position: relative; box-sizing: border-box;}
.swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border: #38a4b6 1px solid;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  transform-origin: center center;
  transform: scale(1.6);
  box-sizing: border-box;
}


.swiper-wrapper { align-items: flex-end;}
.swiper-slide img { width: 100%; height: 250px; opacity: 0; padding-bottom: 5px;}
.swiper-button-prev { left: -60px;    top: calc(50% - 0px);}
.swiper-button-next { right: -60px;    top: calc(50% - 0px);}
.swiper-pagination-bullet { width: 13px; height: 13px;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 10px;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: -60px;}

.swiper-initialized .swiper-slide img { opacity: 1; height: auto; margin-top: 5px;}

@media only screen and (max-width: 782px) {
  #bannerSection {
    padding: 30px 0 90px;
    margin: 0 0px 0 0px;
  }
  #bannerSection .wrap { width: 85%;}
  .swiper-button-next:after, .swiper-button-prev:after { font-size: 16px;}
  .swiper-button-prev{ left: -7.5vw;    top: calc(50% - 0px);} 
  .swiper-button-next { right: -7.5vw;    top: calc(50% - 0px);}
}

.section h2 .en { font-size: 16px; display: block; font-weight: 500;line-height: 1.4;}
.section h2 .mincho { font-size: clamp(27.5px, 7.1vw, 40px); display: block; line-height: 1.4;}
@media only screen and (max-width: 782px) {
  .section h2 .en { font-size: 12px;}
}
#newsSection {
  width: calc(100% - 200px);
  margin: 20px 200px 0 0;
  line-height: 1.5;
  display: flex;
  justify-content: flex-end;
}
.newslist {
  margin: 0 0px 0 min(140px,8.75%);
  width: min(960px,60%);
  border-top: #e2eaef 1px solid;
}
.newslist li {
  border-bottom: #e2eaef 1px solid;
}
.newslist li a {
  display: flex;
  padding: 15px 130px 15px 25px;
  position: relative;
  align-items: center;
}
.newslist li a:hover {
  background: rgba(65,189,206,0.1);
}
.newslist li a:hover .title { text-decoration: underline;}
.newslist .date {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 115px;
}
.newslist .date .y { font-size: clamp(9px, 18vw / 7.5, 13px);}
.newslist .date .md { font-size: clamp(14px, 28vw / 7.5, 18px);}
.newslist　.new .date::after {
  content: "NEW";
  color: #fff;
  background: #e55c56;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  width: 60px;
  height: 20px;
  line-height: 20px;
  border-radius: 5px;
  text-align: center;
  font-size: clamp(9px, 18vw / 7.5, 11px);
}
.newslist .cat {
  margin-right: 25px; 
  color: #108e8e;
  font-size: clamp(9px, 18vw / 7.5, 13px);
  border: #108e8e 1px solid;
  border-radius: 5px;
  padding: 5px 0;
  width: 120px;
  white-space: nowrap;
  text-align: center;
}
.newslist .title { width: calc(100% - 250px); font-size: clamp(12.5px, 25vw / 7.5, 15px);}
.newslist .arrow { right: 40px;}

@media only screen and (max-width: 782px) {
  #newsSection { display: block; width: 90%; margin: 20px auto 0;}
  .newslist { margin: 35px 0 20px 0; width: auto;}
  .newslist li a { padding: 2.5vw 2.5vw 2.5vw 70px; display: block;}
  .newslist .date { width: 70px; position: absolute; left: 0; top: 0; height: 100%;}
  .newslist .cat { width: max(90px, 180vw / 7.5); display: block; margin-left: 5vw;}
  .newslist .title { width: auto; display: block; margin: 10px 2.5vw 0 5vw;}
  .newslist .arrow { display: none;}
}

#serviceSection {
  position: relative;
  margin: 90px 0 0 0;
  padding: 80px 200px 0 0;
}
#serviceLoop {
  position: absolute;
  width: calc(100% - 320px);
  height: 800px;
  z-index: 1;
  right: 0;
  top: 0;
}
#serviceLoop li {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease;
  opacity: 1;
}
#serviceLoop li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 60px 0 0 0;
}
#serviceLoop li:first-of-type { opacity: 0;}
#serviceLoop li:last-of-type { opacity: 0;}
#serviceLoop.length2 li:first-of-type { opacity: 1;}
#serviceLoop.length2 li:last-of-type { opacity: 0;}

@media only screen and (max-width: 782px) {
  #serviceSection {
    position: relative;
    margin: 60px 0 0 0;
    padding: 86vw 5% 0 0;
  }
  #serviceLoop {
    position: absolute;
    width: 100%;
    height: 135vw;
  }
  #serviceLoop li img {
    border-radius: 0;
  }
}

#serviceSection .text {
  position: relative;
  z-index: 2;
  background: rgb(69,189,207);
  background: -webkit-linear-gradient(left, rgba(69,189,207,1) 280px, rgba(69,189,207,0) 600px);
  background: -o-linear-gradient(left, rgba(69,189,207,1) 280px, rgba(69,189,207,0) 600px);
  background: linear-gradient(to right, rgba(69,189,207,1) 280px, rgba(69,189,207,0) 600px);
  backdrop-filter: blur(20px);
  border-radius: 0 60px 0 0;
  width: 665px;
  height: 720px;
  padding: 80px 80px 0px 120px;
  box-sizing: border-box;
  
}
#serviceSection .text h2 .en {
  background: #fff;
  color: rgb(69,189,207);
  padding: 8px 20px;
  margin: 0 0 1rem 0;
  display: inline-block;
}

@media only screen and (min-width: 783px) {
  #serviceSection .text p:not(.myBtn) { font-size: 92%;}
}

@media only screen and (max-width: 782px) {
  #serviceSection .text { 
     background: rgb(69,189,207);
    background: -webkit-linear-gradient(bottom, rgba(69,189,207,1) 50vw, rgba(69,189,207,0.5) 100vw);
    background: -o-linear-gradient(bottom, rgba(69,189,207,1) 50vw, rgba(69,189,207,0.5) 100vw);
    background: linear-gradient(to top, rgba(69,189,207,1) 50vw, rgba(69,189,207,0.5) 100vw);
    border-radius: 0 30px 30px 0; width: auto; height: auto; padding: 10vw 5vw 10vw 7.5vw;
  }
  #serviceSection .text h2 .en {
    padding: 6px 12px;
  }
}
.banners {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  margin: -55px 0 0 0;
}
.banners li:not(:first-child) {
   margin-left: 50px;
}
.banners li a {
  position: relative;
  display: block;
  padding-bottom: 15px;
}
.banners .caption { display: block; padding: 20px 25px 10px;}
.banners .caption .en { display: block; font-size: 10px;}
.banners li a .arrow {
  right: 35px;
  top: auto;
  bottom: 0;
}
.banners li img { border-radius: 10px; transition: all 0.5s ease; height: auto;}

#serviceSection .banners li figure { text-align: center;}

@media only screen and (max-width: 782px) {
  .banners {
    display: block;
    margin: 7.5vw 7.5vw 0;
  }
  .banners li:not(:first-child) { margin-left: 0;}
  .banners li { margin-bottom: 5vw;}
  .banners li a {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
  }
  .banners li a figure { width: 150px;}
  .banners .caption { padding: 0px; width: calc(100% - 150px); margin-left: 2.5vw;}
  .banners li a .arrow { bottom: 10px; right: 10px;}
  .banners li img { border-radius: 5px;}
}

.section.section2 h2 { text-align: center; margin-bottom: 5rem;}
.section.section2 h2 .en {
  background: #45bdcf;
  color: #fff;
  padding: 8px 20px;
  margin: 0 0 1rem 0;
  display: inline-block;
}
@media only screen and (max-width: 782px) {
  .section.section2 h2 { margin-bottom: 3.5rem;}
  .section.section2 h2 .en {
    padding: 6px 12px;
  }
}
#productSection {
  padding: 370px 320px 250px 120px;
  background: url("../img/home/bg_products@2x.png") no-repeat center bottom / 100% auto;
  min-height: 1200px;
  box-sizing: border-box;
  margin-top: -250px;
}
#productSection p { text-align: center; margin-top: 3rem;}
#productSection p.myBtn a { text-align: left;}

.twoBanners {
  margin: 80px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1155px;
}
.twoBanners li {
  width: calc(50% - 25px);
}
.twoBanners li img { width:100%;}
@media only screen and (max-width: 782px) {
  #productSection {
    margin-top: 0px;
    padding: 15vw 5vw 10vw;
    background: url("../img/home/bg_products@2x.png") no-repeat center bottom / auto 100%;
    min-height: inherit;
  }
  #productSection p { margin-left: 2.5vw; margin-right: 2.5vw;}
  .twoBanners {
    margin: 7.5vw 0 0;
    display: block;
  }
  .twoBanners li {
    width: auto;
    margin-bottom: 2vw;
  }
  .twoBanners li img { width:100%;}
}

.roundBanner {
  margin: 120px auto 1px;
  width: 1150px;
  max-width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}
.roundBanner a {
  position: relative;
  transition: transform 0.5s ease, filter 0.5s ease;
  display: inline-block;
  width: min(550px, calc(50% - 10px));
}
@media only screen and (min-width: 783px) {
  .roundBanner a:hover {
    transform: translateY( -5px) !important;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
  }
}
.roundBanner a figure {
  position: relative;
  z-index: 1;
}
.roundBanner a figure img { border-radius: 40px;}
.roundBanner a p {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  height: 110px;
  padding-left: 40px;
  font-size: 114%;
  width: calc(100% - 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left !important;
  font-weight: bold;
}
.roundBanner a p .small { font-size: 50%;}

@media only screen and (max-width: 782px) {
  .roundBanner { margin: 7.5vw auto 40px; display: block; max-width: 100%; width: 550px;}
  .roundBanner a { width: auto;  margin-top: 40px; display: block;}
  .roundBanner a figure img { border-radius: 20px;}
  .roundBanner a p {
    height: 17vw;
    padding-left: 5vw;
    width: calc(100% - 17vw);
  }
}



#airdogSection {
  background: #090508 url("../img/home/bg_airdoc@2x.jpg") no-repeat center top / 1600px auto;
  color: #fff;
  border-radius: 0 0 0 60px;
  position: relative;
  z-index: 2;
}
.padding1 { padding: 160px 360px 160px 160px;}
@media only screen and (max-width: 1580px) {
  .padding1 { padding-right: 320px;}
}
#airdogSection h2.img {
  text-align: center;
}
#airdogSection h2.img img {
  padding-right: 400px;
}
@media only screen and (max-width: 782px) {
  #airdogSection {
    background: #090508 url("../img/home/bg_airdoc-sp.png") no-repeat center top / 100% auto;
    padding: 65vw 5vw 115px;
    color: #fff;
    border-radius: 0 0 40px 40px;
  }
  #airdogSection h2.img {
    text-align: center;
  }
  #airdogSection h2.img img {
    padding-right: 0px;
    width: 310px;
  }
}
#airdogSection .banners {
  margin-top: 120px;
  justify-content: center;
}
#airdogSection .banners li:not(:first-child) { margin-left: 25px;}
#airdogSection .banners a {
  background: #121e50;
  border-radius: 10px;
  display: block;
  padding: 0 15px 55px;
  color: #fff;
  position: relative;
}
#airdogSection .banners a img {
  margin-top: -40px;
}
#airdogSection .banners a .arrow {
  bottom: 55px;
  right: 50px;
  z-index: 3;
}
@media only screen and (max-width: 782px) {
  #airdogSection .banners {
    margin: 5vw 0 0 0;
  }
  #airdogSection .banners li:not(:first-child) { margin-left: 0;}
  #airdogSection .banners a {
    background: #121e50;
    border-radius: 5px;
    display: flex;
    padding: 2.5vw 7vw 2.5vw 2.5vw;
    color: #fff;
    position: relative;
  }
  #airdogSection .banners a img {
    margin-top: 0;
  }
  #airdogSection .banners a .arrow {
    bottom: 5vw;
    right: 30px;
  }
}

#airdogSection .banners a figure,
#airdogSection .banners a .caption { position: relative; z-index: 3;}
#airdogSection .banners a i.bg { left: 0; top: 0; position: absolute; z-index: 1; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #38a4b6;}
#airdogSection .banners a i.bg::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: #121e50;
  top: calc(50% - 300px);
  left: -50px;
  transition: left 1s ease;
}
@media only screen and (min-width: 783px) {
  #airdogSection .banners a:hover { color: #fff;}
  #airdogSection .banners a:hover i.lt { border-color: #121e50;}
  #airdogSection .banners a i.lt{ transition: all 0.5s ease 0.3s;}
  #airdogSection .banners a .arrow::before, #airdogSection .banners a .arrow::after{ transition: all 0.5s ease 0.3s;}
  #airdogSection .banners a:hover .arrow::before, #airdogSection .banners a:hover .arrow::after{ background: #121e50;}
  #airdogSection .banners a:hover i.bg::before {
    left: calc(50% + 201px);
  }
}
@media only screen and (max-width: 782px) {
  #airdogSection .banners a i.bg { background: none;}
  #airdogSection .banners a i.bg::before { display: none;}
}

.cyanbox {
  margin: 50px auto 0;
  padding: 50px 0 80px;
  border: #38a4b6 1px solid;
  border-radius: 10px;
  text-align: center;
  width: 1040px;
  position: relative;
}
.cyanbox dt {
  display: flex;
  justify-content: center;
}
.cyanbox dt .small .white {
  line-height: 1;
  display: block;
  letter-spacing: -0.12rem;
}
.cyanbox dt .small .yellow {
  line-height: 1;
  display: block;
  color: #fff100;
  letter-spacing: 0.05rem;
  margin-top: 5px;
}
.cyanbox dt strong {
  font-size: 34px;
  font-weight: bold;
  margin-left: 10px;
  line-height: 1;
  letter-spacing:0;
}
.cyanbox dd img { max-width: 90%; margin-top: 50px;}
.cyanbox dd .large { font-size: 36px;}
.cyanbox dd .large + p { font-size: 20px;}
@media only screen and (min-width: 1280px) and (max-width: 1540px) {
  .cyanbox { width: 100%;}
  .cyanbox dt .small { font-size: 1vw}
  .cyanbox dt strong { font-size: 2.2vw; margin-left: 0.5vw;}
  .cyanbox dd .large { font-size: 2.3vw;}
  .cyanbox dd .large + p { font-size: 1.3vw; margin-top: 15px;}
}
@media only screen and (max-width: 1280px) {
  .cyanbox { width: 100%;}
  .cyanbox dt .small { font-size: 12px}
  .cyanbox dt strong { font-size: 28px; margin-left: 0.5vw;}
  .cyanbox dd .large { font-size: 29px;}
  .cyanbox dd .large + p { font-size: 12px; margin-top: 15px;}
}
.cyan { color: #38a4b6; font-weight: bold;}

.cyanbox .myBtn {
  position: absolute;
  right: 85px;
  bottom: -40px;
  padding: 0 80px 0 30px;
  background: #090508;
  text-align: left;
}

@media only screen and (max-width: 782px) {
  .cyanbox {
    margin: 5vw auto 0;
    padding: 25px 0 70px;
    border-radius: 5px;
    width: auto;
  }
  .cyanbox dt {
    display: block;
  }
  .cyanbox dt strong { font-size: 22px; margin-left: 0; line-height: 1.3; display: block; margin-top: 15px;}
  .cyanbox dd img { max-width: 90%; margin-top: 5vw;}
  .cyanbox dd .large { font-size: 20px;}
  .cyanbox dd .large + p { font-size: 12px;}
  .cyanbox .myBtn {
    right: calc(50% - 130px);
    bottom: -30px;
    padding: 0 50px 0 15px;
  }
}

#caseSection {
  padding-top: 160px;
  padding-bottom: 100px;
  background: url("../img/home/bg_case1@2x.jpg") no-repeat 50% bottom / cover;
  position: relative;
  z-index: 1;
  margin-top: -60px;
}
#caseSection .banners {
  margin-top: 120px;
  justify-content: center;
}
#caseSection .banners li { width: calc(33.333% - 16.66px);}
#caseSection .banners li:not(:first-child) { margin-left: 25px;}
#caseSection .banners a {
  background: rgba(255,255,255,0.6);
  border-radius: 10px;
  display: block;
  padding: 0 15px 100px;
  position: relative;
}
#caseSection .banners a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #fff554;
  opacity: 0;
  left: 0;
  top:0;
  transition: all 0.5s ease;
  z-index: 0;
}
#caseSection .banners a:hover::before { opacity: 0.6;}
#caseSection .banners a img {
  margin-top: -40px;
  width: 100%;
}
#caseSection .banners a .arrow {
  bottom: 55px;
  right: 50px;
  z-index: 3;
}
#caseSection .banners .caption { font-weight: bold;position: relative; z-index: 1;}
#caseSection .banners a p { font-size: 86%; margin-top: 1rem; padding: 0 25px;position: relative; z-index: 1;}
#caseSection .myBtn { display: flex; justify-content: center; margin-top: 5rem;}
@media only screen and (max-width: 782px) {
  #caseSection  {
    margin-top: -40px;
    padding: 100px 0 75px 0;
  }
  #caseSection .banners {
    margin: 5vw 0 0 0;
    display: flex;
  }
  #caseSection .banners li { width: calc(50% - 5vw); padding: 0 2.5vw;}
  #caseSection .banners li:nth-child(3) { display: none;}
  #caseSection .banners li:not(:first-child) { margin-left: 0;}
  #caseSection .banners a {
    border-radius: 5px;
    padding: 0 2.5vw 7vw 2.5vw;
  }
  #caseSection .banners li a figure { width: 100%;}
  #caseSection .banners a img {
    margin-top: -20px;
  }
  #caseSection .banners a .caption,
  #caseSection .banners a p {
    width: auto;
    margin: 2.5vw;
    padding: 0;
  }
  #caseSection .banners a .arrow {
    bottom: 5vw;
    right: 30px;
  }
  #caseSection .myBtn { margin-top: 3rem;}
  #caseSection .banners a::before { display: none;}
}

#recruitSection {
  position: relative;
  margin: 90px 0 0 0;
  padding: 100px 200px 200px 0;
}
#recruitLoop {
  position: absolute;
  width: calc(100% - 320px);
  height: 750px;
  z-index: 1;
  right: 0;
  top: 0;
}
#recruitLoop li {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease;
  opacity: 1;
}
#recruitLoop li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 60px 0 0 0;
}
#recruitLoop li:first-of-type { opacity: 0;}
#recruitLoop li:last-of-type { opacity: 0;}
#recruitLoop.length2 li:first-of-type { opacity: 1;}
#recruitLoop.length2 li:last-of-type { opacity: 0;}

@media only screen and (max-width: 782px) {
  #recruitSection {
    position: relative;
    margin: 45px 0 0 0;
    padding: 53.3vw 0 0 0;
  }
  #recruitLoop {
    position: absolute;
    width: 94.6vw;
    height: 66.6vw;
  }
  #recruitLoop li img {
    border-radius: 40px 0 0 40px;
  }
}

#recruitSection .text {
  position: relative;
  z-index: 2;
  background: #fffaa9;
  background: -webkit-linear-gradient(left, rgba(255,245,84,0.5) 50%, rgba(255,245,84,0.3) 100%);
  background: -o-linear-gradient(left, rgba(255,245,84,0.5) 50%, rgba(255,245,84,0.3) 100%);
  background: linear-gradient(to right, rgba(255,245,84,0.5) 50%, rgba(255,245,84,0.3) 100%);
  backdrop-filter: blur(20px);
  border-radius: 60px 60px 0px 60px;
  width: 500px;
  height: 650px;
  padding: 80px 70px 0px 70px;
  box-sizing: border-box;
  left: 60px
}
#recruitSection .text h2 .en {
  background: #e55c56;
  color: #fff;
  padding: 8px 20px;
  margin: 0 0 1rem 0;
  display: inline-block;
}

@media only screen and (min-width: 783px) {
  #recruitSection .text p:not(.myBtn) { font-size: 92%; margin-top: 4rem;}
}

@media only screen and (max-width: 782px) {
  #recruitSection .text {
    background: rgba(255,245,84,0.5);
    /*
    background: -webkit-linear-gradient(bottom, rgba(255,245,84,0.5) 50vw, rgba(255,245,84,0.3) 100vw);
    background: -o-linear-gradient(bottom, rgba(255,245,84,0.5) 50vw, rgba(255,245,84,0.3) 100vw);
    background: linear-gradient(to top, rgba(255,245,84,0.5) 50vw, rgba(255,245,84,0.3) 100vw);*/
    border-radius: 30px; width: auto; height: auto; padding: 10vw 5vw 10vw 5vw;
    left: 0px;
    margin: 0 7.5vw;
  }
  #recruitSection .text h2 .en {
    padding: 6px 12px;
  }
}