/*
|---------------------------------------------------------------
| qinc2026-common.css - 共通スタイル（変数・レイアウト・ベース）
|---------------------------------------------------------------
*/

/* ==========================================================================
   Variables
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

:root {
  /* Header */
  --header-height: 81px;
  --header-height-sp: 60px;
  --header-bg: rgba(255, 255, 255, 0.9);
  --header-breakpoint: 1200px;
  /* Colors */
  --color-blue01: #020441;
  --color-blue02: #053271;
  --color-blue03: #003176;
  --color-blue-grey: #e6e6eb;
  --color-blue-grey02: #94a3b8;
  --color-bg-light: #f7f7f9;
  --color-bg-footer: #f7f7f9;
  --color-bg-btob: #e6f0f6;
  --color-white: #ffffff;
  --color-gold: #c5a059;
  --color-blue-light: #dbeafe;
  --color-bg-beige: #F8F3EB;

  /* Typography */
  --font-family-ja: "Noto Sans JP", sans-serif;
  --font-family-en: "Montserrat", sans-serif;

  /* Layout */
  --container-max-width: 1280px;
  --container-padding-x: 24px;
  --container-padding-x-sp: 16px;

  /* Section Spacing */
  --section-padding-y: 150px;
  --section-padding-y-md: 100px;
  --section-padding-y-sp: 80px;

  /* Page Content Spacing (legal / contact-form / contact-thanks) */
  --page-content-padding-y: 80px;
  --page-content-padding-y-md: 60px;
  --page-content-padding-y-sp: 48px;

  /* Footer Spacing */
  --footer-padding-y: 40px;
  --footer-gap-columns: 48px;
  --footer-gap-sections: 64px;
}

