/* =========================================================
   荒井ラッキング TOP  /  style.css
   Desktop-first. Content column max-width 1080px centered.
   ========================================================= */
/* ---------- Custom properties ---------- */ :root {
  --yellow: #fee003;
  --black: #000;
  --white: #fff;
  --red: #d50000;
  --gray-dark: #333;
  --gray-light: #f7f7f7;
  --gray-input: #f7f7f8;
  --container: 1120px;
  --radius-lg: 8px;
  --radius-sm: 4px;
  --font-jp: "游ゴシック体", YuGothic, "Yu Gothic", "游ゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-jp);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
}
h1, h2, h3 {
  margin: 0;
  font-weight: 700;
}
figure {
  margin: 0;
}
/* ---------- Layout container ---------- */
.l-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
/* ページ本体ラッパーの横はみ出しを内包（overflow:clip はスクロールコンテナを
   作らず、縦スクロールや position:sticky を壊さない）。
   採用ページの画像マーキー等が横スクロールを生むのを防ぐ。 */
.main, .biz {
  overflow-x: clip;
}
/* ---------- Shared section eyebrow ---------- */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.section-eyebrow__ar {
  width: 43px;
  height: auto;
}
.section-eyebrow__en {
  height: 28px;
  width: auto;
}
.section-eyebrow__ja {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.56px;
}
.section-eyebrow__ja--yellow {
  color: var(--yellow);
}
.section-title {
  font-weight: 700;
  font-size: 60px;
  line-height: 1.25;
  letter-spacing: 2.4px;
}
.section-title--white {
  color: var(--white);
}
/* ---------- Shared buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: opacity .25s, box-shadow .25s, transform .25s;
}
.btn img {
  width: 10px;
  height: auto;
  transition: transform .25s;
}
.btn:hover {
  opacity: .9;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
.btn:hover img {
  transform: translateX(4px);
}
.btn--dark {
  background: var(--black);
  color: var(--white);
  padding: 16px 28px;
}
.btn--yellow {
  background: var(--yellow);
  color: var(--black);
  padding: 16px 28px;
}
/* =========================================================
   HEADER
   ========================================================= */
.header {
  width: 100%;
  background: var(--yellow);
  position: relative;
  z-index: 10;
}
.header__inner {
  max-width: 1400px;
  margin-inline: auto;
  min-height: 90px;
  padding-inline: 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(24px, calc(24px + (100vw - 1080px) * 0.225), 96px);
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header__nav--left {
  justify-content: flex-end;
}
.header__nav--right {
  justify-content: flex-end;
}
.header__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: opacity .2s;
}
.header__nav-item:hover {
  opacity: .65;
}
.header__nav-ja {
  font-weight: 700;
  font-size: 16px;
  color: var(--black);
  white-space: nowrap;
}
.header__nav-ruby {
  height: 9.66px;
  width: auto;
}
.header__divider {
  width: 1px;
  height: 34px;
  background: var(--black);
}
.header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 120px;
  background: var(--black);
  align-self: start;
  margin-bottom: -30px;
  position: relative;
  z-index: 5;
}
.header__logo img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.header__right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.header__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 50px;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: opacity .25s, transform .25s, box-shadow .25s;
}
.header__contact:hover {
  opacity: .9;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
}
.header__hamburger {
  display: none;
}
.header__hamburger span {
  transition: transform .3s, opacity .2s;
  transform-origin: center;
}
.header__hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header__hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.header__hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* モバイルドロワー（デスクトップでは非表示） */
.header__drawer {
  display: none;
}
.header__backdrop {
  display: none;
}
/* =========================================================
   ページトップへ戻るボタン
   ========================================================= */
.to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 40;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top:hover {
  background: var(--black);
  color: var(--yellow);
}
.to-top svg {
  width: 22px;
  height: 22px;
  display: block;
}
@media (max-width: 767px) {
  .to-top {
    right: 16px;
    width: 48px;
    height: 48px;
  }
  .to-top svg {
    width: 20px;
    height: 20px;
  }
}
/* =========================================================
   FV / HERO
   ========================================================= */
.fv {
  width: 100%;
  padding: 0 30px 30px;
}
.fv__container {
  position: relative;
  max-width: none;
  margin: 0;
}
.fv__hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* ヘッダー(90px)＋下余白(30px)を除いた画面いっぱい */
  height: calc(100vh - 120px);
  height: calc(100svh - 120px);
  min-height: 480px;
}
.fv__hero img, .fv__hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fv__headline {
  position: absolute;
  top: 38%;
  left: 60px;
  color: var(--white);
  font-weight: 700;
  font-size: 80px;
  line-height: 110px;
  letter-spacing: 3.2px;
  text-shadow: 0 0 20px #000;
}
/* Owner card overlay */
.owner-card {
  position: absolute;
  right: 40px;
  bottom: 50px;
  width: 280px;
  height: 120px;
  background: var(--white);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px;
  transition: opacity .25s, transform .25s, box-shadow .25s;
}
.owner-card:hover {
  opacity: .92;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}
.owner-card__badge {
  position: absolute;
  top: -60px;
  left: -30px;
  width: 180px;
  height: 80px;
}
.owner-card__badge-burst {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.owner-card__badge-text {
  position: absolute;
  left: 20.9%;
  top: 36.5%;
  width: 62.9%;
  height: auto;
}
.owner-card__photo {
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #f7f7f8;
}
.owner-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1);
}
.owner-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.owner-card__text {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: 18px;
  color: var(--black);
}
.owner-card__text span {
  display: block;
  line-height: 21px;
  padding-bottom: 4px;
  border-bottom: 1px dashed #AAAAAC;
}
.owner-card__entry img {
  height: 30px;
  width: auto;
}
/* =========================================================
   MAIN
   ========================================================= */
.main {
  width: 100%;
  padding: 100px 30px;
  display: flex;
  flex-direction: column;
  gap: 130px;
}
.main > section {
  width: 100%;
}
/* ---------- (a) 会社紹介 / intro ---------- */
.intro {
  background: var(--yellow);
}
.intro__container {
  position: relative;
}
.intro__watermark {
  position: absolute;
  top: -40px;
  right: 0;
  width: 60%;
  opacity: .03;
  pointer-events: none;
  z-index: 0;
}
.intro__title, .intro__body {
  position: relative;
  z-index: 1;
}
.intro__title {
  font-weight: 700;
  font-size: 80px;
  line-height: 110px;
  letter-spacing: 3.2px;
  margin-bottom: 40px;
}
.intro__title-accent {
  color: var(--red);
}
.intro__body p {
  font-weight: 700;
  font-size: 22px;
  line-height: 50px;
  max-width: 1080px;
}
.intro__body p + p {
  margin-top: 24px;
}
.intro__deco {
  position: absolute;
  top: 50%;
  right: 0;
  width: 96.6px;
  height: 653px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.intro__deco img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 653px;
  height: 96.6px;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}
