@charset "utf-8";

.gjs-dashed .industry-item::before,
.gjs-dashed .case-img::before,
.gjs-dashed .case-img::after{
  display:none;
}

.gjs-dashed .case-txt{
  opacity:1;
  transform: translateY(-50%);
  -webkit-transform:  translateY(-50%);
  -ms-transform: translateY(-50%);
}

.lower-fv{
  margin:0;
}

.grd-h2 h2 em{
  font-style:italic;
  font-size:clamp(1rem, 0.636rem + 1.21vw, 2rem);
  font-weight: bold;
  margin-top:8px;
}

.case-main{
  position:relative;
  padding-top:70px;
}

.case-main::before{
  content:"";
  position:absolute;
  width:100%;
  aspect-ratio:1920/2522;
  background:url(https://fkrelations.co.jp/system_panel/uploads/images/20251203105104329452.png) no-repeat center/cover;
  top:0;
  left:0;
  z-index:-1;
}

.case{
  margin:10rem auto 200px;
}

.case-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position:relative;
  margin-bottom:100px;
}

.case-wrap.second{
  flex-direction:row-reverse;
}

.case-img{
  width:47%;
  position:relative;
}

.case-img::before{
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  background: #8D785A;
  top: 0;
  right: 0;
  transition: 0.3s;
  z-index:10;
}

.case-img.fadeUp::before{
  animation: date-btn 1s forwards ease-in-out;
}

.case-img::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #F8F8F8;
  top: 0;
  right: 0;
  transition: 0.3s;
}

.case-img.fadeUp::after{
  animation: date-btn-fade 1s forwards ease-in-out;
}

.case-img img{
  object-fit:cover;
  aspect-ratio:750/520;
}



.case-txt{
  width:60%;
  position:absolute;
  right:0;
  top: 50%;
  transform: translateX(100px) translateY(-50%);
  -webkit-transform: translateX(100px) translateY(-50%);
  -ms-transform: translateX(100px) translateY(-50%);
  padding:3rem 7.5%;
  opacity:0;
  transition:1s;
  transition-delay:1s;
}


.case-txt.fadeUp{
  opacity:1;
  transform: translateY(-50%);
  -webkit-transform:  translateY(-50%);
  -ms-transform: translateY(-50%);
}

.case-txt p{
  line-height:1.5;
}


.case-txt::before{
  content:"";
  position:absolute;
  width:100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(-7deg);
  -webkit-transform: translate(-50%, -50%) skewX(-7deg);
  -ms-transform: translate(-50%, -50%) skewX(-7deg);
  z-index:-1;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.case-txt .accent{
  color:#8D785A;
  font-size:clamp(0.938rem, 0.642rem + 0.98vw, 1.75rem);
}

.case-txt h3{
  font-size:clamp(1.375rem, 0.966rem + 1.36vw, 2.5rem);
}

.case-txt h3 + p{
  margin:1rem 0 2rem;
}

.case-txt h3 + p + p{
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
}

.industry{
  max-width:1300px;
}

.industry .lower-title{
  padding-top:2.5rem;
  margin-bottom:4rem;
}

.industry-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:55px 50px;
}

.industry-item{
  width:calc((100% - 100px ) / 3);
  position:relative;
  color:#fff;
  text-align:center;
  aspect-ratio:400/250;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.industry-item h3{
  font-size:clamp(0.938rem, 0.551rem + 1.29vw, 2rem);
  position:relative;
  z-index:10;
}

.industry-item p{
  font-size:clamp(0.688rem, 0.574rem + 0.38vw, 1rem);
  position:relative;
  z-index:10;
}

.industry-item::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(0,0,0,0.5);
  z-index:2;
}

.industry-item img{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:1;
  object-fit:cover;
}

.industry-item:nth-child(2),
.industry-item:nth-child(5){
  animation-delay:0.3s;
}

.industry-item:nth-child(3),
.industry-item:nth-child(6){
  animation-delay:0.6s;
}

@media (max-width: 1600px) {
  .case-txt h3 + p {
    margin: 4px 0 1rem;
  }
  .case-txt{
    padding: 2rem 5%;
  }
}

@media (min-width: 1280px) {
  .case-wrap.second .case-img::before{
    right: auto;
    left:0;
  }

  .case-wrap.second .case-img.fadeUp::before{
    animation: date-btn-reverse 1s forwards ease-in-out;
  }

  .case-wrap.second .case-img::after{
    right: auto;
    left:0;
  }


  .case-wrap.second .case-txt{
    transform: translateX(-100px) translateY(-50%);
    -webkit-transform: translateX(-100px) translateY(-50%);
    -ms-transform: translateX(-100px) translateY(-50%);
    right:auto;
    left:0;
  }

  .case-wrap.second .case-txt.fadeUp{
    transform: translateY(-50%);
    -webkit-transform:  translateY(-50%);
    -ms-transform: translateY(-50%);
  }
}

@media (max-width: 1279px) {
  .case-txt,
  .case-wrap.second .case-txt{
    position: relative;
    right: auto;
    top: auto;
    width: 80%;
    margin: -5rem 0 0 auto;
    z-index: 10;
    transform: translateX(50px) ;
    padding: 3rem 7%;
    transition-delay: 0.5s;
  }
  .case-wrap,
  .case-wrap.second{
    flex-direction: column;
    align-items: flex-start;
  }
  .case-img {
    width: 80%;
  }
  .case-txt.fadeUp,
  .case-wrap.second .case-txt.fadeUp{
    transform: none;
  }
}

@media (max-width: 1024px) {
  .industry-wrap{
    gap: 1rem 1rem;
  }
  .industry-item {
    width: calc((100% - 2rem) / 3);
  }
}

@media (max-width: 767px) {
  .industry-wrap {
    gap: 10px;
  }
  .industry-item {
    width: calc((100% - 10px) / 2);
  }
  .industry .lower-title{
    padding-top: 1.5rem;
    margin-bottom: 2rem;
    padding-left:0;
  }
  .industry-item:nth-child(odd){
    animation-delay: 0s;
  }
  .industry-item:nth-child(even){
    animation-delay: 0.3s;
  }
  .case {
    margin: 5rem auto;
    width: 100%;
  }
  .container.visitor{
    width:100%;
  }
  .case-img {
    width: 85%;
  }
  .case-txt, .case-wrap.second .case-txt{
    width: 95%;
    padding: 1.5rem 7% 1.5rem 10%;
    margin: -2rem 0 0 auto;
  }
  .case-txt h3 + p + p {
    font-size: 14px;
  }
  .case-txt h3 + p{
    font-size: 12px;
  }
  .case-txt::before{
    transform: translate(-50%, -50%) skewX(-5deg);
    -webkit-transform: translate(-50%, -50%) skewX(-5deg);
    -ms-transform: translate(-50%, -50%) skewX(-5deg);
  }
  .case-wrap, .case-wrap.second{
    margin-bottom:50px;
  }
  .case-main{
    padding-top: 1.5rem;
  }
  .case-main::before{
    display:none;
  }
  .lower-title h2:has(strong) {
    font-size: 20px;
  }
}