/* =========================
   Color Variables
========================= */
:root {
  --color-primary: #f9a72b;
  --color-primary-hover: #e07000;
  --color-primary-soft: rgba(240, 131, 0, 0.12);
  --color-text: #222;
  --color-text-muted: #666;
  --color-bg: #ffffff;
  --color-bg-body: #fcde32;
  --color-bg-alt: #fffef1;
  --clr-bg-01: #dbccc9;
  --clr-bg-02: #fffef1;
  --clr-primary-default: #272727;
  --clr-primary-light: #f08300;
  --clr-text-secondary: #000;
  --color-border: #eaeaea;
  --color-dark: var(--color-primary);
  --news-bg: #46a6dc;
  /* 画像の青っぽい色に寄せる */
  --news-radius: 28px;
  --news-text: #ffffff;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

html {
  scroll-behavior: smooth;
}

/* =========================
   Base
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.7;
  color: #222;
  background-color: var(--color-bg-body);
}

@font-face {
  font-family: "Kaisotai";
  src: url("../fonts/Kaisotai-Next-UP-B.woff2") format("woff2"),
    url("../fonts/Kaisotai-Next-UP-B.eot");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

a.link {
  color: var(--clr-primary-light);
}

a.link:hover {
  color: var(--color-primary);
  opacity: 1;
}



/* =========================
   Common
========================= */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary {
  color: var(--color-primary);
}

/* margin-top */
.mt-0 {
  margin-top: 0 !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mt-60 {
  margin-top: 60px !important;
}

.mt-70 {
  margin-top: 70px !important;
}

.mt-80 {
  margin-top: 80px !important;
}

/* margin-bottom */
.mb-0 {
  margin-bottom: 0 !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.mb-70 {
  margin-bottom: 70px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

/* padding-top */
.pt-0 {
  padding-top: 0 !important;
}

.pt-10 {
  padding-top: 10px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pt-30 {
  padding-top: 30px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pt-50 {
  padding-top: 50px !important;
}

/* padding-bottom */
.pb-0 {
  padding-bottom: 0 !important;
}

.pb-10 {
  padding-bottom: 10px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.pb-30 {
  padding-bottom: 30px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pb-50 {
  padding-bottom: 50px !important;
}

/* padding-y */
.py-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.py-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.py-40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* padding-x */
.px-10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.px-20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.px-20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.px-40 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-bold {
  font-weight: 700 !important;
}

.text-normal {
  font-weight: 400 !important;
}

.text-small {
  font-size: 0.875rem !important;
}

.text-large {
  font-size: 1.25rem !important;
}

.text-big {
  font-size: 1.5rem !important;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

@media (max-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}


/* =========================
   Scroll Fade Animation
========================= */

/* 初期状態 */
.js-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

/* 表示状態 */
.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 方向バリエーション */
.fade-up {
  transform: translateY(40px);
}

.fade-left {
  transform: translateX(-40px);
}

.fade-right {
  transform: translateX(40px);
}

.fade-scale {
  transform: scale(.9);
}

/* 表示時リセット */
.fade-left.is-visible,
.fade-right.is-visible,
.fade-up.is-visible,
.fade-scale.is-visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-fade {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

.js-fade-soft {
  opacity: 0;
  filter: blur(4px);
  transition: opacity 1.2s ease, filter 1.2s ease;
}

.js-fade-soft.is-visible {
  opacity: 1;
  filter: blur(0);
}

/* @media (prefers-reduced-motion: reduce) {
  .js-fade-soft {
    opacity: 1;
    transition: none;
  }
} */

/* =========================
   Layout
========================= */
header {
  /* padding: 6px 24px; */
  background: var(--color-primary);
  color: #fff;
}

main,
main.page,
main.page-company {
  display: block;
}

main {
  position: relative;
  z-index: 1;
  /* heroより前面 */
  margin-top: 100svh;
  /* heroの上からスクロール開始 */
  background: transparent;
}

main.page, 
main.page-company {
  /* z-index: 0; */
  margin-top: 0;
  padding-bottom: 190px;
}

@media screen and (max-width:500px) {
  main.page,
  main.page-company
  {
    padding-bottom: 174px;
  }
}

footer {
  padding: 24px;
  background: #f4f4f4;
  text-align: center;
  font-size: 14px;
  color: #666;
  z-index: 2;
}

/* =========================
   Typography
========================= */
h1 {
  margin: 0 0 16px;
  font-size: 2.4rem;
}

h2 {
  margin: 0 0 24px;
  font-size: 1.7rem;
}

p {
  margin: 0 0 16px;
  font-weight: 600;
}

.red {
  color: red;
}

/* =========================
   Container
========================= */
.container {
  width: min(1200px, 100%);
  margin-inline: auto;
  /* padding-inline: 24px; */
}

@media (max-width: 768px) {
  .container {
    /* padding-left: 16px;
    padding-right: 16px; */
  }
}

/* =========================
   Header
========================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-dark);
  color: #fff;
  border-bottom: 4px solid #000;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 3px;
  gap: 24px;
}

@media (max-width: 768px) {
  .header-inner {
    padding-block: 0;
  }
}

/* .logo {
  display: flex;
  align-items: center;
  gap: 12px;
} */

.logo {
  display: block;
  width: 310px;
  /* ロゴの実寸に合わせる */
  height: 60px;
  background: url("../images/logo.png") no-repeat center center;
  background-size: contain;
  text-decoration: none;
}

/* テキストは画面上から消す（SEO用に残す） */
.logo-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.25));
}

.logo-text {
  display: grid;
  gap: 2px;
}

.logo-name {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.logo-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
  .logo {
    width: 250px;
  }
}

/* Nav */
.gnav-list {
  display: flex;
  align-items: center;
  gap: 18px;
}

.gnav a {
  display: inline-flex;

  /* .gnav {
    width: 100%; */
  }

  .gnav-list {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .gnav a {
    padding: 10px 12px;
  }


/* =========================
   Hamburger + SP Menu
========================= */

/* SPはハンバーガー表示、PCナビ非表示 */
.gnav--pc {
  display: block;
}

.hamburger {
  display: none;
}

@media (max-width: 768px) {
  .gnav--pc {
    display: none;
  }

  header {
    padding: 0px 16px;
  }

  .hamburger {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: transparent;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    cursor: pointer;
    flex-direction: column;
  }

  .hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    transition: transform 200ms ease, opacity 200ms ease;
  }

  /* SP menu panel */
  .spmenu {
    background: var(--color-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .spmenu[hidden] {
    display: none;
  }

  .spmenu-inner {
    padding-block: 12px 18px;
  }

  .gnav--sp {
    display: grid;
    gap: 8px;
  }

  .gnav--sp a {
    padding: 12px 12px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.06);
  }

  .gnav--sp a:hover {
    background: var(--color-primary);
  }

  .spmenu-cta {
    background: #fff !important;
    color: var(--color-primary) !important;
    font-weight: 800;
  }

  /* Open state animation (aria-expanded=true) */
  .hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* SP menu panel（アニメ対応） */
  .spmenu {
    background: var(--color-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);

    transition:
      max-height 600ms ease,
      opacity 400ms ease,
      transform 400ms ease;
  }

  /* hiddenでも display:none にさせない（アニメさせるため） */
  .spmenu[hidden] {
    display: block !important;
  }

  /* 開いた状態（JSで付与） */
  .spmenu.is-open {
    max-height: 70vh;
    /* メニュー量に合わせて調整 */
    opacity: 1;
    transform: translateY(0);
  }

}

/* =========================
   Page / Section
========================= */
.page {
  background: var(--color-bg-body);
}

.page-company {
  background: #fffef1!important;
}
.page-intro {
  
}

.section {
  padding: 56px 0;
}

.section--alt {
  /* background: var(--color-bg-alt); */
  padding: 0 16px;
}

.section--alt2 {
  background: var(--color-bg-alt);
  padding: 0 16px;
}

.page-hero {
  padding: 40px 0;
  /* background: var(--color-primary); */
  /* background-image: url(../images/service/top-img.png); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  height: 44.9vh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 45% 55%;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "ttl_txt ttl_bg"
    "ttl_bread ttl_bread";
}

.page_ttl-has_bg {
  background-color: var(--clr-bg-02);
  display: grid;
  grid-template-columns: 45% 55%;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "ttl_txt ttl_bg"
    "ttl_bread ttl_bread";
}

.page_ttl--bg {
  position: relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  width: 100%;
  grid-area: ttl_bg;
  overflow: hidden;
  margin-top: auto;
  height: 24.3125rem;
  /* margin-top: 2rem; */
}

/* .page_ttl--bg::after {
  content: "";
  position: absolute;
  inset: 0;              
  background-image: url("../images/mesh2.png");
  height: 40vh;
  background-repeat: repeat;
  opacity: 0.25;        
  pointer-events: none;   
} */
.page_ttl--txt {
  grid-area: ttl_txt;
  padding-top: 9rem;
  padding-left: calc(50vw - min(90%, 49rem));
}

.page_ttl-jp {
  font-size: 3.225rem;
  letter-spacing: 0.03em;
  color: var(--clr-text-secondary);
}

.page_ttl--bread {
  grid-area: ttl_bread;
  height: calc((100vh - 2rem) / 18);
  border: 1px solid var(--clr-bg-01);
  border-width: 1px 0;
  display: grid;
  place-content: center normal;
  background-color: white;
  padding-left: calc((100vw - min(90vw, 70rem)) / 2);
}

.subtitle {
  display: block;
  color: var(--clr-primary-default);
  font-size: max(24px, 2.125rem);
  padding-inline: 2.35rem;
  /* width: fit-content; */
  margin-inline: auto;
  position: relative;
  font-family: "Kaisotai";
  line-height: 0.8rem;
}

.subtitle::before {
  content: "";
  position: absolute;
  inset: -10px 6px;
  background-image: url("../images/square.svg");
  height: 28px;
  background-repeat: no-repeat;
  pointer-events: none;
}

.breadcrumb {
  font-size: 14px;
  color: var(--color-text);
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.breadcrumb_last {
  color: var(--clr-primary-light);
}

.breadcrumbs span span {
  position: relative;
  padding-right: 1.375rem;
}

.breadcrumbs span span:not(:last-child)::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  top: 60%;
  translate: 0 calc(-50% - 0.1em);
  width: 1rem;
  height: 1rem;
  background-image: url(../images/arrow_right.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.page-title {
  margin: 0 0 10px;
  font-size: 2rem;
}

.page-lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
}

section.our-works {
  text-align: center;
  padding: 50px;
  padding-left: 0;
  padding-right: 0;
  background-color: #fff;
}

/* =========================
   Hero (always fixed background)
   - ヒーローは常に固定
   - 下のコンテンツがスクロールして覆いかぶさる
========================= */

/* ① ヒーローを背景として固定 */
.hero {
  position: fixed;
  inset: 0;
  height: 100svh;
  /* 画面いっぱい */
  min-height: 560px;
  background: #000;
  overflow: hidden;
  z-index: 0;
  /* 背景レイヤー */
}

/* ② hero内はそのまま重ねる */
.hero__stage {
  position: absolute;
  inset: 0;
}

/* 暗幕（hero::before は使わず stage に付ける） */
.hero::before {
  content: none;
}

.hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.45));
  z-index: 1;
  pointer-events: none;
}

/* スライド */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 900ms ease, transform 1600ms ease;
}

.hero__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* 中央ロゴ */
.hero__title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 18px;
  text-align: center;
}

/* ドット/Scroll */
/* .hero__dots {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
} */
/* ドット */
.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}

.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.hero__dot.is-active {
  background: #fff;
}

.hero__scroll {
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 3;
}

/* オーバーレイ */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.hero__overlay--top {
  background-image: url("../images/hero/top-top.png");
  background-position: top center;
}

.hero__overlay--bottom {
  background-image: url("../images/hero/top-bottom02.png");
  background-position: bottom center;
}

/* ③ 下のコンテンツがヒーローに覆いかぶさるようにする */
main {
  position: relative;
  z-index: 1;
  /* heroより前 */
  margin-top: 100svh;
  /* ヒーロー1画面分下から開始 */
  background: #fff;
  /* 覆いかぶさる面の地色 */
}

/* ヘッダーを確実に前面に */
.site-header {
  position: relative;
  z-index: 2;
}

/* SP */
@media (max-width: 640px) {
  .hero {
    min-height: 480px;
  }

  main {
    margin-top: 100svh;
    /* そのままでOK（必要なら 480px に固定も可） */
  }

  .hero__scroll {
    display: none;
  }
}

/* heroの上に必ず載せる（背景が抜けないように） */
.section,
.services,
.recruit-wrap,
.section-recruit,
.contact-us,
.contact-us2,
.works {
  position: relative;
  z-index: 1;
  /* background: var(--color-bg-body); */
  isolation: isolate;
  padding-top: 10px;
}

/* PC（デフォルト） */
.hero__slide--1 {
  background-image: url("../images/hero/slide1.jpg");
}

.hero__slide--2 {
  background-image: url("../images/hero/slide2.jpg");
}

.hero__slide--3 {
  background-image: url("../images/hero/slide3.jpg");
}

/* SP */
@media (max-width: 767px) {
  .hero__slide--1 {
    background-image: url("../images/hero/slide1-sp.jpg");
  }

  .hero__slide--2 {
    background-image: url("../images/hero/slide2-sp.jpg");
  }

  .hero__slide--3 {
    background-image: url("../images/hero/slide3-sp.jpg");
  }
}


/* =========================
   News section
========================= */
.news-area {
  background-color: #000000c4;
  padding: 30px;
  z-index: 1;
}

.news-area {
  position: relative;
  /* margin-top: -14.5vw;
  padding: 21vw 0;
  background: url(../images/common/bg_pattern02.jpg) repeat center/24rem auto;
  -webkit-mask: url("../images/top_common/bg_sns_path-sp.png") no-repeat center/cover;
          mask: url("../images/top_common/bg_sns_path-sp.png") no-repeat center/cover; */
}

@media screen and (min-width: 768px) {
  .news-area {
    margin-top: -4vw;
    z-index: 5 !important;
    padding: 2vw 0 1vw;
    -webkit-mask-image: url("../images/top/bg_sns_path-pc.png");
    mask-image: url("../images/top/bg_sns_path-pc.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 120%;
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
  }
}

.news-topics {
  background: var(--color-bg);
  border-radius: 24px;
  color: var(--clr-primary-default);
  /* overflow: hidden; */
  max-width: 1000px;
  margin: 30px auto;
}

@media screen and (min-width: 768px) {

  .news-topics {
    width: 75vw;
  }
}

.news-topics__inner {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  min-height: 160px;
  position: relative;
  padding: 2rem;
}

.news-topics__inner::before {
  position: absolute;
  top: -40px;
  left: 10px;
  content: "";
  display: block;
  width: 250px;
  height: 103px;
  background-size: cover;
  background-image: url(../images/deco01.png);
}

.news-topics__inner::after {
  background-size: contain;
  position: absolute;
  top: -42px;
  right: -120px;
  content: "";
  display: block;
  width: 215px;
  height: 100px;
  background-image: url(../images/deco02.png);
  background-repeat: no-repeat;
}

/* 固定：NEWS TOPICS */
.news-topics__fixed {
  padding: 0 24px;
}

.news-topics__label {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .03em;
}

/* スライド部 */
.news-topics__slider {
  overflow: hidden;
}

.news-topics__track {
  display: flex;
  transition: transform .65s ease;
}

.news-topics__item {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  color: inherit;
  text-decoration: none;
  position: relative;
}

/* 上下点線 */
.news-topics__item::before,
.news-topics__item::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(to right,
      #bdbdbd,
      #bdbdbd 2px,
      transparent 2px,
      transparent 6px);
}

.news-topics__item::before {
  top: 0;
}

.news-topics__item::after {
  bottom: 0;
}

.news-topics__date {
  min-width: 90px;
}

.news-topics__date .y,
.news-topics__date .md {
  font-size: 1rem;
  font-weight: 900;
  color: var(--clr-primary-light);
}

.news-topics__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .03em;
  margin-bottom: 3px;
}

/* 矢印 */
.news-topics__next {
  /* margin-right: 20px; */
  width: 57px;
  margin-bottom: 9px;
  height: 57px;
  border-radius: 50%;
  /* border: 1px solid rgba(255,255,255,.5); */
  background: rgba(255, 255, 255, .15);
  color: var(--color-text-muted);
  font-size: 47px;
  cursor: pointer;
}

/* SP */
@media (max-width: 768px) {
  .news-area {
    padding: 30px 16px 16px;
  }

  .news-topics__inner {
    grid-template-columns: 160px 1fr auto;
    min-height: 140px;
    display: block;
    padding: 50px 10px 30px;
  }

  .news-topics__label {
    font-size: 20px;
  }

  .news-topics__title {
    font-size: 14px;
  }

  .news-topics__item {
    /* flex: 0 0 100%; */
    display: block;
    align-items: center;
    gap: 24px;
    padding: 19px;
    color: inherit;
    text-decoration: none;
    position: relative;
    margin-top: 9px;
  }

  .news-topics__next {
    font-size: 40px;
    cursor: pointer;
    position: absolute;
    left: 86%;
    top: 50%;
  }

  .news-topics__inner::before {
    width: 230px;
    height: 87px;
  }

  .news-topics__inner::after {
    top: -30px;
    right: 7px;
    width: 100px;
    height: 70px;
  }
}


/* =========================
   Grid / Card / Definition list
========================= */
.grid {
  display: grid;
  gap: 18px;
}

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

@media (max-width: 768px) {
  .grid--2 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 20px;
}

.card__title {
  position: relative;
  margin: 0 0 14px;
  font-size: 1.1rem;
}

.deflist {
  display: grid;
  /* gap: 10px; */
}

.deflist>div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  /* padding: 10px 0; */
  border-bottom: 1px solid #f1f1f1;
}

.deflist dt {
  font-weight: 700;
  color: #444;
}

.deflist dd {
  margin: 0;
  color: var(--color-text);
}

.muted {
  color: #666;
  font-size: 14px;
}

/* =========================
   Map placeholder
========================= */
.mapPlaceholder {
  margin: 12px 0;
  border-radius: 16px;
  border: 1px dashed #ccc;
  background: repeating-linear-gradient(45deg,
      #f2f2f2,
      #f2f2f2 12px,
      #fafafa 12px,
      #fafafa 24px);
  height: 220px;
}

/* =========================
   Buttons / CTA band
========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 800;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  opacity: 0.9;
  background: var(--color-primary-hover);
}

.ctaBand {
  border-radius: 18px;
  background: #fff;
  border: 1px solid #eee;
}

.ctaBand__inner {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ctaBand__title {
  font-weight: 900;
  margin-bottom: 6px;
}

.ctaBand__text {
  color: #666;
  font-size: 14px;
}

/* =========================
   トップ・機材販売セクション
========================= */
.equipment {
  position: relative;
}

.equipment::before {
  position: absolute;
  content: "";
  display: block;
  background-image: url(../images/top/equipment-deco.png);
  width: 240px;
  height: 271px;
  top: 270px;
  left: -100px;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

@media (max-width: 768px) {
  .equipment::before {
    width: 140px;
    top: -50px;
    left: 14em;
  }
}

/* =========================
   Footer
========================= */
/* フッター装飾 */
.footer-deco {
  position: absolute;
  z-index: 0;
  bottom: 0px;
  width: 100%;
  /* height: 340px; */
  height: 419px;
  /* ← 画像の見せたい高さ */
  background-image: url("../images/footer.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin-bottom: -1px;
}

@media (max-width: 768px) {
  .footer-deco {
    background-image: url("../images/footer-sp.png");
    height: 221px;
    background-size: cover;
    /* bottom: -138px; */
  }
}

/* フッター本体 */
.site-footer {
  position: relative;
  background: #000;
  color: #fff;
}


.site-footer {
  background: #000;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
}

.site-footer__inner {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  /* 左広め */
  gap: 48px;
  align-items: start;
}

/* Left block */
.site-footer__logo img {
  width: 180px;
  height: auto;
  display: block;
}

.site-footer__company {
  margin-top: 18px;
}

.site-footer__name {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 16px;
}

.site-footer__addr {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
}

/* SNS */
.site-footer__sns {
  margin-top: 22px;
}

.site-footer__sns-ttl {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.site-footer__sns-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
  align-items: center;
}

.sns-icon {
  /* width: 36px; */
  /* height: 36px; */
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.sns-icon img {
  width: 30px;
  height: 30px;
  display: block;
}

.sns-icon.youtube img {
  width: 102px;
  height: auto;
  display: block;
}

.sns-icon:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.14);
  opacity: 1;
}

.site-footer__copyright {
  margin: 18px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* Right nav */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  text-align: left;
}

.footer-nav__col {
  display: grid;
  gap: 10px;
  align-content: start;
}

.footer-nav__link {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.footer-nav__link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-nav__link--has-children {
  font-weight: 800;
}

.sns-list {
  display: flex;
}

/* =========================
   Mobile
========================= */
@media (max-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 0px;
  }

  .site-footer__logo img {
    width: 200px;
    margin: 0 auto;
  }
.site-footer__company,
.site-footer__sns,
.site-footer__sns-list {
  text-align: center;
}
.site-footer__sns {
  margin-top: 1rem;
}
.site-footer__sns-list {
      justify-content: center;
}
  .footer-nav {
    /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
    gap: 18px 22px;
  }

  .footer-nav__col {
    gap: 8px;
  }

  .footer-nav__link {
    font-size: 13px;
  }
}

/* .site-footer {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.8);
  padding: 28px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-links {
  display: flex;
  gap: 14px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 768px) {
  .ctaBand__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
} */

/* =========================
   Recruit demo styles
========================= */
/* :root {
  --color-primary: #f08300;
  --color-primary-hover: #e07000;
  --color-primary-soft: rgba(240, 131, 0, 0.14);
} */

.sectionTitle {
  margin: 0 0 18px;
  font-size: 1.3rem;
}

@media (max-width: 768px) {
  .sectionTitle {
    text-align: center;
  }
}

.diagram {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 4px solid var(--clr-primary-default, #eaeaea);
  background: #fff;
}

.diagram__img {
  width: 100%;
  height: auto;
  display: block;
}

.diagram__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #666;
}

/* 吹き出しボタン */
.bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
  color: #222;

  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.bubble:hover {
  transform: translate(-50%, -50%) scale(1.03);
  color: yellow;
  font-weight: 900;
  text-shadow:
    3px 0 0 #111,
    -3px 0 0 #111,
    0 3px 0 #111,
    0 -3px 0 #111,
    2px 2px 0 #111,
    -2px -2px 0 #111,
    2px -2px 0 #111,
    -2px 2px 0 #111;
}

.bubble:focus-visible {
  outline: 3px solid var(--color-primary-soft);
  outline-offset: 2px;
}

/* 画面が小さいときは吹き出しを少し小さく */
@media (max-width: 768px) {
  .bubble {
    padding: 6px 8px;
    font-size: 0.75rem;
  }
}

/* 解説 */
.roleList {
  display: grid;
  gap: 14px;
}

.role {
  background: #fff;
  border: 3px solid #000;
  border-radius: 16px;
  padding: 18px;
}

.role__title {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.role__text {
  margin: 0;
  color: #333;
  font-size: 0.85rem;
}

/* ジャンプ後のハイライト */
.role.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 6px var(--color-primary-soft);
}

/* sticky header offset */
.role {
  scroll-margin-top: 90px;
}

.bubble {
  transform: translate(-50%, -50%);
}

.bubble:hover {
  transform: translate(-50%, -50%) scale(1.25);
}

.bubble.is-active {
  transform: translate(-50%, -50%) scale(2);
}

.bubble.is-active:hover {
  transform: translate(-50%, -50%) scale(2);
}

/* =========================
   works slider
========================= */

.works-vision {
  position: relative;
  /* background: #fff; */
  padding: 1em 0 8rem;
  zoom: 0.65;
}

.works {
  margin: 0 auto;
  /* margin-top:70px; */
  text-align: center;
}

h2.worksTitle-services {
  background-image: url(../images/ttl/works.png);
  width: 557px;
  height: 283px;
  background-size: contain;
  text-align: center;
  margin: 0 auto;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  h2.worksTitle-services {
    width: 357px;
    height: 203px;
  }
}

@media screen and (max-width: 767px) {
  .works-vision {
    padding: 0 0 23.2558139535vw;
    zoom: 0.75;
  }
}

.works-vision-content {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  padding: 6rem 0 10.5rem;
}

@media screen and (max-width: 767px) {
  .works-vision-content {
    padding: 4.6511627907vw 0 4.6511627907vw;
  }
}

.works-vision-content .logo {
  width: 25.5rem;
  margin: 0 auto 3.5rem;
}

.works-vision-content .logo img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .works-vision-content .logo {
    width: 42.5581395349vw;
    margin: 0 auto 4.6511627907vw;
  }
}

.works-vision-content .btn {
  width: 36.2rem;
  height: 7rem;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  background: #45A7DC;
  border-radius: 10rem;
  color: #fff;
  font-size: 2.4rem;
  letter-spacing: 0.025em;
  font-weight: 500;
  font-family: "Outfit", sans-serif;
  margin: 0 auto 3rem;
  position: relative;
}

@media screen and (max-width: 767px) {
  .works-vision-content .btn {
    font-size: 4.1860465116vw;
    width: 58.1395348837vw;
    height: 13.9534883721vw;
    margin-top: 6.976744186vw;
  }
}

.works-vision-content .btn:after {
  content: "";
  background: #fff;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 10rem;
  position: absolute;
  right: 3rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
  .works-vision-content .btn:after {
    width: 1.6279069767vw;
    height: 1.6279069767vw;
    right: 5.8139534884vw;
  }
}

@media print and (any-hover: hover),
screen and (any-hover: hover) and (min-width: 768px) {
  .works-vision-content .btn:hover {
    background: #181818;
    opacity: 1;
  }
}

.works-vision-content .function {
  margin-top: 7rem;
}

.works-vision-content .function-item {
  background: #F7F7F7;
  max-width: 79rem;
  margin: 0 auto;
  padding: 0 0 1.5rem;
  border-radius: 2rem;
}

@media screen and (max-width: 767px) {
  .works-vision-content .function-item {
    border-radius: 2.3255813953vw;
    padding-bottom: 4.6511627907vw;
  }
}

.works-vision-content .function-item .ttl {
  position: relative;
  top: -2rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .works-vision-content .function-item .ttl {
    top: -3.488372093vw;
  }
}

.works-vision-content .function-item .ttl span {
  border-radius: 10rem;
  border: 1px solid #45A7DC;
  background: #fff;
  padding: 1.3rem 3rem;
  color: #45A7DC;
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  font-weight: 500;
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .works-vision-content .function-item .ttl span {
    font-size: 3.2558139535vw;
    letter-spacing: 0;
  }
}

.works-vision-content .function-item .detail {
  letter-spacing: 0.1rem;
  line-height: 1.5;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .works-vision-content .function-item .detail {
    font-size: 2.7906976744vw;
    line-height: 1.8;
    color: #626262;
  }
}

.works-vision-content .function-item+.function-item {
  margin-top: 4rem;
}

@media screen and (max-width: 767px) {
  .works-vision-content .function-item+.function-item {
    margin-top: 5.8139534884vw;
  }
}

.works-vision-content .function-message {
  margin-top: 2rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .works-vision-content .function-message {
    font-size: 3.023255814vw;
    line-height: 1.8;
    letter-spacing: 0.05rem;
    color: #45A7DC;
  }
}

.works-vision-headline {
  margin-bottom: 8rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .works-vision-headline {
    margin-bottom: 9.3023255814vw;
  }
}

.works-vision-headline .en {
  margin-bottom: 0.7rem;
}

@media screen and (max-width: 767px) {
  .works-vision-headline .en {
    margin-bottom: 0;
  }
}

.works-vision-headline .ja {
  display: block;
  margin-left: 0;
}

.works-vision-headline.m-skewup .js-inview-trigger {
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}

.works-vision p {
  font-size: 1.8rem;
  letter-spacing: 0.075em;
  line-height: 1.6111111111;
  font-weight: 500;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .works-vision p {
    font-size: 3.488372093vw;
    line-height: 1.6;
  }
}

.works-vision .js-inview.m-fadeup .js-inview-trigger {
  display: block;
}

.works-vision .js-inview.m-fadeup.is-show .js-inview-trigger {
  -webkit-animation: fadeup 0.5s ease-in-out forwards;
  animation: fadeup 0.5s ease-in-out forwards;
}

.works-vision .js-inview.m-fadeup.is-show .js-inview-trigger.m-delay01 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.works-vision .js-inview.m-fadeup.is-show .js-inview-trigger.m-delay02 {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.works-vision .js-inview.m-fadeup.is-show .js-inview-trigger.m-delay03 {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.works-vision .js-inview.m-fadeup.is-show .js-inview-trigger.m-delay04 {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

.works-vision .js-inview.m-fadeup.is-show .js-inview-trigger.m-delay05 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.works-vision {
  /*add slide*/
}

@-webkit-keyframes loop-slide-toleft {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes loop-slide-toleft {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@-webkit-keyframes loop-slide-toright {
  from {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes loop-slide-toright {
  from {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.works-vision-slider {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  overflow: hidden;

}

@media screen and (max-width: 767px) {
  .works-vision-slider {
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    margin: -25% -50%;
    width: 200%;
  }
}

/* @media (max-width: 767px){
  .works-vision-slider{
    width: 100%;
    margin: 0;
    transform: scale(0.55);
    transform-origin: center top;
  }
} */


.works-vision-slider-line {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
}

.works-vision-slider-line li {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  border: 8px solid #000;
  box-shadow: 6px 6px 0 #000;
}

.works-vision-slider-line li:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: -100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

.works-vision-slider-line li.m-blue:before {
  background-color: var(--color-primary);
}

.works-vision-slider-line li.m-pink:before {
  background-color: var(--color-primary);
}

.works-vision-slider-line li.m-green:before {
  background-color: var(--color-primary);
}

.works-vision-slider-line li:after {
  content: "";
  position: absolute;
  right: 2rem;
  top: 2rem;
  background: url(../images/top/icn_vision_arw.png) no-repeat left top/contain;
  width: 5rem;
  height: 5rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

.works-vision-slider-line li a {
  display: block;
}

.works-vision-slider-line li a:hover {
  opacity: 1;
}

.works-vision-slider-line li img {
  width: 100%;
}

.works-vision-slider-line li .txt {
  position: absolute;
  left: 1.5rem;
  bottom: 2rem;
  color: #fff;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  z-index: 4;
  pointer-events: none;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 700;
}

@media print and (any-hover: hover),
screen and (any-hover: hover) and (min-width: 768px) {

  .works-vision-slider-line li:hover:after,
  .works-vision-slider-line li:hover .txt {
    opacity: 1;
  }

  .works-vision-slider-line li:hover:before {
    bottom: 0;
    opacity: 0.61;
  }
}

.works-vision-slider.m-01 .works-vision-slider-line {
  -webkit-animation: loop-slide-toleft 30s infinite linear 1s both;
  animation: loop-slide-toleft 30s infinite linear 1s both;
  padding-top: 1rem;
}

.works-vision-slider.m-01 .works-vision-slider-line:before {
  content: "";
  width: 206.5rem;
  height: 36.5rem;
  /* height: 200px; */
  position: absolute;
  left: 30rem;
  top: 0rem;
  background: url(../images/top/deco.png) no-repeat left top/cover;
  z-index: 10;
  pointer-events: none;
}

.works-vision-slider.m-01 .slide01 {
  width: 31.4rem;
  margin-bottom: 9rem;
}

.works-vision-slider.m-01 .slide02 {
  width: 23.2rem;
  margin-left: 3.5rem;
  margin-top: 14rem;
}

.works-vision-slider.m-01 .slide03 {
  width: 42.1rem;
  margin-left: 12.5rem;
  margin-bottom: 10rem;
}

.works-vision-slider.m-01 .slide04 {
  width: 27.8rem;
  margin-left: 12.5rem;
  margin-bottom: 3rem;
}

.works-vision-slider.m-01 .slide05 {
  width: 32.5rem;
  margin-left: 5.5rem;
  margin-top: 11rem;
}

.works-vision-slider.m-01 .slide06 {
  width: 38.1rem;
  margin-left: 6.5rem;
  margin-bottom: 10.5rem;
  margin-right: 10rem;
}

.works-vision-slider.m-02 .works-vision-slider-line {
  -webkit-animation: loop-slide-toright 30s infinite linear 1s both;
  animation: loop-slide-toright 30s infinite linear 1s both;
  padding-top: 2rem;
}

.works-vision-slider.m-02 .works-vision-slider-line:before {
  content: "";
  width: 209.6rem;
  height: 38rem;
  /* height: 200px; */
  position: absolute;
  left: -2.5rem;
  top: 0rem;
  background: url(../images/top/deco.png) no-repeat left top/cover;
  z-index: 10;
  pointer-events: none;
}

.works-vision-slider.m-02 .slide01 {
  width: 42.4rem;
  margin-bottom: 10rem;
}

.works-vision-slider.m-02 .slide02 {
  width: 23.2rem;
  margin-left: 12rem;
  margin-top: 14rem;
}

.works-vision-slider.m-02 .slide03 {
  width: 31.5rem;
  margin-left: 3.5rem;
  margin-bottom: 10rem;
}

.works-vision-slider.m-02 .slide04 {
  width: 22.8rem;
  margin-left: 11rem;
  margin-top: 8rem;
}

.works-vision-slider.m-02 .slide05 {
  width: 38.1rem;
  margin-left: 15.5rem;
  margin-bottom: 11rem;
}

.works-vision-slider.m-02 .slide06 {
  width: 32.5rem;
  margin-left: 6.5rem;
  margin-top: 17.6rem;
  margin-right: 10rem;
}

.works-vision-slider.m-02 .slide07 {
  width: 19.2rem;
  margin-left: 5.5rem;
  margin-top: 0;
  margin-right: 10rem;
}

/* スライダー終わり */

/* =========================
   Modal
========================= */

.modal[aria-hidden="true"] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

#roleModal .modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.44);
}

.modal__panel {
  position: relative;
  margin: 27vh auto;
  width: min(920px, calc(100% - 32px));
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.modal__close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.modal__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
}

.modal__media {
  background: #111;
  display: grid;
  place-items: center;
}

.modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .modal__media img {
    height: 220px;
  }

  .modal__content {
    padding: 16px 16px 30px;
  }
}

.modal__content {
  padding: 22px;
}

.modal__title {
  margin: 6px 0 10px;
  font-size: 1.25rem;
}

.modal__text {
  margin: 0;
  color: #333;
  line-height: 1.8;
}

.modal__actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.modal__btn {
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 800;
  border: 1px solid transparent;
  background: var(--color-primary, #f08300);
  color: #fff;
  cursor: pointer;
}

.modal__btn:hover {
  background: var(--color-primary-hover, #e07000);
}

@media (max-width: 768px) {
  .modal__panel {
    margin: 17vh auto;
  }

  .modal__body {
    grid-template-columns: 1fr;
  }

  .modal__media {
    height: 220px;
  }
}

.modal__actions {
  margin-top: 20px;
  text-align: right;
}

.modal__link {
  background: transparent;
  border: none;
  color: var(--color-primary, #f08300);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.modal__link:hover {
  opacity: 0.8;
}

.role {
  scroll-margin-top: 90px;
}

/* =========================
   our-worksスライダー
========================= */
/* body {font-family: 'Helvetica Neue', sans-serif; background:#0f172a; color:#fff; margin:0; padding:60px;} */
.section-title {
  font-size: 32px;
  margin-bottom: 30px;
}

.slider-wrap {
  overflow: hidden;
  position: relative;
  padding-top: 10px;
  padding-bottom: 15px;
}

.slider-track {
  display: flex;
  gap: 24px;
  animation: scroll 40s linear infinite;
}

.work-card {
  min-width: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
  position: relative;
}

.work-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.work-info {
  padding: 10px;
  font-size: 14px;
}

.work-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.work-tag {
  color: #94a3b8;
  font-size: 12px;
}

.work-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.4s;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  padding: 20px;
  color: #fff;
}

.work-card:hover .work-overlay {
  opacity: 1;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* モーダル */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-content {
  max-width: 900px;
  width: 90%;
  background: #0b1220;
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.85);
  animation: zoomIn 0.4s ease forwards;
}

@keyframes zoomIn {
  to {
    transform: scale(1);
  }
}

.modal-content img {
  width: 100%;
  display: block;
}

.modal-caption {
  padding: 15px;
  font-size: 14px;
  color: #e5e7eb;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
}

/* ナビ矢印・インジケータ */
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  padding: 0px 14px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
}

.modal-prev {
  left: 20px;
}

.modal-next {
  right: 20px;
}

.modal-indicator {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #e5e7eb;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
  border-radius: 999px;
}

.modal-play {
  position: absolute;
  bottom: 14px;
  right: 20px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.modal-content img {
  width: 100%;
  display: block;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* ===== SAFETY PATCH: recruit modal should not be overridden by works modal ===== */
#roleModal[aria-hidden="true"] {
  display: none !important;
}

#roleModal {
  display: block;
}

/* 表示/非表示は aria-hidden で制御 */


.news {
  padding: 80px 0;
}

.news__inner {
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  /* 左固定 / 右可変 */
  gap: 80px;
  align-items: start;
}

/* 左カラム */
.news__en {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.news__mark {
  width: 18px;
  height: 2px;
  background: #e20000;
  display: inline-block;
}

.news__ttl {
  font-size: 44px;
  margin: 12px 0 24px;
}

.news__decor {
  width: 120px;
  height: 10px;
  background: linear-gradient(90deg, #cfd6ea 0 60%, transparent 60% 100%);
  opacity: .6;
  margin: 20px 0 40px;
}

.news__more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #111;
}

.news__arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #0b1b6a;
  color: #fff;
}

/* 右カラム：ここだけスクロール */
.news__right {
  max-height: calc(100vh - 220px);
  height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 12px;
}

/* リスト */
.news__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid #e7e7e7;
}

.news__item:last-child {
  border-bottom: 1px solid #e7e7e7;
}

.news__date {
  color: #888;
  font-weight: 500;
  min-width: 110px;
}

.news__tag {
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid #0b1b6a;
  color: #0b1b6a;
  border-radius: 999px;
  white-space: nowrap;
}

.news__link {
  display: flex;
  gap: 22px;
  align-items: baseline;
  text-decoration: none;
  color: #111;
  flex: 1;
  min-width: 0;
}

.news__year {
  font-weight: 700;
  white-space: nowrap;
}

.news__title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hover */
.news__link:hover .news__title {
  text-decoration: underline;
}

/* スクロールバー（Chrome/Edge/Safari） */
.news__right::-webkit-scrollbar {
  width: 10px;
}

.news__right::-webkit-scrollbar-track {
  background: #eef2f6;
  border-radius: 999px;
}

.news__right::-webkit-scrollbar-thumb {
  background: #0b1b6a;
  border-radius: 999px;
  border: 2px solid #eef2f6;
}

.news__right::-webkit-scrollbar-thumb:hover {
  background: #f08300;
  /* コーポレートカラー */
}

/* スクロールバー（Firefox） */
.news__right {
  scrollbar-width: thin;
  scrollbar-color: #0b1b6a #eef2f6;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .news__inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .news__right {
    max-height: 60vh;
    /* スマホでは短めに */
  }

  .news__item {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .news__link {
    width: 100%;
  }
}

/* =========================
   トップページお問い合わせ
========================= */

.contact-us {
  /* margin-top: 70px; */
  margin-bottom: 200px;
  position: relative;
  z-index: 1;
  padding-top: 70px;
}

.contact-us2 {}

@media (max-width: 768px) {

  .contact-us {
    margin-bottom: 140px;
  }

  .contact-us2 {
    margin-bottom: 30px;
  }
}

h2.contactTitle-services {
  background-image: url(../images/ttl/contact.png);
  width: 557px;
  height: 283px;
  background-size: contain;
  text-align: center;
  margin: 0 auto;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  h2.contactTitle-services {
    width: 357px;
    height: 203px;
  }
}

/* =========================
   CTA Buttons
========================= */
.cta-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 24px;
  max-width: 950px;
  margin: 30px auto;
}

.cta-buttons2 {
  display: grid;
  gap: 24px;
  max-width: 450px;
  margin: 30px auto;
}

/* 共通ボタン */
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 42px 32px;
  border-radius: 18px;
  text-decoration: none;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 6px 6px 0 #000;
  border: 3px solid #000;
}

.cta-btn-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 3px 3px 0 #740404;
  /* border: 3px solid #000; */
}

/* テキスト */
.cta-btn__text {
  display: flex;
  flex-direction: column;
  /* gap: 6px; */
  font-size: 1.56rem;
}

.cta-btn__text small {
  font-size: .75rem;
  letter-spacing: .08em;
  font-weight: 700;
  opacity: .9;
}

/* 矢印 */
.cta-btn__arrow {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

/* 採用（赤） */
.cta-btn--recruit {
  background: #e60012;
  color: #fff;
}

/* お問い合わせ（白） */
.cta-btn--contact {
  background: #fff;
  color: #000;
}

/* hover */
.cta-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 #000;
}

/* active（押し込み） */
.cta-btn:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 #000;
}

/* hover */
.cta-btn-top:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #740404;
}

/* active（押し込み） */
.cta-btn-top:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 #740404;
}

/* SP */
@media (max-width: 768px) {
  .cta-buttons {
    grid-template-columns: 1fr;
    padding-left: 16px;
    padding-right: 16px;
  }

  .cta-btn {
    padding: 22px 24px;
  }
}


/* =========================
   Contact form
========================= */
.contact {
  background: #fff;
  padding: 0 16px 16px;
}

.contact__inner {
  max-width: 720px;
  margin: 0 auto;
}

/* 説明文 */
.contact__note {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 30px;
}

/* 種別チェック */
.contact__type {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 1rem;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 24px;
}

.contact__type label {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* フォーム */
.contact__form {
  border: 1px solid #e5e5e5;
  padding: 40px;
  background-color: var(--clr-bg-02);
  border-radius: 10px;
  margin-top: 1px;
}

/* 1行 */
.form-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* 必須 */
.form-row.required label::after {
  content: "必須";
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  color: #fff;
  background: #e60012;
  padding: 2px 6px;
}

/* ラベル */
.form-row label {
  font-size: 14px;
}

/* 入力 */
.form-row input,
.form-row textarea {
  width: 100%;
  border: 1px solid #cfcfcf;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 2px;
}

.form-row textarea {
  resize: vertical;
}

/* 注意文 */
.contact__caution {
  font-size: 13px;
  margin: 30px 0;
}

/* 送信 */
.contact__submit {
  text-align: center;
}

.contact__submit button {
  background: #000;
  color: #fff;
  border: none;
  padding: 14px 40px;
  font-size: 15px;
  cursor: pointer;
  transition: opacity .2s ease;
  margin: 30px;
}

.contact__submit button:hover {
  opacity: .8;
}

/* 電話 */
.contact__tel {
  position: relative;
  z-index: 3;
  text-align: center;
  background-color: #e60012;
  color: #fff;
  /* margin: 30px; */
  padding: 30px;
  max-width: 450px;
  margin: 50px auto 0;
  border-radius: 15px;
}

.contact__tel span {
  font-size: 16px;
  margin-right: 10px;
}

.contact__tel strong {
  font-size: 24px;
  font-weight: 700;
}

/* SP */
@media (max-width: 768px) {
  .contact {
    padding: 0 16px 30px;
  }

  .contact__form {
    padding: 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact__type {
    gap: 12px;
  }
}

/* =========================
   Contact agree block
========================= */
.contact__agree {
  border-top: 1px solid #e5e5e5;
  margin-top: 30px;
  padding-top: 24px;
}

.contact__caution-title {
  font-weight: 700;
  margin-bottom: 10px;
}

.contact__caution-text {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 16px;
}

/* チェック */
.contact__agree-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* 送信ボタン disabled */
.contact__submit button:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 1;
}

/* お問い合わせ内容タイトル */
.contact__type-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}

/* =========================
   About Us (rebuild)
========================= */

.about {
  /* background: var(--color-bg-body); */
  padding: 84px 20px;
  position: relative;
  z-index: 1;
}

.about__lead {
  color: var(--clr-primary-light);
  font-size: 1.2rem;
  font-weight: 600;
}

.about__inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 520px;
  align-items: center;
  gap: 0;
  margin-bottom: 30px;
}

.about__panel {
  position: relative;
  background: #ffffffe2;
  border-radius: 24px;
  border: 4px solid var(--clr-primary-default);
  padding: 66px 114px 50px 40px;

  width: 100%;
  max-width: none;
  /* max-width: 980px;   */
}

.about__media {
  position: absolute;
  right: -10px;
  top: 60%;
  transform: translateY(-50%);

  width: 620px;
  aspect-ratio: 3 / 2.5;
  border-radius: 24px;
  /* overflow: hidden; */
  border: 4px solid var(--clr-primary-default);
  /* box-shadow: 0 20px 50px rgba(0,0,0,0.35); */
}

.about__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 21px;
  background-color: #000;
}

@media (min-width: 901px) {
  .about__panel {
    /* padding-right: 30px; */
  }
}

/* Aboutタグ画像 */
.about__tag {
  position: absolute;
  left: 20px;
  top: -36px;
  z-index: 3;
}

.about__tag img {
  display: block;
  width: 230px;
  height: auto;
}

/* ボタン */
.about__btn {
  position: absolute;
  left: 7em;
  right: 7em;
  bottom: 1.5em;
  height: 64px;
  border-radius: 16px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 900;
  font-size: 20px;
  box-shadow: 6px 6px 0 #000;
  border: 3px solid #000;
  transition: transform .15s ease, box-shadow .15s ease;
}

.about__btn:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 #000;
}

.about__btn:hover {
  transform: translateY(2px);
  filter: brightness(1.03);
  background-color: var(--color-primary-hover);
}

.about__btn-icon {
  width: 25px;
  height: 25px;
  background-image: url(../images/arrow.svg);
}

@media (max-width: 1253px) {
  .about__media {
    position: absolute;
    right: 0;
    top: 17%;
    /* transform: translateY(-50%); */
    transform: translateX(7%);

    width: clamp(360px, 50vw, 620px);
    /* ★1066px帯で勝手に縮む */
    aspect-ratio: 3 / 2.5;
    border-radius: 24px;
    border: 4px solid var(--clr-primary-default);
    overflow: visible;
  }

  .about__panel {
    width: 56vw;
    padding: 66px 90px 34px 40px;
  }

  .about__image {
    height: 110%;
  }

  .about__btn {
    left: 4em;
    right: 4em;
  }

  .equipment::before {
    width: 190px;
    height: 201px;
    top: 250px;
    left: -80px;
  }
}


/* SP：重ねをやめて縦積みにする（崩れ防止） */
@media (max-width: 768px) {
  .about {
    padding: 95px 16px 2px;
  }

  .about__inner {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-bottom: 0;
  }

  .about__panel {
    width: 100%;
    padding: 50px 22px 26px;
    padding-right: 22px;
  }

  .about__media {
    position: relative;
    top: -60px;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 520px;
    margin: 16px auto 0;
    aspect-ratio: 1 / 1;
  }

  .about__image {
    height: 100%;
  }

  .about__tag img {
    width: 180px;
  }

  .about__btn {
    height: 58px;
    font-size: 16px;
    left: 3em;
    right: 3em;
  }

  .equipment::before {
    width: 130px;
    top: 270px;
    left: 17.5em;
  }

  h2 {
    font-size: 1.5rem;
  }
}


body.is-page-leaving {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* =========================
   section-Services
========================= */
.services {
  text-align: center;
}

@media (max-width: 768px) {
  .services p {
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
  }

  .diagram {
    margin-left: 8px;
    margin-right: 8px;
  }

  .red {
    font-size: .85rem;
  }
}

h2.sectionTitle-services {
  background-image: url(../images/ttl/services.png);
  width: 557px;
  height: 283px;
  background-size: contain;
  text-align: center;
  margin: 0 auto;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  h2.sectionTitle-services {
    width: 357px;
    height: 203px;
  }
}

/* h2 span {
  font-family: "Kaisotai", serif;
  display: inline-block;
  position: absolute;
  top: 150px;
} */

.section-subTitle {
  display: inline-block;
  position: absolute;
  top: 150px;
  /* left: 0; */
}

.pc-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .section-subTitle {
    top: 92px;
  }

  .pc-hidden {
    display: block !important;
  }
}

/* services到着時の「ハッシュ先」演出 */
.section-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.section-reveal.is-show {
  opacity: 1;
  transform: translateY(0);
}

[id] {
  scroll-margin-top: 10px;
  /* scroll-margin-top: 120px; */
}

/* 任意：到達ハイライト */
.is-active {
  outline: 3px solid rgba(240, 131, 0, .6);
  outline-offset: 6px;
  border-radius: 12px;
}

/* =========================
   section-recruit
========================= */
.section-recruit {
  background-color: var(--clr-bg-02);
  border-radius: 24px;
  border: 4px solid var(--clr-primary-default);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  /* ← 角丸を効かせる */
  background-color: var(--clr-bg-02);
  padding: 0;
  border: 4px solid var(--clr-primary-default);
  max-width: 1200px;
  margin: 70px auto;
  /* display: flex; */
  height: 380px;
  max-height: 380px;
}


.section-recruit .container {
  /* padding: 45px; */
}

.section-recruit__content {
  padding: 45px;
  /* ← 以前のpaddingはここへ */
  position: relative;
}

.section-recruit__content::after {
  position: absolute;
  content: "";
  display: block;
  /* bottom: 0; */
  /* left: 405px; */
  top: 180px;
  right: 0%;
  width: 190px;
  height: 184px;
  background-size: contain;
  background-image: url(../images/deco03.png);
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-recruit__content::after {
    width: 150px;
    height: 154px;
    background-size: contain;
  }
}

h2.sectionTitle-recruit {
  background-image: url(../images/ttl/recruit.png);
  width: 186px;
  height: 56px;
  text-align: left;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  margin-bottom: 60px;
  flex-direction: column;
  flex-wrap: nowrap;
}

@media (max-width: 768px) {
  .section-recruit {
    height: auto;
    max-height: 600px;
    margin-top: 30px;
  }

  h2.sectionTitle-recruit {
    width: 100%;
    /* height: auto; */
  }
}

h2 span.recruit {
  /* font-family: "Kaisotai", serif; */
  display: inline-block;
  position: absolute;
  top: 55px;
}

.section-recruit p {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary);
}