/* ---------- (b) STRENGTH ---------- */
/* 縦長スクロール領域 → 中身を画面に固定(sticky)し、スクロール量で切替 */
.strength {
  position: relative;
  height: 300vh;
}
.strength__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}
/* section に1つの暗い背景。中身はタブ／スクロールで切替 */
.strength__band {
  width: 100%;
  height: calc(100% - 60px); /* 画面に合わせる（上下30pxずつの余白） */
  min-height: 820px; /* 縦幅の短いビューポートで中身が潰れないよう下限を確保 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 48px 56px;
  display: flex;
  align-items: center; /* 中の要素を上下中央に */
  background-image: linear-gradient(rgba(0, 0, 0, .88), rgba(0, 0, 0, .88)), url("../images/sec-strength02.jpg");
  background-size: cover;
  background-position: center;
}
.strength__container {
  width: 100%;
  max-width: 1228px;
  margin-inline: auto;
  padding-inline: 0;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 50px;
  align-items: center;
}
.strength__nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.strength__num {
  width: 40px;
  height: 40px;
  border: 1px solid var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.strength__num.is-active {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}
/* パネル：同位置に重ね、active のみ表示（その場で中身切替） */
.strength__panel {
  display: none;
}
.strength__panel.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 36vw, 500px);
  align-items: center;
  gap: clamp(32px, 4vw, 60px);
}
.strength__content {
  position: relative;
}
.strength__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.strength__ar {
  width: 43px;
  height: auto;
}
.strength__en {
  height: 28px;
  width: auto;
}
.strength__label {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.56px;
  color: var(--yellow);
  white-space: nowrap;
}
.strength__title {
  font-weight: 700;
  font-size: clamp(36px, 4.28vw, 60px);
  line-height: 1.33;
  color: var(--white);
}
.strength__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .4);
  margin: 26px 0 34px;
}
.strength__text {
  color: var(--white);
}
.strength__text p {
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
}
.strength__text p + p {
  margin-top: 16px;
}
.strength__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
  width: 250px;
  height: 50px;
  background: var(--yellow);
  color: var(--black);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-sm);
  transition: opacity .25s, transform .25s;
}
.strength__button img {
  width: 10px;
  transition: transform .25s;
}
.strength__button:hover {
  opacity: .9;
}
.strength__button:hover img {
  transform: translateX(4px);
}
.strength__photo {
  width: 100%;
}
.strength__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
/* ---------- (c) 施工実績 / works ---------- */
.works {
  background: var(--yellow);
  margin-top: -30px;
} /* STRENGTHとの間を 130px → 100px に */
.works__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 50px;
}
.works__desc {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  margin-top: 20px;
}
.works__more {
  flex-shrink: 0;
}
.works__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 60px;
}
.works__card {
  display: block;
}
.works__card-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 500 / 312;
  margin-bottom: 13px;
}
.works__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__pref {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
}
.works__card-title {
  font-weight: 700;
  font-size: 30px;
  line-height: 40px;
  margin: 6px 0 16px;
}
.works__meta {
  margin: 0;
}
.works__meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.works__meta-row + .works__meta-row {
  margin-top: 5px;
}
.works__tag {
  flex-shrink: 0;
  width: 52px;
  height: 30px;
  background: var(--black);
  color: var(--white);
  border-radius: 2px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.works__value {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
}
/* ---------- (d) 会社情報 / company ---------- */
.company {
  border-radius: var(--radius-lg);
  padding: 80px 0;
  background-image: linear-gradient(rgba(0, 0, 0, .85), rgba(0, 0, 0, .85)), url("../images/sec-company-band.png");
  background-size: cover;
  background-position: center;
}
.company__desc {
  color: var(--white);
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  margin: 24px 0 40px;
}
.company__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}
.company__stat {
  position: relative;
  background: rgba(51, 51, 51, .5);
  border-radius: var(--radius-sm);
  padding: 28px 30px 52px;
  min-height: 250px;
  color: var(--white);
  text-align: center;
}
.company__stat-label {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  padding: 0 6px;
}
.company__stat-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  font-weight: 700;
  font-size: 24px;
}
.company__stat-num img {
  height: 68.9px;
  width: auto;
  display: inline-block;
}
.company__stat-sub {
  margin-top: 6px;
  font-weight: 700;
  font-size: 16px;
}
.company__stat-sub img {
  height: 20px;
  width: auto;
  display: inline-block;
  vertical-align: baseline;
}
.company__stat-note {
  position: absolute;
  right: 22px;
  bottom: 16px;
  font-weight: 500;
  font-size: 14px;
}
.company__message {
  position: relative;
  background: rgba(51, 51, 51, .5);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 0 40px;
  display: flex;
  align-items: flex-end;
  gap: 30px;
  min-height: 270px;
  margin-bottom: 40px;
}
.company__message-photo {
  flex: 0 0 280px;
  width: 280px;
  height: 280px;
  align-self: flex-end;
}
.company__message-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 -10px;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
  mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.company__message-body {
  flex: 1;
  align-self: stretch;
  padding-top: 30px;
}
.company__message-label {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  padding: 0 2px;
}
.company__message-quote {
  margin: 30px 0 0;
  color: var(--white);
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  font-weight: 500;
  font-size: 46px;
  line-height: 1.2;
}
.company__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.company__link {
  position: relative;
  background: var(--gray-light);
  border-radius: var(--radius-sm);
  padding: 40px;
  transition: opacity .25s, box-shadow .25s, transform .25s;
}
.company__link:hover {
  opacity: .95;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}
.company__link-title {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: 16px;
}
.company__link-desc {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
}
.company__link-arrow {
  position: absolute;
  top: 50px;
  right: 40px;
  width: 20px;
  transition: transform .25s;
}
.company__link::after {
  content: "";
  position: absolute;
  top: 47px;
  right: 80px;
  width: 1px;
  height: 26px;
  background: #ababac;
}
.company__link:hover .company__link-arrow {
  transform: translateX(5px);
}
/* ---------- (e) 採用情報 / recruit ---------- */
.recruit {
  background: var(--yellow);
}
.recruit__desc {
  font-weight: 700;
  font-size: 20px;
  line-height: 36px;
  margin-top: 24px;
}
.recruit__desc + .recruit__desc {
  margin-top: 16px;
}
.recruit__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 50px 0 40px;
}
.recruit__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 226px;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 40px;
  transition: opacity .25s, box-shadow .25s;
}
.recruit__card:hover {
  opacity: .92;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
.recruit__card-body {
  max-width: 266px;
}
.recruit__card-title {
  font-weight: 700;
  font-size: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.recruit__card-line {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--black);
  margin: 10px 0 18px;
}
.recruit__card-desc {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
}
.recruit__card-img {
  flex: 0 0 156px;
  width: 156px;
  height: 156px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--gray-light);
}
.recruit__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit__card-arrow {
  flex-shrink: 0;
  width: 20px;
  transition: transform .25s;
}
.recruit__card:hover .recruit__card-arrow {
  transform: translateX(5px);
}
.recruit__banners {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.recruit__banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  height: 180px;
  border-radius: var(--radius-lg);
  padding: 0 60px;
  overflow: hidden;
  transition: opacity .25s, box-shadow .25s;
}
.recruit__banner:hover {
  opacity: .93;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}
.recruit__banner--entry {
  background: var(--black);
}
.recruit__banner--recruitment {
  background: var(--white);
}
.recruit__banner-watermark {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 130px;
  object-fit: contain;
  pointer-events: none;
}
.recruit__banner--entry .recruit__banner-watermark {
  opacity: .2;
}
.recruit__banner--recruitment .recruit__banner-watermark {
  opacity: .08;
}
.recruit__banner-en {
  position: relative;
  width: auto;
}
.recruit__banner--entry .recruit__banner-en {
  height: 93.38px;
}
.recruit__banner--recruitment .recruit__banner-en {
  height: 96.6px;
}
.recruit__banner-ja {
  position: relative;
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 1.6px;
  color: var(--yellow);
}
.recruit__banner-ja--dark {
  color: var(--black);
}
.recruit__banner-arrow {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  transition: transform .25s;
}
.recruit__banner:hover .recruit__banner-arrow {
  transform: translate(6px, -50%);
}
/* ---------- (f) ブログ / blog ---------- */
.blog {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 70px 0 90px;
}
.blog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.blog__scroller {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  /* 左端（カード1）は現在位置のまま、右側は白バンドの端まで伸ばして
     次のカードがより見えるようにする（ビューポート幅に追従） */
  margin-right: min(0px, calc(570px - 50vw));
}
.blog__card {
  flex: 0 0 500px;
  width: 500px;
  scroll-snap-align: start;
}
.blog__card-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 500 / 312;
  margin-bottom: 18px;
}
.blog__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.blog__card:hover .blog__card-img img {
  transform: scale(1.06);
}
.blog__card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.blog__date {
  font-weight: 500;
  font-size: 16px;
}
.blog__tag {
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  border-radius: 2px;
  padding: 2px 14px;
}
.blog__card-title {
  font-weight: 700;
  font-size: 30px;
  line-height: 40px;
}
/* ---------- (g) お知らせ / news ---------- */
.news {
  background: var(--yellow);
}
.news__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.news__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.news__row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 76px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 0 30px;
  transition: opacity .25s, box-shadow .25s;
}
.news__row:hover {
  opacity: .94;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}
