/* ===================================================================
   common-theme.css - Unified Theme Design Tokens & Components
   株式会社シグナス コーポレートサイト 統合スタイルシート
   =================================================================== */

/* ===================================================================
   CSS Variables (Design Tokens)
   =================================================================== */
:root {
  /* Brand Colors */
  --color-brand: #1C37B8;
  --color-mint: #1C37B8;
  --color-accent: #EF5285;
  --color-attention: #db6e84;
  
  /* Text Colors */
  --color-text: #6f6e6f;
  --color-heading: #1b2430;
  --color-muted: #9aa3ad;
  
  /* Background Colors */
  --color-white: #FFFFFF;
  --color-nearwhite: #f9f9f9;
  --color-frame: #edf1f8;
  --color-bgsoft: #f7e9f7;
  
  /* Gray Scale */
  --color-gray-100: #f1f1f1;
  --color-gray-200: #CCCCCC;
  --color-gray-500: #555555;
  --color-gray-600: #666666;
  --color-navy: #364454;
  
  /* Specific UI Colors */
  --color-breadcrumb-sep: #D1D1D1;
  --color-table-header-bg: #F9EEFC;
  --color-footer-bg: #F9EEFC;
  
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
               "Noto Sans Japanese", "Meiryo", "Hiragino Kaku Gothic Pro W3",
               "MS PGothic", "Osaka", sans-serif;
  --font-quicksand: 'Quicksand', system-ui, -apple-system, "Segoe UI", sans-serif;
  
  /* Spacing */
  --space-section-pt: 80px;
  --space-section-pb: 104px;
  
  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 10px;
  --radius-lg: 12px;
  
  /* Hero Offset */
  --hero-offset-pc: 80px;
  --hero-offset-sp: 64px;
  
  /* Flow Design (Recruit) */
  --flow-bg: #ffffff;
  --flow-frame: #edf1f8;
  --flow-accent: #1C37B8;
  --flow-mint: #81cbcc;
  --flow-text: #6f6e6f;
  --flow-note: #9aa3ad;
  --flow-shadow: 0 6px 18px rgba(28, 55, 184, 0.06);
}

@media (max-width: 767.98px) {
  :root {
    --hero-offset: var(--hero-offset-sp);
  }
}

@media (min-width: 768px) {
  :root {
    --hero-offset: var(--hero-offset-pc);
  }
}


/* ===================================================================
   Hero Section - Unified Styling
   =================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  z-index: 0;
  isolation: isolate;
  margin-top: var(--hero-offset-pc);
}

@media (max-width: 767.98px) {
  .hero {
    margin-top: var(--hero-offset-sp);
  }
}

/* Hero Height - All Pages Unified with Aspect Ratio */
#top_main.hero,
#service_main01.hero,
#recruit_main01.hero,
#recruit_detail_main.hero,
#privacy_main01.hero,
#contact_main01.hero,
#top_vision {
  /* Removed min-height to use aspect-ratio instead */
}

/* PC: aspect-ratio based on 2580x640 */
@media (min-width: 1025px) {
  #top_main.hero,
  #service_main01.hero,
  #recruit_main01.hero,
  #recruit_detail_main.hero,
  #privacy_main01.hero,
  #contact_main01.hero,
  #top_vision {
    aspect-ratio: 2580 / 640;
  }
}

/* Tablet: aspect-ratio based on 1532x512 */
@media (min-width: 768px) and (max-width: 1024.98px) {
  #top_main.hero,
  #service_main01.hero,
  #recruit_main01.hero,
  #recruit_detail_main.hero,
  #privacy_main01.hero,
  #contact_main01.hero,
  #top_vision {
    aspect-ratio: 1532 / 512;
  }
}

/* Smartphone: aspect-ratio based on 750x512 */
@media (max-width: 767.98px) {
  #top_main.hero,
  #service_main01.hero,
  #recruit_main01.hero,
  #recruit_detail_main.hero,
  #privacy_main01.hero,
  #contact_main01.hero,
  #top_vision {
    aspect-ratio: 750 / 512;
  }
}

/* Hero Background Image */
.hero > picture.hero__bg,
.hero > picture.hero__bg > img,
.hero > picture.hero-picture,
.hero > picture.hero-picture > img,
.hero > picture,
.hero > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Vision Section - Keep child visible at all browser sizes */
#top_vision > picture,
#top_vision > picture > img {
  object-position: center 65%;
}

.hero > picture {
  z-index: -1;
}

/* Hero Heading - Unified for All Pages */
#recruit_main01.hero .text_area,
#privacy_main01.hero .text_area,
#service_main01.hero .text_area,
#recruit_detail_main.hero .text_area,
#contact_main01.hero .text_area {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%);
  width: min(90%, 1100px);
  margin: 0;
  text-align: center;
  z-index: 2;
}