.recruit__btn {
  position: relative;
  margin-top: 3rem;
  width: 350px;
  bottom: -0.5em;
  height: 64px;
  border-radius: 16px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 900;
  font-size: 20px;
  /* ▼ ここが変更ポイント */
  box-shadow: 6px 6px 0 #000;
  /* ぼかしなし */
  border: 3px solid #000;
  transition: transform .15s ease, box-shadow .15s ease;
  z-index: 1;
}

.works__btn {
  position: relative;
  margin-top: 3rem;
  width: 350px;
  bottom: 1.5em;
  height: 64px;
  border-radius: 16px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 900;
  font-size: 20px;
  /* ▼ ここが変更ポイント */
  box-shadow: 6px 6px 0 #000;
  /* ぼかしなし */
  border: 3px solid #000;
  transition: transform .15s ease, box-shadow .15s ease;
}

@media (max-width: 768px) {

  .recruit__btn,
  .works__btn {
    width: 300px;
  }
}

.works__btn {
  margin: 0 auto;
}

.recruit__btn:active,
.works__btn:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 #000;
}

.recruit__btn:hover,
.works__btn:hover {
  transform: translateY(2px);
  filter: brightness(1.03);
  background-color: var(--color-primary-hover);
}

.recruit__btn-icon,
.works__btn-icon {
  width: 25px;
  height: 25px;
  background-image: url(../images/arrow.svg);
}