.news__date {
  flex-shrink: 0;
  font-weight: 500;
  font-size: 16px;
}
.news__tag {
  width: 100px;
  flex-shrink: 0;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  border-radius: 2px;
  padding: 2px 12px;
  text-align: center;
  white-space: nowrap;
}
.news__title {
  flex: 1;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news__divider {
  flex-shrink: 0;
  width: 1px;
  height: 26px;
  background: rgba(0, 0, 0, .2);
}
.news__arrow {
  flex-shrink: 0;
  width: 20px;
  transition: transform .25s;
}
.news__row:hover .news__arrow {
  transform: translateX(5px);
}
/* ---------- (h) フッターCTA / cta ---------- */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 90px 0;
  background-image: linear-gradient(rgba(0, 0, 0, .85), rgba(0, 0, 0, .85)), url("../images/sec-company-band.png");
  background-size: cover;
  background-position: center;
}
.cta__container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 50px;
  align-items: center;
}
.cta__deco {
  position: absolute;
  left: 24px;
  top: 50%;
  width: 96.6px;
  height: 653px;
  transform: translateY(-50%);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}
.cta__deco img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 653px;
  height: 96.6px;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}
.cta__body {
  color: var(--white);
  padding-left: 0;
}
.cta__title {
  font-weight: 700;
  font-size: 80px;
  line-height: 110px;
  color: var(--white);
}
.cta__text {
  margin-top: 30px;
}
.cta__text p {
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
}
.cta__text p + p {
  margin-top: 16px;
}
.cta__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .4);
  margin: 30px 0;
  max-width: 540px;
}
.cta__tel {
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
}
.cta__hours {
  font-weight: 500;
  font-size: 16px;
  margin-top: 8px;
}
.cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 540px;
  max-width: 100%;
  height: 100px;
  margin-top: 40px;
  background: var(--yellow);
  color: var(--black);
  font-weight: 700;
  font-size: 24px;
  border-radius: var(--radius-sm);
  transition: opacity .25s, transform .25s, box-shadow .25s;
}
.cta__button img {
  width: 20px;
  transition: transform .25s;
}
.cta__button:hover {
  opacity: .92;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}
.cta__button:hover img {
  transform: translateX(5px);
}
.cta__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cta__photo::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: var(--gray-dark);
  border-radius: var(--radius-lg);
  transform: rotate(4deg);
  z-index: -1;
}
.cta__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
/* =========================================================
   FOOTER  (full viewport width)
   ========================================================= */
.footer {
  width: 100%;
  background: var(--black);
  color: var(--white);
  padding: 90px 0 60px;
}
.footer__container {
  color: var(--white);
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 30px;
}
.footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: #fefdfd;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}
.footer__logo img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.footer__address {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
}
.footer__cta {
  flex-shrink: 0;
}
.footer__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .25);
  margin: 0;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding-top: 40px;
  flex-wrap: wrap;
}
.footer__nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  order: 2;
}
.footer__meta {
  order: 1;
}
.footer__nav a {
  font-weight: 700;
  font-size: 16px;
  transition: opacity .2s;
}
.footer__nav a:hover {
  opacity: .65;
}
.footer__meta {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer__copyright {
  font-size: 14px;
}
.footer__privacy {
  font-weight: 500;
  font-size: 14px;
  transition: opacity .2s;
}
.footer__privacy:hover {
  opacity: .65;
}
/* =========================================================
   事業内容ページ (business)
   ========================================================= */
.biz {
  padding: 0 30px 36px;
}
/* アンカーリンク先の上部余白（スムーススクロール時の見切れ防止） */
.biz-about, .biz-types, .biz-works, .biz-targets, .biz-license {
  scroll-margin-top: 30px;
}
/* 英字 eyebrow */
.biz-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.biz-eyebrow__ar {
  width: 43px;
  height: auto;
}
.biz-eyebrow__en {
  font-family: "Arial Narrow", "Roboto Condensed", "Oswald", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1.2px;
  color: var(--black);
}
.biz-eyebrow__en--lg {
  font-size: 38px;
  letter-spacing: 1.6px;
}
.biz-band--dark .biz-eyebrow__en {
  color: var(--yellow);
}
/* セクション見出し共通 */
.biz-sec-head {
  margin-bottom: 48px;
}
.section-title--md {
  font-size: 40px;
  letter-spacing: 1.6px;
}
.biz-sec-desc {
  margin-top: 18px;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: var(--white);
}
.biz-sec-desc--dark {
  color: var(--black);
}
/* ページヒーロー */
.page-hero {
  padding-top: 56px;
}
.page-hero__title {
  font-weight: 700;
  font-size: 60px;
  line-height: 1.25;
  letter-spacing: 2.4px;
}
.page-hero__crumb {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 14px;
  color: var(--black);
}
.page-hero__crumb a {
  color: #b29d02;
}
.page-hero__crumb span {
  color: rgba(0, 0, 0, .4);
}
.page-hero__media {
  max-width: 1340px;
  margin: 38px auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1340 / 500;
}
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* アンカーナビ */
.biz-anchor {
  margin-top: 30px;
}
.biz-anchor__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.biz-anchor__item {
  flex: 1 1 0;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 14px;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--radius-sm);
  transition: color .2s;
}
.biz-anchor__item:hover {
  color: var(--yellow);
}
/* ラッキング工事とは */
.biz-about {
  margin-top: 88px;
}
.biz-about__inner {
  display: grid;
  grid-template-columns: 1fr clamp(320px, 32vw, 460px);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.biz-about__divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .15);
  margin: 26px 0 30px;
}
.biz-about__text p {
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
}
.biz-about__text p + p {
  margin-top: 22px;
}
.biz-about__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 420 / 640;
}
.biz-about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 帯（ダーク / 白） */
.biz-band {
  max-width: 1340px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
}
.biz-band--dark {
  background-image: linear-gradient(rgba(0, 0, 0, .88), rgba(0, 0, 0, .88)), url("../images/biz/biz-band-bg.png");
  background-size: cover;
  background-position: center;
  padding: 80px 0;
}
.biz-band--white {
  background: var(--white);
  padding: 80px 0;
  margin-top: 90px;
}
.biz-types {
  margin-top: 88px;
}
/* 工事の種類 */
.biz-types__layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 90px;
}
.biz-types__nav {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.biz-types__nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: #7c7f7f;
  transition: color .2s;
}
.biz-types__nav-num {
  font-weight: 700;
  flex-shrink: 0;
}
.biz-types__nav-item.is-active {
  color: var(--white);
}
.biz-type + .biz-type {
  margin-top: 28px;
}
.biz-type__title {
  font-weight: 700;
  font-size: 30px;
  color: var(--white);
  margin-bottom: 20px;
  scroll-margin-top: 110px;
}
.biz-type__num {
  color: var(--yellow);
  margin-right: 10px;
}
.biz-type__text {
  margin-bottom: 40px;
}
.biz-type__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 821 / 440;
}
.biz-type__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.biz-type__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .25);
  margin: 56px 0 0;
}
.biz-type:last-child .biz-type__divider {
  display: none;
}
.biz-type__text p {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: var(--white);
}
.biz-type__text p + p {
  margin-top: 20px;
}
/* 保温板金工事の流れ */
.biz-flow__title {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: 1.6px;
  color: var(--white);
}
.biz-flow__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.biz-flow__step {
  position: relative;
}
.biz-flow__num {
  display: inline-block;
  font-family: "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--yellow);
  margin-bottom: 12px;
}
.biz-flow__img {
  position: relative;
  border-radius: var(--radius-lg);
  aspect-ratio: 340 / 218;
  margin-bottom: 20px;
}
.biz-flow__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}
/* STEP間の黄色矢印（≫・黄塗り＋黒縁） */
.biz-flow__step:not(:last-child) .biz-flow__img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 20px;
  transform: translate(-50%, -50%);
  width: 31px;
  height: 30px;
  background: url("../images/biz-flow-arrow.svg") center / contain no-repeat;
  z-index: 2;
}
.biz-flow__step-title {
  font-weight: 700;
  font-size: 24px;
  color: var(--white);
  margin-bottom: 12px;
}
.biz-flow__step-desc {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: var(--white);
}
/* 施工実績（works流用） */
.biz-works {
  margin-top: 80px;
}
.biz-works__grid {
  gap: 60px;
}
/* 施工対象 */
.biz-targets__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.biz-target__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 340 / 500;
  margin-bottom: 22px;
}
.biz-target__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.biz-target__title {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: 12px;
}
.biz-target__desc {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
}
/* 建設業許可・保有資格 */
.biz-license {
  margin-top: 76px;
}
.biz-license__table {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  border: 1px solid #d6d6d7;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.biz-license__row {
  display: contents;
}
.biz-license__row dt {
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 18px;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.biz-license__row:first-child dt {
  border-top: none;
}
.biz-license__row dd {
  margin: 0;
  background: var(--white);
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  padding: 20px 30px;
  display: flex;
  align-items: center;
  border-top: 1px solid #d6d6d7;
}
.biz-license__row:first-child dd {
  border-top: none;
}
/* CTA / フッターまでの余白（事業内容ページ） */
.biz .cta {
  margin-top: 88px;
}
/* =========================================================
   会社情報ページ (company)
   ========================================================= */
.biz .news {
  margin-top: 88px;
}
/* 社長メッセージ */
.company-message {
  margin-top: 88px;
}
.company-message__inner {
  display: grid;
  grid-template-columns: 1fr clamp(320px, 32vw, 460px);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.company-message__heading {
  font-weight: 700;
  font-size: clamp(34px, 4.1vw, 60px);
  line-height: 1.34;
}
.company-message__divider {
  border: none;
  margin: 26px 0 30px;
}
.company-message__text p {
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
}
.company-message__text p + p {
  margin-top: 22px;
}
.company-message__sign {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 36px;
}
.company-message__sign-role {
  font-weight: 500;
  font-size: 14px;
}
.company-message__sign-name {
  height: 28px;
  width: auto;
}
.company-message__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 420 / 650;
}
.company-message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* 会社概要テーブル */
.company-info__table {
  margin-top: -6px;
  font-size: 18px;
}
.company-info__row {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 22px 0;
  border-bottom: 1px solid #d9d9da;
}
.company-info__row dt {
  font-weight: 700;
  padding-left: 20px;
}
.company-info__row dd {
  font-weight: 500;
  line-height: 30px;
}
.company-info__row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 180px;
  height: 2px;
  background: var(--black);
}
/* 沿革 */
.company-history {
  margin-top: 72px;
  font-size: 18px;
}
.company-history__item {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid #d9d9da;
}
.company-history__item:first-child {
  border-top: 1px solid #d9d9da;
}
.company-history__date {
  font-weight: 700;
  padding-left: 20px;
}
.company-history__text {
  font-weight: 500;
  line-height: 30px;
}
/* アクセス */
.company-access {
  margin-top: 90px;
}
.company-access__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}
.company-access__address {
  margin-top: 18px;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
}
.company-access__map-btn {
  gap: 8px;
  flex-shrink: 0;
}
.company-access__pin {
  flex-shrink: 0;
}
.company-access__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1080 / 500;
}
.company-access__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter .4s ease;
}
.company-access__map:hover img {
  filter: grayscale(0);
}
/* Googleビジネスプロフィールの埋め込みマップ。
   高さ・角丸・レスポンシブ比率は親 .company-access__map の aspect-ratio が担うため、
   iframe は親いっぱいに広げるだけでよい。操作対象なのでグレースケールは適用しない。 */
