@font-face {
  font-family: 'Cabinet Grotesk';
  src:
    url('https://19853391.fs1.hubspotusercontent-na2.net/hubfs/19853391/CabinetGrotesk-Extrabold.woff2') format('woff2'),

  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* =========================
共通
========================= */

.recruit-blog-link-module{
  display:inline-block;
  flex-shrink:0;
}

.recruit-blog-link{
  
   --btn-scale:1;
  
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:space-between;

  width:calc(185px * var(--btn-scale));
  height:calc(48px * var(--btn-scale));

  padding:0 calc(16px * var(--btn-scale));

  border:1px solid #6b7280;
  border-radius:6px;

  background:#fff;
  color:#111;

  text-decoration:none;

  font-size:calc(12px * var(--btn-scale));
  
  font-family:
    "Noto Sans JP",
    sans-serif;
  
  font-weight:700;

  box-sizing:border-box;

  z-index:5;
}

.recruit-blog-link::before{
  content:"";

  position:absolute;
  inset:0;

  background:#111;

  transform:scaleX(0);
  transform-origin:left;

  z-index:0;

  transition:none;
}

.recruit-blog-link:hover::before{
  transform:scaleX(1);
  transition:transform .2s ease;
}

.recruit-blog-link:hover{
  color:#fff;
  border-color:#111;
}

.recruit-blog-link,
.recruit-blog-link:hover,
.recruit-blog-link:focus,
.recruit-blog-link:active,
.recruit-blog-link:visited{
  text-decoration:none !important;
}

.recruit-blog-link-text-wrap{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  width:calc(118px * var(--btn-scale));
  height:100%;

  z-index:2;
}

.recruit-blog-link-text-default{
  position:absolute;
  opacity:1;
  white-space:nowrap;
}

.recruit-blog-link-text-hover{
  position:absolute;
  opacity:0;
  white-space:nowrap;
}

.recruit-blog-link:hover .recruit-blog-link-text-default{
  opacity:0;
}

.recruit-blog-link:hover .recruit-blog-link-text-hover{
  opacity:1;
}

.recruit-blog-link-divider{
  position:relative;

  z-index:2;

  width:1px;
  height:calc(24px * var(--btn-scale));

  background:currentColor;

  margin-left:auto;
  margin-right:calc(6px * var(--btn-scale));

  flex-shrink:0;
}

.recruit-blog-link-arrow{
  position:relative;

  z-index:2;

  width:calc(18px * var(--btn-scale));

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:calc(15px * var(--btn-scale));

  font-weight:300;
  line-height:1;

  flex-shrink:0;

  transform:translateY(-1px);
}

/* =========================
outer
========================= */

.recruit-blog-outer{

  position:relative;

  width:100%;

  padding:
    clamp(20px, 4vw, 60px);

  border-radius:
    clamp(20px, 3vw, 40px)
    clamp(20px, 3vw, 40px)
0
    0;

  overflow:hidden;

  box-sizing:border-box;

  isolation:isolate;

}

/* =========================
緑背景
========================= */

.recruit-blog-outer::before{

  content:"";

  position:absolute;

  inset:0;

  background:#eaf1f0;

  z-index:0;

}

/* =========================
背景画像レイヤー
========================= */

.recruit-blog-outer::after{

  content:"";

  position:absolute;

  inset:0;

  background-image:
    url("https://19853391.fs1.hubspotusercontent-na2.net/hubfs/19853391/%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%203.png"),
    url("https://19853391.fs1.hubspotusercontent-na2.net/hubfs/19853391/%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%205-1.png");

  background-repeat:
    no-repeat,
    no-repeat;

  background-size:
    clamp(220px, 28vw, 420px) auto,
    clamp(260px, 34vw, 520px) auto;

  background-position:
    left clamp(-120px, -8vw, -40px)
    top clamp(1000px, 85vw, 1700px),

    right clamp(-140px, -9vw, -50px)
    top clamp(800px, 60vw, 1000px);

  opacity:.75;

  filter:blur(10px);

  transform:scale(1.03);

  z-index:1;

  pointer-events:none;

}

/* =========================
白背景
========================= */

.recruit-blog-inner{

  position:relative;

  z-index:2;

  width:100%;

  max-width:1700px;

  margin:0 auto;

  background:#fff;

  border-radius:
    clamp(16px, 2vw, 32px);

  padding:
    clamp(20px, 4vw, 60px);        /* 上下 */
          

  box-sizing:border-box;

}

/* =========================
BLOG
========================= */

.recruit-blog{

  width:100%;

  margin:0 auto;

  box-sizing:border-box;

}

.recruit-blog-header{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  margin-bottom:40px;

  padding-bottom:20px;

}

.recruit-blog-header-inner{

  display:flex;

  flex-direction:column;

  gap:0px;
  
  min-width:0;

  flex:1;
  
  width:100%;

}

/* ← PC版だけボタン下げる */
.recruit-blog .recruit-blog-link-module{
  transform:translateY(12px);

}

.recruit-blog-subtitle,
.case-studies-title{

  font-size:clamp(18px, 6.5vw, 70px);
  
  font-family:
  "Cabinet Grotesk",
  serif;

  font-weight:900;

  color:#111;

  line-height:1.2;

  white-space:nowrap;

  margin:0;
  
  

}

.recruit-blog-title,
.case-studies-subtitle{

  font-size:clamp(10px, 3vw, 15px);
  
    font-family:
    "Noto Sans JP",
    sans-serif;

  font-weight:700;

  color:#111;

  margin:6px 0 0;

  line-height:1.4;

}

.recruit-blog-grid{

  display:grid;

  grid-template-columns:
    minmax(0,1.3fr)
    minmax(0,1fr);

  gap:
    clamp(24px, 3vw, 50px);
  
  max-width:min(1600px, 90%);

  margin:0 auto;     /* ← 中央寄せ */

}

.recruit-blog-main{

  display:flex;

  flex-direction:column;

  text-decoration:none;

  color:inherit;

}

.recruit-blog-main-image{

  width:100%;

  aspect-ratio:1 / 1;

  overflow:hidden;

  margin-bottom:16px;

  background:#f0f0f0;

  border-radius:8px;

}

.recruit-blog-main-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

}