#recruit_main01 .text_area h2,
#privacy_main01 .text_area h2,
#service_main01 .text_area h2,
#recruit_detail_main .text_area h2,
#contact_main01 .text_area h2 {
  margin: 0;
  line-height: 1.35;
  font-weight: 400;
  text-shadow: 0 3px 10px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.40);
  color: #fff;
}

/* Hero Heading - English Text (Quicksand) */
#recruit_main01 .text_area h2 .en,
#privacy_main01 .text_area h2 .en,
#service_main01 .text_area h2 .en,
#recruit_detail_main .text_area h2 .en,
#contact_main01 .text_area h2 .en {
  display: block;
  font-family: var(--font-quicksand);
  letter-spacing: 0.25em;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 400;
}

/* Hero Heading - Japanese Text */
#recruit_main01 .text_area h2 .ja,
#privacy_main01 .text_area h2 .ja,
#service_main01 .text_area h2 .ja,
#recruit_detail_main .text_area h2 .ja,
#contact_main01 .text_area h2 .ja {
  display: block;
  font-family: var(--font-sans);
  letter-spacing: 0.20em;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 400;
}

/* Text Stroke Support */
@supports (-webkit-text-stroke: 1px black) {
  #recruit_main01 .text_area h2 .en,
  #recruit_main01 .text_area h2 .ja,
  #privacy_main01 .text_area h2 .en,
  #privacy_main01 .text_area h2 .ja,
  #service_main01 .text_area h2 .en,
  #service_main01 .text_area h2 .ja,
  #recruit_detail_main .text_area h2 .en,
  #recruit_detail_main .text_area h2 .ja,
  #contact_main01 .text_area h2 .en,
  #contact_main01 .text_area h2 .ja {
    -webkit-text-stroke: 0.3px rgba(0,0,0,.35);
  }
}

/* Hero Heading Position Adjustments */
@media (max-width: 767.98px) {
  #recruit_main01.hero .text_area,
  #privacy_main01.hero .text_area,
  #service_main01.hero .text_area,
  #recruit_detail_main.hero .text_area,
  #contact_main01.hero .text_area {
    top: 34%;
  }
}

@media (min-width: 768px) and (max-width: 1024.98px) {
  #recruit_main01.hero .text_area,
  #privacy_main01.hero .text_area,
  #service_main01.hero .text_area,
  #recruit_detail_main.hero .text_area,
  #contact_main01.hero .text_area {
    top: 33%;
  }
}


/* ===================================================================
   Table Styling - Unified
   =================================================================== */

/* Company Info Table (index.html) */
#top_company .company_list th {
  background-color: var(--color-table-header-bg) !important;
}

/* Job Detail Table (recruit-detail.html) - Match company table style */
.job-detail-table th {
  background-color: var(--color-table-header-bg) !important;
  color: var(--color-heading);
  font-weight: 400;
  font-size: clamp(14px, 1.8vw, 16px);
  letter-spacing: 0.1em;
  padding: 20px 24px;
  text-align: left;
  vertical-align: top;
}

/* Recruit & Privacy Form Sections */
#recruit_form .recruit_form,
#privacy_form .privacy_form {
  background-color: var(--color-table-header-bg) !important;
}


/* ===================================================================
   Button Styling - Unified
   =================================================================== */

/* Contact Buttons */
#common_contact .btn_contact {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
  border-color: var(--color-accent) !important;
}

#common_contact .common_contact_other a:hover .btn_contact,
#common_contact .common_contact_other a:focus .btn_contact,
#common_contact .common_contact_recruit a:hover .btn_contact,
#common_contact .common_contact_recruit a:focus .btn_contact {
  background-color: var(--color-accent) !important;
}

/* Recruit/Privacy Detail Buttons */
#top_recruit .btn a,
#top_privacypolicy .btn a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.6em 1.8em;
  min-width: 7rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  word-break: keep-all;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

#top_recruit .btn a .btn_more,
#top_privacypolicy .btn a .btn_more {
  color: inherit;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  letter-spacing: inherit;
  display: inline-block;
  line-height: 1;
}

#top_recruit .btn a .btn_more::before,
#top_recruit .btn a .btn_more::after,
#top_privacypolicy .btn a .btn_more::before,
#top_privacypolicy .btn a .btn_more::after {
  content: none !important;
}

#top_recruit .btn a:hover,
#top_privacypolicy .btn a:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

/* Button Responsive Adjustments */
@media (max-width: 480px) {
  #top_recruit .btn a,
  #top_privacypolicy .btn a {
    padding: 0.55em 1.4em;
    min-width: 6.2rem;
    font-size: clamp(14px, 3.6vw, 16px);
  }
}