.company-access__map iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
/* =========================================================
   採用情報ページ (recruit)
   ========================================================= */
/* 奥が深いぞ */
.recruit-intro {
  margin-top: 80px;
}
.recruit-intro__title {
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.25;
  letter-spacing: 3.2px;
  margin-bottom: 34px;
}
.recruit-intro__body p {
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 2.1;
}
.recruit-intro__body p + p {
  margin-top: 28px;
}
/* フォトバンド（全幅・左へ自動スクロール） */
.recruit-gallery {
  margin-top: 60px;
  margin-inline: -30px;
  overflow: hidden;
}
.recruit-gallery__track {
  display: flex;
  width: max-content;
  animation: recruit-marquee 45s linear infinite;
}
.recruit-gallery:hover .recruit-gallery__track {
  animation-play-state: paused;
}
.recruit-gallery__track img {
  flex: 0 0 500px;
  width: 500px;
  aspect-ratio: 500 / 312;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-right: 10px;
}
@keyframes recruit-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* フォトバンドは装飾（aria-hidden）のため、reduced-motion環境でも自動スクロールを維持 */
/* 数字で見る（ダーク帯・統計はcompany__statsを流用） */
.recruit-numbers {
  margin-top: 88px;
}
.recruit-numbers .company__stats {
  margin-bottom: 0;
}
.recruit-ranks {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.recruit-rank {
  background: rgba(51, 51, 51, .5);
  border-radius: var(--radius-sm);
  padding: 40px;
}
.recruit-rank__title {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 38px);
  line-height: 1.4;
  padding: 4px 22px;
  border-radius: 2px;
}
.recruit-rank__list {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.recruit-rank__item {
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.recruit-rank__rank {
  flex-shrink: 0;
  width: 54px;
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
}
.recruit-rank__rank em {
  font-style: italic;
  font-weight: 700;
  font-size: 30px;
  margin-right: 3px;
}
.recruit-rank__name {
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.3;
  color: var(--yellow);
}
/* 応募/募集要項バナーのラッパ */
.recruit-banner-sec {
  margin-top: 60px;
}
/* 先輩インタビュー */
.recruit-interview {
  margin-top: 90px;
}
.recruit-iv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 36vw, 500px);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.recruit-iv__body {
  grid-column: 1;
  grid-row: 1;
}
.recruit-iv__photo {
  grid-column: 2;
  grid-row: 1;
}
.recruit-iv--reverse {
  grid-template-columns: clamp(340px, 36vw, 500px) minmax(0, 1fr);
}
.recruit-iv--reverse .recruit-iv__photo {
  grid-column: 1;
  grid-row: 1;
}
.recruit-iv--reverse .recruit-iv__body {
  grid-column: 2;
  grid-row: 1;
}
.recruit-iv + .recruit-iv {
  margin-top: 70px;
}
.recruit-iv__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 500 / 600;
}
.recruit-iv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.recruit-iv__name {
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1.1;
}
.recruit-iv__year {
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  margin: 2px 0 30px;
}
.recruit-iv__qa {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 24px 22px 20px;
}
.recruit-iv__qa + .recruit-iv__qa {
  margin-top: 28px;
}
.recruit-iv__label {
  position: absolute;
  top: -15px;
  left: 0;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 6px 16px;
  border-radius: 2px 2px 2px 0;
}
.recruit-iv__answer {
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}
/* 1日の仕事の流れ（白帯内のタイムライン） */
.recruit-flow {
  max-width: 1080px;
  margin-left: 30px;
}
.recruit-flow__step {
  position: relative;
  padding-left: 60px;
  padding-bottom: 48px;
  border-left: 2px solid #dcdcdc;
}
.recruit-flow__step:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.recruit-flow__step::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--yellow);
}
.recruit-flow__time {
  display: block;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--black);
  letter-spacing: 0.5px;
}
.recruit-flow__time small {
  font-size: 14px;
  font-weight: 700;
  margin-left: 3px;
}
.recruit-flow__title {
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 40px);
  line-height: 1.3;
  letter-spacing: 1px;
  margin: 8px 0 14px;
}
.recruit-flow__desc {
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
}
/* =========================================================
   募集要項ページ（/recruit/requirements/）
   ========================================================= */
.req-section {
  margin-top: 90px;
}
.req-section--tight {
  margin-top: 64px;
}
/* 入社までの流れ / キャリアパス 共通カード */
.req-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.req-step {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 24px 20px 26px;
}
.req-step__num {
  display: block;
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--black);
  margin-bottom: 12px;
}
.req-step__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.req-step--goal .req-step__label {
  background: var(--yellow);
  color: var(--black);
}
.req-step__desc {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
}
.req-step__photo {
  margin-top: 20px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 215 / 138;
}
.req-step__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ステップ間の黄色コネクタ（≫） */
.req-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  right: -24px;
  z-index: 2;
  width: 31px;
  height: 30px;
  background: url("../images/req-step-arrow.svg?v=2") center / contain no-repeat;
}
/* 募集要項テーブル（2カラム・ツートーン区切り） */
.req-table {
  margin-top: 8px;
}
.req-table__row {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 22px 0;
  border-bottom: 1px solid #d9d9da;
}
.req-table__row:first-child {
  border-top: 1px solid #d9d9da;
}
.req-table__row dt {
  font-weight: 700;
  font-size: 16px;
  padding-left: 20px;
}
.req-table__row dd {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
}
.req-table__row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 180px;
  height: 2px;
  background: var(--black);
}
.req-table__row:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 180px;
  height: 2px;
  background: var(--black);
}
/* ENTRY バナー（白パネル内・単独） */
.req-entry {
  margin: 56px 0;
}
/* 福利厚生 */
.req-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 48px;
}
.req-perk {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #d6d6d6;
  border-radius: var(--radius-sm);
  padding: 28px 30px 30px;
  min-height: 206px;
}
.req-perk__title {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
  margin-bottom: 14px;
}
.req-perk__desc {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  max-width: 270px;
}
.req-perk__mark {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  pointer-events: none;
  -webkit-background: url("../images/icon_log_AR-gray.png") center / contain no-repeat;
  background: url("../images/icon_log_AR-gray.png") center / contain no-repeat;
}
/* =========================================================
   応募フォームページ（/recruit/requirements/apply/）
   ========================================================= */