/* ==========================================================================
   Reset (bootstrap-reboot.min.css の代替)
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
body {
  font-family: var(--font-family-ja);
  color: var(--color-blue01);
}

body.single,
body.archive-column,
body.archive-works,
body.page-legal,
body.page-news,
body.page-contact {
  background-color: #f0f1f5;
}

body.single-service {
  background-color: #fff;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.main {
  display: block;
  padding: 0;
  position: relative;
}

/* qinc2026セクション内のリンク（ボタンを除く） */
.site-header a:not([class*="__btn"]):not([class*="-btn"]):not([class*="__link"]),
.site-header__mobile-nav a:not([class*="__btn"]):not([class*="-btn"]),
.page-hero a:not([class*="__btn"]):not([class*="-btn"]),
.section-ecosystem a:not([class*="__btn"]):not([class*="-btn"]),
.section-services a:not([class*="__btn"]):not([class*="-btn"]),
.section-btob a:not([class*="__btn"]):not([class*="-btn"]),
.section-cta a:not([class*="__btn"]):not([class*="-btn"]),
.about-challenges a:not([class*="__btn"]):not([class*="-btn"]),
.about-solution a:not([class*="__btn"]):not([class*="-btn"]),
.about-team a:not([class*="__btn"]):not([class*="-btn"]),
.company-message a:not([class*="__btn"]):not([class*="-btn"]),
.company-info a:not([class*="__btn"]):not([class*="-btn"]),
.company-access a:not([class*="__btn"]):not([class*="-btn"]),
.contact-cards a:not([class*="__btn"]):not([class*="-btn"]):not([class*="-link"]),
.page-content a:not([class*="__btn"]):not([class*="-btn"]):not([class*="__link"]),
.top-hero a:not([class*="__btn"]):not([class*="-btn"]),
.top-challenges a:not([class*="__btn"]):not([class*="-btn"]),
.top-services a:not([class*="__btn"]):not([class*="-btn"]),
.top-results a:not([class*="__btn"]):not([class*="-btn"]),
.top-engineering a:not([class*="__btn"]):not([class*="-btn"]),
.top-news a:not([class*="__btn"]):not([class*="-btn"]),
.top-knowledge a:not([class*="__btn"]):not([class*="-btn"]),
.top-recruit a:not([class*="__btn"]):not([class*="-btn"]),
.top-cta a:not([class*="__btn"]):not([class*="-btn"]),
.news-archive a:not([class*="__btn"]):not([class*="-btn"]),
.miga-hero a:not([class*="__btn"]):not([class*="-btn"]),
.miga-overview a:not([class*="__btn"]):not([class*="-btn"]),
.miga-reasons a:not([class*="__btn"]):not([class*="-btn"]),
.miga-brand-score a:not([class*="__btn"]):not([class*="-btn"]),
.miga-area a:not([class*="__btn"]):not([class*="-btn"]),
.miga-achievements a:not([class*="__btn"]):not([class*="-btn"]),
.miga-pricing a:not([class*="__btn"]):not([class*="-btn"]),
.miga-other-plans a:not([class*="__btn"]):not([class*="-btn"]),
.btob-hero a:not([class*="__btn"]):not([class*="-btn"]),
.btob-overview a:not([class*="__btn"]):not([class*="-btn"]),
.btob-service a:not([class*="__btn"]):not([class*="-btn"]),
.btob-customize a:not([class*="__btn"]):not([class*="-btn"]),
.btob-pricing a:not([class*="__btn"]):not([class*="-btn"]),
.kachinote-hero a:not([class*="__btn"]):not([class*="-btn"]),
.kachinote-intro a:not([class*="__btn"]):not([class*="-btn"]),
.kachinote-problems a:not([class*="__btn"]):not([class*="-btn"]),
.kachinote-method a:not([class*="__btn"]):not([class*="-btn"]),
.kachinote-output a:not([class*="__btn"]):not([class*="-btn"]),
.kachinote-plan a:not([class*="__btn"]):not([class*="-btn"]),
.site-footer a:not([class*="__btn"]):not([class*="-btn"]) {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.site-header a:not([class*="__btn"]):not([class*="-btn"]):not([class*="__link"]):hover,
.site-header__mobile-nav a:not([class*="__btn"]):not([class*="-btn"]):hover,
.page-hero a:not([class*="__btn"]):not([class*="-btn"]):hover,
.section-ecosystem a:not([class*="__btn"]):not([class*="-btn"]):hover,
.section-services a:not([class*="__btn"]):not([class*="-btn"]):hover,
.section-btob a:not([class*="__btn"]):not([class*="-btn"]):hover,
.section-cta a:not([class*="__btn"]):not([class*="-btn"]):hover,
.about-challenges a:not([class*="__btn"]):not([class*="-btn"]):hover,
.about-solution a:not([class*="__btn"]):not([class*="-btn"]):hover,
.about-team a:not([class*="__btn"]):not([class*="-btn"]):hover,
.company-message a:not([class*="__btn"]):not([class*="-btn"]):hover,
.company-info a:not([class*="__btn"]):not([class*="-btn"]):hover,
.company-access a:not([class*="__btn"]):not([class*="-btn"]):hover,
.contact-cards a:not([class*="__btn"]):not([class*="-btn"]):not([class*="-link"]):hover,
.contact-content a:not([class*="__btn"]):not([class*="-btn"]):not([class*="__link"]):hover,
.top-hero a:not([class*="__btn"]):not([class*="-btn"]):hover,
.top-challenges a:not([class*="__btn"]):not([class*="-btn"]):hover,
.top-services a:not([class*="__btn"]):not([class*="-btn"]):hover,
.top-results a:not([class*="__btn"]):not([class*="-btn"]):hover,
.top-engineering a:not([class*="__btn"]):not([class*="-btn"]):hover,
.top-news a:not([class*="__btn"]):not([class*="-btn"]):hover,
.top-knowledge a:not([class*="__btn"]):not([class*="-btn"]):hover,
.top-recruit a:not([class*="__btn"]):not([class*="-btn"]):hover,
.top-cta a:not([class*="__btn"]):not([class*="-btn"]):hover,
.news-archive a:not([class*="__btn"]):not([class*="-btn"]):hover,
.miga-hero a:not([class*="__btn"]):not([class*="-btn"]):hover,
.miga-overview a:not([class*="__btn"]):not([class*="-btn"]):hover,
.miga-reasons a:not([class*="__btn"]):not([class*="-btn"]):hover,
.miga-brand-score a:not([class*="__btn"]):not([class*="-btn"]):hover,
.miga-area a:not([class*="__btn"]):not([class*="-btn"]):hover,
.miga-achievements a:not([class*="__btn"]):not([class*="-btn"]):hover,
.miga-pricing a:not([class*="__btn"]):not([class*="-btn"]):hover,
.miga-other-plans a:not([class*="__btn"]):not([class*="-btn"]):hover,
.btob-hero a:not([class*="__btn"]):not([class*="-btn"]):hover,
.btob-overview a:not([class*="__btn"]):not([class*="-btn"]):hover,
.btob-service a:not([class*="__btn"]):not([class*="-btn"]):hover,
.btob-customize a:not([class*="__btn"]):not([class*="-btn"]):hover,
.btob-pricing a:not([class*="__btn"]):not([class*="-btn"]):hover,
.kachinote-hero a:not([class*="__btn"]):not([class*="-btn"]):hover,
.kachinote-intro a:not([class*="__btn"]):not([class*="-btn"]):hover,
.kachinote-problems a:not([class*="__btn"]):not([class*="-btn"]):hover,
.kachinote-method a:not([class*="__btn"]):not([class*="-btn"]):hover,
.kachinote-output a:not([class*="__btn"]):not([class*="-btn"]):hover,
.kachinote-plan a:not([class*="__btn"]):not([class*="-btn"]):hover,
.site-footer a:not([class*="__btn"]):not([class*="-btn"]):hover {
  text-decoration: none;
}

/* ==========================================================================
   Layout - Container (WordPress標準に準拠)
   ========================================================================== */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-x);
  width: 100%;
}

.container--fluid {
  max-width: 100%;
}

/* ==========================================================================
   Layout - Section
   ========================================================================== */
.section {
  padding: var(--section-padding-y) 0;
}

/* Section Variants */
.section--light {
  background-color: var(--color-bg-light);
}

.section--dark {
  background-color: var(--color-blue01);
  color: var(--color-white);
}

/* Section Spacing Variants */
.section--compact {
  padding: calc(var(--section-padding-y) * 0.5) 0;
}

.section--flush-top {
  padding-top: 0;
}

.section--flush-bottom {
  padding-bottom: 0;
}

/* ==========================================================================
   Layout - Responsive
   ========================================================================== */
@media screen and (max-width: 1200px) {
  html {
    scroll-padding-top: var(--header-height-sp);
  }
}

@media screen and (max-width: 1024px) {
  .section {
    padding: var(--section-padding-y-md) 0;
  }

  .section--compact {
    padding: calc(var(--section-padding-y-md) * 0.5) 0;
  }
}

@media screen and (max-width: 768px) {
  .container {
    padding: 0 var(--container-padding-x-sp);
  }

  .section {
    padding: var(--section-padding-y-sp) 0;
  }

  .section--compact {
    padding: calc(var(--section-padding-y-sp) * 0.5) 0;
  }
}

/* ==========================================================================
   Utility
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.inline-block {
  display: inline-block;
}