@media (min-width: 768px) and (max-width: 1024.98px) {
  #top_recruit .btn a,
  #top_privacypolicy .btn a {
    padding: 0.6em 1.6em;
  }
}


/* ===================================================================
   Breadcrumb Styling
   =================================================================== */
#breadcrumb,
#breadcrumb .breadcrumb,
#breadcrumb li,
#breadcrumb a {
  color: var(--color-brand);
}

#breadcrumb a:link,
#breadcrumb a:visited,
#breadcrumb a:hover,
#breadcrumb a:active {
  color: var(--color-brand);
}

.breadcrumb li:after {
  color: #464747;
}


/* ===================================================================
   Recruit Flow Section
   =================================================================== */
#recruit_flow {
  width: 100%;
  margin: 0 auto 40px;
}

#recruit_flow > section {
  width: min(1100px, 90%);
  margin: 0 auto;
  padding: 32px 0 24px;
}

#recruit_flow h2 {
  text-align: center;
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}

.flow-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

.flow-item {
  display: grid;
  grid-template-columns: 112px 120px 1fr;
  align-items: stretch;
  background: var(--flow-bg);
  border: 1px solid var(--flow-frame);
  border-radius: var(--radius-lg);
  box-shadow: var(--flow-shadow);
}

.flow-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #f7f9ff;
  border-right: 1px solid var(--flow-frame);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  min-height: 120px;
}

.flow-badge .step {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--flow-accent);
  background: var(--color-white);
  border: 1px dashed var(--flow-accent);
  border-radius: 999px;
  padding: 6px 10px;
}

.flow-badge .num {
  display: block;
  font-family: var(--font-quicksand);
  font-weight: 700;
  font-size: 28px;
  color: var(--flow-accent);
}

.flow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 120px;
}

.flow-icon img {
  max-width: 96px;
  max-height: 96px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.flow-body {
  padding: 22px 24px;
  color: var(--flow-text);
}

.flow-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.flow-head h3 {
  font-size: 20px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
}

.flow-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--flow-frame);
}

.flow-content p {
  margin: 0 0 10px;
  line-height: 1.9;
}

.flow-ol {
  margin: 0 0 10px;
  padding-left: 1.2em;
  line-height: 1.9;
  list-style-position: outside;
}

.flow-ol li {
  margin-left: 0;
}

.flow-content .note {
  color: var(--flow-note);
  font-size: 0.92em;
}

/* Flow Hover Effects */
@media (hover: hover) {
  .flow-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .flow-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(28, 55, 184, 0.10);
  }
}

/* Flow Tablet Adjustments */
@media (min-width: 768px) and (max-width: 1024.98px) {
  .flow-item {
    grid-template-columns: 112px 120px 1fr;
  }
}

/* Flow Mobile Adjustments */
@media (max-width: 767.98px) {
  .flow-item {
    grid-template-columns: 1fr;
  }
  
  .flow-badge {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--flow-frame);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    order: 1;
  }
  
  .flow-icon {
    order: 2;
    padding: 12px 16px;
    min-height: auto;
  }
  
  .flow-icon img {
    max-width: 72px;
  }
  
  .flow-body {
    order: 3;
    padding: 16px;
  }
  
  .flow-head h3 {
    font-size: 18px;
  }
}

@media (min-width: 768px) {
  #recruit_flow {
    margin-bottom: 48px;
  }
}


/* ===================================================================
   Section Title Styling
   =================================================================== */
.section-title {
  width: min(1100px, 90%);
  margin: 40px auto 16px;
  text-align: center;
  letter-spacing: 0.2em;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  color: var(--color-text);
}

#recruit_contents {
  margin-top: 12px;
}

#recruit_form section {
  margin-top: 0 !important;
  padding-top: 12px;
}


/* ===================================================================
   Common Page Section Layout
   =================================================================== */

/* Standard content area for all pages */
.page-section {
  width: 100%;
  margin: 0 auto 60px;
}

.page-section > section {
  width: min(1100px, 90%);
  margin: 0 auto;
  padding: 40px 0;
}

/* Page intro text */
.page-intro {
  text-align: center;
  margin-bottom: 48px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-intro p {
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.9;
  color: var(--color-text);
  margin-bottom: 8px;
}

.page-intro p:last-child {
  margin-bottom: 0;
}

/* Responsive adjustments for page sections */
@media (max-width: 767.98px) {
  .page-section > section {
    padding: 32px 0;
  }
  
  .page-intro {
    margin-bottom: 32px;
  }
}


/* ===================================================================
   Common Content Table Styling
   =================================================================== */

/* Base table style for content tables */
.content-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  background: var(--color-white);
  border: 1px solid var(--color-frame);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.content-table th,
.content-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-frame);
}

