@charset "UTF-8";
.mv { position: relative; margin-top: var(--fixed-header-height); }
.mv__swiper { padding: 0; overflow: hidden; background: #4e4770; }
.mv__slide { width: 100% !important; }
.mv__image img { width: 100%; height: clamp(360px, 55vw, 640px); object-fit: cover; display: block; }
.mv__content { position: absolute; left: 8%; top: 50%; transform: translateY(-50%); color: #fff; z-index: 3; pointer-events: none; }
.mv__en { position: relative; display: block; overflow: visible; }
.mv__en-line { position: relative; display: block; overflow: hidden; width: fit-content; }
.mv__en-line::before { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left center; z-index: 1; }
.mv__en-text { position: relative; z-index: 2; color: #fff; font-weight: 600; line-height: 1.2; font-size: clamp(35px, 8vw, 80px); opacity: 0; display: inline-block; }
.mv__en-line:nth-child(1)::before { animation: bgSlideAndFade 1.5s cubic-bezier(0.8, 0, 0.4, 1) forwards; }
.mv__en-line:nth-child(1) .mv__en-text { animation: textAppear 0.4s ease forwards; animation-delay: .7s; }
.mv__en-line:nth-child(2)::before { animation: bgSlideAndFade 1.5s cubic-bezier(0.8, 0, 0.4, 1) forwards .2s; }
.mv__en-line:nth-child(2) .mv__en-text { animation: textAppear 0.1s ease forwards; animation-delay: .7s; }
@keyframes bgSlideAndFade {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  25% {
    transform: scaleX(1);
    opacity: 1;
  }
  70% {
    transform: scaleX(.95) translateX(95%);
    opacity: 1;
  }
  100% {
    transform: scaleX(1) translateX(100%);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes textAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.mv__jp { font-size: clamp(16px, 3vw, 24px); letter-spacing: .15em; font-weight: 700; transform: translateY(10px); }
.swiper-backface-hidden .swiper-slide { margin-right: 0!important; }

.lead { padding: clamp(50px, 10vw, 100px) 0; }
.lead .lead_inner { max-width: 850px; width: 90%; margin: 0 auto; }
.lead p.lead_ttl { font-size: clamp(20px, 5vw, 34px); line-height: 1.9; margin-bottom: clamp(30px, 5vw, 45px); font-weight: 500; letter-spacing: .2em;}
.lead p.lead_txt { font-size: clamp(14px, 3vw, 20px); line-height: 1.8; letter-spacing: .05em; }

.news { background: #e5e3ea; padding: clamp(40px, 5vw, 70px) 0; position: relative; z-index: 0; }
.news::after { content: ""; position: absolute; inset: 0; background: #d3d1db; clip-path: polygon(0 0, 0 100%, 10% 0); height: 100%; z-index: -1; pointer-events: none; }
.news__inner { width: min(850px, 90%); margin: 0 auto; }
.news__ttl { margin: 0 auto 20px; display: inline-flex; align-items: baseline; gap: 18px; letter-spacing: .05em;}
.news__ttl-en { font-family: var(--font-en); font-size: clamp(30px, 5.6vw, 54px); font-weight: 600; color: #2b2b2b; line-height: 1; }
.news__ttl-jp { font-size: clamp(14px, 1.6vw, 16px); font-weight: 500; color: #2b2b2b; letter-spacing: .2em; }
.news__panel { background: #fff; border: 1px solid rgba(0,0,0,.18); padding: 0; height: 185px; overflow: auto; scrollbar-gutter: stable; }
.news__list { margin: 0; padding: 0; }
.news__link { display: flex; align-items: center; padding: 14px 18px; color: #2b2b2b; gap: 40px; }
.news__date { font-weight: 700; font-size: clamp(14px, 1.5vw, 16px); white-space: nowrap; }
.news__date::before { content: ''; width: 10px; height: 10px; border-right: 2px solid #2b2b2b; border-bottom: 2px solid #2b2b2b; margin-right: 10px;transform: rotate(-45deg); display: inline-block; }
.news__text { font-size: clamp(14px, 1.5vw, 16px); line-height: 1.6; margin-left: 10px; }

.service { padding: clamp(35px, 15vw, 230px) 0; background: #fff; position: relative; overflow: hidden; }
.service::before { content: ""; position: absolute; inset: 0; background: #f0eff3; clip-path: polygon(100% 0, 100% 0, 100% 100%, 0% 240%); height: 80%; z-index: 0; pointer-events: none; }
.service__inner { max-width: 1440px; margin: 0 auto; position: relative; z-index: 1; }
.service__head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.service__ttl { margin: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.service__ttl-en { font-family: var(--font-en, "Poppins", sans-serif); font-size: clamp(60px, 10vw, 150px); font-weight:700; letter-spacing: .02em; color: #2b2b2b; line-height: 1; }
.service__ttl-jp { font-size: clamp(16px, 3vw, 28px); font-weight: 500; letter-spacing: .12em; }
.service__items { display: grid; row-gap: clamp(44px, 5vw, 64px); }
.service__item { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 130px); align-items: center; position: relative; }
.service__item--left { grid-template-columns: 1.4fr 1fr; }
.service__item--right { grid-template-columns: 1fr 1.4fr; }
.service__item--left .service__body { order: 2; margin-left: 0; }
.service__item--left .service__media { order: 1; }
.service__item--right .service__body { order: 1; margin-right: 0; }
.service__item--right .service__media { order: 2; }
.service__body { max-width: 470px; width: 90%; margin: 0 auto; }
.service__num { margin: 0 0 clamp(15px, 1.5vw, 45px); max-width: 42px; }
.service__lead { margin: 0 0 12px; font-size: clamp(18px, 2.5vw, 34px); font-weight: 600; line-height: 1.6; letter-spacing: .08em; }
.service__text { margin: 0 0 clamp(20px, 5vw, 60px); font-size: clamp(14px, 1.5vw, 16px); line-height: 2.1; }
.service__icons { margin: 0; padding: 0; list-style: none; display: flex; gap: 14px; }
.service__icon { max-width: min(105px, 22vw); height: auto; display: block; }
.service__media { margin: 0; position: relative; }
.service__media img { width: 100%; height: auto; display: block; border-radius: 2px; }

.projects { background: #e5e3ea; padding-bottom: clamp(60px, 8vw, 125px); position: relative; }
.projects__inner { padding-left: 10%; margin: 0 auto; position: relative; padding-top: 170px; }
.projects__head { text-align: center; margin-bottom: 0; position: absolute; top: 0; left: 0; right: 0; transform: translateY(-50%); z-index: 2; }
.projects__ttl { margin: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; position: static; }
.projects__ttl-en { font-family: var(--font-en, "Montserrat", sans-serif); font-size: clamp(56px, 8vw, 120px); font-weight: 800; letter-spacing: .06em; color: #2b2b2b; line-height: 1; }
.projects__ttl-jp { font-size: clamp(16px, 3vw, 28px); font-weight: 500; letter-spacing: .12em; }
.projects__swiper { width: 100%; position: relative; overflow: hidden; padding: 0 0 96px; touch-action: pan-y; }
.projects__swiper .swiper-wrapper { align-items: flex-start; margin-bottom: 70px; gap: 30px; touch-action: pan-y;}
.projects__slide { width: clamp(320px, 32vw, 560px)!important; user-select: none!important; }
.projects__img { margin: 0; background: #fff; }
.projects__img img { width: 100%; height: auto; display: block; }
.projects__name { margin:50px 0 30px; font-size: clamp(18px, 2.5vw, 28px); line-height: 1; color: #2b2b2b; }
.projects__text { margin: 0; font-size: clamp(14px, 1.5vw, 16px); line-height: 2.1; color: #2b2b2b; }
.projects__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.projects__li { font-size: clamp(14px, 1.5vw, 16px); line-height: 1.6; color: #2b2b2b; position: relative; padding-left: 18px; }
.projects__li::before { content: "◆"; position: absolute; left: 0; top: 0; }
.projects__bar { position: absolute; left: 0; right: 230px; bottom: 22px; height: 6px; background: rgba(255,255,255,.65); border-radius: 999px; overflow: hidden; z-index: 1; }
.projects__bar-fill { height: 100%; width: 20%; background: rgba(0,0,0,.45); border-radius: 999px; transform: translateX(0); }
.projects__nav { position: absolute; right: 0; bottom: 0; display: flex; gap: 12px; z-index: 3; right: 5% }
.projects__btn { width: 56px; height: 56px; border-radius: 999px; background: #fff; border: none; display: grid; place-items: center; cursor: pointer; pointer-events: auto; }
.projects__btn::before { content: ""; width: 18px; height: 18px; background: url("../img/common/icon_arrow.svg") no-repeat center / contain; }
.projects__btn--prev::before { transform: rotate(180deg); }

.recruit { background: #d9d7df; overflow: hidden; }
.recruit__inner { width: 100%; display: grid; grid-template-columns: 1.05fr 1.65fr; /*grid-template-columns: 1.05fr 1.95fr;*/ min-height: clamp(260px, 32vw, 420px); }
.recruit__body { z-index: 1; padding: 5% 5% 5% 25%; display: grid; align-content: center; justify-items: start; }
.recruit__ttl { margin: 0 0 15px; font-family: var(--font-en, "Poppins", sans-serif); font-size: clamp(56px, 7.2vw, 110px); font-weight: 700; letter-spacing: .06em; color: #2b2b2b; line-height: 1; }
.recruit__text { margin: 0 0 clamp(15px, 1.5vw, 25px); font-size: clamp(14px, 1.5vw, 16px); line-height: 2.1;}
.recruit__btn { display: inline-flex; align-items: center; gap: 16px;  }
.recruit__btn-label { font-size: clamp(14px, 1.5vw, 16px); letter-spacing: .04em; transition: .5s;}
.recruit__btn-ico { width: 56px; height: 56px; border-radius: 999px; background: #fff;  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; position: relative; overflow: hidden; }
.recruit__btn-ico::before { content: ""; width: 18px; height: 18px; background: url("../img/common/icon_arrow.svg") no-repeat center / contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.recruit__media { margin: 0; position: relative; }
.recruit__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recruit__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(217,215,223,1) 0%, rgba(217,215,223,.35) 10%, rgba(217,215,223,0) 15%); pointer-events: none; }
.recruit__media_sp { display: none; }

@media (hover: hover) and (pointer: fine) {
  .news__link { transition: opacity .25s ease; }
  .news__link:hover { opacity: .65; }
  .news__link:focus-visible { outline: 2px solid rgba(66,96,217,.65); outline-offset: 2px; } 

  .projects__btn { transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease; }
  .projects__btn:hover { opacity: .9; transform: scale(.96); box-shadow: 0 2px 6px rgba(0,0,0,.12) inset; }
  .recruit__btn:hover .recruit__btn-label { color: #4e4770; font-weight: 700; transition: opacity .25s ease; }
  .recruit__btn:hover .recruit__btn-ico::before { animation: arrowSlide 0.6s ease forwards; }
  
  @keyframes arrowSlide {
    0% {
      transform: translate(-50%, -50%);
    }
    50% {
      transform: translate(150%, -50%);
    }
    51% {
      transform: translate(-150%, -50%);
    }
    100% {
      transform: translate(-50%, -50%);
    }
  }
}

@media only screen and (max-width: 980px){
  .news__panel { height:180px; }
  .news__link { gap: 5px; flex-direction: column; align-items: flex-start; padding: 25px 20px 0; }
  .news__date { grid-column: 2; }
  .news__text { margin-left: 0; }
  .news::after { clip-path: polygon(0 0, 0 100%, 30% 0); height: 70%; }
  .service::before { clip-path: polygon(100% 0, 100% 0, 100% 50%, 80% 50%); height: 20%; }
  .service__item { row-gap: 20px; flex-direction: column-reverse; display: flex; }
  .service__media img { width: 90%; margin: 0 auto; }
  .service__body { max-width: none; }
  .service__item--left .service__body, .service__item--right .service__body { order: 1; width: 90%; margin: 0 auto;} 
  .service__item--left .service__media, .service__item--right .service__media { order: 2; }
  .service__item--right .service__media::before, .service__item--left .service__media::before { display: none; }
  .recruit__body { padding: 5%; }
  .recruit__inner { grid-template-columns: 1fr; }
  .recruit__media { display: none;}
  .recruit__media_sp { display: block; width: 100%; margin-bottom: 30px; }
  .projects { padding: 64px 0 56px; }
  .projects__swiper { padding-bottom: 124px; }
  .projects__bar { left: 0; right: 150px; }
  .projects__slide { width: min(78vw, 460px); } 

}

/*　600pxからレスポンシブ*/
@media only screen and (max-width: 600px){
  :root{--gutter:16px}
  .header-inner{height:56px}
  .site-nav{display:none}
  .service__num { max-width: 23px; }
  .service__icons { display: flex; justify-content: space-between; flex-wrap: wrap; }
  .service__icon { max-width: calc(90% / 3); }
  .flow-steps{grid-template-columns:repeat(2,1fr)}
  .news__ttl { display: flex; flex-direction: column; gap: 5px; }
  .news__ttl-jp { display: blocks; }
  .mv-row{grid-template-columns:1fr}
  .c-studio__title{ letter-spacing:.03em; }
  .c-studio__caption{ padding-left:14px; border-left-width:3px; }
  .c-message__panel {border-radius: 60px 0 60px 0; }
  .c-case_inner { border-radius: 60px 0 60px 0; }
  .c-faq__item{ padding-block:16px; }
  .c-faq__q{ margin:0 0 .5em; }
  .c-contact{ padding-block:clamp(60px,10vw,160px); }
  .c-contact__arrow {margin-top: 0;}
  .c-contact__arrow svg{ width:15px; height:15px; padding: 10px; } 
  .c-contact__text p { text-align: left; }
  .c-flow { padding-block:clamp(50px,10vw,80px); }
  .c-flow-card { border-radius:24px; min-height:auto; }
  .c-flow-card__badge { width:40px; height:40px; font-size:16px; }
  .c-flow__num { width:35px; height:35px; font-size:14px; }
  .c-contact__tel a img { max-width: 11px; }
  .c-flow-card__list li:before { width: 15px; height: 15px; font-size: 10px; top: 0.3em; }
  .c-flow__bottom-list { flex-direction: column; align-items: flex-start; }
  .projects__slide { width: 86vw; }
  .projects__btn , .recruit__btn-ico { width: 45px; height: 45px; }
  .projects__head { top: -50px; }
  .projects__inner { padding: 5%; }
  .projects__name { margin: 30px 0 20px; }
  .projects__swiper .swiper-wrapper { margin-bottom: 100px; }
  .recruit__body { padding: 30px 5%; }
  }