.form-section {
  margin-top: 56px;
}
.form-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 100px;
  align-items: start;
}
/* 送信完了時はサイドバー（電話・個人情報）を非表示にし、完了パネルを全幅表示 */
.form-layout--done {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
/* 左サイドバー */
.form-aside > :first-child {
  margin-top: 0;
}
.form-aside__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  border-radius: var(--radius-sm);
  transition: opacity .2s;
}
.form-aside__cta:hover {
  opacity: .85;
}
.form-aside__phone {
  margin-top: 34px;
}
.form-aside__phone-label {
  font-weight: 500;
  font-size: 14px;
}
.form-aside__tel {
  display: inline-block;
  margin-top: 2px;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .5px;
  color: var(--black);
}
.form-aside__privacy {
  margin-top: 40px;
}
.form-aside__privacy-title {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 1.2px;
}
.form-aside__privacy-text {
  margin-top: 16px;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
}
.form-aside__privacy-text a {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
}
/* フォーム本体 */
.form-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 56px 60px;
}
.form-field + .form-field {
  margin-top: 26px;
}
.form-field__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}
.form-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 18px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  flex: none;
}
.form-badge--req {
  background: #fe0303;
  color: var(--white);
}
.form-badge--opt {
  background: #d5d6d6;
  color: #555;
}
.form-control {
  width: 100%;
  height: 40px;
  border: 1px solid #d6d6d6;
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--black);
}
.form-control:focus {
  outline: 2px solid var(--yellow);
  outline-offset: -1px;
}
.form-control::placeholder {
  color: #aaa;
}
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 38px;
  cursor: pointer;
}
textarea.form-control {
  height: 120px;
  padding: 12px 14px;
  line-height: 1.7;
  resize: vertical;
}
.form-row {
  display: flex;
  gap: 20px;
}
.form-row > .form-control {
  flex: 1;
  min-width: 0;
}
.form-postal {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-postal__mark {
  font-weight: 700;
  font-size: 16px;
}
.form-control--postal {
  max-width: 270px;
}
.form-control--half {
  max-width: 270px;
}
.form-stack > * + * {
  margin-top: 12px;
}
.form-helper {
  margin-top: 8px;
  font-weight: 500;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
.form-divider-head {
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid #dcdcdc;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 1.2px;
  margin-bottom: 24px;
}
.form-radios {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  cursor: pointer;
}
.form-radio input {
  width: 20px;
  height: 20px;
  accent-color: var(--black);
  flex: none;
}
.form-file {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.form-file__box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 120px;
  border: 1px solid #d6d6d6;
  border-radius: var(--radius-sm);
  padding: 16px 24px;
}
.form-file__title {
  font-weight: 500;
  font-size: 15px;
}
.form-file__note {
  font-weight: 500;
  font-size: 14px;
  color: #555;
}
.form-file__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 16px;
  border: 1px solid #b9b9b9;
  border-radius: var(--radius-sm);
  background: #f3f3f3;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.form-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
  font-weight: 700;
  font-size: 16px;
}
.form-consent input {
  width: 20px;
  height: 20px;
  accent-color: var(--black);
}
.form-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-submit {
  width: 100%;
  height: 60px;
  margin-top: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .2s;
}
.form-submit:hover {
  opacity: .85;
}
/* =========================================================
   お知らせ一覧ページ（/news/）
   ========================================================= */
.newslist {
  margin-top: 40px;
}
/* 一覧/記事/フォームページの最下部 → フッターまで150px確保（.biz の下padding 36px + 114px） */
.newslist, .bloglist, .article, .form-section {
  margin-bottom: 114px;
}
.newslist__filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.newslist__filter-label {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  margin-right: 10px;
}
.newslist__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 50px;
  padding: 0 18px;
  border: 1px solid var(--black);
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--black);
  font-weight: 700;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .2s, background .2s, color .2s;
}
.newslist__cat:hover {
  opacity: .75;
}
.newslist__cat.is-active {
  background: var(--black);
  color: var(--white);
}
.newslist__cat.is-active:hover {
  opacity: .85;
}
.newslist__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.newslist__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  height: 50px;
  padding: 0 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .2s;
}
.newslist__more:hover {
  opacity: .85;
}
/* =========================================================
   お知らせ詳細ページ（/news/detail/）
   ========================================================= */
.article-crumb {
  margin-top: 56px;
}
.article {
  margin-top: 28px;
}
.article__panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 56px clamp(24px, 5vw, 100px);
}
.article__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.article__date {
  font-weight: 500;
  font-size: 16px;
}
.article__title {
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.55;
  letter-spacing: .5px;
}
.article__thumb {
  margin-top: 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 880 / 550;
}
.article__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-lead {
  font-size: 16px;
  line-height: 2;
  margin-bottom: 8px;
}
.article-revision {
  margin-top: 3em;
  text-align: right;
  font-size: 14px;
  color: #777;
  line-height: 1.8;
}
/* ===== 本文（WordPress想定の汎用パーツ集） ===== */
.article-body {
  margin-top: 34px;
  font-size: 16px;
  line-height: 2;
  color: var(--black);
}
.article-body > :first-child {
  margin-top: 0;
}
.article-body > :last-child {
  margin-bottom: 0;
}
.article-body p {
  margin: 1.5em 0;
}
.article-body h2 {
  position: relative;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.5;
  margin: 2.2em 0 1em;
  padding-bottom: 14px;
  border-bottom: 2px solid #e6e6e6;
}
.article-body h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 80px;
  height: 2px;
  background: var(--yellow);
}
.article-body h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin: 2em 0 .8em;
  padding-left: 16px;
  border-left: 5px solid var(--yellow);
}
.article-body h4 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  margin: 1.8em 0 .7em;
}
.article-body a {
  color: var(--black);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background .2s;
}
.article-body a:hover {
  background: var(--yellow);
}
.article-body strong {
  font-weight: 700;
}
.article-body em {
  font-style: italic;
}
.article-body mark {
  background: linear-gradient(transparent 58%, #fff09e 58%);
  padding: 0 2px;
}
.article-body ul, .article-body ol {
  margin: 1.5em 0;
  padding-left: 4px;
}
.article-body ul > li {
  position: relative;
  list-style: none;
  padding-left: 28px;
  margin: .5em 0;
}
.article-body ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 10px;
  height: 10px;
  background: var(--yellow);
  border: 1.5px solid var(--black);
  transform: rotate(45deg);
}
.article-body ol {
  counter-reset: li;
}
.article-body ol > li {
  position: relative;
  list-style: none;
  counter-increment: li;
  padding-left: 40px;
  margin: .7em 0;
}
.article-body ol > li::before {
  content: counter(li);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  border-radius: 50%;
}
.article-body blockquote {
  margin: 1.8em 0;
  padding: 20px 26px;
  background: #f7f7f5;
  border-left: 4px solid var(--black);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  color: #444;
}
.article-body blockquote p {
  margin: .4em 0;
}
.article-body blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-style: normal;
  color: #888;
}
.article-body figure {
  margin: 1.8em 0;
}
.article-body figure img, .article-body > img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.article-body figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: #777;
  text-align: center;
}
.article-body hr {
  border: none;
  border-top: 1px solid #e2e2e2;
  margin: 2.4em 0;
}
.article-table {
  overflow-x: auto;
  margin: 1.8em 0;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.article-body th, .article-body td {
  border: 1px solid #ddd;
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.article-body th {
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  white-space: nowrap;
}
.article-body thead th {
  text-align: center;
}
.article-body tbody tr:nth-child(even) td {
  background: #faf9f5;
}
/* 注釈ボックス（callout） */
.article-note {
  margin: 1.8em 0;
  padding: 20px 24px;
  background: #fffbe0;
  border: 1px solid var(--yellow);
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.9;
}
.article-note__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 4px;
}
.article-note__title::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--black);
  color: var(--yellow);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  flex: none;
}
/* 本文内ボタン */
.article-btnwrap {
  text-align: center;
  margin: 2.4em 0;
}
.article-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 32px;
  border-radius: var(--radius-sm);
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: opacity .2s;
}
.article-btn:hover {
  opacity: .85;
}
.article-btn--yellow {
  background: var(--yellow);
  color: var(--black);
}
.article-btn img {
  width: 18px;
}
/* 本文内リンク装飾の打ち消し（ボタンとして表示・ホバーは末尾のbtn-14で統一） */
.article-body a.article-btn {
  color: var(--white);
  text-decoration: none;
}
.article-body a.article-btn--yellow {
  color: var(--black);
}
/* ===== 記事ナビ（前 / 一覧 / 次） ===== */
.article-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 50px;
  padding: 24px 30px;
  background: #f7f7f7;
  border-radius: var(--radius-lg);
}
.article-nav__side {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s;
}
.article-nav__side:hover {
  opacity: .55;
}
.article-nav__side img {
  width: 18px;
  flex: none;
}
.article-nav__side--prev img {
  transform: rotate(180deg);
}
.article-nav__div {
  width: 1px;
  height: 26px;
  background: rgba(0, 0, 0, .2);
  flex: none;
}
.article-nav__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  height: 50px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: opacity .2s;
}
.article-nav__back:hover {
  opacity: .85;
}
/* =========================================================
   ブログ一覧ページ（/blog/）
   ========================================================= */