.content-table tr:last-child th,
.content-table tr:last-child td {
  border-bottom: none;
}

.content-table th {
  width: 200px;
  background: var(--color-table-header-bg);
  color: var(--color-heading);
  font-weight: 600;
  font-size: clamp(14px, 1.8vw, 16px);
  letter-spacing: 0.05em;
  vertical-align: top;
}

.content-table td {
  color: var(--color-text);
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.8;
  vertical-align: top;
}

/* Responsive table for mobile */
@media (max-width: 767.98px) {
  .content-table {
    border: none;
  }
  
  .content-table tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--color-frame);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  
  .content-table th,
  .content-table td {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--color-frame);
    padding: 12px 16px;
  }
  
  .content-table th {
    font-weight: 600;
    text-align: left;
  }
  
  .content-table tr:last-child th,
  .content-table tr:last-child td {
    border-bottom: 1px solid var(--color-frame);
  }
  
  .content-table td:last-child {
    border-bottom: none;
  }
}


/* ===================================================================
   Common Info Box Component
   =================================================================== */

.info-box {
  background: #f7f9ff;
  border-left: 4px solid var(--color-brand);
  padding: 20px 24px;
  margin: 24px 0;
  border-radius: var(--radius-sm);
}

.info-box p {
  margin: 0 0 10px;
  line-height: 1.8;
  color: var(--color-text);
}

.info-box p:last-child {
  margin-bottom: 0;
}

.info-box strong {
  color: var(--color-heading);
  font-weight: 600;
}

.info-box a {
  color: var(--color-brand);
  text-decoration: underline;
}


/* ===================================================================
   Section Title Styling
   =================================================================== */
.section-title {
  width: min(1100px, 90%);
  margin: 40px auto 16px;
  text-align: center;
  letter-spacing: 0.2em;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  color: var(--color-text);
}

#recruit_contents {
  margin-top: 12px;
}

#recruit_form section {
  margin-top: 0 !important;
  padding-top: 12px;
}


/* ===================================================================
   Text Area Centering
   =================================================================== */
#top_recruit .text_area,
#top_privacypolicy .text_area {
  max-width: 760px;
  width: min(90%, 760px);
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#common_contact section > p:first-of-type {
  max-width: 900px;
  width: min(92%, 900px);
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.text_area {
  text-align: inherit;
}


/* ===================================================================
   Contact & Footer - Background Colors (All Breakpoints)
   =================================================================== */

/* Contact Section - White Background */
#common_contact {
  background-color: var(--color-white) !important;
}

#common_contact section {
  text-align: center;
}

/* Footer - Pink Background */
#footer {
  background-color: #e4efff !important;
  color: var(--color-text);
}

#footer a {
  color: var(--color-text);
}

.copyright {
  background-color: #e4efff !important;
  margin: 0;
  padding: 20px 0;
}


/* ===================================================================
   Utility Classes
   =================================================================== */

/* Anchor Fix for Smooth Scrolling with Fixed Header */
.anchor-fix {
  display: block;
  position: relative;
  height: 0;
  scroll-margin-top: calc(var(--hero-offset) + 16px);
}



/* ===================================================================
   Contact Buttons - Layout (Responsive)
   =================================================================== */

/* Mobile (〜767px) */
@media screen and (max-width: 767px) {
  .btn_common_contact {
    width: 90%;
    margin: 56px auto 0;
    text-align: center;
  }

  .common_contact_recruit,
  .common_contact_other {
    width: 100%;
    float: none;
    margin: 0 0 16px 0;
    text-align: center;
  }

  .common_contact_recruit a,
  .common_contact_other a {
    display: inline-block;
    width: 100%;
  }
}

/* Tablet (768px〜1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .btn_common_contact {
    width: 90%;
    max-width: 800px;
    margin: 56px auto 0;
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .common_contact_recruit,
  .common_contact_other {
    width: 48%;
    float: none;
    margin: 0;
    text-align: center;
  }

  .common_contact_recruit a,
  .common_contact_other a {
    display: inline-block;
    width: 100%;
  }
}

/* PC (1025px以上) */
@media screen and (min-width: 1025px) {
  .btn_common_contact {
    width: 90%;
    max-width: 800px;
    margin: 56px auto 0;
    display: flex;
    justify-content: center;
    gap: 24px;
  }

  .common_contact_recruit,
  .common_contact_other {
    width: 340px;
    float: none;
    margin: 0;
    text-align: center;
  }

  .common_contact_recruit a,
  .common_contact_other a {
    display: inline-block;
    width: 100%;
  }

  .common_contact_recruit span,
  .common_contact_other span {
    display: block;
    text-align: center;
  }
}