/* ========== Base ========== */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== MV Slider ========== */
/* マスクワイプ設定 */
#mv-slider .splide__slide {
  -webkit-mask-image: linear-gradient(
    168deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 33%,
    rgba(0,0,0,0) 58%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    168deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 33%,
    rgba(0,0,0,0) 58%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-size: 100% 250%;
  mask-size: 100% 250%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

/* prevスライドをactiveの上に配置
   !important: Splideがインラインスタイルで opacity/z-index を設定するため上書きが必要 */
#mv-slider .splide__slide.is-prev {
  opacity: 1 !important;
  z-index: 2 !important;
  animation: mv-mask-hide 3.5s cubic-bezier(.37, 0, .63, 1) forwards;
}

/* 白フェード用の疑似要素 */
#mv-slider .splide__slide.is-prev::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  z-index: 1;
  animation: mv-white-fade 3.5s cubic-bezier(.37, 0, .63, 1) forwards;
}

/* Phase 1 (0-35%): マスクは静止、白がフェードイン
   Phase 2 (35-100%): マスクがスワイプで剥がれる */
@keyframes mv-mask-hide {
  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  35% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  100% {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
}

@keyframes mv-white-fade {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ========== Header ========== */
.header-bg {
  background: #000;
  transition: background 0.3s ease;
}

.header-scrolled .header-bg {
  background: #000;
}

/* ========== Mega Menu ========== */
/* top はヘッダー高さに連動。header-scrolled 時は JS が --header-height を更新 */
.mega-menu-panel {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-height, 60px);
  background: white;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 49;
}

.mega-menu-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-arrow {
  transition: transform 0.3s ease;
}

.mega-menu-trigger.is-active .mega-menu-arrow {
  transform: rotate(180deg);
}

/* Subpage header: arrow color changes when active */
.subpage-header .mega-menu-trigger.is-active .mega-menu-arrow path {
  stroke: #191e28;
}

/* バックドロップはヘッダー直後の兄弟要素である前提 */
.mega-menu-backdrop {
  position: fixed;
  inset: 0;
  top: var(--header-height, 60px);
  background: rgba(0, 0, 0, 0.25);
  z-index: 48;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.mega-menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ========== Hamburger Menu ========== */
.hamburger-icon span {
  transition: all 0.3s ease;
}

.hamburger-open .hamburger-icon span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.hamburger-open .hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.hamburger-open .hamburger-icon span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

#mobile-nav {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#mobile-nav.is-open {
  transform: translateX(0);
}

body.nav-open {
  overflow: hidden;
}

/* ========== Text Slide-Up Hover ========== */
.text-slide-up {
  display: inline-block;
  overflow: hidden;
}

.text-slide-up span {
  display: inline-block;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.text-slide-up span::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
}

.text-slide-up:hover span,
a:hover > .text-slide-up span {
  transform: translateY(-100%);
}

/* Footer menu: columns layout needs block display */
.footer-menu-columns .text-slide-up {
  display: block;
}

/* STRIGHT ONE プライバシー設定ボタン: 隣接する footer リンクと見た目を揃える。
   STRIGHT の「再表示」表示形式が環境で異なり、リンク形式は .cookie_consent-cookie_btn-link、
   ボタン形式は .cookie_consent-cookie_btn-button のクラスで描画される
   （本番=ボタン形式で青背景・角丸・padding・14px、STG=リンク形式）。
   どちらの形式でも同じ見た目になるよう両クラスを対象にし、STRIGHT が付与する
   インライン/クラス由来の色・背景・枠線・角丸・padding・font-size を !important で打ち消す */
.cookie_consent-cookie_btn-link,
.cookie_consent-cookie_btn-button {
  color: #bbb !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: 0.24px;
  line-height: 1.6;
  cursor: pointer;
  transition: color 0.15s ease;
}
.cookie_consent-cookie_btn-link:hover,
.cookie_consent-cookie_btn-button:hover {
  color: #fff !important;
}

/* STRIGHT ONE プライバシー設定モーダル: SP でロゴと並列だとタイトルが
   折り返して読みにくいため、ロゴの下に縦並びで配置する */
@media (max-width: 600px) {
  .cookie_consent-privacy_setting_banner__header {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px;
  }
  .cookie_consent-privacy_setting_banner__header-spacer {
    display: none !important;
  }
  .cookie_consent-privacy_setting_banner__title {
    margin: 0 !important;
    text-align: center !important;
  }
}

/* ========== Section Heading Gradient ========== */
.heading-gradient {
  background: linear-gradient(133deg, rgb(251, 238, 173) 0.25%, rgb(87, 156, 202) 35%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========== Contact Button Gradient Border ========== */
.contact-btn-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(133deg, rgb(251, 238, 173) 0%, rgb(87, 156, 202) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ========== Pill Button ========== */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 252px;
  padding: 16px 16px 16px 28px;
  border-radius: 100px;
  font-size: 14px;
  letter-spacing: 0.56px;
  transition: opacity 0.2s ease;
  text-decoration: none;
}

.btn-pill:hover {
  opacity: 1;
}

.btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 22px;
  border-radius: 100px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  transition: background 0.3s ease;
}

.btn-arrow-lg {
  width: 46px;
  height: 28px;
}

.btn-pill:hover .btn-arrow,
a:hover > .btn-arrow,
a:hover .btn-arrow,
a.btn-arrow:hover,
.group:hover .btn-arrow {
  background: linear-gradient(105deg, #fbeead 0.25%, #579cca 35%) !important;
}

.btn-arrow svg {
  transition: transform 0.4s ease;
}

.btn-pill:hover .btn-arrow svg,
a:hover > .btn-arrow svg,
a:hover .btn-arrow svg,
a.btn-arrow:hover svg,
.group:hover .btn-arrow svg {
  animation: arrow-slide 0.4s ease forwards;
}

@keyframes arrow-slide {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  40% {
    transform: translateX(12px);
    opacity: 0;
  }
  41% {
    transform: translateX(-12px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ========== MV Animations ========== */
.mv-title {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease 0.3s forwards;
}

.mv-subtitle {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease 0.6s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== Scroll Reveal ========== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== About Photo Fade-in ========== */
.about-photo {
  opacity: 0;
  translate: 0 40px;
  transition: opacity 0.8s ease, translate 0.8s ease;
}

.about-photo.visible {
  opacity: 1;
  translate: 0 0;
}

/* ========== Network Photo Mask Reveal ========== */
.network-photo-reveal {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: -webkit-mask-size 5s cubic-bezier(0.22, 1, 0.36, 1),
              mask-size 5s cubic-bezier(0.22, 1, 0.36, 1);
}

.network-photo-reveal.visible {
  -webkit-mask-size: 100% 250%;
  mask-size: 100% 250%;
}

/* ========== Service Photo Mask Reveal ========== */
.service-photo-reveal {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: -webkit-mask-size 5s cubic-bezier(0.22, 1, 0.36, 1),
              mask-size 5s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-photo-reveal.visible {
  -webkit-mask-size: 100% 250%;
  mask-size: 100% 250%;
}

/* ========== Case Photo Mask Reveal ========== */
.case-photo-reveal {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: -webkit-mask-size 5s cubic-bezier(0.22, 1, 0.36, 1),
              mask-size 5s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-photo-reveal.visible {
  -webkit-mask-size: 100% 250%;
  mask-size: 100% 250%;
}

/* ========== About US Marquee ========== */
.about-outline-text {
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1.5px transparent;
  background: linear-gradient(90deg, #fbeead 0%, #e0d8b8 30%, #b0c4d8 70%, #579cca 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.about-marquee {
  animation: aboutMarquee 20s linear infinite;
}

@keyframes aboutMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ========== Flow Step Number (Gradient Outlined) ========== */
.flow-step-number {
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1.5px transparent;
  background: linear-gradient(90deg, #fbeead 0%, #e0d8b8 30%, #b0c4d8 70%, #579cca 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ========== Reason Number (Outlined) ========== */
.reason-number {
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1.5px #969696;
  background: white;
  background-clip: text;
}

/* ========== Reason Horizontal Slide ========== */
.reason-scroll-area {
  --reason-progress: 0;
  height: 300vh;
  position: relative;
  /* セクション見出しと幅・左右余白を揃える（max-w-[1366px] mx-auto lg:px-6） */
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.reason-sticky {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.reason-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
}

.reason-track {
  display: flex;
  /* 各スライドを viewport の 92% に縮小し、右側に約 8% の peek を出す（3 × 92% = 276%）。
     translate -66.6667% は維持。最終スライドは左寄せで右に空白が残る。 */
  width: 276%;
  height: 100%;
  transform: translateX(calc(var(--reason-progress) * -66.6667%));
  will-change: transform;
}

.reason-slide {
  flex: 0 0 calc(100% / 3);
  display: flex;
  flex-direction: column;
  background: white;
}

/* 区切り線は bar の領域のみ。bar の上下ボーダーとつながって枠線を形成する */
.reason-slide:not(:last-child) .reason-slide-bar {
  border-right: 1px solid rgba(25, 30, 40, 0.15);
}

/* 1枚目の body だけ左端からの余白を確保（セクション見出しと同じ px-6 相当）。
   slide-inner ではなく body の中身側にかけることで、bar の左ボーダーは
   スライド全幅に通る。 */
.reason-slide:first-child .reason-slide-body {
  padding-left: 1.5rem;
}

/* 3枚目の body 右端も 1枚目の左端と同じ余白で揃える */
.reason-slide:last-child .reason-slide-body {
  padding-right: 1.5rem;
}

.reason-slide-inner {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.reason-slide-bar {
  flex-shrink: 0;
  background: white;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.reason-slide-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.reason-slide-img {
  /* 60% を上限としつつ、ビューポート高から逆算した幅にも収まるよう min() で縮小（アスペクト比は維持）。
     差し引いている 220px はヘッダー余白(60) + bar(~114) + progress(~44) の概算。
     アスペクト比は 3枚目画像 (1278×974) に合わせ、右下クレジットが見切れないようにする。 */
  width: min(60%, calc((100vh - 220px) * 1278 / 974));
  aspect-ratio: 1278 / 974;
  overflow: hidden;
  flex-shrink: 0;
  align-self: flex-start;
}

.reason-slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 右下クレジットを保持するため、クロップ時は右下基準にする */
  object-position: right bottom;
  display: block;
}

.reason-slide-text {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 2rem;
}

/* Progress bar */
.reason-progress {
  flex-shrink: 0;
  height: 4px;
  width: 100%;
  max-width: calc(1366px - 3rem);
  margin: 1.25rem auto;
  background: rgba(25, 30, 40, 0.1);
  border-radius: 9999px;
  overflow: hidden;
}

.reason-progress-fill {
  height: 100%;
  width: calc(var(--reason-progress) * 100%);
  background: linear-gradient(90deg, #7ebbdf 0%, #579cca 100%);
  border-radius: 9999px;
}

/* ========== Merit Sticky Scroll ========== */
.merit-scroll-area {
  --merit-progress: 0;
  height: 400vh;
  position: relative;
}

.merit-sticky {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow: hidden;
}

.merit-accordion {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.merit-bar {
  flex-shrink: 0;
  background: white;
  z-index: 2;
  position: relative;
  transition: opacity 0.3s ease;
}

.merit-bar.is-active {
  opacity: 1;
}

.merit-bar:not(.is-active) {
  opacity: 0.4;
}

.merit-panel {
  overflow: hidden;
  flex-basis: 0px;
  flex-shrink: 0;
  min-height: 0;
}

.merit-panel[data-panel="0"] {
  flex-grow: clamp(0, 1 - var(--merit-progress) * 2, 1);
}

.merit-panel[data-panel="1"] {
  flex-grow: calc(
    clamp(0, var(--merit-progress) * 2, 1) -
    clamp(0, var(--merit-progress) * 2 - 1, 1)
  );
}

.merit-panel[data-panel="2"] {
  flex-grow: clamp(0, var(--merit-progress) * 2 - 1, 1);
}

.merit-panel-inner {
  height: var(--merit-content-h, 400px);
}

.merit-panel-inner > .flex {
  height: 100%;
}

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

.merit-panel[data-panel="1"] img {
  object-position: right bottom;
}

/* Merit Sub Accordion */
.merit-sub-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  padding: 12px 0;
  border-top: 1px solid rgba(150, 150, 150, 0.2);
}

.merit-sub-title {
  font-size: 16px;
  font-weight: 700;
  color: #579cca;
  letter-spacing: 0.64px;
}

.merit-sub-icon {
  font-size: 20px;
  font-weight: 300;
  color: #191e28;
  line-height: 1;
  transition: transform 0.3s ease;
}

.merit-sub-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.merit-sub-body.is-open {
  max-height: 300px; /* fallback; JS sets actual scrollHeight */
}

/* ========== Statistics Counter ========== */
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* ========== Recruit Photo Scroll Animation ========== */
.recruit-images {
  height: 100%;
}

.recruit-col {
  width: 220px;
  flex-shrink: 0;
}

.recruit-scroll {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recruit-scroll-up {
  animation: recruit-loop-vertical 40s linear infinite;
}

.recruit-scroll-down {
  animation: recruit-loop-vertical 40s linear infinite reverse;
  margin-top: -140px;
}

@keyframes recruit-loop-vertical {
  0% {
    transform: translateZ(0);
  }
  100% {
    transform: translate3d(0, -50%, 0);
  }
}

.recruit-photo {
  width: 220px;
  height: 280px;
  border-radius: 0px 32px 0px 32px;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.25);
}

/* ========== Decorative Background Lines ========== */
body {
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 170px,
      rgba(150, 150, 150, 0.08) 170px,
      rgba(150, 150, 150, 0.08) 171px
    );
  background-position: center top 542px;
}

/* ========== Custom Scrollbar ========== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #969696;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #191e28;
}

/* ========== Image Placeholder ========== */

/* ========== Line full ========== */
.line-full {
  position: relative;
}
.line-full::before,
.line-full::after {
  content: "";
  position: absolute;
  left: -24px;
  width: 100vw;
  height: 1px;
  background-color: rgba(150, 150, 150, 0.2);
}
.line-full::before {
  top: 0;
}
.line-full::after {
  bottom: 0;
}

@media (max-width: 1023px) {
  /* SP: Background lines narrower spacing */
  body {
    background-image:
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 85px,
        rgba(150, 150, 150, 0.08) 85px,
        rgba(150, 150, 150, 0.08) 86px
      );
  }

  /* SP: News horizontal scroll */
  .news-scroll {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .news-scroll::-webkit-scrollbar {
    display: none;
  }

  /* SP (tablet): Recruit photo sizing */
  .recruit-col {
    width: 50%;
  }
  .recruit-photo {
    width: 100%;
    height: 220px;
    border-radius: 0px 24px 0px 24px;
  }
}

/* Mobile only: Recruit horizontal scroll */
@media (max-width: 767px) {
  .recruit-col {
    width: 100%;
  }

  .recruit-scroll {
    flex-direction: row;
  }

  .recruit-photo {
    width: 220px;
    height: 160px;
    border-radius: 0px 24px 0px 24px;
  }

  .recruit-scroll-up {
    animation-name: recruit-loop-horizontal;
  }

  .recruit-scroll-down {
    animation-name: recruit-loop-horizontal;
    margin-top: 0;
    margin-left: -100px;
  }
}

@keyframes recruit-loop-horizontal {
  0% {
    transform: translateZ(0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (min-width: 1366px) {
  .line-full::before, .line-full::after {
    left: calc( (100vw - 1366px) / -2 - 24px);
  }
}

/* ========== Subpage Header ========== */
.subpage-header .header-bg {
  background: white !important;
}

.subpage-header.header-scrolled .header-bg {
  background: white !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* ========== Breadcrumb ========== */
.breadcrumb {
  font-size: 14px;
  letter-spacing: 0.56px;
}
.breadcrumb a {
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: #191e28;
}

/* ========== Heading Style 02 (Section heading for subpages) ========== */
.heading-style02-gradient {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  background: linear-gradient(133deg, rgb(251, 238, 173) 0%, rgb(87, 156, 202) 3%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========== Profile Sidebar Nav ========== */
.profile-nav-item {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========== Flow Section ========== */
.flow-number {
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1.5px #969696;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
}

/* ========== Merit Number ========== */
.merit-number {
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1.5px #969696;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  line-height: 1;
}

/* ========== Safety Section ========== */
.safety-section {
  background-image: url('../images/safety-bg.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: 80% center;
  position: relative;
}

/* セクション全体の均一な暗フィルター（土台）。白文字の視認性を上げ、
   hero/detail の境目に明るい帯が出ないようにする。PCは薄く、SPは濃くする（下部のメディアクエリで上書き）。 */
.safety-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.safety-hero {
  position: relative;
}

.safety-detail-bg {
  position: relative;
  background: transparent;
}

.safety-detail-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #80808047 7%, black 120px);
  mask-image: linear-gradient(to bottom, transparent 0%, #80808047 7%, black 120px);
}

.safety-detail-bg > * {
  position: relative;
  z-index: 1;
}

/* SP: 白文字の視認性を上げるため土台をより濃くする（PCは薄いまま）。
   土台があるので detail のマスク透明部でも明るい素地が覗かず、
   hero と detail の境目（明るい帯）が生じない。 */
@media (max-width: 1023.98px) {
  .safety-section::before {
    background: rgba(0, 0, 0, 0.4);
  }
  .safety-detail-bg::before {
    background: rgba(0, 0, 0, 0.15);
  }
}

/* iOS Safari fallback: background-attachment: fixed doesn't work on touch devices */
@supports (-webkit-touch-callout: none) {
  .safety-section {
    background-attachment: scroll;
  }
}

/* ========== Check List ========== */
.check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(133deg, rgb(251, 238, 173) 0.25%, rgb(87, 156, 202) 35%);
}

/* ========== Flow Sticky Scroll ========== */
.flow-scroll-area {
  height: 350vh;
  position: relative;
}

.flow-sticky {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}

.flow-step {
  transition: background-color 0.3s ease;
}

.flow-step.is-active {
  background-color: #e8f1f7;
}

.flow-image-wrap {
  position: relative;
  overflow: hidden;
}

.flow-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  border-end-start-radius: 80px;
}

.flow-image.is-active {
  opacity: 1;
}

/* ========== Flow Mobile Horizontal Scroll ========== */
.flow-mobile-scroll {
  overflow: visible;
}

.flow-mobile-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-top: 20px;
  padding-bottom: 4px;
}

.flow-mobile-track::-webkit-scrollbar {
  display: none;
}

.flow-mobile-card {
  flex: 0 0 311px;
  scroll-snap-align: start;
}

.flow-mobile-thumb {
  position: relative;
}

.flow-mobile-img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 20px;
}

.flow-mobile-num {
  position: absolute;
  top: -25px;
  right: 14px;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1.5px #969696;
}

.flow-mobile-body {
  padding: 16px 4px 0;
}

/* ========== Business Page Cards ========== */
.business-card-radius {
  border-radius: 0 32px 0 32px;
}

/* ========== Works Photo Modal ========== */
#works-modal {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#works-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

body.modal-open {
  overflow: hidden;
}

/* ========== Gallery Lightbox ========== */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.gallery-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.gallery-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.gallery-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gallery-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gallery-lightbox-prev { left: 20px; }
.gallery-lightbox-next { right: 20px; }

.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.25);
}

.gallery-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: white;
  font-size: 14px;
  letter-spacing: 0.56px;
}

/* Gallery Caption (PC hover) */
.gallery-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 70%;
  padding: 12px 16px;
  background: rgba(25, 30, 40, 0.8);
  color: white;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.52px;
  text-align: left;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.gallery-item:hover .gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Gallery Lightbox Caption (SP modal) */
.gallery-lightbox-caption {
  display: none;
}

@media (max-width: 1023px) {
  .gallery-lightbox-caption {
    display: block;
    color: white;
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.52px;
    text-align: left;
    padding: 12px 4px 0;
    max-width: 90vw;
  }

  .gallery-lightbox-caption:empty {
    display: none;
  }
}

/* ========== Entry Content (Single Post) ========== */
.entry-content {
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.6px;
  color: #191e28;
}

@media (min-width: 1024px) {
  .entry-content {
    font-size: 16px;
    letter-spacing: 0.64px;
  }
}

.entry-content > *:not(:last-child) {
  margin-bottom: 1.8em;
}

.entry-content h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.8px;
  padding-left: 16px;
  border-left: 3px solid #7ebbdf;
  margin-top: 2.5em;
}

@media (min-width: 1024px) {
  .entry-content h2 {
    font-size: 24px;
    letter-spacing: 0.96px;
  }
}

.entry-content h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.72px;
  margin-top: 2em;
}

@media (min-width: 1024px) {
  .entry-content h3 {
    font-size: 20px;
    letter-spacing: 0.8px;
  }
}

.entry-content h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.64px;
  margin-top: 1.5em;
}

.entry-content a {
  color: #579cca;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.entry-content a:hover {
  opacity: 0.7;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.5em;
}

.entry-content ul {
  list-style-type: disc;
}

.entry-content ol {
  list-style-type: decimal;
}

.entry-content li:not(:last-child) {
  margin-bottom: 0.5em;
}

.entry-content blockquote {
  border-left: 3px solid #7ebbdf;
  background: #e8f1f7;
  padding: 1.2em 1.5em;
  border-radius: 0 8px 8px 0;
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content img,
.entry-content .wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.entry-content figure {
  margin-left: 0;
  margin-right: 0;
}

.entry-content figcaption {
  font-size: 13px;
  color: #999;
  text-align: center;
  margin-top: 0.5em;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
}

.entry-content th,
.entry-content td {
  border: 1px solid #d4d4d4;
  padding: 0.75em 1em;
  text-align: left;
}

.entry-content th {
  background: #f5f5f5;
  font-weight: 600;
}

/* ========== Gallery Scrollbar Hide (SP flow steps) ========== */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ========== Contact Form (CF7) ========== */

/* Phone section gradient background */
.contact-phone-bg {
  background: radial-gradient(ellipse at -10% -20%, rgba(251,238,173,1) 0%, rgba(210,218,180,1) 15%, rgba(169,197,187,1) 25%, rgba(128,177,195,1) 50%, rgba(87,156,202,1) 100%);
}

.contact-form-table {
  width: 100%;
}

.contact-form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 8px;
  border-top: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
  margin-bottom: -1px;
}

.contact-form-th {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* CF7 wraps th contents in <p> — propagate flex layout */
.contact-form-th > p {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}

.contact-form-th > p > br {
  display: none;
}

.contact-form-th:has(.contact-form-note) {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.contact-form-label {
  font-size: 16px;
  font-weight: 600;
  color: #191e28;
  letter-spacing: 0.64px;
  line-height: 1.4;
}

.contact-form-required {
  font-size: 12px;
  font-weight: 600;
  color: #d33;
  letter-spacing: 0.48px;
  line-height: 1.6;
  flex-shrink: 0;
}

.contact-form-note {
  font-size: 13px;
  color: rgba(25, 30, 40, 0.6);
  letter-spacing: 0.4px;
  line-height: 1.6;
}

.contact-form-label-note {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(25, 30, 40, 0.6);
  letter-spacing: 0.4px;
}

.contact-form-td {
  flex: 1;
}

/* Shared input styles (fallback + CF7) */
.contact-form-input,
.contact-form-select,
.contact-form-textarea,
.contact-form-wrap .wpcf7-form-control-wrap input[type="text"],
.contact-form-wrap .wpcf7-form-control-wrap input[type="email"],
.contact-form-wrap .wpcf7-form-control-wrap input[type="tel"],
.contact-form-wrap .wpcf7-form-control-wrap select,
.contact-form-wrap .wpcf7-form-control-wrap textarea {
  width: 100%;
  background: #f0f0f0;
  border: none;
  border-radius: 8px;
  padding: 14px 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.64px;
  color: #191e28;
  outline: none;
  transition: box-shadow 0.2s ease;
}

.contact-form-input:focus,
.contact-form-select:focus,
.contact-form-textarea:focus,
.contact-form-wrap .wpcf7-form-control-wrap input:focus,
.contact-form-wrap .wpcf7-form-control-wrap select:focus,
.contact-form-wrap .wpcf7-form-control-wrap textarea:focus {
  box-shadow: 0 0 0 2px #7ebbdf;
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder,
.contact-form-wrap .wpcf7-form-control-wrap input::placeholder,
.contact-form-wrap .wpcf7-form-control-wrap textarea::placeholder {
  color: #999;
}

.contact-form-select,
.contact-form-wrap .wpcf7-form-control-wrap select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 48px;
  cursor: pointer;
}

.contact-form-textarea,
.contact-form-wrap .wpcf7-form-control-wrap textarea {
  resize: vertical;
  min-height: 180px;
}

.contact-form-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 683px;
  height: 80px;
  background: #191e28;
  border: none;
  border-radius: 8px;
  color: white;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.72px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.contact-form-submit .btn-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.contact-form-submit:hover {
  opacity: 0.85;
}

.contact-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* CF7 elements styling */
.contact-form-wrap .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* CF7 acceptance checkbox */
.contact-form-wrap .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.contact-form-wrap .wpcf7-acceptance input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  accent-color: #191e28;
  flex-shrink: 0;
  cursor: pointer;
}

.contact-form-wrap .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.64px;
  color: #191e28;
  vertical-align: top;
}

/* CF7: submit / acceptance を囲む p タグの幅制約を解除 */
.contact-form-wrap p:has(.contact-form-submit-wrap),
.contact-form-wrap p:has(.wpcf7-acceptance) {
  width: 100%;
}

/* CF7 submit button wrapper */
.contact-form-submit-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 683px;
  height: 80px;
  margin: 0 auto;
  background: #191e28;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.contact-form-submit-wrap:hover {
  opacity: 0.85;
}

/* Reset outer submit-wrap when CF7 autop causes nesting */
.contact-form-submit-wrap:has(> p > .contact-form-submit-wrap) {
  display: block;
  background: none;
  height: auto;
  border-radius: 0;
  cursor: default;
  max-width: none;
}

.contact-form-submit-wrap:has(> p > .contact-form-submit-wrap):hover {
  opacity: 1;
}

/* Hide duplicate arrow in the autop <p> wrapper */
.contact-form-submit-wrap > p > .btn-arrow {
  display: none;
}

/* Reset the <p> wrapper CF7 adds */
.contact-form-submit-wrap > p:has(> .contact-form-submit-wrap) {
  margin: 0;
}

.contact-form-submit-wrap .wpcf7-submit {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: white;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.72px;
  cursor: pointer;
}

.contact-form-submit-wrap .btn-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* CF7 validation error messages */
.contact-form-wrap .wpcf7-not-valid-tip {
  color: #d33;
  font-size: 13px;
  margin-top: 6px;
  letter-spacing: 0.52px;
}

.contact-form-wrap .wpcf7-response-output {
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0 0;
  font-size: 14px;
  letter-spacing: 0.56px;
  text-align: center;
}

.contact-form-wrap .wpcf7-mail-sent-ok {
  border-color: #46b450;
  color: #46b450;
}

.contact-form-wrap .wpcf7-validation-errors,
.contact-form-wrap .wpcf7-spam-blocked {
  border-color: #d33;
  color: #d33;
}

/* PC layout */
@media (min-width: 1024px) {
  .contact-form-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 8px;
  }

  .contact-form-th {
    width: 220px;
    flex-shrink: 0;
    padding-top: 18px;
    justify-content: space-between;
    align-items: flex-start;
  }

  .contact-form-th > p {
    justify-content: space-between;
    align-items: flex-start;
  }

  .contact-form-required {
    padding-top: 8px;
  }

  .contact-form-label {
    font-size: 18px;
    letter-spacing: 0.72px;
  }

  .contact-form-input,
  .contact-form-select,
  .contact-form-textarea,
  .contact-form-wrap .wpcf7-form-control-wrap input,
  .contact-form-wrap .wpcf7-form-control-wrap select,
  .contact-form-wrap .wpcf7-form-control-wrap textarea {
    padding: 16px 24px;
  }

  .contact-form-submit,
  .contact-form-submit-wrap {
    height: 90px;
  }

  .contact-form-submit,
  .contact-form-submit-wrap .wpcf7-submit {
    font-size: 20px;
    letter-spacing: 0.8px;
  }
}

/* ========== Checkbox Group (Recruit Form) ========== */

.contact-form-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.contact-form-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.64px;
  color: #191e28;
  white-space: nowrap;
}

.contact-form-checkbox-box {
  display: block;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  background: #f0f0f0;
  border-radius: 4px;
  flex-shrink: 0;
}

/* CF7 checkbox group */
.contact-form-wrap .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.contact-form-wrap .wpcf7-checkbox .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.contact-form-wrap .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  accent-color: #579cca;
  flex-shrink: 0;
}

.contact-form-wrap .wpcf7-checkbox .wpcf7-list-item-label {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.64px;
  color: #191e28;
}

@media (min-width: 1024px) {
  .contact-form-checkbox-group {
    gap: 8px 32px;
  }

  .contact-form-wrap .wpcf7-checkbox {
    gap: 8px 32px;
  }
}

/* ========== CF7 Confirmation Screen ========== */

.cf7-confirm-overlay {
  animation: cf7ConfirmFadeIn 0.3s ease;
}

@keyframes cf7ConfirmFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.cf7-confirm-heading {
  margin-bottom: 32px;
}

.cf7-confirm-value {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.64px;
  color: #191e28;
  padding: 14px 0;
  word-break: break-word;
}

.cf7-confirm-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.cf7-confirm-back-btn {
  width: 100%;
  max-width: 683px;
  height: 64px;
  background: white;
  border: 2px solid #191e28;
  border-radius: 8px;
  color: #191e28;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.64px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cf7-confirm-back-btn:hover {
  background: #191e28;
  color: white;
}

.cf7-confirm-submit-btn button {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: white;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.72px;
  cursor: pointer;
}

/* Confirm button (replaces submit) */
.cf7-confirm-btn button {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: white;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.72px;
  cursor: pointer;
}

/* Validation error */
.cf7-confirm-error {
  color: #d33;
  font-size: 13px;
  margin-top: 6px;
  letter-spacing: 0.52px;
  display: inline-block;
}

.cf7-confirm-error-block {
  display: block;
  margin-top: 8px;
}

@media (min-width: 1024px) {
  .cf7-confirm-value {
    padding: 16px 0;
  }

  .cf7-confirm-actions {
    gap: 20px;
    margin-top: 48px;
  }

  .cf7-confirm-back-btn {
    height: 72px;
    font-size: 18px;
    letter-spacing: 0.72px;
  }

  .cf7-confirm-submit-btn button,
  .cf7-confirm-btn button {
    font-size: 20px;
    letter-spacing: 0.8px;
  }
}

/* ========== Recruit Page ========== */

/* Recruit Gradient Button (header, small CTAs) */
.recruit-gradient-btn {
  background: linear-gradient(133deg, #fbeead 10%, #579cca 45%);
}

/* Recruit Entry Button (large CTA) */
.recruit-entry-btn {
  background: linear-gradient(126deg, #fbeead 6.7%, #579cca 25.5%);
}

/* Recruit CTA Section gradient */
.recruit-cta-bg {
  background: radial-gradient(ellipse at top left, #fbeead 0%, #d2dab4 25%, #a9c5bb 50%, #80b1c3 75%, #579cca 100%);
}

/* Recruit Gradient Background (Hero ~ Job Type) */
.recruit-gradient-bg {
  background: #cbe3f1;
  position: relative;
}

/* Recruit Hero */
.recruit-hero {
  min-height: 580px;
}

@media (min-width: 1024px) {
  .recruit-hero {
    min-height: 700px;
  }
}

/* Yellow blurred circles layer (multiple warm spots) */
.recruit-hero-blob1 {
  position: absolute;
  top: -17%;
  left: -34%;
  width: 160%;
  height: 73%;
  pointer-events: none;
}

/* White/bright blurred circles layer (lighter blue spots) */
.recruit-hero-blob2 {
  position: absolute;
  top: 4%;
  left: -25%;
  width: 176%;
  height: 74%;
  pointer-events: none;
}

/* Recruit Carousel — Stacked overlapping cards (SP + PC) */
.recruit-carousel {
  position: relative;
  height: 450px;
  overflow: visible;
  display: block;
  touch-action: pan-y;
}

/* Suppress text selection while dragging the carousel */
.recruit-carousel.is-grabbing {
  cursor: grabbing;
  user-select: none;
}

.recruit-carousel .recruit-carousel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 311px;
  height: 450px;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.recruit-carousel .recruit-carousel-card.is-active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.recruit-carousel .recruit-carousel-card.is-prev {
  transform: translate(-130%, -50%) scale(0.8);
  opacity: 0.6;
  z-index: 1;
  pointer-events: auto;
}

.recruit-carousel .recruit-carousel-card.is-next {
  transform: translate(30%, -50%) scale(0.8);
  opacity: 0.6;
  z-index: 1;
  pointer-events: auto;
}

/* PC overrides */
@media (min-width: 1024px) {
  .recruit-carousel {
    height: 600px;
    margin: 0 -80px;
    cursor: grab;
  }

  .recruit-carousel .recruit-carousel-card {
    width: 76.6%;
    height: 600px;
    transform: translate(-50%, -50%) scale(0.855);
    transition-duration: 0.6s;
  }

  .recruit-carousel .recruit-carousel-card.is-active {
    transform: translate(-50%, -50%) scale(1);
  }

  .recruit-carousel .recruit-carousel-card.is-prev {
    transform: translate(-135%, -50%) scale(0.855);
    cursor: pointer;
  }

  .recruit-carousel .recruit-carousel-card.is-next {
    transform: translate(35%, -50%) scale(0.855);
    cursor: pointer;
  }
}

/* Recruit Tabs */
.recruit-tab {
  background: #f0f0f0;
  color: #999;
}

.recruit-tab.is-active {
  background: #7ebbdf;
  color: #fff;
  font-weight: 600;
}

.recruit-tab-content {
  display: none;
}

.recruit-tab-content.is-active {
  display: block;
}

/* Recruit SP Fixed Bottom Bar */
#recruit-bottom-bar {
  pointer-events: none;
}

#recruit-bottom-bar > * {
  pointer-events: auto;
}

body.nav-open #recruit-bottom-bar {
  z-index: 50;
}

/*
 * 採用ページのSP固定ボトムバー（エントリー/メニュー）は position:fixed のため、
 * 最下部までスクロールするとフッター最下部のバー（コピーライト・各種リンク）と重なる。
 * バーを表示しているページ（#recruit-bottom-bar が存在＝採用系ページ）かつSP幅のときだけ、
 * フッター最下部バーに固定バー分の余白を足してコンテンツが隠れないようにする。
 * バー高さ = pt-2(8px) + ボタン53px + pb-4(16px) = 77px。余白と iOS セーフエリアを加算。
 */
@media (max-width: 1023.98px) {
  body:has(#recruit-bottom-bar) .footer-bottom-bar {
    padding-bottom: calc(85px + env(safe-area-inset-bottom));
  }
}

/* Recruit Mobile Nav */
#recruit-mobile-nav {
  transition: transform 0.3s ease-in-out;
}

#recruit-mobile-nav.is-open {
  transform: translateX(0);
}

/* Prevent background scroll when nav is open */
body.nav-open {
  overflow: hidden;
}

/* Recruit Menu Button: hamburger → × when open */
body.nav-open .recruit-menu-icon-open {
  display: none;
}

body.nav-open .recruit-menu-icon-close {
  display: block;
}

.recruit-menu-icon-close {
  display: none;
}

/* ========== Entry Form Page ========== */

.entry-form-wrap {
  --entry-gradient: linear-gradient(126deg, #fbeead 6.7%, #579cca 25.5%);
}

/* Entry form row — transparent border for gradient bg */
.entry-form-wrap .contact-form-row {
  border-color: rgba(25, 30, 40, 0.15);
}

/* Entry form input — white background instead of gray */
.entry-form-input,
.entry-form-wrap .wpcf7-form-control-wrap input[type="text"],
.entry-form-wrap .wpcf7-form-control-wrap input[type="email"],
.entry-form-wrap .wpcf7-form-control-wrap input[type="tel"],
.entry-form-wrap .wpcf7-form-control-wrap select,
.entry-form-wrap .wpcf7-form-control-wrap textarea {
  background: white;
  padding: 20px 24px;
  border-radius: 8px;
}

/* File upload wrapper */
.entry-form-file-wrap,
.entry-form-wrap .wpcf7-form-control-wrap:has(input[type="file"]) {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 8px;
  padding: 20px 24px;
  min-height: 77px;
}

.entry-form-file-placeholder {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.64px;
  color: #999;
  flex: 1;
}

.entry-form-file-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: #f0f0f0;
  border-radius: 100px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.56px;
  color: #191e28;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

/* CF7 file input styling */
.entry-form-wrap .wpcf7-form-control-wrap input[type="file"] {
  width: 100%;
  font-size: 14px;
  color: #191e28;
  cursor: pointer;
  word-break: break-all;
}

.entry-form-wrap .wpcf7-form-control-wrap input[type="file"]::file-selector-button {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: #f0f0f0;
  border: none;
  border-radius: 100px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.56px;
  color: #191e28;
  cursor: pointer;
  margin-right: 16px;
  transition: background 0.2s ease;
}

.entry-form-wrap .wpcf7-form-control-wrap input[type="file"]::file-selector-button:hover {
  background: #e0e0e0;
}

/* SP: file input — stack button and filename vertically */
@media (max-width: 1023px) {
  .entry-form-wrap .wpcf7-form-control-wrap input[type="file"]::file-selector-button {
    display: block;
    margin-bottom: 8px;
    margin-right: 0;
  }
}

/* Submit button — gradient style */
.entry-form-submit,
.entry-form-submit-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 380px;
  height: 72px;
  background: var(--entry-gradient);
  border: none;
  border-radius: 100px;
  padding: 0 20px 0 48px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: white;
  letter-spacing: 0.72px;
  line-height: 1.4;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.entry-form-submit:hover,
.entry-form-submit-wrap:hover {
  opacity: 0.85;
}

.entry-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.entry-form-submit-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  flex-shrink: 0;
}

.entry-form-submit-arrow svg {
  stroke: #579cca;
}

/* CF7 submit / confirm buttons for entry form — shared gradient style */
.entry-form-wrap .contact-form-submit-wrap,
.entry-form-wrap .cf7-confirm-btn,
.entry-form-wrap .cf7-confirm-submit-btn {
  background: var(--entry-gradient);
  border-radius: 100px;
  max-width: 380px;
  height: 72px;
  padding: 0 20px 0 48px;
  justify-content: space-between;
}

.entry-form-wrap .contact-form-submit-wrap .wpcf7-submit,
.entry-form-wrap .cf7-confirm-trigger,
.entry-form-wrap .cf7-confirm-submit-btn button {
  color: white;
  font-weight: 600;
  text-align: left;
}

.entry-form-wrap .contact-form-submit-wrap .btn-arrow,
.entry-form-wrap .cf7-confirm-btn .btn-arrow,
.entry-form-wrap .cf7-confirm-submit-btn .btn-arrow {
  background: white;
  width: 50px;
  height: 50px;
}

.entry-form-wrap .contact-form-submit-wrap .btn-arrow svg path,
.entry-form-wrap .cf7-confirm-btn .btn-arrow svg path,
.entry-form-wrap .cf7-confirm-submit-btn .btn-arrow svg path {
  stroke: #579cca;
}

/* Entry form confirmation screen — back button */
.entry-form-wrap .cf7-confirm-back-btn {
  max-width: 380px;
  border-radius: 100px;
  border-width: 1px;
}

/* FAQ Cards */
.entry-faq-card {
  flex: 1;
  background: white;
  border: 1px solid #579cca;
  padding: 32px 36px 40px;
}

@media (min-width: 1024px) {
  .entry-form-submit,
  .entry-form-submit-wrap {
    font-size: 18px;
    letter-spacing: 0.72px;
  }

  .entry-form-wrap .contact-form-submit-wrap .wpcf7-submit,
  .entry-form-wrap .cf7-confirm-trigger,
  .entry-form-wrap .cf7-confirm-submit-btn button {
    font-size: 18px;
    letter-spacing: 0.72px;
  }
}

/* ========== FAQ Accordion (Selection Page) ========== */
.faq-item {
  transition: background-color 0.3s ease;
  background-color: #e8f1f7;
}

.faq-item.is-open {
  background-color: #fff;
}

.faq-answer {
  display: none;
}

.faq-item.is-open .faq-answer {
  display: block;
}

.faq-item.is-open .faq-toggle {
  background-color: #fff;
  border-color: #579cca;
}

.faq-item.is-open .faq-icon-plus {
  display: none;
}

.faq-item.is-open .faq-icon-minus {
  display: block;
}

/* ========== FAQ 回答本文（WYSIWYG出力） ========== */
.faq-answer-body > :first-child {
  margin-top: 0;
}
.faq-answer-body > :last-child {
  margin-bottom: 0;
}
.faq-answer-body p {
  margin: 0;
}
.faq-answer-body p + p {
  margin-top: 1em;
}
.faq-answer-body a {
  color: #579cca;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.3s ease;
}
.faq-answer-body a:hover {
  opacity: 0.7;
}
.faq-answer-body ul,
.faq-answer-body ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}
.faq-answer-body ul {
  list-style: disc;
}
.faq-answer-body ol {
  list-style: decimal;
}
.faq-answer-body li {
  margin: 0.25em 0;
}
.faq-answer-body strong {
  font-weight: 700;
}

/* ========== Flow Step Number (Gradient Stroke) ========== */
.flow-step-number {
  background: linear-gradient(135deg, #fbeead, #579cca);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1.5px transparent;
  paint-order: stroke fill;
}

/* ========== Staff Interview Page ========== */

/* Hero photo name overlay text shadow */
.interview-hero-text {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Job Detail: Timeline vertical line */
.job-timeline {
  position: relative;
}
.job-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: #579cca;
}
@media (min-width: 1024px) {
  .job-timeline::before {
    left: 8px;
    top: 32px;
    bottom: 32px;
  }
}

/* ========== Qualification Row Accordion (SP) ========== */
@media (max-width: 1023px) {
  .qual-row .qual-row-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
  }
  .qual-row.is-open .qual-row-icon-plus {
    display: none;
  }
  .qual-row.is-open .qual-row-icon-minus {
    display: block;
  }
}

/* ========== 蛍光マーカー風テキスト装飾 ========== */
.text-marker {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.text-marker::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0.05em;
  height: 0.5em;
  background: #fff;
  z-index: -1;
}

/* reCAPTCHA v3 バッジは非表示。各フォーム下の自前の保護表記で Google の表記要件を満たす */
.grecaptcha-badge {
  visibility: hidden !important;
}