@charset "utf-8";



.title-letter-spacing{ letter-spacing: 0.05em;}

.home-main-slider{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.main-slider-inner{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.home-main-slider h1{
  padding: 0;
  width: 18%;
  display: flex;
  justify-content: center;
}

.home-main-slider h1 img{
  width: 22%;
  max-width: 7rem;
  aspect-ratio: 54 / 524;
}

.home-main-slider .main-slider{
  position: relative;
  width: 82%;
  aspect-ratio: 16 / 9;
}

.home-main-slider .main-slider img{ width: 100%;}

.home-main-slider .section-bg-cube{
  position: absolute;
  top: 5%;
  left: -2rem;
  width: 60%;
  display: block;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  content: "";
  z-index: -100;
}

.home-main-slider .section-bg-cube .svg-icon{ width: 100%; fill: #f6f6f6; aspect-ratio: 1 / 1;}

@media screen and (min-width: 1000px) {

.home-main-slider h1{
  padding: 2rem 0;
  width: 23%;
  display: flex;
  justify-content: center;
}

.home-main-slider h1 img{
  width: 15%;
  max-width: 7rem;
}

.home-main-slider .main-slider{ width: 77%;}

}/* End min 1000 */


@media screen and (max-width: 768px) {

.home-main-slider h1{
  position: absolute;
  padding: 3rem 0;
  width: 12rem;
  display: flex;
  justify-content: center;
  background-color: #fff;
  z-index: 100;
}

.home-main-slider h1 img{ width: 25%;}
.home-main-slider .main-slider{ width: 100%;}

.home-main-slider .section-bg-cube{
  position: absolute;
  top: 45%;
  left: 0;
  width: 75%;
}

}/* End max-768 */


@media screen and (max-width: 580px) {

.home-main-slider .main-slider{
  width: 100%;
  aspect-ratio: 1 / 1;
}

.home-main-slider .splide__slide{ aspect-ratio: 1 / 1;}
.home-main-slider .main-slider img{ width: auto; height: 100%; display: block; object-fit: cover;}

.home-main-slider .section-bg-cube{
  position: absolute;
  top: 70%;
  left: -15%;
  width: 90%;
}

}/* End max-580 */


@media screen and (max-width: 400px) {

.home-main-slider h1{ width: 10rem;}

}/* End max-400 */



.home-recruit-banner{
  position: relative;
  margin: -5.4rem 2rem 0;
  display: block;
  transition: opacity 0.5s ease;
}

.banner-none .home-recruit-banner{
  opacity: 0;
  pointer-events: none;
}

.home-recruit-banner .banner-close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  margin: 0;
  width: 4rem;
  height: 4rem;
  display: block;
  overflow: hidden;
  line-height: 300;
  cursor: pointer;
  z-index: 100;
}

.home-recruit-banner .banner-close::before,
.home-recruit-banner .banner-close::after { 
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2rem;
  height: 2.6rem;
  background: #fff;
}
 
.home-recruit-banner .banner-close::before { transform: translate(-50%,-50%) rotate(45deg);}
.home-recruit-banner .banner-close::after { transform: translate(-50%,-50%) rotate(-45deg);}

@media screen and (max-width: 840px) {

.home-recruit-banner{
  margin: 3em 0 0 18%;
  width: 82%;
  display: flex;
  justify-content: center;
}

.home-recruit-banner .banner-close{ right: calc(50% - 18em);}

}/* End max-840 */


@media screen and (max-width: 768px) {

.home-recruit-banner{
  margin: 3em 0 0 0;
  width: 100%;
}

.home-recruit-banner .banner-close{ right: calc(50% - 17em);}

}/* End max-768 */

@media screen and (max-width: 540px) {

.home-recruit-banner .banner-close{ right: 3rem;}

}/* End max-540 */

@media screen and (max-width: 460px) {

.home-recruit-banner .banner-close{ right: calc(50% - 12em);}

}/* End max-460 */

@media screen and (max-width: 380px) {

.home-recruit-banner .banner-close{ right: 3rem;}

}/* End max-380 */


.home-recruit-banner .image{
  position: absolute;
  left: 0.5rem;
  bottom: 0.4rem;
  margin: 0;
  width: 34%;
  max-width: 18rem;
  display: block;
  aspect-ratio: 1 / 1;
  z-index: 10;
}

.home-recruit-banner .bg{
  position: absolute;
  left: 0.2rem;
  bottom: 0.2rem;
  margin: 0;
  width: 100%;
  max-width: 30rem;
  display: block;
  aspect-ratio: 3 / 2;
  opacity: 0.7;
  z-index: 0;
}

.home-recruit-banner .bg::before{
  position: absolute;
  left: 0.2rem;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #fff;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 90%);
  content: "";
}

.home-recruit-banner .bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-recruit-banner a{ position: relative; width: 100%; max-width: 56rem; display: block;text-decoration: none;}

.home-recruit-banner dl{
  position: relative;  
  width: 100%;
  display: block;
  border: solid 0.2rem var(--ravio-red);
}

@media screen and (max-width: 768px) {

.home-recruit-banner dl{
  margin: auto;
  width: calc(100% - 4rem);
  max-width: 56rem;
}

}/* End max-768 */

.home-recruit-banner dl::before{  
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  border: solid 0.2rem #fff;
  content: "";
}

.home-recruit-banner dl dt{
  padding: 1rem 1rem 1rem 34%;
  display: block;
  background-color: var(--ravio-red);
  border-bottom: 0.2rem solid var(--ravio-red);
  color: #fff;
  font-weight: var(--ravio-fw-bold);
}

@media (hover: hover) {
.home-recruit-banner a:hover{ opacity: 1;}
.home-recruit-banner a dt{ transition: background-color 0.5s ease, color 0.5s ease; background-color: var(--ravio-red); color: #fff;}
.home-recruit-banner a:hover dt{ background-color: #fff; color: var(--ravio-red);}

}/* End hover */

.home-recruit-banner dl strong{ white-space: nowrap;}

.home-recruit-banner dl dd{
  position: relative;
  padding: 1rem 1rem 1rem 34%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  background-color: #fff;
  overflow: hidden;
  color: var(ravio-black);
}
.home-recruit-banner dl dd p{
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 10;
}

.home-recruit-banner dl dd span{ position: relative; z-index: 10;}

@media screen and (max-width: 460px) {

.home-recruit-banner a{
  margin: auto;
  width: calc(100% - 4rem);
  max-width: 34rem;
}

.home-recruit-banner .image{ width: 40%;}

.home-recruit-banner dl{
  margin: auto;
  width: 100%;
  max-width: 34rem;
}
.home-recruit-banner dl dt,
.home-recruit-banner dl dd{ padding: 1rem 1rem 1rem 40%;}
.home-recruit-banner dl p{ display: none;}
.home-recruit-banner .bg{ display: none;}

}/* End max-460 */


.home-recruit-banner dl dd span{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.home-recruit-banner dl dd span::after{
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: url(/ravio/common/img/icon_arrow.svg) no-repeat;
  background-size: contain;
  content: "";  
}



/* topmessage-section */

.topmessage-section{
  position: relative;
  padding: 8em 0 10em;  
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(224, 246, 255, 1) 100%);
}

.topmessage-section .home-section-inner{
  position: relative;
  margin: auto;
  width: calc(100% - 4rem);
  max-width: 128rem;
  display: flex;   
  align-items: flex-start;
  justify-content: center;
  gap: 5%;
  z-index: 10;
}

.topmessage-section .message{
  width: 30%;
  max-width: 36rem;
  aspect-ratio: 380 / 180;
  order: -1;
}

.topmessage-section .message-txt{
  width: 65%;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.topmessage-section h2{
  width: 100%;
  max-width: 34rem;
}



@media screen and (max-width: 768px) {

.topmessage-section .home-section-inner{
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2em;
}

.topmessage-section .message{
  width: 90%;
  max-width: 36rem;
  aspect-ratio: 380 / 180;
  order: 2;
}

.topmessage-section .message-txt{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

}/* End max-768 */




/* service-section */

.service-section{
  position: relative;
  padding: 40rem 0 0;
  background-color: var(--ravio-gray-4);
  overflow: hidden;
}

.service-section .section-bg-cube{
  position: absolute;
  top: calc(40rem + 5%);
  right: 0;
  width: 75%;
  max-width: 80rem;
  display: block;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  content: "";
  z-index: 1;
}
.service-section .section-bg-cube .svg-icon{ fill: #fff;}

.service-section .home-section-inner{
  position: relative;
  margin: 0 auto;
  padding-bottom: 6em;
  width: calc(100% - 4rem);
  max-width: 128rem;
  display: flex;   
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 4.6875%;
  z-index: 10;
}

.service-section h2{
  position: absolute;
  top: -34rem;
  left: 0;
  padding: 3rem 2rem;
  width: 14.0625%;
  display: flex;
  justify-content: center;
  background-color: #fff;
}

.service-section h2 img{
  width: 100%;
  max-width: 11rem;
  aspect-ratio: 94 / 388;
}

@media screen and (max-width: 880px) {

.service-section h2{
  position: absolute;
  top: -38rem;
  left: 0;
  padding: 0;
  width: 12rem;
  height: 36rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-section h2 img{ max-width: 8rem;}

}/* End max 880 */


.service-section .home-section-inner .service-section-inner{
  position: relative;
  margin-left: 18.75%;
  padding: 6rem 0 4rem;
  width: 81.25%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 3rem;
}


@media screen and (max-width: 880px) {

.service-section .home-section-inner .service-section-inner{
  margin-left: 0;
  width: 100%;
}

}/* End max 880 */


.service-section .message-txt{ width: calc(50% - 3rem);}

.home-shop-banner{
  width: 50%;
  max-width: 52rem;
  display: block;
  background-color: #fff;
}

.home-shop-banner a{ text-decoration: none;}

.home-shop-banner dl{
  position: relative;
  width: 100%;
  display: block;
  border: solid 0.2rem var(--ravio-red);
}

.home-shop-banner dl::before{  
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  border: solid 0.2rem #fff;
  content: "";
}

.home-shop-banner dl dt{
  padding: 1rem 1rem 1rem 28%;
  display: block;
  background-color: var(--ravio-red);
  color: #fff;
}

.home-shop-banner dl dd{

  padding: 1rem 1rem 1rem 28%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  background-color: #fff;
  color: var(ravio-black);
}
.home-shop-banner dl dd p{
  margin: 0;
  padding: 0;
}

.home-shop-banner dl dd span{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.home-shop-banner dl dd span::after{
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: url(/ravio/common/img/icon_arrow.svg) no-repeat;
  background-size: contain;
  content: "";  
}

.home-shop-banner .thumbnail{
  position: absolute;
  top: 1.2rem;
  left: 1rem;
  width: 24%;
  max-width: 12rem;
  display: block;
  aspect-ratio: 1 / 1;
}


@media screen  and (max-width: 1000px) {

.service-section .message-txt{ width: 100%;}

.home-shop-banner{
  position: absolute;
  top: 2rem;
  right: 0;
  max-width: 32rem;
}

.home-shop-banner dl dt{ padding: 1rem 1rem 1rem 9rem;}
.home-shop-banner dl dd{ padding: 1rem;}
.home-shop-banner dl dd p{ display: none;}
.home-shop-banner .thumbnail{ width: 6.8rem;}

}/* End max 1000 */


@media screen  and (max-width: 680px) {

.service-section .home-section-inner .service-section-inner{ padding: 4rem 0 2rem; flex-wrap: wrap; justify-content: flex-end; gap: 2rem;}

.home-shop-banner{
  position: relative;
  top: inherit;
  right: inherit;
  width: 100%;
  max-width: 32rem;
}

.home-shop-banner dl dt{ padding: 1rem 1rem 1rem 9rem;}
.home-shop-banner dl dd{ padding: 1rem;}
.home-shop-banner dl dd p{ display: none;}
.home-shop-banner .thumbnail{ width: 6.8rem;}

}/* End max 680 */


.service-slider{ margin-right: calc(50% - 50vw);}
  
.service-slider .splide__slide{  
  max-width: 34rem;
  padding: 0.5rem 1rem 1rem 0.5rem; 
}

.service-slider .splide__slide img{ box-shadow: 0.3rem 0.3rem 0.5rem 0 rgba(0, 0, 0,0.3);}

@media screen  and (max-width: 768px) {

.service-slider .splide__slide{ max-width: 30rem;}

}/* End max 768 */

@media screen  and (max-width: 480px) {

.service-slider .splide__slide{ max-width: 26rem;}

}/* End max 480 */


.service-section-image{
  position: absolute;
  top: 0;
  width: 100%;
  height: 40rem;
}

.service-section-image::before{
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background: url(/ravio/common/img/bg_dot.svg);
  background-size: 0.4rem;
  content: "";
  opacity: 0.9;
}

.service-section-image .bg{
  width: 100%;
  height: 40rem;
  display: block;
  object-fit: cover;
}


/* company-section */

.company-section{
  position: relative;
  padding: 10em 0 8em;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.company-section .company-image{
  position: relative;
  margin-left: auto;
  width: 82%;
  max-height: 72rem;
}

.company-section .company-image img{ width: 100%; max-width: 100%;}
.company-section-intro{
  position: absolute;  
  width: calc(100% - 4rem);
  max-width: 128rem;
  overflow: hidden;
  z-index: 10;
}

.company-section-intro .inner{
  padding: 5rem 5rem 5rem 2rem;
  width: 60%;
  max-width: 50rem;
  background-color: #fff;
}

@media screen  and (max-width: 768px) {

.company-section{
  position: relative;
  padding: 10rem 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.company-section .company-image{ width: 100%; order: -1;}

.company-section-intro{
  position: relative;
  top: -5rem;
  width: 90%;
  max-width: 54rem;
}

.company-section-intro .inner{
  padding: 4rem 2rem;
  width: 100%;
  max-width: 100%;
}

}/* End max 768 */




/* recruit-section */

.recruit-section{
  position: relative;
  padding: 10rem 0 8rem;
  width: 100%;
  display: block;
  overflow: hidden;  
}

@media screen  and (max-width: 768px) {

.recruit-section{ padding: 5rem 0 8rem;}

}/* End max 768 */

.recruit-section-intro{
  position: relative;
  margin: auto;
  width: calc(100% - 4rem);
  max-width: 128rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

.recruit-section-intro h2{
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruit-slider{
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 128rem;
}

.recruit-slider .splide__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.recruit-slider .splide__slide .inner{
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  overflow: hidden;
  aspect-ratio: 1 / 1.3;
}

/*
.recruit-slider .splide__slide a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  text-decoration: none;
}
*/
.recruit-slider .splide__slide a{
  display: block;
  overflow: hidden;
  text-decoration: none;
}

@media (hover: hover) {

.recruit-slider .splide__slide a:hover{ opacity: 1;}

.hover-image:hover { opacity: 1;}
.recruit-slider .splide__slide a img { transition: transform 0.5s ease;}
.recruit-slider .splide__slide a:hover img { transform: scale(1.05);}

}/* End hover */

.recruit-slider .splide__slide .hover-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  transform: scale(0.9);
  transition: transform 1s ease;
  box-shadow: 0.3rem 0.3rem 0.5rem 0 rgba(0, 0, 0,0.3);
}

.recruit-slider .splide__slide.is-active .hover-image { transform: scale(1);}

.recruit-slider .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}



/*
.recruit-slider .splide__slide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  transform: scale(0.9);
  transition: transform 1s ease;
  box-shadow: 0.3rem 0.3rem 0.5rem 0 rgba(0, 0, 0,0.3);
}

.recruit-slider .splide__slide.is-active img { transform: scale(1);}
*/

.recruit-slider .splide__slide dl {
  position: relative;
  width: 90%;
  height: 0;
  opacity: 0;  
  transition: opacity 1s ease, height 0.6s ease, width 0.6s ease;
}

.recruit-slider .splide__slide.is-active dl {
  margin: 1.5em 0 0;
  width: 100%;
  height: 20rem;
  opacity: 1;  
}

.recruit-slider .splide__slide dt {
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem;
  width: 100%;
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: var(--ravio-fs-l);
  font-weight: var(--ravio-fw-bold);
  white-space: nowrap;
  background: url(/ravio/common/img/icon_arrow.svg) center right 1rem no-repeat;
  background-size: 1.4rem;
  background-color: var(--ravio-gray-4);
}

.recruit-slider .splide__slide dt::after {
  position: absolute;
  top: 0;
  left: -10%;
  bottom: 0;
  width: 75%;
  height: 100%;
  display: block;
  background-color: var(--ravio-red);
  transform: skew(-45deg, 0deg);
  content: "";
  z-index: 0;
}

.recruit-slider .splide__slide strong {
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 480px) {


.recruit-slider .splide__slide .inner{
  padding: 1rem;
  justify-content: flex-start;
  aspect-ratio: auto;
}

.recruit-slider .splide__slide img { transform: scale(1);}

.recruit-slider .splide__slide dl,
.recruit-slider .splide__slide.is-active dl {
  margin: 1.5em 0 0;
  width: 100%;
  height: auto;
  opacity: 1;  
}

}/* End max 480 */


.recruit-slider .splide__arrows .splide__arrow--prev,
.recruit-slider .splide__arrows .splide__arrow--next{
  width: 4.8rem;
  height: 4.8rem;
  background: #fff;
  border: solid 0.3rem #57b4d7;  
  pointer-events: all;
  opacity: 1;
}

.recruit-slider .splide__arrows .splide__arrow--prev{ left: 0;}
.recruit-slider .splide__arrows .splide__arrow--next{ right: 0;}

.recruit-slider .splide__arrows .splide__arrow--prev.prev::after,
.recruit-slider .splide__arrows .splide__arrow--next.next::after{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  background: url(/ravio/common/img/icon_arrow_blue.svg) no-repeat;
  background-size: contain;
  content: "";
}

.recruit-slider .splide__arrows .splide__arrow--prev.prev::after{transform: scale(-1, 1);}

.recruit-slider .splide__arrows {
  position: absolute;
  top: 33%;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0;
  width: 100%;
  max-width: 56rem;
  pointer-events: none;
}

@media screen and (max-width: 768px) {

.recruit-slider .splide__arrows { width: 80%;}

}/* End max 768 */

@media screen and (max-width: 640px) {

.recruit-slider .splide__arrows { width: 84%;}

}/* End max 640 */


.recruit-foot{
  position: relative;
  margin: 1em auto 0;
  padding: 1em;
  width: 90%;
  max-width: 80rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 2em;
}

.recruit-foot::after{
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 1rem;
  background-color: rgb(255,255,255,0.5);
  backdrop-filter: blur(1rem);
  content: "";
  z-index: 1;
}

@media screen and (max-width: 768px) {

.recruit-foot{
  flex-direction: column;
  gap: 1.5em;
}

}/* End max 768 */


.recruit-foot p,
.recruit-foot a{ position: relative;  z-index: 10;}

.recruit-foot .link-button{
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 1rem;
  width: 80%;
  max-width: 26rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--ravio-red);
  border-radius: 0.4rem;
  color: #fff;
  font-size: var(--ravio-fs-ml);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-display: swap;
  font-weight: 600;
  letter-spacing: -0.01em;  
  line-height: 1;  
  text-decoration: none;
  white-space: nowrap;
}

.recruit-foot .link-button::before{
  position: absolute;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  display: block;
  border-radius: 2rem;
  background-color: #fff;
  content: "";
}
.recruit-foot .link-button::after{
  position: absolute; 
  right: 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  display: block;
  background: url(/ravio/common/img/icon_arrow.svg) center center no-repeat;
  background-size: contain;  
  content: "";
}

.recruit-bg{
  position: absolute;
  top: 18rem;
  left: 0;
  right: 0;
  margin: 0 calc(50% - 50vw);
  width: 100%;
  display: flex;
  justify-content: center;
  aspect-ratio: 1 / 1;
  opacity: 0.6;
  z-index: -1;
}

.mask-wrap{
  position: relative;
  margin: 0 auto;
  width: 100vw;
  height: 100vw;
  max-width: 160rem;
  max-height: 160rem;
  overflow: hidden;
  mask-image: url(/ravio/common/img/ravio_cube.svg);
  mask-size: cover;
  mask-position: center;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.mask-wrap .bg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;  
  width: 100%;
  height: 100%;
  transform-origin: center center;
  animation: rotation 30s linear infinite;
  will-change: transform;
  aspect-ratio: 1 / 1;
  z-index: 0;
}


@keyframes rotation {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}




/* shop-section */

.shop-section{
  position: relative;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.shop-section::before{
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;  
  background: url(/ravio/common/img/bg_dot.svg) ;
  background-size: 0.4rem;
  opacity: 0.2;
  z-index: -1;
  content: "";
}

.shop-section::after{
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgb(0,0,0,0.5);
  z-index: 1;
  content: "";
}

.shop-section-intro{
  position: relative;
  margin: 6em 0;
  padding: 0;
  width: 100%;
  display: block;
}

.shop-section-intro::before{
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  color: #fff;
  /*font-size: 12rem;*/
  font-size: min(max(6rem, calc(6rem + ((1vw - 0.58rem) * 20))), 12rem);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-display: swap;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
  content: "ONLONE SHOP";
  opacity: 0.2;
}

.shop-section-intro::after{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  display: block;
  background-color: var(--ravio-red);
  z-index: -500;
  content: "";
}

.shop-section-intro .inner{
  position: relative;
  margin: auto;
  padding: 4rem 0 4rem 40%;
  width: 100%;
  display: block;
  color: #fff;
  filter: drop-shadow(0 0 0.75rem rgb(0,0,0,0.4)) drop-shadow(0 0 0.75rem rgb(0,0,0,0.4));
  /*
  -webkit-text-stroke: 0.6rem var(--ravio-red);
  paint-order: stroke;
  filter: drop-shadow(0 0 0.75rem var(--ravio-red));
  */
  z-index: 10;
}

@media screen and (max-width: 880px) {

.shop-section-intro{
  display: flex;
  justify-content: center;
}

.shop-section-intro .inner{
  padding: 4rem 2rem 4rem;
  width: auto;
  filter: drop-shadow(0 0 0.75rem rgb(0,0,0,0.5)) drop-shadow(0 0 0.75rem rgb(0,0,0,0.5));
}

}/* End max 880 */

.shop-section .link-button{
  position: relative;
  padding: 1.5rem 1rem 1.5rem 3rem;
  width: 90%;
  max-width: 36rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 0.4rem;
  border: solid 0.2rem var(--ravio-red);
  color: var(--ravio-red);
  font-size: var(--ravio-fs-ml);
  text-decoration: none;
}

.shop-section .link-button::after{
  position: absolute; 
  left: 1.4rem;
  width: 3rem;
  height: 3rem;
  display: block;
  background: url(/ravio/common/img/icon_cart.svg) center center no-repeat;
  background-size: contain;  
  content: "";
}

.roop-slider-block{
  position: absolute;
  top: -20%;
  left: 0;
  margin: 0;
  height: 140%;
  display: flex;
  gap: 2rem;
  z-index: 1;  
  will-change: transform;
}

.roop-slider-skew{
  display: flex;
  flex-direction: column;
  transform: rotate(15deg);
}

.roop-slider-skew.reverse{
  display: flex;
  flex-direction: column;
  transform: rotate(195deg);
}

.roop-slider-skew.reverse img{ transform: rotate(-180deg);}

.roop-slider-skew .scroll {
  display: flex;
  flex-direction: column;
  animation: infinity-scroll 20s infinite linear;
}

.roop-slider-skew .scroll-li {
  margin-top: 2rem;
  width: 200px;
  aspect-ratio: 2 / 3;
}

@keyframes infinity-scroll {
  from { transform: translateX(0);}
  to { transform: translate3d(0, -50%, 0);}
}




/* letter-image */

.letter-image{
  position: absolute;
  bottom: -0.12em;
  right: 2rem;
  display: block;
  color: #fff;
  /*font-size: 12rem;*/
  font-size: min(max(6rem, calc(6rem + ((1vw - 0.58rem) * 20))), 12rem);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-display: swap;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}

.service-section-image .letter-image{ opacity: 0.75;}

.company-image .letter-image{ opacity: 0.75;}

.recruit-section .letter-image{
  top: -0.12em;
  left: inherit;
  right: inherit;
  margin: 0 auto;
  color: #cfe7f2;
  opacity: 1;
  z-index: -1;
}

.shop-section .letter-image{
  top: -0.12em;
  left: inherit;
  right: 2rem;
  margin: 0 auto;
  color: #fff;
  opacity: 0.2;
  z-index: -200;
}


@media screen  and (max-width: 768px) {

.company-image .letter-image{ top: -0.12em; bottom: inherit;}

}/* End max 768 */