.recruit-blog-main-title{

  font-size:clamp(16px, 2.5vw, 25px);

     font-family:
    "Noto Sans JP",
    sans-serif;
  
  
  line-height:1.5;

  font-weight:700;

  color:#111;

  margin:0 0 12px;

}

.recruit-blog-main-text{

  font-size:clamp(11px, 2vw, 14px);
  
     font-family:
    "Noto Sans JP",
    sans-serif;

  line-height:1.8;

  color:#555;

  margin:0 0 20px;

}

.recruit-blog-date{
  font-size:13px;
  color:#888;
}

.recruit-blog-side{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    clamp(18px, 2vw, 32px);

}

.recruit-blog-sub{

  display:flex;

  flex-direction:column;

  gap:10px;

  text-decoration:none;

  color:inherit;

}

.recruit-blog-sub-image{

  width:100%;

  aspect-ratio:1 / 1;

  overflow:hidden;

  background:#f0f0f0;

  border-radius:8px;

}

.recruit-blog-sub-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

}

.recruit-blog-sub-title{

  font-size:clamp(9px, 1.5vw, 17px);

     font-family:
    "Noto Sans JP",
    sans-serif;
  
  line-height:1.5;

  font-weight:600;

  color:#111;

  margin:0 0 6px;

  display:-webkit-box;

  -webkit-line-clamp:4;

  -webkit-box-orient:vertical;

  overflow:hidden;

}

.recruit-blog-sub-date{
  font-size:12px;
  color:#888;
}

/* =========================
CASE
========================= */

.case-studies{

  position:relative;

  z-index:2;

  width:100%;

  padding-top:
    clamp(70px, 9vw, 120px);

  box-sizing:border-box;

}

.case-studies-inner{

  width:100%;

  max-width:1700px;

  margin:0 auto;

  padding:
0
    clamp(20px, 4vw, 60px);

  box-sizing:border-box;

}

.case-studies-header{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  margin-bottom:55px;

  gap:20px;

}

.case-studies-heading{

  display:flex;

  flex-direction:column;

  min-width:0;

  flex:1;

}

.case-studies-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:28px;

}

.case-card-link{

  display:flex;

  flex-direction:column;

  height:100%;

  text-decoration:none;

  color:inherit;

}

.case-card-image{

  overflow:hidden;

  border-radius:8px;

  aspect-ratio:1 / .72;

  background:#ddd;

}

.case-card-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:transform .5s ease;

}

.case-card:hover img{
  transform:scale(1.05);
}

.case-card-content{

  display:flex;

  flex-direction:column;

  flex:1;

  padding-top:22px;

}

.case-card-title{

  margin:0 0 22px;

  font-size:
    clamp(11px, 1.1vw, 20px);
  
    font-family:
    "Noto Sans JP",
    sans-serif;

  line-height:1.9;

  font-weight:500;

  color:#222;

  display:-webkit-box;

  -webkit-line-clamp:4;

  -webkit-box-orient:vertical;

  overflow:hidden;

  min-height:5.7em;

}

.case-card-info{
  margin-top:auto;
}

.case-card-company,
.case-card-person{

  font-size:
    clamp(10px, .8vw, 11px);
  
     font-family:
    "Noto Sans JP",
    sans-serif;

  color:#555;

}

.case-card-company{
  margin-bottom:6px;
}

.case-card-bottom{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-top:22px;

}

.case-card-story{

  font-size:
    clamp(9px, .9vw, 12px);
  
    font-family:
  "Montserrat",
  sans-serif;

  font-weight:600;

}

.case-card-tag{

  padding:6px 10px;

  border-radius:4px;

  background:#e3e5e2;

  font-size:
    clamp(9px, .75vw, 10px);
  
     font-family:
    "Noto Sans JP",
    sans-serif;

  white-space:nowrap;

}

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

  .recruit-blog-link{
    --btn-scale:0.85;
  }


/* =========================
SP
========================= */

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

  .recruit-blog-link{
    --btn-scale:0.75;
  }
  
  .recruit-blog-outer::after{
    opacity:.45;
    filter:blur(6px);
    background-size:
      180px auto,
      220px auto;
    background-position:
      left -60px top 1200px,
      right -80px top 1000px;
  }

  .recruit-blog-grid{
    grid-template-columns:1fr;
    gap:32px;
  }

  .recruit-blog-header,
  .case-studies-header{
    position:relative;
    flex-direction:column;
    align-items:flex-start;
      gap:2px;
  padding-bottom:0px;
}

.recruit-blog .recruit-blog-link-module,
.case-studies .recruit-blog-link-module{
    position:static;
    right:auto;
    top:auto;
    margin-top:-20px; /* ← PC版の24pxをリセット */
  }

  .case-studies-grid{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
  }
  
  .recruit-blog-subtitle,
.case-studies-title{

  font-size:clamp(18px, 8vw, 70px);
  }
  
  .recruit-blog-sub-title{
  font-size:clamp(11px, 2vw, 17px);
  }
  
  .case-card-title{
  font-size:clamp(11px, 2vw, 17px);
  }
  
    .case-card{

    outline:1px solid #dfe5e4;

    outline-offset:8px;

    border-radius:12px;
   
  }
  
  .recruit-blog-link-module{

  width:100%;

  display:flex;

  justify-content:flex-end;

}
  
    
}