.bloglist {
  margin-top: 40px;
}
.bloglist__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 60px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--black);
}
.blog-card__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 320 / 200;
  margin-bottom: 16px;
}
.blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.blog-card:hover .blog-card__img img {
  transform: scale(1.06);
}
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.blog-card__date {
  font-weight: 500;
  font-size: 16px;
}
.blog-card__tag {
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  border-radius: 2px;
  padding: 1px 12px;
  white-space: nowrap;
}
.blog-card__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
}
.bloglist__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
/* =========================================================
   RESPONSIVE  —  tablet (max-width: 1199px)
   ========================================================= */
@media (max-width: 1199px) {
  .l-container {
    padding-inline: 60px;
  }
}
/* =========================================================
   RESPONSIVE  —  tablet (max-width: 1023px)
   strength: 2カラムが窮屈になる幅でスタック表示に切替（sticky解除）
   ========================================================= */
@media (max-width: 1023px) {
  /* header → ハンバーガー(左) / ロゴ(中央・FVに被せ) / お問い合わせ(右) */
  .header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    justify-self: start;
    align-self: center;
  }
  .header__hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--black);
  }
  .header__nav--left, .header__nav--right {
    display: none;
  }
  .header__right {
    justify-content: flex-end;
  }
  /* ロゴ・お問い合わせボタンはPCのまま（中央オーバーハング / 右表示） */
  /* 背景オーバーレイ */
  .header__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    z-index: 55;
  }
  .header.is-menu-open .header__backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  /* 左からふわっとスライドインするドロワー */
  .header__drawer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 340px);
    padding: 96px 26px 36px;
    background: var(--yellow);
    box-shadow: 10px 0 44px rgba(0, 0, 0, .28);
    overflow-y: auto;
    z-index: 60;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
  }
  .header.is-menu-open .header__drawer {
    transform: translateX(0);
    opacity: 1;
  }
  .header__drawer-close {
    position: absolute;
    top: 26px;
    right: 22px;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .header__drawer-close span {
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 2px;
    background: var(--black);
  }
  .header__drawer-close span:nth-child(1) {
    transform: rotate(45deg);
  }
  .header__drawer-close span:nth-child(2) {
    transform: rotate(-45deg);
  }
  .header__drawer-link {
    padding: 15px 4px;
    font-weight: 700;
    font-size: 18px;
    color: var(--black);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
  }
  /* 採用情報にぶら下がる子ページ（募集要項・応募）。インデント＋小さめで階層を示す */
  .header__drawer-link--sub {
    padding-left: 22px;
    font-size: 15px;
    font-weight: 500;
  }
  .header__drawer-link--sub::before {
    content: "└";
    margin-right: 8px;
    color: rgba(0, 0, 0, .4);
    font-weight: 400;
  }
  .header__drawer-contact {
    margin-top: 22px;
    padding: 15px;
    text-align: center;
    background: var(--black);
    color: var(--white);
    font-weight: 700;
    border-radius: var(--radius-sm);
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
  }
  .header.is-menu-open .header__drawer-link, .header.is-menu-open .header__drawer-contact {
    opacity: 1;
    transform: translateX(0);
  }
  .header.is-menu-open .header__drawer-link:nth-of-type(1) {
    transition-delay: .08s;
  }
  .header.is-menu-open .header__drawer-link:nth-of-type(2) {
    transition-delay: .13s;
  }
  .header.is-menu-open .header__drawer-link:nth-of-type(3) {
    transition-delay: .18s;
  }
  .header.is-menu-open .header__drawer-link:nth-of-type(4) {
    transition-delay: .23s;
  }
  .header.is-menu-open .header__drawer-link:nth-of-type(5) {
    transition-delay: .28s;
  }
  .header.is-menu-open .header__drawer-link:nth-of-type(6) {
    transition-delay: .33s;
  }
  .header.is-menu-open .header__drawer-link:nth-of-type(7) {
    transition-delay: .38s;
  }
  .header.is-menu-open .header__drawer-link:nth-of-type(8) {
    transition-delay: .43s;
  }
  .header.is-menu-open .header__drawer-contact {
    transition-delay: .5s;
  }
  /* strength：2カラムが窮屈になる幅でスタック表示に切替（sticky解除） */
  /* スマホ/タブレット：PCのsticky切替をやめ、4つの強みを縦に並べて全表示 */
  .strength {
    height: auto;
  }
  .strength__sticky {
    position: static;
    height: auto;
    display: block;
  }
  .strength__band {
    height: auto;
    min-height: 0;
    display: block;
    padding: 44px 40px;
  }
  .strength__container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .strength__nav {
    display: none;
  } /* 番号ナビは非表示（全パネルが見えるため不要） */
  .strength__panels .strength__panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .strength__panels .strength__panel + .strength__panel {
    margin-top: 44px;
    padding-top: 44px;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .strength__photo img {
    max-width: 460px;
    margin-inline: auto;
  }
  /* business（タブレット） */
  .biz-about__inner {
    grid-template-columns: 1fr;
  }
  .biz-about__photo {
    max-width: 460px;
    aspect-ratio: 16 / 11;
  }
  .biz-types__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .biz-types__nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  /* company（タブレット） */
  .company-message__inner {
    grid-template-columns: 1fr;
  }
  .company-message__photo {
    max-width: 460px;
    aspect-ratio: 5 / 7;
  }
  /* recruit（タブレット） */
  .recruit-iv, .recruit-iv--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: stretch;
  }
  /* 1カラム化する際は grid-row も auto に戻す（base の grid-row:1 が残ると
     body と photo が同一セルに重なるため）。写真を上に積む。 */
  .recruit-iv__body, .recruit-iv__photo, .recruit-iv--reverse .recruit-iv__body, .recruit-iv--reverse .recruit-iv__photo {
    grid-column: 1;
    grid-row: auto;
  }
  .recruit-iv__photo, .recruit-iv--reverse .recruit-iv__photo {
    order: -1;
    max-width: 460px;
  }
  /* 募集要項ページ */
  .req-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    row-gap: 28px;
  }
  .req-step:not(:last-child)::after {
    display: none;
  }
  .req-perks {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 応募フォーム：サイドバーを上に積む */
  .form-layout {
    grid-template-columns: minmax(0, 1fr); /* 1fr(=minmax(auto,1fr))だと長いファイル名等でパネルが膨張するため 0 起点に */
    gap: 40px;
  }
  .form-aside__cta {
    max-width: 360px;
  }
  /* ブログ一覧：2カラム */
  .bloglist__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 30px;
  }
  /* CTA：タブレットでは写真カラム(460px固定)が溢れるため1カラムに積む */
  .cta__container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cta__deco {
    display: none;
  }
}
/* =========================================================
   RESPONSIVE  —  mobile (max-width: 767px)
   ========================================================= */
