/* ========================================
   subpage.css — サブページ共通スタイル
   Tineeds デザインシステムに準拠
======================================== */

/* ========================================
   ページ遷移：サービス/会社概要/求人情報は読み込み時に右→左スライドイン。
   subpage.css はこの3ページだけが読む render-blocking CSS なので、初回描画から
   確実にスライドが発火する（View Transitions のような「効いたり効かなかったり」が無い・全ブラウザ対応）。
   ※トップ(index)はこのCSSを読まない＝従来どおりローディング画面のまま。
   fill-mode は backwards：開始前は translateX(100%)、終了後は transform 無し
   （＝アニメ後は position:fixed ヘッダー等が通常どおり効く）。
======================================== */
@media (prefers-reduced-motion: no-preference) {
  html { overflow-x: clip; }              /* 横スクロールバーを出さない。clip は overflow-y を変えずスティッキーを壊さない（subnav固定対策 2026-06-09） */
  body { animation: subpageSlideIn .5s cubic-bezier(.5, 0, .2, 1) backwards; }
}
@keyframes subpageSlideIn {
  from { transform: translateX(100%); opacity: .85; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ----------------------------------------
   ページヒーロー（共通）
---------------------------------------- */
.subpage-hero {
  padding: 140px 0 64px;
  position: relative;
  overflow: hidden;
  background: var(--c-bg);
}
.subpage-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46vw 46vw at 90% -12%, rgba(13,193,204,0.16) 0%, transparent 62%),
    radial-gradient(40vw 40vw at 4% 30%, rgba(240,77,152,0.08) 0%, transparent 60%),
    radial-gradient(38vw 38vw at 62% 120%, rgba(124,92,246,0.06) 0%, transparent 60%),
    radial-gradient(2px 2px at 22% 32%, rgba(13,193,204,0.28) 0%, transparent 100%),
    radial-gradient(2px 2px at 76% 58%, rgba(240,77,152,0.22) 0%, transparent 100%),
    radial-gradient(1.6px 1.6px at 44% 80%, rgba(13,193,204,0.2) 0%, transparent 100%),
    radial-gradient(1.6px 1.6px at 88% 24%, rgba(255,193,7,0.3) 0%, transparent 100%);
}
/* やわらかく漂う光のブロブ（Topと同じ世界観・控えめ） */
.subpage-hero::before,
.subpage-hero::after {
  content: ''; position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(54px); z-index: 0;
}
.subpage-hero::before { width: 320px; height: 320px; top: -110px; right: -70px; background: radial-gradient(circle, rgba(13,193,204,0.20) 0%, transparent 66%); animation: sp-float 13s ease-in-out infinite; }
.subpage-hero::after { width: 260px; height: 260px; bottom: -90px; left: -50px; background: radial-gradient(circle, rgba(240,77,152,0.13) 0%, transparent 66%); animation: sp-float 17s ease-in-out infinite reverse; }
@keyframes sp-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(22px,-18px); } }
.subpage-hero-inner {
  position: relative;
  z-index: 1;
}
.subpage-hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: var(--c-dark);
  margin: 12px 0 16px;
  line-height: 1.2;
}
.subpage-breadcrumb {
  font-size: 0.8rem;
  color: var(--c-gray-3);
}
.subpage-breadcrumb a { color: var(--c-gray-3); text-decoration: underline; }

/* 採用ページヒーロー：ダーク背景 */

/* ----------------------------------------
   サブナビ
---------------------------------------- */
.subnav {
  border-bottom: 1px solid var(--c-border);
  background: #fff;
  position: sticky;
  top: 72px;
  z-index: 100;
}
.subnav-inner {
  display: flex;
  gap: 0;
  overflow-x: auto;
}
.subnav-link {
  padding: 16px 24px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-gray);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.subnav-link:hover,
.subnav-link.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

/* ----------------------------------------
   サービス詳細
---------------------------------------- */
.section-service-lead { padding: 64px 0; }
.service-lead-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.section-service-detail { padding: 80px 0; }
.service-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.service-detail-layout--rev { direction: rtl; }
.service-detail-layout--rev > * { direction: ltr; }
.service-detail-photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.service-detail-img { width: 100%; height: 360px; object-fit: cover; display: block; }
.service-detail-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-dark);
  margin-bottom: 16px;
  line-height: 1.3;
}
.service-detail-desc {
  font-size: 0.95rem;
  color: var(--c-gray);
  line-height: 2;
  font-weight: 500;
  margin-bottom: 24px;
}
.service-detail-list {
  list-style: none;
  margin-bottom: 24px;
}
.service-detail-list li {
  padding: 8px 0 8px 24px;
  position: relative;
  font-size: 0.9rem;
  color: var(--c-dark);
  font-weight: 500;
  border-bottom: 1px solid var(--c-border);
}
.service-detail-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--c-primary);
  font-weight: 900;
}
.service-detail-price {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 18px;
}
.service-price-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-primary);
  background: rgba(13,193,204,0.1);
  padding: 3px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.service-price-val { font-size: 0.9rem; font-weight: 700; color: var(--c-dark); }

