@charset "UTF-8";

/* ==========================================================================
   Responsive (sp.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography scale（:root 上書き）
   - --fs-ui-* は固定のまま（ヘッダー・フッターナビ）
   - 1200px / 992px / 768px で段階的に clamp へ
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root {
    --fs-catch-top: clamp(48px, 8vw, 80px);
    --fs-catch-bottom: clamp(56px, 10vw, 110px);
  }
}

@media (max-width: 992px) {
  :root {
    --fs-page-title: clamp(32px, 5vw, 52px);
    --fs-biz-num: clamp(40px, 8vw, 64px);
    --fs-service-label: clamp(48px, 10vw, 80px);
  }
}

@media (max-width: 768px) {
  :root {
    --fs-body: clamp(14px, 3.8vw, 16px);
    --fs-small: 14px;
    --fs-lead: clamp(15px, 4vw, 18px);
    --fs-accent-md: clamp(16px, 4.2vw, 18px);

    --fs-en-title: clamp(22px, 5vw, 32px);
    --fs-ja-title: clamp(14px, 3.5vw, 15px);
    --fs-slash-header-en: clamp(24px, 5.5vw, 48px);

    --fs-page-title: clamp(28px, 6vw, 40px);
    --fs-page-desc: clamp(15px, 4vw, 16px);

    --fs-catch-bottom: clamp(50px, 10vw, 110px);

    --fs-hero-desc: clamp(15px, 4vw, 16px);
    --fs-card-title: clamp(20px, 5vw, 32px);
    --fs-card-link: clamp(14px, 3.8vw, 15px);
    --fs-card-link-strong: clamp(16px, 4.2vw, 18px);

    --fs-bento-num: clamp(64px, 15vw, 120px);
    --fs-bento-title: clamp(18px, 4.5vw, 22px);

    --fs-news-title: clamp(16px, 4.2vw, 18px);
    --fs-btn: clamp(15px, 4vw, 16px);

    --fs-biz-num: clamp(36px, 9vw, 64px);
    --fs-biz-title: clamp(18px, 4.5vw, 22px);

    --fs-service-label: clamp(40px, 10vw, 64px);
    --fs-service-title: clamp(20px, 5vw, 26px);
    --fs-service-desc: clamp(14px, 3.8vw, 15px);

    --fs-spec-td: clamp(14px, 3.8vw, 16px);
    --fs-spec-td-accent: clamp(14px, 4vw, 16px);
    --fs-spec-card-title: clamp(14px, 4vw, 16px);

    --fs-staffing-title: clamp(18px, 4.5vw, 20px);

    --fs-quality-badge: clamp(22px, 5.5vw, 28px);
    --fs-quality-title: clamp(16px, 4.2vw, 18px);
  }
}

/* --- Hero Section & Global --- */
@media (max-width: 1200px) {
  .slash-card-box { width: 320px; }
}

@media (max-width: 992px) {
  body {
    padding-left: 0; /* モバイル表示時は左側の余白をなくす */
  }

  .header {
    width: 100%;
    height: var(--header-height);
    border-right: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: var(--shadow-sm);
    background: rgba(255, 255, 255, 0.95); /* モバイル時は白ガラスにする */
    backdrop-filter: blur(8px);
  }

  .header-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
  }

  .logo img {
    height: 50px;
    width: auto;
  }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 1003;
  }

  .nav-overlay {
    display: block;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .header.is-nav-open .nav-overlay {
    opacity: 1;
    visibility: visible;
  }

  .global-nav {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: min(300px, 85vw);
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    padding: 24px 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
    z-index: 1002;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .header.is-nav-open .global-nav {
    transform: translateX(0);
  }

  .global-nav ul {
    gap: 8px;
  }

  .global-nav a {
    padding: 14px 16px;
  }

  .header-footer {
    display: none;
  }

  body.is-nav-open {
    overflow: hidden;
  }

  .header.is-nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .header.is-nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .header.is-nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .hero-slash {
    height: auto;
    min-height: 0;
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 60px;
    background-color: #27314c;
  }

  .slash-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }

  .slash-text-box {
    width: 100%;
    max-width: none;
    gap: 24px;
  }

  /* 左（上）をダーク、右下に写真が入る斜め構成（PCと同系統） */
  .hero-bg-layer {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 32%, 100% 8%, 100% 100%, 0 100%);
    background-position: center right;
    opacity: 0.5;
    transform: none;
  }

  .hero-bg-overlay {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 32%, 100% 8%, 100% 100%, 0 100%);
    background: linear-gradient(
      128deg,
      rgba(11, 17, 32, 0.97) 0%,
      rgba(11, 17, 32, 0.88) 38%,
      rgba(11, 17, 32, 0.55) 72%,
      rgba(11, 17, 32, 0.35) 100%
    );
    opacity: 1;
  }

  .slash-line {
    /* display: block; */
    display: none;
    /* top: -15%;
    right: 15%;
    width: 3px;
    height: 130%; */
  }

  /* .hero-slash .slash-line {
    animation: hero-slash-line-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  } */

  .slash-card-box {
    width: 100%;
  }

  .slash-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* --- Services Section (Bento Grid) --- */
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .card-wide {
    grid-column: span 1;
  }

  .bento-desc {
    transform: none;
    opacity: 1;
  }

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

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

  .nav-toggle {
    width: 40px;
    height: 40px;
  }

  .section {
    padding: 80px 0;
  }

  /* --- News Section --- */
  .news-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 0;
  }

  .news-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    margin-bottom: 16px;
    margin-right: 0;
  }

  .news-meta {
    width: auto;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .news-meta time {
    margin-bottom: 0;
  }

  .news-body {
    padding-right: 0;
  }
}