@media (max-width: 767px) {
  /* スマホでは l-container の左右paddingは不要（main側の余白のみ） */
  .l-container {
    padding-inline: 0;
  }
  /* header（スマホ）: ハンバーガー左/ロゴ中央/お問い合わせ右 を小さめに収める */
  .header__inner {
    min-height: 74px;
    padding-inline: 16px;
  }
  .header__logo {
    width: 100px;
    height: 94px;
  }
  .header__logo img {
    width: 88px;
    height: 88px;
  }
  .header__contact {
    width: auto;
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }
  /* btn */
  .btn {
    width: 100%;
    justify-content: center;
    font-size: 16px;
  }
  /* fv */
  .fv {
    padding: 0 16px 16px;
  }
  .fv__hero {
    height: calc(100vh - 74px - 16px);
    height: calc(100svh - 74px - 16px);
    min-height: 420px;
  }
  .fv__headline {
    top: 30%;
    left: 24px;
    font-size: 34px;
    line-height: 46px;
    letter-spacing: 1px;
  }
  .owner-card {
    right: 16px;
    bottom: 20px;
    width: 230px;
    height: auto;
  }
  .owner-card__photo {
    flex-basis: 80px;
    width: 80px;
    height: 80px;
  }
  .owner-card__text {
    font-size: 15px;
  }
  .owner-card__text span {
    line-height: 18px;
  }
  .owner-card__badge {
    top: -48px;
    left: -16px;
    width: 150px;
    height: 66px;
  }
  .owner-card__entry img {
    height: 26px;
  }
  /* main */
  .main {
    padding: 50px 16px;
    gap: 70px;
  }
  .works {
    margin-top: 0;
  }
  .section-title {
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 1px;
  }
  .section-eyebrow__en {
    height: 22px;
  }
  /* intro */
  .intro__title {
    font-size: 32px;
    line-height: 46px;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }
  .intro__body p {
    font-size: 17px;
    line-height: 32px;
  }
  .intro__deco {
    display: none;
  }
  .intro__watermark {
    width: 90%;
  }
  /* strength（モバイルは sticky/スクロールジャック無効、クリック切替のみ） */
  .strength {
    height: auto;
  }
  .strength__sticky {
    position: static;
    height: auto;
    display: block;
  }
  .strength__band {
    padding: 40px 20px;
  }
  .strength__container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .strength__panels .strength__panel {
    gap: 24px;
  }
  .strength__panels .strength__panel + .strength__panel {
    margin-top: 36px;
    padding-top: 36px;
  }
  .strength__eyebrow {
    flex-wrap: wrap;
    row-gap: 6px;
    margin-bottom: 20px;
  } /* ラベルを2行目に折り返す */
  .strength__title {
    font-size: 22px;
  }
  .strength__en {
    height: 20px;
  }
  .strength__button {
    width: 100%;
  }
  .strength__photo img {
    max-width: 360px;
    margin-inline: auto;
  }
  /* works */
  .works__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .works__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .works__card-title {
    font-size: 22px;
    line-height: 32px;
  }
  /* company */
  .company {
    padding: 50px 0;
  }
  .company__stats {
    grid-template-columns: 1fr;
  }
  .company__stat {
    padding: 28px 0px 45px;
    min-height: 230px;
  }
  .company__stat-num img {
    height: 44px;
  }
  .company__message {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 30px 20px;
    min-height: 0;
  }
  .company__message-photo {
    flex-basis: auto;
    width: 100%;
    height: 240px;
    align-self: flex-start;
  }
  .company__message-photo img {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: var(--radius-sm);
  }
  .company__message-body {
    padding-top: 0;
    text-align: center;
  }
  .company__message-label {
    font-size: 30px;
  }
  .company__message-quote {
    margin-top: 15px;
    font-size: 26px;
    line-height: 1.55;
    text-align: left
  }
  .company__links {
    grid-template-columns: 1fr;
  }
  .company__link-title {
    font-size: 24px;
  }
  .company__link-arrow {
    top: 40px;
    right: 24px;
  }
  .company__link::after {
    top: 37px;
    right: 64px;
  }
  /* recruit */
  .recruit__desc {
    font-size: 17px;
    line-height: 30px;
  }
  .recruit__grid {
    grid-template-columns: 1fr;
  }
  .recruit__card {
    flex-direction: column-reverse;
    align-items: flex-start;
    padding: 30px 24px;
    min-height: 0;
  }
  .recruit__card-body {
    max-width: none;
  }
  .recruit__card-img {
    flex: 0 0 200px;
    width: 100%;
    height: 200px;
  }
  .recruit__banner {
    padding: 0 20px;
    gap: 14px;
    height: 128px;
  }
  /* EN(英字ロゴ)は語ごとに横幅が大きく異なる（ENTRY≈2.83:1 / RECRUITMENT≈6.15:1）。
     desktopの per-variant 指定（height 93/96px, 詳細度0,0,2,0）に mobile 指定が負けて
     効かず溢れていたため、同じ per-variant セレクタで height を上書きする。
     height を語ごとに調整し、横幅がバナー内に収まるようにする（width:auto＝viewBox比）。 */
  .recruit__banner--entry .recruit__banner-en {
    height: 38px;
  } /* → 幅 ≈108px */
  .recruit__banner--recruitment .recruit__banner-en {
    height: 22px;
  } /* → 幅 ≈135px */
  .recruit__banner-ja {
    font-size: 22px;
  }
  .recruit__banner-arrow {
    bottom: 5px;
    top: auto;
    right: 18px;
    width: 22px;
  }
  .recruit__banner-watermark {
    width: 78px;
  }
  /* blog */
  .blog {
    padding: 40px 0 50px;
  }
  .blog__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .blog__card {
    flex-basis: 80%;
    width: 80%;
  }
  .blog__card-title {
    font-size: 22px;
    line-height: 32px;
  }
  /* news */
  .news__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .news__row {
    flex-wrap: wrap;
    height: auto;
    padding: 16px 20px;
    gap: 10px 16px;
  }
  .news__title {
    flex-basis: 100%;
    white-space: normal;
  }
  .news__divider {
    display: none;
  }
  .news__arrow {
    display: none;
  }
  /* cta */
  .cta {
    padding: 50px 0;
  }
  .cta__container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cta__deco {
    display: none;
  }
  .cta__body {
    padding-left: 0;
  }
  .cta__title {
    font-size: 34px;
    line-height: 46px;
  }
  .cta__tel {
    font-size: 30px;
  }
  .cta__button {
    width: 100%;
    font-size: 16px;
    height: 80px;
    gap: 6px;
  }
  /* footer */
  .footer {
    padding: 50px 0 40px;
  }
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .footer__nav {
    gap: 18px 24px;
  }
  /* business（スマホ） */
  .biz {
    padding: 0 16px 24px;
  }
  .page-hero {
    padding-top: 36px;
  }
  .page-hero__title {
    font-size: 36px;
    line-height: 1.3;
    letter-spacing: 1px;
  }
  .page-hero__media {
    margin-top: 28px;
    aspect-ratio: 16 / 11;
  }
  .biz-eyebrow__en--lg {
    font-size: 28px;
  }
  .biz-sec-head {
    margin-bottom: 32px;
  }
  .section-title--md {
    font-size: 28px;
  }
  .biz-anchor__item {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    font-size: 14px;
    height: 46px;
  }
  .biz-about {
    margin-top: 56px;
  }
  .biz-about__inner {
    gap: 32px;
  }
  .biz-about__photo {
    max-width: none;
    aspect-ratio: 16 / 11;
  }
  .biz-about__text p {
    font-size: 16px;
  }
  .biz-types {
    margin-top: 56px;
  }
  .biz-band--dark {
    padding: 48px 0;
  }
  .biz-band--white {
    padding: 48px 0;
    margin-top: 56px;
  }
  .biz-types__layout {
    margin-bottom: 56px;
  }
  .biz-type__title {
    font-size: 24px;
  }
  .biz-flow__title {
    font-size: 28px;
  }
  .biz-flow__steps {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .biz-flow__step:not(:last-child) .biz-flow__img::after {
    display: none;
  } /* 縦積み時は横矢印を非表示 */
  .biz-works {
    margin-top: 56px;
  }
  .biz-works__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .biz-targets__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .biz-target__img {
    aspect-ratio: 16 / 12;
  }
  .biz-target__title {
    font-size: 24px;
  }
  .biz-license {
    margin-top: 48px;
  }
  .biz-license__table {
    grid-template-columns: 1fr;
  }
  .biz-license__row dt {
    padding: 14px 20px;
    font-size: 16px;
    border-top: none;
  }
  .biz-license__row dd {
    padding: 14px 20px;
    border-top: none;
  }
  .biz-license__row + .biz-license__row dt {
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .biz .cta {
    margin-top: 56px;
  }
  /* company（スマホ） */
  .biz .news {
    margin-top: 56px;
  }
  .company-message {
    margin-top: 56px;
  }
  .company-message__inner {
    gap: 32px;
  }
  .company-message__photo {
    max-width: none;
  }
  .company-message__heading {
    font-size: 40px;
    line-height: 1.45;
  }
  .company-info__table {
    font-size: 16px;
  }
  .company-info__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0;
  }
  .company-info__row dt {
    padding-left: 0;
  }
  .company-info__row dd {
    margin: 0
  }
  .company-info__row::after {
    width: 90px;
  }
  .company-history {
    margin-top: 48px;
    font-size: 16px
  }
  .company-history__item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .company-history__date {
    padding: 0
  }
  .company-access {
    margin-top: 56px;
  }
  .company-access__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .company-access__address {
    font-size: 16px
  }
  .company-access__map {
    aspect-ratio: 4 / 3;
  }
  /* recruit（スマホ） */
  .recruit-intro {
    margin-top: 50px;
  }
  .recruit-intro__title {
    letter-spacing: 1px;
    margin-bottom: 24px;
  }
  .recruit-intro__body p {
    line-height: 1.9;
  }
  .recruit-gallery {
    margin-top: 40px;
    margin-inline: -16px;
  }
  .recruit-gallery__track img {
    flex: 0 0 280px;
    width: 280px;
  }
  .recruit-numbers {
    margin-top: 56px;
  }
  .recruit-rank {
    padding: 28px 20px;
  }
  /* ランキングの値が大きすぎて単語途中で改行するため、スマホでは縮小＋余白を詰めて収める */
  .recruit-rank__name {
    font-size: 26px;
    line-height: 1.4;
  }
  .recruit-rank__item {
    gap: 14px;
  }
  .recruit-rank__rank {
    width: 44px;
  }
  .recruit-banner-sec {
    margin-top: 40px;
  }
  .recruit-interview {
    margin-top: 56px;
  }
  .recruit-iv {
    gap: 24px;
  }
  .recruit-iv__photo {
    max-width: none;
  }
  .recruit-iv__name {
    font-size: clamp(34px, 6vw, 44px);
  }
  .recruit-iv + .recruit-iv {
    margin-top: 48px;
  }
  .recruit-flow {
    margin-left: 0
  }
  .recruit-flow__step {
    padding-left: 30px;
    padding-bottom: 36px;
  }
  .recruit-flow__title {
    letter-spacing: 0.5px;
  }
  .recruit-flow__desc {
    font-size: 16px;
  }
  /* 募集要項ページ（スマホ） */
  .req-section {
    margin-top: 56px;
  }
  .req-steps {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }
  .req-step__photo {
    aspect-ratio: 16 / 9;
  }
  .req-table__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0;
  }
  .req-table__row dt {
    padding-left: 0;
  }
  .req-table__row dd {
    line-height: 1.5;
    margin: 0;
  }
  .req-table__row::after, .req-table__row:first-child::before {
    width: 90px;
  }
  .req-entry {
    margin: 40px 0;
  }
  .req-perks {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 32px;
  }
  .req-perk {
    min-height: 0;
    padding: 22px 22px 24px;
  }
  .req-perk__title {
    font-size: 26px;
  }
  /* 応募フォーム（スマホ） */
  .form-section {
    margin-top: 40px;
  }
  .form-layout {
    gap: 32px;
  }
  .form-panel {
    padding: 28px 20px;
  }
  .form-aside__privacy-title, .form-divider-head {
    font-size: 24px;
  }
  .form-row {
    flex-direction: column;
    gap: 12px;
  }
  .form-control--postal, .form-control--half {
    max-width: none;
  }
  .form-file {
    flex-direction: column;
  }
  .form-file__box {
    min-height: 90px;
  }
  /* お知らせ一覧（スマホ） */
  .newslist__filter {
    gap: 8px;
    margin-bottom: 28px;
  }
  .newslist__filter-label {
    flex-basis: 100%;
    font-size: 16px;
    margin-right: 0;
  }
  .newslist__cat {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    height: 44px;
    font-size: 14px;
  }
  .newslist__more {
    width: 100%;
  }
  .bloglist__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .blog-card {
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }
  .bloglist__more-wrap {
    margin-top: 44px;
  }
  .newslist, .bloglist, .article, .form-section {
    margin-bottom: 64px;
  }
  /* お知らせ詳細（スマホ） */
  .article__panel {
    padding: 32px 20px;
  }
  .article__meta {
    gap: 12px;
    margin-bottom: 16px;
  }
  .article-body {
    line-height: 1.9;
  }
  .article-nav {
    flex-direction: column;
    gap: 16px;
    padding: 22px 18px;
  }
  .article-nav__back {
    order: -1;
    width: 100%;
  }
  .article-nav__side {
    width: 100%;
    justify-content: center;
  }
  /* ---------- 背景色付きセクション共通：内側の左右padding ----------
     スマホでは .l-container の左右paddingが0になるため、色付き（黒/白/暗背景）の
     フルワイド・帯セクションは中身が縁に接触する。共通で左右20pxを内側に確保する。
     ・.cta            … 各ページ下部のCTA（暗背景）
     ・.footer         … フッター（黒背景・全幅）
     ・.biz-band--dark … 事業内容/採用「数字で見る」等の黒帯
     ・.biz-band--white… 会社情報/募集要項等の白パネル帯 */
  .cta, .footer, .biz-band--dark, .biz-band--white, .company, .blog {
    padding-inline: 20px;
  }
}
/* =========================================================
   純粋なボタン共通ホバー：btn-14（左から塗りつぶしワイプ＋文字色反転）
   ※カード／バナー類は対象外
   ========================================================= */
