@charset "utf-8";

.grd-h2 h2 em{
  font-size: clamp(1.375rem, 0.966rem + 1.36vw, 2.5rem);
  margin:0;
}

.case-main::before{
  aspect-ratio: 3330 / 1542;
  background:url(https://fkrelations.co.jp/system_panel/uploads/images/20251204000111864843.png) no-repeat center/cover !important;
}

.service-cta{
  padding:110px 5% 180px !important;
  position:relative;
  margin-bottom:100px;
  color:#fff;
  z-index: 1;
  background:url(https://fkrelations.co.jp/system_panel/uploads/images/20251208105339903643.png) no-repeat bottom center/cover;
}

.service-cta-img1,
.service-cta-img2{
  position:absolute;
  width:35%;
}

.service-cta-img1{
  right:0;
  top:0;
}

.service-cta-img2{
  left:0;
  top: 22%;
  width: 45%;
}

.service-cta::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 1;
  background:url(https://fkrelations.co.jp/system_panel/uploads/images/20251208105339367540.png) no-repeat bottom center/cover;
}

.service-cta-list{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  font-size:clamp(1.125rem, 0.807rem + 1.06vw, 2rem);
  font-weight:bold;
  margin-bottom:2rem;
}

.service-cta-list p{
  line-height:1.5;
}

.service-cta-list strong{
  color:#816C4E;
  background:#fff;
  font-weight:bold;
  margin-left:8px;
  padding:2px 8px;
}

.service-cta-list img{
  width:2rem;
  padding-top:8px;
}

.fuan{
  text-align:center;
  font-size:clamp(1.125rem, 0.807rem + 1.06vw, 2rem);
  margin:3.5rem auto 0.5rem;
}

.fuan-img{
  width:350px;
  margin:0 auto 2.5rem;
  display: block;
}

.fuan-main{
  text-align:center;
  font-size:clamp(1.25rem, 0.795rem + 1.52vw, 2.5rem);
  line-height:1;
  letter-spacing:4px;
  font-weight:bold;
}

.fuan-main strong,
.fuan-main em{
  background:#8D785A;
  font-size:clamp(2.5rem, 1.591rem + 3.03vw, 5rem);
  margin:0 4px;
  padding: 4px 14px 12px 6px;
  font-weight:bold;
  font-style:italic;
}

.service-cta-txt{
  max-width:630px;
  margin:0 auto;
  position: relative;
  z-index: 10;
}

.case{
  position:relative;
  padding-bottom:10rem;
  margin-bottom:0;
}

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

.spoten-staff{
  width:85%;
  margin:180px auto 0;
  max-width:1600px;
  padding-bottom:3rem;
}

.staff-a{
  background-image: linear-gradient(135deg, #bca589, #8e775c);
  color:#fff;
  border-radius:999vh;
  width:175px;
  height:175px;
  font-size:clamp(1.25rem, 1.023rem + 0.76vw, 1.875rem);
  text-align:center;
  font-weight: bold;
  margin: -5rem auto 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition-duration: .4s;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
  padding-top: 1.5rem;
}

.staff-a:hover{
  transform: scale(1.1);
  color:#fff;
}

.staff-a p{
  line-height:1.3;
}

.staff-a img{
  width:23px;
}

.support-wrap{
  position:relative;
  display:flex;
  border:1px solid #BFBFBF;
  background:#fff;
  max-width:1310px;
  margin:0 auto 3rem;
  align-items: center;
  justify-content: end;
}

.support-wrap img{
  width:110px;
  position:absolute;
  left:0;
  top:0;
}

.support-wrap h3{
  width: calc(100% - 62% - 110px);
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  text-align: center;
}

.support-wrap  >  p{
  position:relative;
  width:62%;
  padding:2.5rem 0;
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
  padding-left:2rem;
}

.support-wrap > p::before{
  content:"";
  position:absolute;
  width:1px;
  height:80%;
  background:#BFBFBF;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.cta{
  margin-top:0;
}

.support-wrap-sp{
  display:none;
}

.service-cta-list:nth-child(3) strong{
  margin:8px 0 0;
}

@media (max-width: 1279px) {
  .support-wrap:not(.support-wrap-sp){
    display:none;
  }
  .support-wrap-sp{
    display:block;
  }
  .support-head{
    display: flex;
    align-items: center;
    gap: 20px;
    color:#fff;
    background:#6A6A6A;
    padding:10px;
  }
  .support-head .accent{
    font-size:clamp(0.625rem, 0.489rem + 0.45vw, 1rem);
  }
  .support-head .accent strong{
    font-size:clamp(1rem, 0.818rem + 0.61vw, 1.5rem);
  }
  .support-wrap h3 {
    width: fit-content;
  }
  .support-wrap {
    border:none;
    background:transparent;
  }
  .support-wrap > p{
    width:100%;
    padding: 1rem 5% 3rem;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
    background: #fff;
  }
  .support-wrap > p::before{
    display:none;
  }
  .service-cta-img1{
    top:2%;
    width:50%;
  }
  .service-cta-img2{
    top: 35%;
    width: 60%;
  }
}

@media (max-width: 1024px) {
  .service-cta-txt {
    max-width: 500px;
  }
  .staff-a{
    width: 150px;
    height: 150px;
    margin: -2.5rem auto 0;
  }
  .spoten-staff {
    width: 95%;
    margin: 100px auto 0;
    padding-bottom: 0rem;
  }
  .case-wrap{
    margin-bottom:4rem;
  }
  .case-wrap .arrow-btn{
    margin:0 auto;
  }
}

@media (max-width: 767px) {
  .grd-h2 h2 em{
    display:block;
  }
  .service-cta.container{
    width:100%;
    padding: 4rem 5% 100px !important;
    margin: 5rem 0 3rem;
  }
  .service-cta-list img {
    width: 1rem;
    padding-top: 8px;
  }
  .service-cta-list {
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .fuan{
    margin-top:3rem;
  }
  .fuan-img {
    width: 100px;
    margin: 0 auto 1.5rem;
  }
  .fuan-main strong, .fuan-main em{
    padding: 4px 8px 8px 6px;
  }
  .fuan-main{
    letter-spacing: 2px;
  }
  .service-cta-list strong{
    margin-left: 4px;
  }
  .service-cta-list:nth-child(2) strong{
    display:block;
    margin:8px 0 0;
    width: fit-content;
  }
  .support-wrap > p {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  }
  .support-wrap{
    margin-bottom:1rem;
  }
  .case{
    margin-top:100px;
    padding-bottom: 4rem;
  }
  .staff-a img {
    width: 16px;
  }
  .staff-a {
    width: 115px;
    height: 115px;
    margin: -0.5rem auto 0;
    gap: 8px;
    font-size: 18px;
    padding-top: 1.25rem;
  }
  .service-cta-img1 {
    top: 0%;
    width: 55%;
    max-width: 270px;
  }
  .service-cta-img2 {
    top: 50%;
    width: 70%;
    max-width: 300px;
  }
}