/* SP */
@media (max-width: 768px) {

  .recruit__btn,
  .works__btn {
    height: 58px;
    font-size: 16px;
  }
}

.recruit__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.section-recruit__inner {
  display: grid;
  grid-template-columns: 1fr 50%;
  align-items: stretch;
}

.recruit__media {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 右だけ角丸 */
  border-top-right-radius: 21px;
  border-bottom-right-radius: 21px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* 画像を枠にフィット */
.recruit__image {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  /* 正方形にしたい場合 */
  object-fit: cover;
}

/* SP：縦積み */
@media (max-width: 768px) {
  .recruit-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section-recruit__inner {
    grid-template-columns: 1fr;
  }

  .recruit__media {
    max-width: 100%;
    justify-self: stretch;
    border-top-right-radius: 0;
  }

  .section-recruit__inner {
    /* grid-template-columns: 1fr; */
    display: block;
  }

  .section-recruit__content {
    padding: 24px;
  }

  .recruit__media {
    aspect-ratio: 16 / 16;
    /* 好みで */
  }
}

/* * {
  outline: 1px solid red;
} */

.body-wrap {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--color-bg-body);
  padding: 2vw 0px;
  mask-image: url(../images/top/bg_path-pc.png);
  mask-size: 100% 101%;
}

.body-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/body-wrap.png");
  background-repeat: repeat;
  background-size: cover;
  background-position: top center;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .body-wrap {
    mask-image: none;
  }

  .body-wrap::before {
    background-image: url("../images/body-wrap-sp.png");
    background-size: contain;
    background-repeat: repeat-y;
  }
}

