@charset "UTF-8";
/* 採用情報トップページ専用。共有CSS (../css/style.css) は変更しない */
.recruit-page { background: var(--paper, #f5f7fa); padding-bottom: 58px; }
.recruit-container { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.recruit-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding: 20px 0 26px; color:#68798e; font-size:12px; line-height:1.7; }
.recruit-breadcrumb a { color: #50657e; text-decoration:none; }
.recruit-breadcrumb a:hover { text-decoration:underline; }
.recruit-heading { padding: 13px 0 23px; }
.recruit-heading__eyebrow { color:#d94759; letter-spacing:.19em; font-weight:800; font-size:11px; line-height:1.6; border-left:4px solid #e44754; padding-left:12px; margin:0 0 10px; }
.recruit-heading h1 { color: var(--navy,#172d49); margin:0; font-size:clamp(26px,3vw,37px); font-weight:800; line-height:1.5; letter-spacing:.035em; }
.recruit-video__frame { position:relative; overflow:hidden; width:100%; aspect-ratio:16 / 9; background: #111; border-radius:12px; box-shadow:0 8px 26px rgba(17,45,71,.10); }
.recruit-video__poster { display:block; width:100%; height:100%; object-fit:cover; }
.recruit-video__play { position:absolute; inset:0; display:grid; place-items:center; cursor:pointer; text-decoration:none; }
.recruit-video__play::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.04); transition: background .2s ease; }
.recruit-video__play:hover::before { background:rgba(0,0,0,.16); }
.recruit-video__play-icon { position:relative; z-index:1; width:76px; height:52px; border-radius:14px; background:#ff0033; box-shadow:0 5px 24px #0006; transition:transform .2s ease; }
.recruit-video__play-icon::after { content:""; position:absolute; left:31px; top:15px; width:0; height:0; border-top:11px solid transparent; border-bottom:11px solid transparent; border-left:17px solid white; }
.recruit-video__play:hover .recruit-video__play-icon { transform: scale(1.07); }
.recruit-video__frame iframe { border:0; width:100%; height:100%; display:block; position:absolute; inset:0; }
.recruit-menu { margin-top: 24px; }
.recruit-menu__grid { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:14px; row-gap:22px; margin:0; padding:0; }
.recruit-menu__item { min-width:0; margin:0; padding:0; }
.recruit-menu__link { display:block; border:1px solid #dfe5ed; border-radius:6px; background:#fff; overflow:hidden; box-shadow:0 2px 8px rgba(22,41,61,.06); transition:transform .2s,box-shadow .2s,border-color .2s; }
.recruit-menu__link img { display:block; width:100%; height:auto; aspect-ratio:390 / 156; }
.recruit-menu__link:hover { transform:translateY(-3px); box-shadow:0 9px 20px rgba(22,41,61,.15); border-color:#adc6dc; }
.recruit-menu__link:focus-visible, .recruit-video__play:focus-visible { outline:3px solid #b97b15; outline-offset:4px; }
.recruit-bottom { margin-top:33px; text-align:right; font-size:13px; }
.recruit-back { color:#4e6580; }
@media (max-width:740px) {
  .recruit-container { padding: 0 18px; }
  .recruit-breadcrumb { padding: 13px 0 22px; }
  .recruit-heading { padding:4px 0 21px; }
  .recruit-video__frame { border-radius:9px; }
  .recruit-menu__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; }
}
@media (max-width:520px) {
  .recruit-page { padding-bottom:36px; }
  .recruit-menu__grid { grid-template-columns:1fr; gap:15px; }
  .recruit-menu { margin-top:18px; }
  .recruit-video__play-icon { width:66px; height:46px; }
  .recruit-video__play-icon::after { left:27px; top:13px; border-top-width:10px; border-bottom-width:10px; border-left-width:15px; }
}
@media (prefers-reduced-motion:reduce) { .recruit-video__play-icon,.recruit-menu__link,.recruit-video__play::before { transition:none; } }

/* 採用ページ：バナーの白い背景と余白をなくす */
.recruit-menu__item,
.recruit-menu__link {
  background: transparent;
  padding: 0;
  border: none;
}

/* バナー画像 */
.recruit-menu__link img {
  display: block;
  width: 100%;
  height: auto;
}

/* 影を背景になじませる */
.recruit-menu__link {
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.12));
}

/* バナーのホバー時に白い背景を見せない */
.recruit-menu__link:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    opacity: 0.85;
}

/* バナー画像の背景を透明に */
.recruit-menu__link,
.recruit-menu__item {
    background: transparent;
}

/* バナー：ほんの少し浮いて白く光る */
.recruit-menu__link {
    position: relative;
    overflow: visible;
    border-radius: 6px;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

/* 以前の色付きフィルターを無効化 */
.recruit-menu__link::after {
    content: none;
}

/* ホバー時 */
.recruit-menu__link:hover {
    /* ほんの少し持ち上げる */
    transform: translateY(-2px);

    opacity: 1;
    box-shadow: none;
    border-color: transparent;

    /* 白い光＋自然な影 */
    filter:
        brightness(1.12)
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.9))
        drop-shadow(0 5px 8px rgba(0, 0, 0, 0.18));
}