@charset "utf-8";


.gjs-dashed .swiper{
  overflow:visible;
  height:100%;
}

.gjs-dashed .lower-fv-title {
  transform: translateY(0);
  opacity: 1;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  animation: transition-vertical 0.4s 0.2s 
    cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.gjs-dashed .lower-fv-title strong{
  animation: transition-vertical 0.6s 0.2s 
    cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards, text-gradient-anim 0.6s 1s 
    cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
  opacity: 1;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

html { scroll-behavior: smooth;}

body{
  font-size:16px;
  font-family: "Noto Sans JP", sans-serif;
  color:#000000;
  font-weight: 500;
  background: #FFFFFF;
  word-break: auto-phrase;
}

.accent{
  font-family: "Anton", sans-serif;
}

h1,h2,h3,h4,h5{
  margin:0;
  font-weight: 900;
  line-height:1.5;
}

h1 strong,h2 strong,h3 strong,h4 strong,h5 strong{
  font-weight: 900;
}

p{
  margin:0;
  line-height:1.5;
}

.sp{
  display:none;
}

a{
  color: #282828;
  cursor: pointer;
  display:block;
  transition:0.3s;
  font-weight:500;
}

a:hover{
  color: #282828;
  text-decoration:none;
}


a p{
  line-height:1;
}

img{
  width:100%;
  object-fit: contain;
}

.container{
  padding:0 !important;
  max-width: 1920px;
  width: 80%;
}

.pankuzu{
  display: flex;
  margin: 240px 10% 1.5rem;
  gap: 2rem;
  flex-wrap: wrap;
  font-size:clamp(0.75rem, 0.614rem + 0.45vw, 1.125rem);
}

.pankuzu a{
  color:#000000;
  position: relative;
  font-weight:600;
}

.pankuzu a:hover{
  text-decoration:underline;
}

.pankuzu a::before{
  content:">";
  position: absolute;
  right: -1.3rem;
  top: 1px;
  line-height: 1;
}

.pankuzu p{
  line-height:1;
  font-weight:600;
}

strong{
  font-weight:500;
  display: inline-block;
}

.text-link{
  margin-top:100px;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight:900;
}

.text-link p:first-child{
  position: relative;
  display: inline-block;
  font-size: clamp(1.125rem, 0.807rem + 1.06vw, 2rem);
  text-decoration: none;
  z-index: 1;
}

.text-link p:first-child::before, 
.text-link p:first-child::after {
  content:'事業内容を見る';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.text-link p:first-child::before{
  color: #00ffff;
  z-index: -1;
}

.text-link p:first-child::after {
  color: #ff00ff;
  z-index: -2;
}

.text-link:hover p:first-child::before{
  animation: glitchy 0.3s ease 0.3s infinite;
}

.text-link:hover p:first-child::after{
  animation: glitchy 0.3s ease infinite reverse;
}

@keyframes glitchy {
  0%   {transform: translate(-2px, 2px);}
  25%  {transform: translate(-2px, -2px);}
  50%  {transform: translate(2px, 2px);}
  75%  {transform: translate(2px, -2px);}
  100%  {transform: translate(-2px, 2px);}
}

.text-link div{
  position: relative;
  display: inline-block;
  color: #fff;
  width:3.5rem;
  z-index: 1;
}

.text-link div::before,
.text-link div::after{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.text-link div::before{
  background-color: #00ffff;
  z-index: -1;
}

.text-link div::after{
  background-color: #ff00ff;
  z-index: -2;
}


.text-link:hover  div{
  animation: glitchy 0.3s ease 1;
}

.text-link:hover div::before{
  animation: glitchy 0.3s ease 0.3s infinite;
}

.text-link:hover div::after{
  animation: glitchy 0.3s ease infinite reverse;
}

.glitch-btn {
  margin:5rem auto 0;
  user-select: none;
  cursor: pointer;
  display: inline-block;
  font-size: clamp(1.5rem, 1.318rem + 0.61vw, 2rem);
  line-height: 1.4;
  text-transform: uppercase;
  z-index: 1;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  position:relative;
}

.glitch-btn::before {
  content: '';
  position: absolute;
  bottom: -1rem;
  left: -1.5rem;
  background: #B0B0E8;
  width: calc(100% + 3rem);
  height: 100%;
  padding: 0 15px;
  z-index: -2;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.glitch-btn::after {
  content: '';
  position: absolute;
  bottom: -0.6rem;
  left: -1.5rem;
  background:rgba(0,0,0,0);
  width: calc(100% + 3rem);
  height: 0%;
  z-index: -1;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.glitch-btn:hover {
  color: #fff;
}

.glitch-btn:hover::before {
  background: white;
  transform: translateY(-50%) scaleY(1.5);
}

.glitch-btn:hover::after {
  background: #040080;
  height:calc(100% + 1rem);
}

.mask {
  position: absolute;
  -webkit-backface-visibility: hidden;
  height: 20%;
  width: 100%;
  overflow: hidden;
  display: none;
}

.mask p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.mask:nth-child(2) { top: 0%; }
.mask:nth-child(2) p { top: 0%; }

.mask:nth-child(3) { top: 20%; }
.mask:nth-child(3) p { top: -100%; }

.mask:nth-child(4) { top: 40%; }
.mask:nth-child(4) p { top: -200%; }

.mask:nth-child(5) { top: 60%; }
.mask:nth-child(5) p { top: -300%; }

.mask:nth-child(6) { top: 80%; }
.mask:nth-child(6) p { top: -400%; }

/* Fade In */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Jitter Animations (SCSS mixin展開済み・乱数固定化) */
@keyframes jitter-20-20-8 {
  0% { transform: translate(0px, 0px); }
  20% { transform: translate(6px, -2px); }
  40% { transform: translate(-3px, 4px); }
  60% { transform: translate(2px, -3px); }
  80% { transform: translate(-1px, 2px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes jitter-20-21-8 {
  0% { transform: translate(0px, 0px); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(4px, -3px); }
  60% { transform: translate(-2px, 5px); }
  80% { transform: translate(3px, -2px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes jitter-20-22-8 {
  0% { transform: translate(0px, 0px); }
  20% { transform: translate(4px, -3px); }
  40% { transform: translate(-6px, 3px); }
  60% { transform: translate(3px, -4px); }
  80% { transform: translate(-2px, 2px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes jitter-20-23-8 {
  0% { transform: translate(0px, 0px); }
  20% { transform: translate(5px, 3px); }
  40% { transform: translate(-3px, -4px); }
  60% { transform: translate(2px, 3px); }
  80% { transform: translate(-2px, -1px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes jitter-20-24-8 {
  0% { transform: translate(0px, 0px); }
  20% { transform: translate(6px, -4px); }
  40% { transform: translate(-4px, 2px); }
  60% { transform: translate(3px, -2px); }
  80% { transform: translate(-2px, 3px); }
  100% { transform: translate(0px, 0px); }
}

/* Hover Animation */
.glitch-btn:hover .label {
  animation: fade-in 0.8s both;
}

.glitch-btn:hover .mask {
  display: block;
}

.glitch-btn:hover .mask:nth-child(2) {
  animation: jitter-20-24-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(3) {
  animation: jitter-20-23-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(4) {
  animation: jitter-20-22-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(5) {
  animation: jitter-20-21-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(6) {
  animation: jitter-20-20-8 0.3s both;
}


.lower-fv-title{
  font-size:clamp(4.5rem, 2.045rem + 8.18vw, 11.25rem);
  font-weight:900;
  margin-bottom:10rem;
  line-height: 1.1;
  display: inline-block;
  position: relative;
  transform: translateY(12.5%);
  transition: transform 1.2s 0.2s 
    cubic-bezier(0.230, 1.000, 0.320, 1.000);
  opacity: 0;
}

.lower-fv-title.fadeUp{
  transform: translateY(0);
  opacity: 1;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  animation: transition-vertical 0.4s 0.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

.lower-fv-title strong{
  font-style: normal;
  display: inline-block;
  background: radial-gradient(circle at center, #B49963, #040080, #040080, #040080);
  background-size: 200% 100%;
  background-position: 0 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
}

.lower-fv-title.fadeUp strong{
  animation: transition-vertical 0.6s 0.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards, text-gradient-anim 0.6s 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
  opacity: 1;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

.main{
  position:relative;
}

.lower-title{
  position:relative;
  width:fit-content;
}

.lower-title p{
  font-size:clamp(6.25rem, 3.977rem + 7.58vw, 12.5rem);
  color:#EFEFFA;
  letter-spacing: -2px;
}

.lower-title h2{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size:clamp(2rem, 1.636rem + 1.21vw, 3rem);
  width: max-content;
}

.lower-anker{
  position:sticky;
  left:10%;
  top:15%;
  display: flex;
  flex-direction: column;
  gap:1rem;
  width:fit-content;
  z-index:9999;
}

.lower-anker a{
  font-size:clamp(0.875rem, 0.784rem + 0.3vw, 1.125rem);
  color:#000000;
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
}

.lower-anker a:hover{
  opacity:0.7;
}

.lower-anker a::before{
  content:"";
  border:1px solid #B49963;
  width:1rem;
  height:1rem;
}


body:has(.fadeUpTrigger_office1.isActive) .lower-anker a:first-child::before{
  background:#B49963;
}

body:has(.fadeUpTrigger_office2.isActive) .lower-anker a:nth-child(2)::before{
  background:#B49963;
}

body:has(.fadeUpTrigger_office3.isActive) .lower-anker a:nth-child(3)::before{
  background:#B49963;
}

body:has(.merit.fadeUpTrigger_office2.isActive) .lower-anker a,
body:has(.contact.fadeUpTrigger_office6.isActive) .lower-anker a,
body:has(.message.fadeUpTrigger_office3.isActive) .lower-anker a{
  color:#fff;
}

body:has(.fadeUpTrigger_office4.isActive) .lower-anker a:nth-child(4)::before{
  background:#B49963;
}

body:has(.fadeUpTrigger_office5.isActive) .lower-anker a:nth-child(5)::before{
  background:#B49963;
}

body:has(.fadeUpTrigger_office6.isActive) .lower-anker a:nth-child(6)::before{
  background:#B49963;
}

@keyframes  transition-vertical{
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
  90% {
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes  text-gradient-anim{
  0% {
    background-position: 0 100%;
  }

  100% {
    background-position: 250% 100%;
  }
}

.contact-banner{
  padding:5rem 0 0;
  position:relative;
}

.contact-banner::before{
  content:"";
  position:absolute;
  width:100%;
  height:85%;
  top:0;
  left:0;
  background-image: radial-gradient(#2c26fa, #040080);
  z-index:-1;
}

.contact-banner h2{
  color:#fff;
  font-size:clamp(2rem, 0.909rem + 3.64vw, 5rem);
  margin-bottom:4rem;
  line-height: 1.1;
  text-align:center;
}

.contact-banner h2 strong{
  font-size:clamp(2.5rem, 1.136rem + 4.55vw, 6.25rem);
}

.contact-banner-wrap{
  padding:0 5% 5rem ;
  max-width:1345px;
  margin:0 auto;
  position:relative;
  display:flex;
  justify-content: center;
  gap: 5%;
}

.contact-banner-wrap > a{
  width:47.5%;
  padding:2.5rem 3%;
  background:#FFFFFF;
  max-width:550px;
  position:relative;
  z-index:1;
  overflow:hidden;
}

.contact-banner-wrap > a::before{
  content:"RECRUIT";
  position:absolute;
  width:100%;
  height:100%;
  color:#EFEFFA;
  font-size:clamp(7rem, 5rem + 6.67vw, 12.5rem);
  font-family: "Anton", sans-serif;
  top: 55%;
  left: 45%;
  transform: translate(-50%, -50%) rotate(-25deg);
  -webkit-transform: translate(-50%, -50%) rotate(-25deg);
  -ms-transform: translate(-50%, -50%) rotate(-25deg);
  z-index:-1;
  transition:0.3s;
}

.contact-banner-wrap > a:last-child::before{
  content:"CONTACT";
}

.contact-banner-wrap > a:hover::before{
  transform: translate(-50%, -50%) rotate(-25deg) scale(1.1);
  -webkit-transform: translate(-50%, -50%) rotate(-25deg) scale(1.1);
  -ms-transform: translate(-50%, -50%) rotate(-25deg) scale(1.1);
}

.contact-banner-wrap > a .box{
  position:absolute;
  width:12%;
  right:5%;
  bottom:2.5rem;
}

.contact-banner-wrap > a .box::before, 
.contact-banner-wrap > a .box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.contact-banner-wrap > a .box::before {
  background-color: #00ffff;
  z-index: -1;
}

.contact-banner-wrap > a .box::after {
  background-color: #ff00ff;
  z-index: -2;
}

.contact-banner-wrap > a:hover .box{
  animation: glitchy 0.3s ease 1;
}

.contact-banner-wrap > a:hover .box::before{
  animation: glitchy 0.3s ease 0.3s infinite;
}

.contact-banner-wrap > a:hover .box::after{
  animation: glitchy 0.3s ease infinite reverse;
}

.contact-banner-wrap > a h3{
  font-size:clamp(1.25rem, 0.795rem + 1.52vw, 2.5rem);
  margin-bottom:3.5rem;
  color:#040080;
}

.contact-banner-wrap > a p{
  color:#040080;
  line-height:2;
  font-weight:700;
  font-size:clamp(0.875rem, 0.739rem + 0.45vw, 1.25rem);
}

.contact-banner-wrap > a p strong{
  color:#B49963;
  font-weight:700;
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
}

.contact-banner-wrap::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  z-index:-10;
  background:#040080;
  top:0;
  left:0;
}



.lower-top{
  width:70%;
  margin:0 0 10rem auto;
  border-top:10px solid #040080;
  border-bottom:10px solid #040080;
  padding:2.5rem 5% 2.5rem 0;
  color:#040080;
  font-size:clamp(1.5rem, 0.955rem + 1.82vw, 3rem);
  font-weight:900;
  max-width:1200px;
}

.lower-top p{
  line-height:1.6;
}

.lower-top p strong{
  font-weight:900;
}

.stack-p{
  display:flex;
  margin-top: 8px;
  font-size:clamp(2rem, 1.455rem + 1.82vw, 3.5rem);
}

.stack {
  --stacks: 3; /* ここにまとめる */
  display: grid;
  grid-template-columns: 1fr;
  width:fit-content;
  font-weight:900;
  margin-right:8px;
  color:#fff;
  line-height: 1.5;
  background-image: radial-gradient(#2c26fa, #040080);
  padding:0 8px;
  overflow: hidden;
}

.stack p{
  grid-row-start: 1;
  grid-column-start: 1;
  --stack-height: calc(100% / var(--stacks) - 1px);
}

.stack.fadeUp p{
  animation: glitch 2s ease infinite 2s alternate-reverse;
}

/* 各spanごとのindexを :nth-child() で指定 */
.stack p:nth-child(1) {
  --index: 0;
  --inverse-index: calc(var(--stacks) - 1 - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
}

.stack.fadeUp p:nth-child(1){
  animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms),
    glitch 2s ease infinite 2s alternate-reverse;
}

.stack p:nth-child(2) {
  --index: 1;
  --inverse-index: calc(var(--stacks) - 1 - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
}

.stack.fadeUp p:nth-child(2){
  animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms),
    glitch 2s ease infinite 2s alternate-reverse;
}

.stack p:nth-child(3) {
  --index: 2;
  --inverse-index: calc(var(--stacks) - 1 - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
}

.stack.fadeUp p:nth-child(3){
  animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms),
    glitch 2s ease infinite 2s alternate-reverse;
}

/* 奇数・偶数でグリッチ方向を変える */
.stack p:nth-child(odd) {
  --glitch-translate: 8px;
}
.stack p:nth-child(even) {
  --glitch-translate: -8px;
}

/* アニメーション定義 */
@keyframes stack {
  0% {
    opacity: 0;
    transform: translateX(-50%);
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
  }
  60% {
    opacity: 0.5;
    transform: translateX(50%);
  }
  80% {
    transform: none;
    opacity: 1;
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  100% {
    text-shadow: none;
  }
}

@keyframes glitch {
  0% {
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
    transform: translate(var(--glitch-translate));
  }
  2% {
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  4%, 100% {
    text-shadow: none;
    transform: none;
  }
}



@media screen and (max-width: 1600px) {
  .lower-anker {
    left: 5%;
    top:20%;
  }
}

@media screen and (max-width: 1400px) {
  .autoplay-slide{
    width:250px;
  }
}

@media screen and (max-width: 1279px) {
  .contact-banner-wrap > a h3{
    margin-bottom: 1.5rem;
  }
  .contact-banner-wrap > a .box{
    width:10%;
  }
  .contact-banner .container{
    width: 90%;
  }
}

@media screen and (max-width: 1024px) {
  .contact-banner-wrap > a h3 {
    margin-bottom: 0.5rem;
  }
}

@media screen and (max-width: 767px) {
  .sp{
    display:block;
  }
  .pc{
    display:none;
  }
  body{
    font-size:14px;
  }
  .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{
    padding:0;
  }
  .autoplay-slide {
    width: 150px;
    margin: 0 4px;
  }
  p{
    line-height: 2;
  }
  .container{
    width:90%;
  }
  .pankuzu{
    margin: 180px 5% 1.5rem;
  }
  .lower-fv-title{
    margin-bottom:100px;
  }
  .contact-banner-wrap{
    flex-direction:column;
    gap:1.5rem;
    padding:0 0 5rem;
    width:90%;
    margin:0 auto;
  }
  .contact-banner-wrap > a {
    width: 100%;
  }
  .contact-banner-wrap::before{
    display:none;
  }
  .contact-banner::before{
    height:100%;
  }
  .contact-banner{
    margin-bottom:5rem;
  }
  .contact-banner .container{
    width:100%;
  }
  .text-link div{
    width:2.5rem;
  }
  .contact-banner h2{
    margin:0 5% 2rem;
  }
  .contact-banner-wrap > a::before{
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%) rotate(-15deg);
  }
}