html,
body {
  overflow-x: clip;
}

/* コンテナ（既存があれば不要） */
.container {
  width: min(1200px, 92vw);
  margin-inline: auto;
}

@media (max-width: 768px) {
  .container {
    width: auto;
  }
}

/* =========================
   1) page-hero
========================= */
.page-hero {
  position: relative;
  height: clamp(220px, 28vw, 240px);
  overflow: hidden;
  background: #000;
}

/* 背景（パララックス対象） */
.page-hero__bg {
  position: absolute;
  inset: -20px 0;
  /* 少し上下に余裕（動かしても見切れない） */
  background-size: cover;
  background-position: center;
  transform: translate3d(0, 0, 0);
  /* JSでYを動かす */
  will-change: transform;
}

/* 暗幕 */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .15), rgba(0, 0, 0, .35));
}

/* 中央ロゴ */
.page-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
}

.page-hero__en {
  width: min(520px, 85vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, .35));
}

.page-hero__jp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  color: #fff;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: .08em;
  text-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* =========================
   2) パンくず（黄色帯）
========================= */
.crumbbar {
  background: #f6dc2a;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.crumbbar-02 {
  background: var(--color-bg-alt);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.crumb {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px;
  font-size: 14px;
}

.crumb__item a {
  color: #111;
  text-decoration: none;
}

.crumb__item[aria-current="page"] {
  color: var(--color-primary-hover);
  font-weight: 700;
}

.crumb__sep {
  opacity: .7;
}

/* =========================
   3) 黄色イントロ
========================= */
.page-intro {
  background: var(--color-bg-body);
  padding: clamp(40px, 5vw, 64px) 0 0;
  position: relative;
}

/* 下端の白い“でかい丸み” */
.page-intro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(70px, 7vw, 140px);
  background: #fff;
  border-top-left-radius: 800px;
  border-top-right-radius: 800px;
  z-index: 1;
}