/* 塗りつぶしレイヤーの土台（各ボタンの背景色は既存指定を維持） */
.btn, .header__contact, .strength__button, .cta__button, .form-aside__cta, .form-submit, .newslist__more, .article-btn, .article-body a.article-btn, .article-nav__back {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size .35s ease, color .25s ease;
}
/* 黒ベースのボタン → 黄色が左から塗られ、文字は黒に
   枠線は黒（通常時は背景と同色で見えない／塗りつぶし時に輪郭として出る） */
.header__contact, .btn--dark, .form-submit, .form-aside__cta, .newslist__more, .article-btn, .article-body a.article-btn, .article-nav__back {
  background-image: linear-gradient(var(--yellow), var(--yellow));
  border: 2px solid var(--black);
}
.header__contact:hover, .btn--dark:hover, .form-submit:hover, .form-aside__cta:hover, .newslist__more:hover, .article-btn:hover, .article-body a.article-btn:hover, .article-nav__back:hover {
  background-size: 100% 100%;
  color: var(--black);
  transform: none;
  box-shadow: none;
  opacity: 1;
}
/* 黄色ベースのボタン → 黒が左から塗られ、文字は白に
   枠線は黄（通常時は背景と同色で見えない／塗りつぶし時に輪郭として出る） */
.btn--yellow, .cta__button, .strength__button, .article-btn--yellow, .article-body a.article-btn--yellow {
  background-image: linear-gradient(var(--black), var(--black));
  border: 2px solid var(--yellow);
}
.btn--yellow:hover, .cta__button:hover, .strength__button:hover, .article-btn--yellow:hover, .article-body a.article-btn--yellow:hover {
  background-size: 100% 100%;
  color: var(--white);
  transform: none;
  box-shadow: none;
  opacity: 1;
}
/* 矢印アイコンは文字色に追従して反転（白⇄黒） */
.btn img, .cta__button img, .strength__button img, .article-btn img, .article-body a.article-btn img {
  transition: transform .25s ease, filter .25s ease;
}
.btn:hover img, .cta__button:hover img, .strength__button:hover img, .article-btn:hover img, .article-body a.article-btn:hover img {
  filter: invert(1);
}