@media (max-width: 480px){
  .footer-nav ul{
      flex-direction: column;
  }

  .page-top {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }
}

/* --- 事業紹介ページ (service.html) --- */
@media (max-width: 992px) {
  .page-header {
    height: 300px;
    align-items: flex-end;
  }

  .page-header-content {
    padding-bottom: 40px;
  }

  .page-header-slash {
    display: none;
  }

  .biz-overview-grid,
  .staffing-grid,
  .quality-grid {
    grid-template-columns: 1fr;
  }

  .biz-overview-card {
    flex-direction: column;
    gap: 16px;
    padding: 32px 24px;
  }

  .biz-overview-num {
    width: auto;
  }

  .service-detail-block {
    flex-direction: column;
    gap: 24px;
    padding: 40px 0;
  }

  .service-detail-label {
    width: auto;
  }

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

  .staffing-card {
    padding: 32px 24px;
  }

  .quality-card {
    padding: 32px 24px;
  }

  /* --- 会社案内ページ (company.html) --- */
  .access-grid {
    grid-template-columns: 1fr;
  }

  .access-map-wrap,
  .access-map {
    min-height: 280px;
  }

  .company-philosophy-card {
    padding: 32px 24px;
  }

  .access-info {
    padding: 32px 24px;
  }
}

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

  /* Spec Table：行ごとのカード表示（data-label 利用） */
  .spec-table thead {
    display: none;
  }

  .spec-table,
  .spec-table tbody {
    display: block;
    width: 100%;
  }

  .spec-table tr {
    display: block;
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
  }

  .spec-table tr:last-child {
    border-bottom: none;
  }

  .spec-table td {
    display: block;
    width: 100%;
    padding: 0;
    border-bottom: none;
    font-size: var(--fs-spec-td);
    word-break: normal;
    overflow-wrap: break-word;
  }

  .spec-table td + td {
    margin-top: 12px;
  }

  /* 設備名：カードの見出し */
  .spec-table td:first-child {
    font-size: var(--fs-spec-card-title);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.5;
  }

  .spec-table td:first-child::before {
    display: none;
  }

  /* 保有数・備考：ラベル＋値 */
  .spec-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    font-family: var(--font-jp);
  }

  .spec-table td:nth-child(2) {
    font-family: var(--font-en);
    font-weight: 700;
    color: var(--color-accent);
    font-size: var(--fs-spec-td-accent);
  }

  .spec-table td:nth-child(3) {
    color: var(--color-text-muted);
    font-size: var(--fs-spec-td);
    line-height: 1.6;
  }

  .company-table th,
  .company-table td {
    display: block;
    width: 100%;
    padding: 14px 20px;
  }

  .company-table th {
    padding-bottom: 4px;
    border-bottom: none;
    background: transparent;
  }

  .company-table td {
    padding-top: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
  }

  .company-table tr:last-child td {
    border-bottom: none;
    padding-bottom: 14px;
  }

  .access-list-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}