.page-intro2 {
  background: #fff;
  padding: clamp(40px, 5vw, 64px) 0 0;
  position: relative;
}

.page-intro4 {
  /* background: #fff; */
  padding: clamp(40px, 5vw, 64px) 0 0;
  position: relative;
}

/* 下端の白い“でかい丸み” */
.page-intro2::before,
.page-intro4::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(70px, 7vw, 140px);
  background: var(--color-bg-alt);
  border-top-left-radius: 800px;
  border-top-right-radius: 800px;
}

.page-intro3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 224px;
  height: clamp(70px, 7vw, 140px);
  background: var(--color-bg-alt);
  border-bottom-left-radius: 800px;
  border-bottom-right-radius: 800px;
  z-index: 2;
}

.page-intro5::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 451px;
  height: clamp(70px, 7vw, 140px);
  background: #fff;
  border-bottom-left-radius: 800px;
  border-bottom-right-radius: 800px;
  z-index: 2;
}

.page-intro6::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 451px;
  height: clamp(70px, 7vw, 140px);
  background: #fff;
  border-bottom-left-radius: 800px;
  border-bottom-right-radius: 800px;
  z-index: 2;
}

.page-intro7::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11%;
  height: clamp(70px, 7vw, 140px);
  background: #fff;
  border-bottom-left-radius: 800px;
  border-bottom-right-radius: 800px;
  z-index: 2;
}

