.elementor-23 .elementor-element.elementor-element-4ec3af3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23 .elementor-element.elementor-element-5eb1312 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-23 .elementor-element.elementor-element-7dfb8da{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-23 .elementor-element.elementor-element-5eb1312{width:100%;max-width:100%;}}/* Start custom CSS for html, class: .elementor-element-5eb1312 */:root{ --brand:#169e7e; --ease:cubic-bezier(.22,.61,.36,1); }

  .recruit3{ --stagger:.10s; --dur:.6s; position:relative; }

  /* 3枚グリッド（5:8） */
  .recruit3__grid{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  }
  @media (max-width:900px){ .recruit3__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:560px){ .recruit3__grid{ grid-template-columns:1fr; } }

  .recruit3 .card{
    position:relative; aspect-ratio:5/8; overflow:hidden; margin:0; background:#000;
    transform:translateX(-26px); opacity:0; will-change:transform,opacity;
  }
  .recruit3 .card img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
    transform:scale(1.02);
  }
  .recruit3 .card::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg,rgba(255,255,255,0)0%,rgba(255,255,255,.75)40%,rgba(255,255,255,0)75%);
    transform:translateX(-120%); opacity:0; pointer-events:none;
  }

  .recruit3.is-in .card{ animation:re3-in var(--dur) var(--ease) forwards; }
  .recruit3.is-in .card::after{ animation:re3-sweep var(--dur) var(--ease) forwards; }

  .recruit3.is-in .card:nth-child(1){ animation-delay:calc(0*var(--stagger)); }
  .recruit3.is-in .card:nth-child(2){ animation-delay:calc(1*var(--stagger)); }
  .recruit3.is-in .card:nth-child(3){ animation-delay:calc(2*var(--stagger)); }

  .recruit3.is-in .card:nth-child(1)::after{ animation-delay:calc(0*var(--stagger)+.05s); }
  .recruit3.is-in .card:nth-child(2)::after{ animation-delay:calc(1*var(--stagger)+.05s); }
  .recruit3.is-in .card:nth-child(3)::after{ animation-delay:calc(2*var(--stagger)+.05s); }

  @keyframes re3-in{ 0%{transform:translateX(-26px);opacity:0}60%{transform:translateX(0);opacity:1}100%{transform:translateX(0);opacity:1} }
  @keyframes re3-sweep{ 0%{transform:translateX(-120%);opacity:0}20%{opacity:.55}60%{opacity:.35}100%{transform:translateX(120%);opacity:0} }

  /* 中央オーバーレイ（白ガラス調） */
  .recruit3__overlay{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
  .recruit3__panel{
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color:#222; padding:clamp(12px,2.6vw,28px) clamp(22px,4.4vw,46px);
    border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.25);
    max-width:min(760px,88vw);
    display:flex; flex-direction:column; align-items:center; text-align:center;
    opacity:0; transform:translateY(10px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
    pointer-events:auto;
  }
  .recruit3.is-in .recruit3__panel{
    transition-delay:calc(2*var(--stagger) + var(--dur) + .1s); opacity:1; transform:translateY(0);
  }

  .recruit3__label{
    font-family:"Montserrat",system-ui,sans-serif; font-weight:700; letter-spacing:.18em;
    font-size:clamp(20px,3.4vw,36px); color:var(--brand); margin:0 0 6px;
  }
  .recruit3__sub{
    font-family:"Montserrat",system-ui,sans-serif; font-weight:600; letter-spacing:.18em;
    font-size:clamp(11px,1.4vw,12px); color:#222; margin:0 0 10px;
  }
  .recruit3__title{
    font-family:"IBM Plex Sans JP",system-ui,sans-serif; font-weight:500;
    font-size:clamp(18px,2.2vw,24px); margin:8px 0 0;
   line-height: 1.6;}
  .recruit3__copy{
    font-family:"IBM Plex Sans JP",system-ui,sans-serif; font-size:clamp(14px,1.3vw,16px);
    line-height:1.9; margin:14px 0 0; white-space:pre-line;
  }

  .recruit3__btn{
    display:inline-flex; align-items:center; justify-content:center;
    margin-top:18px; padding:12px 26px; border-radius:999px;
    background:#fff; color:var(--brand); border:1px solid var(--brand);
    text-decoration:none; font-family:"Montserrat",system-ui,sans-serif; font-weight:600; letter-spacing:.14em;
    transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
  }
  .recruit3__btn::after{ content:''; display:inline-block; width:6px; height:6px; margin-left:10px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); transition:transform .25s ease; }
  .recruit3__btn:hover{ background:var(--brand); color:#fff; transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.18); }
  .recruit3__btn:hover::after{ transform:translateX(4px) rotate(45deg); }

  @media (prefers-reduced-motion:reduce){
    .recruit3 .card,.recruit3 .card::after{ animation:none !important; transform:none !important; opacity:1 !important; }
    .recruit3__panel{ transition:none !important; opacity:1 !important; transform:none !important; }
  }
  /* ======= 3枚版 Recruit の上書き ======= */
/* 高さを低く：各写真の比率を 16:9 に */
.recruit3 .card{ aspect-ratio: 3/3; }

/* パネルと文字も少しコンパクトに */
.recruit3__panel{
  padding: clamp(8px, 1.8vw, 18px) clamp(16px, 3vw, 28px);
}
.recruit3__label{                    /* RECRUIT（英字） */
  font-size: clamp(18px, 2.6vw, 28px);
}
.recruit3__title{
  font-size: clamp(16px, 1.8vw, 20px);
}
.recruit3__copy{
  margin-top: 10px;
  font-size: clamp(13px, 1.1vw, 15px);
}

/* サブラベルは日本語＋適正トラッキングに */
.recruit3__sub{
  font-family: "IBM Plex Sans JP", system-ui, sans-serif; /* ← 日本語フォント */
  font-weight: 500;
  letter-spacing: .12em;
  font-size: clamp(12px, 1.3vw, 14px);
  color: #222;
  margin: 0 0 8px;
}
/* スマホでの背景非表示とボタンの初期状態 */
@media (max-width: 768px) {
  .recruit3__grid, .recruit3__overlay { display: none !important; }

  .recruit3__mobile-btn {
    display: flex !important;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
    background: var(--brand);
    color: #fff;
    padding: 15px 30px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    
    /* 非表示設定 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
  }

  /* JavaScriptでこのクラスがついた時だけ表示 */
  .recruit3__mobile-btn.is-visible {
    opacity: 1;
    visibility: visible;
  }
}
/* --- 修正版：PCでは非表示、スマホで表示 --- */

/* 1. まず、デフォルトでPC用に非表示にする */
.recruit3__mobile-btn {
  display: none !important; 
}

/* 2. スマホサイズ（768px以下）の時だけ表示設定を適用 */
@media (max-width: 768px) {
  /* グリッドとオーバーレイを消す */
  .recruit3__grid, .recruit3__overlay { display: none !important; }

  /* モバイルボタンを表示 */
  .recruit3__mobile-btn {
    display: flex !important;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
    background: var(--brand);
    color: #fff;
    padding: 15px 30px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    
    /* 非表示設定 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
  }

  /* JavaScriptでクラスがついた時に表示 */
  .recruit3__mobile-btn.is-visible {
    opacity: 1;
    visibility: visible;
  }
}/* End custom CSS */