/* ----------------------------------------
   採用ページ
---------------------------------------- */
.recruit-flow-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 48px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 48px 40px;
}
.recruit-flow-step {
  flex: 1;
  text-align: center;
  padding: 0 16px;
}
.recruit-flow-step h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-dark);
  margin: 12px 0 8px;
}
.recruit-flow-step p {
  font-size: 0.82rem;
  color: var(--c-gray);
  line-height: 1.7;
  font-weight: 500;
}

.section-recruit-cta { padding: 80px 0; }

/* ----------------------------------------
   レスポンシブ
---------------------------------------- */
@media (max-width: 1024px) {
  .service-detail-layout { grid-template-columns: 1fr; gap: 32px; }
  .service-detail-layout--rev { direction: ltr; }
  .service-lead-layout { grid-template-columns: 1fr; gap: 32px; }
  .recruit-flow-steps { flex-direction: column; gap: 24px; }
  .recruit-flow-steps .flow-arrow { transform: rotate(90deg); }
}
@media (max-width: 768px) {
  .subpage-hero { padding: 110px 0 48px; }
  .subnav-link { padding: 12px 16px; font-size: 0.78rem; }  .service-detail-img { height: 220px; }
  .recruit-flow-steps { padding: 32px 20px; }
}

/* ========================================
   サービスのタブ：スマホはドロップダウン（アコーディオン）化
   横スクロールをやめ、選択するとその場所を表示
======================================== */
.subnav-toggle { display: none; }
@media (max-width: 768px) {
  .subnav--tabs .subnav-bar { position: relative; padding: 0; }
  .subnav--tabs .subnav-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 14px 20px;
    /* ドロップダウンと分かりやすいようブランドteal背景＋白文字に（白地のラベルに見えてしまうのを解消） */
    background: var(--c-primary); border: none; cursor: pointer;
    font-family: inherit; font-size: .9rem; font-weight: 800; color: #fff;
  }
  .subnav--tabs .subnav-toggle-arrow { color: #fff; transition: transform .3s ease; flex-shrink: 0; }
  .subnav--tabs .subnav-toggle[aria-expanded="true"] .subnav-toggle-arrow { transform: rotate(180deg); }
  .subnav--tabs .subnav-inner {
    display: none; flex-direction: column; overflow: hidden;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--c-border);
    box-shadow: var(--shadow-md); z-index: 200;
  }
  .subnav--tabs .subnav-inner.open { display: flex; }
  /* 開いたリストの背面にマスコット TICKS を右寄せで（リンク文字とは被らない） */
  .subnav--tabs .subnav-inner::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    top: 0; bottom: 0; right: 12px; width: 130px;
    background: url("../img/common/ticks-sketch.png") no-repeat right center;
    background-size: contain;
    opacity: .5;
  }
  .subnav--tabs .subnav-link { position: relative; z-index: 1; }
  .subnav--tabs .subnav-link {
    padding: 14px 20px; white-space: normal;
    border-bottom: 1px solid var(--c-border);
    border-left: 3px solid transparent;
  }
  .subnav--tabs .subnav-link.active {
    color: var(--c-primary); background: var(--c-primary-light);
    border-bottom-color: var(--c-border); border-left-color: var(--c-primary);
  }
}


/* 止め絵準拠：サービスヒーローの宇宙飛行士のティックス */
.subpage-hero { position: relative; }
.subpage-hero-ticks { position: absolute; right: 5%; top: 25%; width: clamp(110px, 13vw, 190px); height: auto; z-index: 0; pointer-events: none; filter: drop-shadow(0 14px 26px rgba(0,0,0,.12)); animation: sp-float 7s ease-in-out infinite; }
@media (max-width: 768px){ .subpage-hero-ticks { width: 120px; right: 10%; top: 30%; opacity: .9; } }

/* contact page section spacing (uses .section-contact .container white panel) */
.contact-page-section { padding: clamp(48px,7vw,88px) 0 clamp(64px,10vw,120px); }

/* company hero(subpage-hero型)の説明文 */
.subpage-hero-sub { font-size: 1rem; color: var(--c-gray); line-height: 1.85; font-weight: 500; max-width: 560px; margin: 4px 0 0; }