.page-intro__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: clamp(89px, 10vw, 140px);
  /* 丸み分の余白 */
}

.page-intro__ttl {
  margin: 0 0 18px;
  line-height: 1.15;
}

@media (max-width: 768px) {
  .page-intro5::after {
    bottom: 383px;
  }

  .page-intro7::after {
    bottom: 9%;
  }

  .page-intro__ttl {
    padding: 0 16px;
  }

  .page-intro6::after {
    bottom: 381px;
  }
}

.page-intro__en {
  display: block;
  font-weight: 900;
  font-size: clamp(34px, 5.5vw, 64px);
  text-shadow:
    -2px -2px 0 #fff,
    2px -2px 0 #fff,
    -2px 2px 0 #fff,
    2px 2px 0 #fff,
    0 10px 18px rgba(0, 0, 0, .18);
}

.page-intro__jp {
  display: block;
  margin-top: -10px;
  font-weight: 800;
  font-size: 1.5rem;
}

.page-intro__lead {
  margin: 18px auto 42px;
  width: min(820px, 92vw);
  font-weight: 700;
  line-height: 2;
  color: #111;
}

.page-intro__ttl img {
  margin: 0 auto;
}

/* 本文 */
.page-body {
  background: #fff;
  padding: 40px 0 80px;
}

/* =========================
   画像40% / テキスト60%
========================= */

.media-block {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 40px;
  align-items: center;
  margin-bottom: 80px;
}

.media-block2 {
  display: grid;
  grid-template-columns: 65% 35%;
  gap:50px;
  align-items: center;
  /* margin-bottom: 80px; */
}

/* 画像 */
.media-block__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  /* 任意 */
}

/* テキスト */
.media-block__content {
  font-size: 16px;
  line-height: 1.9;
}

.media-block__ttl {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 16px;
}

h4.sns-ttl {
  margin: 0 0 20px;
}

.sns-ttl span {
  color: var(--clr-primary-light);
}

.media-block__content ul,
.media-block__content .sns {
  padding: 1.5rem;
  border-radius: 24px;
  background-color: var(--clr-bg-02);
  border: 4px solid var(--clr-primary-light);
  margin-bottom: 1rem;
  list-style: disc;
  padding-left: 2.5rem;
}

.media-block__content .sns {
  max-width: 330px;
}

.media-block__content ul.sns-list {
  padding: 0;
  background-color: var(--clr-bg-02);
  border: none;
  margin-bottom: 0;
  list-style: none;
  padding-left: 0;
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  align-items: center;
}

.service-table img {
  /* height: 70svh; */
  width: 90%;
  margin: 0 auto;
}

/* =========================
   SP（縦並び）
========================= */
@media (max-width: 768px) {
  .page-body {
    padding-bottom: 0;
  }

  .media-block__content .sns {
    max-width: 100%;
    margin-bottom: 3rem;
  }

  .media-block {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
  }

  .media-block2 {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
  }

  /* 画像を上に表示 */
  .media-block__img {
    order: -1;
  }

}

/* =========================
   Stage setup（左右2カラム）
========================= */
.stageSetup {
  background: var(--color-bg-alt);
  color: #000;
  overflow: visible;
}

.stageSetup__inner {
  width: min(1200px, 92vw);
  margin-inline: auto;
  border-bottom: 1px solid var(--clr-bg-01);
  padding-top: 36px;
  padding-bottom: 45px;

  display: grid;
  grid-template-columns: 35% 65%;
  align-items: start;
  column-gap: clamp(16px, 2.5vw, 32px);
}

/* ---------- 左 ---------- */
.stageSetup__left {
  position: relative;
  min-width: 0;
}

.services__title {
  margin: 0 0 clamp(18px, 3vw, 28px);
}

.services__titleEn {
  width: min(273px, 64%);
  height: auto;
  display: block;
}

.services__titleJp {
  margin: 6px 0 0;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(18px, 2vw, 26px);
}

/* ✅ figureは普通に“左カラム内の次要素”として配置（順序が崩れない） */
.services__illust {
  margin: 0;
  width: min(540px, 41vw);
}

.services__illust img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- 右 ---------- */
.stageSetup__right {
  padding-top: clamp(10px, 1vw, 18px);
  z-index: 1;
  min-width: 0;
}

.stageSetup__desc {
  margin: 0 0 clamp(16px, 2vw, 22px);
  font-size: 16px;
  line-height: 2;
  opacity: .95;
}

.stageSetup__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
}

.stageSetup__photo {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255, 255, 255, .06);
  aspect-ratio: 16 / 9;
}

.stageSetup__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* =========================
   PCだけ：イラストを“下に食い込ませる”演出（安全）
   ※ absolute/top:150% をやめて transform で見た目だけずらす
========================= */
@media (min-width: 861px) {
  .services__illust {
    /* 左に少しはみ出し */
    transform: translateX(-19%);
    /* 下に少し食い込ませる（必要なら数値調整） */
    margin-top: 18px;
  }
}

/* =========================
   SP：縦並び（左→右）
========================= */
@media (max-width: 860px) {
  .stageSetup__inner {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .stageSetup__left {
    padding-bottom: 0;
  }

  .services__illust {
    width: min(520px, 92vw);
    transform: none;
    /* SPははみ出し無し */
    margin-top: 18px;
  }

  .stageSetup__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Company-page
========================= */
.left-right-bg,
.left-right-bg-2 {
  position: relative;
  /* background-image: url(../images/company/intro-bg.png);
  background-repeat: no-repeat;
  width: 863px;
  height: 821px;
  background-position: center; */
}

.intro-bg {
  background-image: url(../images/company/intro-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  margin: 0 auto;
}

/* .left-right-bg::before {
  content: "";
  display: block;
  background-image: url(../images/company/left.jpg);
  width: 18vw;
  aspect-ratio: 180 / 1064;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0px;
} */
.left-right-bg::before {
  content: "";
  display: block;
  background-image: url(../images/company/left.jpg);
  width: 180px;
  height: 1064px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0px;
}

.left-right-bg::after {
  content: "";
  display: block;
  background-image: url(../images/company/right.jpg);
  width: 180px;
  height: 1064px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0%;
  top: 0px;
}

/* .left-right-bg-2::before {
  content: "";
  display: block;
  background-image: url(../images/recruite/left.png);
  width: 300px;
  height: 285px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: -20px;
  top: 60px;
} */

.left-right-bg-2::before {
    content: "";
    display: block;
    background-image: url(../images/recruite/left.png);
    width: 20vw; /* 画面幅に応じて変化 */
    aspect-ratio: 300 / 285; /* 元画像の比率 */
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -20px;
    top: 60px;
}

/* .left-right-bg-2::after {
  content: "";
  display: block;
  background-image: url(../images/recruite/right.png);
  width: 320px;
  height: 285px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0%;
  top: 100px;
} */

.left-right-bg-2::after {
  content: "";
  display: block;
  background-image: url(../images/recruite/right.png);
  width: 22vw;
  aspect-ratio: 320 / 285; 
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: -2vw; 
  top: 74px;  
}

.line-h-3 {
  line-height: 1.9;
}

@media (max-width: 923px) {
  .left-right-bg::before {
    width: 160px;
  }

  .left-right-bg::after {
    width: 160px;
  }

  .left-right-bg-2::before {
    width: 180px;
    top: 45%;
  }

  .left-right-bg-2::after {
    width: 180px;
    top: 50%;
  }

  .intro-bg p {
    font-size: 0.85rem;
  }

  .intro-bg {
    background-size: contain;
  }

}

@media (max-width: 812px) {
  .left-right-bg::before {
    width: 150px;
  }

  .left-right-bg::after {
    width: 150px;
  }

  .left-right-bg-2::before {
    width: 150px;
  }

  .left-right-bg-2::after {
    width: 150px;
  }

  .intro-bg p {
    font-size: 0.85rem;
    padding: 0 16px;
  }

  .intro-bg {
    background-size: contain;
  }

}

@media (max-width: 767px) {
  .left-right-bg::before {
    display: none;
  }

  .left-right-bg::after {
    display: none;
  }

  .left-right-bg-2::before {
    display: none;
  }

  .left-right-bg-2::after {
    display: none;
  }
}

/* =========================
   Page Top Floating Button
========================= */
.toTop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--color-primary, #f08300);
  color: #fff;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  cursor: pointer;
  align-content: center;
  gap: 6px;
  /* 初期は非表示 */
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, box-shadow .15s ease;
}

.toTop__text {
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  margin-top: -2px;
}

.toTop.is-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.toTop:active {
  transform: translateY(2px);
  box-shadow: 2px 2px 0 #000;
}

/* SP少し大きめ */
@media (max-width: 768px) {
  .toTop {
    right: 14px;
    bottom: 14px;
    width: 60px;
    height: 60px;
  }
}

/* 動きを減らす設定に対応 */
@media (prefers-reduced-motion: reduce) {
  .toTop {
    transition: none;
  }
}

/* =========================
   Recruit / Warehouse section
========================= */
.warehouse {
  /* 既存roleList内で使う想定：余白はお好みで */
  background: #fff;
  border-radius: 16px;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid #e6e6e6;
  margin: 0 2rem;
}

.flex {
  display: flex;
  align-items: center;
  max-width: 850px;
  justify-content: space-around;
  margin: 0 auto;
}

.warehouse__head {
  text-align: center;
  margin-bottom: 18px;
}

.warehouse__title,
.On-site__title {
  display: inline-block;
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: #4dc09a;
  /* 仮：緑 */
  color: #fff;
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 22px);
}

.warehouse__lead {
  margin: 10px 0 0;
  color: #333;
  font-weight: 600;
  font-size: 14px;
}

/* 2カラムカード */
.warehouse__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
  margin-top: 16px;
  margin-bottom: 50px;
}

/* 共通カード */
.jobCard {
  background: #fff;
  border-radius: 12px;
  padding: 16px 16px 14px;
  /* border: 1px solid #e9e9e9; */
}

.jobCard__badge {
  width: fit-content;
  margin: 0 auto 12px;
  /* padding: 8px 18px; */
  /* border-radius: 999px; */
  color: #000000;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .04em;
}

.jobCard__badge--green {
  background: #4dc09a;
}

.jobBlock__badge--blue {
  background: #3b82f6;
}

/* 表（dl） */
.jobTable {
  margin: 0;
  border-top: 1px dashed #e4e4e4;
}

.jobTable__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed #e4e4e4;
}

.jobTable__row dt {
  margin: 0;
  color: var(--color-primary);
  /* 見本の“金色っぽい” */
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
  text-align: left;
}

.jobTable__row dd {
  margin: 0;
  color: #222;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

.jobList {
  margin: 0;
  /* padding-left: 1.2em; */
}

.jobList li {
  margin: 2px 0;
}

/* チップ */
.jobChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.chip--blue {
  background: #2f6fff;
  color: #fff;
}

.chip--red {
  background: #ff362f;
  color: #fff;
}

.chip--green {
  background: #7ed957;
  color: #fff;
}

/* 現場ブロック */
.jobBlock {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #ededed;
  text-align: center;
  max-width: 630px;
  margin: 0 auto 50px;
}

.jobBlock__badge {
  width: fit-content;
  margin: 0 auto 10px;
  padding: 10px 20px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
}

.jobBlock__badge--blue {
  background: #3b82f6;
}

.jobBlock__desc {
  margin: 0 0 12px;
  color: #333;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.8;
}

/* 年次の囲み（2025年実績：3年目/10年目） */
.jobYears {
  display: grid;
  gap: 10px;
}

.jobYears__item {
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fafafa;
}

.jobYears__label {
  display: inline-block;
  font-weight: 900;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #d8d8d8;
  background: #fff;
  margin-bottom: 6px;
}

/* 各種手当 */
.allowances {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #ededed;
  max-width: 630px;
  margin: 0 auto;
}

.allowances__title {
  margin: 0 0 10px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .08em;
}

.allowTable {
  margin: 0;
  border-top: 1px dashed #e4e4e4;
}

.allowTable__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed #e4e4e4;
}

.allowTable__row dt {
  margin: 0;
  color: var(--color-primary);
  font-weight: 900;
  font-size: 13px;
}

.allowTable__row dd {
  margin: 0;
  color: #222;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.8;
}

/* =========================
   Responsive
========================= */
@media (max-width: 900px) {
  .warehouse__cards {
    grid-template-columns: 1fr;
  }

  .warehouse__title,
  .On-site__title {
    line-height: 1.1;
  }

  .jobTable__row,
  .allowTable__row {
    grid-template-columns: 120px 1fr;
  }
}

@media (max-width: 600px) {
  .warehouse {
    padding: 14px;
    margin: 0 1rem;
  }

  .jobTable__row,
  .allowTable__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .jobTable__row dt,
  .allowTable__row dt {
    font-size: 12px;
  }

  .jobTable__row dd,
  .allowTable__row dd {
    font-size: 13px;
  }

  .jobBlock__desc {
    text-align: left;
  }
}

/* ===== Company tables ===== */
.companyTables {
  display: grid;
  gap: 28px;
  max-width: 850px;
  margin: 0 auto;
}

/* 既存.cardがある前提。なければこれも有効 */
.card {
  background: #fff;
}

.card__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card__mark {
  color: var(--color-primary, #f08300);
  font-size: 14px;
  line-height: 1;
}

/* table風dl */
.deflist--table {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  overflow: hidden;
}

.deflist--table .deflist__row {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.deflist--table .deflist__row+.deflist__row {
  border-top: 1px solid #d9d9d9;
}

.deflist--table dt,
.deflist--table dd {
  margin: 0;
  padding: 14px 14px;
  font-size: 13px;
  line-height: 1.7;
}

.deflist--table dt {
  background: #fbf8e9;
  /* 薄いベージュ */
  font-weight: 700;
  border-right: 1px solid #d9d9d9;
  white-space: nowrap;
}

.deflist--table dd {
  background: #fff;
  font-weight: 500;
}

/* リンク見た目（任意） */
.textLink {
  color: var(--color-primary, #f08300);
  text-decoration: none;
  font-weight: 700;
}

.textLink:hover {
  text-decoration: underline;
}

/* SP：縦積み（読みやすく） */
@media (max-width: 640px) {
  .deflist--table .deflist__row {
    grid-template-columns: 1fr;
  }

  .deflist--table dt {
    border-right: 0;
    border-bottom: 1px solid #d9d9d9;
    white-space: normal;
  }
}
/* =========================
   Privacy Policy
========================= */

.privacy {
  padding: 60px 0;
}

.privacy__inner {
  background: #fff;
  border-radius: 20px;
  padding: 50px 60px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.privacy__title {
  font-size: 2rem;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 800;
}

.privacy__lead {
  margin-bottom: 40px;
  line-height: 1.9;
  color: #444;
}

.privacy__block {
  margin-bottom: 40px;
}

.privacy__block h2 {
  font-size: 1.3rem;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 5px solid var(--color-primary);
}

.privacy__block p {
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.8;
}

.privacy__block ul {
  padding-left: 20px;
  margin-bottom: 14px;
}

.privacy__block li {
  margin-bottom: 6px;
  list-style: disc;
}

.privacy__contact {
  background: var(--color-bg-alt);
  padding: 20px;
  border-radius: 12px;
}

.privacy__footer {
  margin-top: 50px;
  text-align: right;
  font-size: 14px;
  color: #555;
}
#top_video_wap {
  overflow: hidden;
  z-index: -2;
  width: 100%;
  height: auto;
  /* min-width: 1000px; */
  display: flex;
  justify-content: center;
  align-items: center;
}
#top_video_wap video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
}
/* =========================
   Responsive
========================= */
@media (max-width: 768px) {

  .privacy__inner {
    padding: 30px 20px;
    border-radius: 16px;
  }

  .privacy__title {
    font-size: 1.5rem;
  }

  .privacy__block h2 {
    font-size: 1.1rem;
  }

  .privacy__footer {
    text-align: left;
  }
  #top_video_wap {
    height: 199px;
  }

}