/* ==========================================================================
   QES Corporate Design System — Notion-inspired
   ========================================================================== */

:root {
  /* Primary — dark navy for hero/dark sections */
  --qes-primary: #191919;
  --qes-primary-light: #2b2b2b;
  --qes-primary-dark: #0e0e0e;

  /* Accent — Notion blue */
  --qes-accent: #2383e2;
  --qes-accent-light: #529CCA;
  --qes-accent-dark: #1a6bb5;

  /* Cloud partner colors */
  --qes-microsoft: #0078d4;
  --qes-aws: #ff9900;
  --qes-google: #4285f4;

  /* Neutral — Notion palette */
  --qes-bg: #ffffff;
  --qes-bg-secondary: #f7f7f5;
  --qes-surface: #ffffff;
  --qes-text: #37352f;
  --qes-text-muted: #787774;
  --qes-border: #e3e3e0;

  /* Semantic */
  --qes-success: #2eaadc;
  --qes-warning: #cb912f;
  --qes-danger: #e03e3e;

  /* Spacing — generous like Notion */
  --qes-space-xs: 0.25rem;
  --qes-space-sm: 0.5rem;
  --qes-space-md: 1rem;
  --qes-space-lg: 1.5rem;
  --qes-space-xl: 2.5rem;
  --qes-space-2xl: 4rem;
  --qes-space-3xl: 6rem;
  --qes-space-4xl: 8rem;

  /* Radius — softer, Notion-like */
  --qes-radius-sm: 4px;
  --qes-radius-md: 8px;
  --qes-radius-lg: 12px;
  --qes-radius-xl: 16px;
  --qes-radius-full: 9999px;

  /* Shadow — minimal, Notion-like */
  --qes-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --qes-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --qes-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --qes-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.1);

  /* Transition */
  --qes-transition: 0.2s ease;
  --qes-transition-fast: 0.12s ease;
}

/* ==========================================================================
   Typography
   ========================================================================== */

html { overflow-x: hidden; }

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 400;
  line-height: 1.75;
  color: var(--qes-text);
  background-color: var(--qes-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "palt";
}

body.qes-fullwidth .site-content { display: block !important; max-width: 100% !important; width: 100% !important; }
body.qes-fullwidth .inside-article { padding: 0 !important; max-width: 100% !important; }
body.qes-fullwidth .entry-content { max-width: 100% !important; }
body.qes-fullwidth .content-area { width: 100% !important; max-width: 100% !important; float: none !important; }
body.qes-fullwidth #primary { width: 100% !important; max-width: 100% !important; }
body.qes-fullwidth .site-content .grid-container { max-width: 100% !important; padding: 0 !important; }
body.qes-fullwidth .qes-section,
body.qes-fullwidth .qes-hero,
body.qes-fullwidth .qes-partners,
body.qes-fullwidth .qes-cta { width: 100% !important; max-width: 100% !important; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--qes-text);
}

h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

/* ==========================================================================
   Layout
   ========================================================================== */

.qes-container { max-width: 1200px; margin-inline: auto; padding-inline: var(--qes-space-xl); }
.qes-section { padding-block: var(--qes-space-4xl); }
.qes-section--gray { background-color: var(--qes-bg-secondary); }
.qes-section--dark { background-color: var(--qes-primary); color: #ffffff; }
.qes-section--dark h2, .qes-section--dark h3, .qes-section--dark h4 { color: #ffffff; }

.qes-grid { display: grid; gap: var(--qes-space-lg); }
.qes-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.qes-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.qes-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.qes-flex { display: flex; gap: var(--qes-space-md); }
.qes-flex--center { align-items: center; justify-content: center; }
.qes-flex--between { align-items: center; justify-content: space-between; }
.qes-text-center { text-align: center; }

/* ==========================================================================
   Section Header — clean, no underline
   ========================================================================== */

.qes-section-header { text-align: left; margin-bottom: var(--qes-space-3xl); }
.qes-section-header h2 { position: relative; display: block; padding-bottom: 0; font-weight: 700; letter-spacing: -0.02em; }
.qes-section-header h2::after { display: none; }
.qes-section-header p { color: var(--qes-text-muted); font-size: 1.1rem; margin-top: var(--qes-space-md); max-width: 640px; margin-inline: 0; line-height: 1.8; }

/* ==========================================================================
   Hero — Notion dark style
   ========================================================================== */

.qes-hero {
  position: relative; min-height: 50vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #191919; color: #ffffff;
}

.qes-hero--has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }
.qes-hero--has-bg::before { background: rgba(25,25,25,0.82) !important; animation: none !important; }
.qes-hero--has-bg .qes-hero__title, .qes-hero--has-bg .qes-hero__subtitle { text-shadow: none; }
.qes-hero--has-bg .qes-btn { box-shadow: none; }

.qes-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(35,131,226,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 20%, rgba(100,80,255,0.08) 0%, transparent 60%);
  animation: none;
}

.qes-hero__content { position: relative; z-index: 1; max-width: 900px; text-align: center; margin-inline: auto; }
.qes-hero__title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; line-height: 1.15; margin-bottom: var(--qes-space-lg); color: #ffffff; letter-spacing: -0.02em; }
.qes-hero__subtitle { font-size: clamp(1rem, 1.8vw, 1.2rem); color: rgba(255,255,255,0.75); line-height: 1.9; margin-bottom: var(--qes-space-xl); max-width: 680px; margin-inline: auto; }
.qes-hero__cta { display: inline-flex; gap: var(--qes-space-md); flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.qes-btn { display: inline-flex; align-items: center; gap: var(--qes-space-sm); padding: 0.75rem 1.75rem; border: none; border-radius: var(--qes-radius-md); font-family: inherit; font-size: 0.95rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all var(--qes-transition); white-space: nowrap; }
.qes-btn--primary { background: var(--qes-accent); color: #ffffff; }
.qes-btn--primary:hover { background: var(--qes-accent-dark); box-shadow: var(--qes-shadow-md); }
.qes-btn--outline { background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.35); }
.qes-btn--outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }
.qes-btn--dark { background: var(--qes-text); color: #ffffff; }
.qes-btn--dark:hover { background: var(--qes-primary-light); box-shadow: var(--qes-shadow-md); }

/* ==========================================================================
   Cards — border-focused, minimal shadow
   ========================================================================== */

.qes-card { background: var(--qes-surface); border-radius: var(--qes-radius-lg); padding: var(--qes-space-xl); box-shadow: none; transition: all var(--qes-transition); border: 1px solid var(--qes-border); }
.qes-card:hover { transform: none; box-shadow: var(--qes-shadow-lg); border-color: #d0d0cc; }

.qes-card__icon { width: 56px; height: 56px; border-radius: var(--qes-radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: var(--qes-space-lg); font-size: 1.5rem; }
.qes-card__icon--microsoft { background: rgba(0,120,212,0.08); color: var(--qes-microsoft); }
.qes-card__icon--aws { background: rgba(255,153,0,0.08); color: var(--qes-aws); }
.qes-card__icon--google { background: rgba(66,133,244,0.08); color: var(--qes-google); }
.qes-card__icon--security { background: rgba(46,170,220,0.08); color: var(--qes-success); }
.qes-card__icon--cloud { background: rgba(35,131,226,0.08); color: var(--qes-accent); }

.qes-card__title { font-size: 1.15rem; margin-bottom: var(--qes-space-sm); font-weight: 600; }
.qes-card__text { color: var(--qes-text-muted); font-size: 0.95rem; line-height: 1.75; }
.qes-card__link { display: inline-flex; align-items: center; gap: var(--qes-space-xs); color: var(--qes-accent); font-weight: 500; text-decoration: none; margin-top: var(--qes-space-md); font-size: 0.95rem; transition: gap var(--qes-transition); }
.qes-card__link:hover { gap: var(--qes-space-sm); }
.qes-card__link::after { content: "\2192"; }

/* ==========================================================================
   Partners — logo strip
   ========================================================================== */

.qes-partners { background: var(--qes-bg-secondary); padding-block: var(--qes-space-xl); border-bottom: none; }
.qes-partners__grid { display: flex; align-items: center; justify-content: center; gap: var(--qes-space-3xl); flex-wrap: wrap; }
.qes-partners__item { display: flex; flex-direction: column; align-items: center; gap: var(--qes-space-sm); text-decoration: none; color: var(--qes-text-muted); transition: all var(--qes-transition); }
.qes-partners__item:hover { color: var(--qes-text); }
.qes-partners__logo { height: 40px; width: auto; object-fit: contain; filter: grayscale(100%) opacity(0.5); transition: filter var(--qes-transition); }
.qes-partners__item:hover .qes-partners__logo { filter: grayscale(0%) opacity(1); }
.qes-partners__label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; }

/* ==========================================================================
   Stats
   ========================================================================== */

.qes-stats { display: flex; gap: var(--qes-space-3xl); justify-content: center; flex-wrap: wrap; }
.qes-stat { text-align: center; }
.qes-stat__number { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; color: var(--qes-text); line-height: 1; letter-spacing: -0.03em; }
.qes-stat__unit { font-size: 1rem; font-weight: 500; }
.qes-stat__label { font-size: 0.9rem; color: var(--qes-text-muted); margin-top: var(--qes-space-sm); }

/* ==========================================================================
   Tabs
   ========================================================================== */

.qes-tabs { margin-bottom: var(--qes-space-xl); }
.qes-tabs__nav { display: flex; gap: 0; border-bottom: 1px solid var(--qes-border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.qes-tabs__btn { padding: var(--qes-space-md) var(--qes-space-lg); background: none; border: none; border-bottom: 2px solid transparent; font-family: inherit; font-size: 0.95rem; font-weight: 500; color: var(--qes-text-muted); cursor: pointer; transition: all var(--qes-transition); white-space: nowrap; margin-bottom: -1px; }
.qes-tabs__btn:hover { color: var(--qes-text); }
.qes-tabs__btn.is-active { color: var(--qes-text); border-bottom-color: var(--qes-text); font-weight: 600; }
.qes-tabs__panel { display: none; padding-top: var(--qes-space-xl); }
.qes-tabs__panel.is-active { display: block; }

/* ==========================================================================
   Belt Progress
   ========================================================================== */

.qes-belt-progress { display: flex; align-items: flex-start; gap: 0; position: relative; max-width: 900px; margin-inline: auto; }
.qes-belt-progress::before { content: ""; position: absolute; top: 36px; left: 0; right: 0; height: 2px; background: var(--qes-border); z-index: 0; }
.qes-belt-step { flex: 1; text-align: center; position: relative; z-index: 1; }
.qes-belt-step__circle { width: 72px; height: 72px; border-radius: var(--qes-radius-xl); margin-inline: auto; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; margin-bottom: var(--qes-space-md); border: 2px solid; transition: transform var(--qes-transition); }
.qes-belt-step:hover .qes-belt-step__circle { transform: scale(1.05); }
.qes-belt-step--white .qes-belt-step__circle { background: #f7f7f5; border-color: var(--qes-border); color: #787774; }
.qes-belt-step--brown .qes-belt-step__circle { background: #8d6e63; border-color: #7b5e53; color: #ffffff; }
.qes-belt-step--black .qes-belt-step__circle { background: var(--qes-text); border-color: var(--qes-primary); color: #ffffff; }
.qes-belt-step__title { font-size: 1rem; font-weight: 600; margin-bottom: var(--qes-space-xs); }
.qes-belt-step__desc { font-size: 0.85rem; color: var(--qes-text-muted); max-width: 200px; margin-inline: auto; line-height: 1.6; }

/* ==========================================================================
   Product Card
   ========================================================================== */

.qes-product { background: var(--qes-surface); border-radius: var(--qes-radius-lg); padding: var(--qes-space-xl); box-shadow: none; border: 1px solid var(--qes-border); transition: all var(--qes-transition); display: flex; flex-direction: column; }
.qes-product:hover { transform: none; box-shadow: var(--qes-shadow-lg); border-color: #d0d0cc; }
.qes-product__logo { height: 48px; width: auto; object-fit: contain; margin-bottom: var(--qes-space-lg); }
.qes-product__name { font-size: 1.15rem; font-weight: 600; margin-bottom: var(--qes-space-sm); }
.qes-product__desc { color: var(--qes-text-muted); font-size: 0.9rem; line-height: 1.75; flex-grow: 1; }
.qes-product__features { list-style: none; padding: 0; margin-top: var(--qes-space-md); }
.qes-product__features li { padding: var(--qes-space-xs) 0; padding-left: 1.5em; position: relative; font-size: 0.9rem; color: var(--qes-text-muted); }
.qes-product__features li::before { content: "\2713"; position: absolute; left: 0; color: var(--qes-success); font-weight: 700; }

/* ==========================================================================
   CTA
   ========================================================================== */

.qes-cta { background: var(--qes-primary); color: #ffffff; text-align: center; padding-block: var(--qes-space-4xl); }
.qes-cta h2 { color: #ffffff; margin-bottom: var(--qes-space-md); font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
.qes-cta p { opacity: 0.7; margin-bottom: var(--qes-space-xl); max-width: 560px; margin-inline: auto; font-size: 1.05rem; }

/* ==========================================================================
   Dark Mode Toggle
   ========================================================================== */

.qes-dark-toggle { position: fixed; bottom: var(--qes-space-lg); right: var(--qes-space-lg); width: 44px; height: 44px; border-radius: var(--qes-radius-md); background: var(--qes-surface); border: 1px solid var(--qes-border); box-shadow: var(--qes-shadow-md); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; z-index: 999; transition: all var(--qes-transition); }
.qes-dark-toggle:hover { box-shadow: var(--qes-shadow-lg); border-color: #d0d0cc; }

/* ==========================================================================
   Award Badge
   ========================================================================== */

.qes-award { display: flex; align-items: center; gap: var(--qes-space-lg); background: var(--qes-bg-secondary); border-radius: var(--qes-radius-lg); padding: var(--qes-space-lg); border: 1px solid var(--qes-border); }
.qes-award__icon { font-size: 2.5rem; flex-shrink: 0; }
.qes-award__title { font-size: 1rem; font-weight: 600; margin-bottom: var(--qes-space-xs); }
.qes-award__year { font-size: 0.85rem; color: var(--qes-text-muted); }

/* ==========================================================================
   Scroll Animations — subtle
   ========================================================================== */

.animate-fade-up, .animate-fade-left, .animate-fade-right, .animate-fade-in { opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; }
.animate-fade-up { transform: translateY(20px); }
.animate-fade-left { transform: translateX(-20px); }
.animate-fade-right { transform: translateX(20px); }
.animate-fade-in { transform: none; }
.animate-fade-up.is-visible, .animate-fade-left.is-visible, .animate-fade-right.is-visible, .animate-fade-in.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up, .animate-fade-left, .animate-fade-right, .animate-fade-in { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .qes-section { padding-block: var(--qes-space-3xl); }
  .qes-hero { min-height: 65vh; }
  .qes-partners__grid { gap: var(--qes-space-xl); }
  .qes-stats { gap: var(--qes-space-xl); }
  .qes-belt-progress { flex-direction: column; gap: var(--qes-space-lg); }
  .qes-belt-progress::before { top: 0; bottom: 0; left: 36px; right: auto; width: 2px; height: auto; }
  .qes-belt-step { text-align: left; display: flex; gap: var(--qes-space-md); align-items: flex-start; }
  .qes-belt-step__circle { flex-shrink: 0; width: 56px; height: 56px; margin: 0; }
  .qes-belt-step__desc { max-width: none; margin: 0; }
}

@media (max-width: 480px) {
  .qes-container { padding-inline: var(--qes-space-md); }
  .qes-hero__cta { flex-direction: column; width: 100%; }
  .qes-btn { width: 100%; justify-content: center; }
  .qes-tabs__nav { gap: 0; }
  .qes-tabs__btn { padding: var(--qes-space-sm) var(--qes-space-md); font-size: 0.9rem; }
}

/* ==========================================================================
   Primary Navigation — QES brand dropdown (Notion-style)
   ========================================================================== */

/* 親項目のフォントウェイト */
.main-navigation .main-nav ul li a {
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color var(--qes-transition);
}

/* 親項目の ▾ インジケータ */
.main-navigation .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 0.4em;
  width: 0.5em;
  height: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--qes-transition);
  opacity: 0.7;
}
.main-navigation .menu-item-has-children:hover > a::after {
  transform: rotate(225deg) translateY(-1px);
}

/* サブメニュー本体 — Notion風カード */
.main-navigation .main-nav ul ul.sub-menu {
  min-width: 240px;
  padding: 8px 0;
  background: var(--qes-bg);
  border: 1px solid var(--qes-border);
  border-radius: var(--qes-radius-md);
  box-shadow: var(--qes-shadow-lg);
  margin-top: 4px;
}

/* サブ項目 */
.main-navigation .main-nav ul ul.sub-menu li a {
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--qes-text);
  line-height: 1.5;
}
.main-navigation .main-nav ul ul.sub-menu li a:hover,
.main-navigation .main-nav ul ul.sub-menu li.current-menu-item > a {
  background: var(--qes-bg-secondary);
  color: var(--qes-accent);
}

/* 親「#」リンクのカーソル制御 */
.main-navigation li.qes-menu-parent > a {
  cursor: default;
}

/* お問い合わせ CTA — 塗りボタン化 */
.main-navigation li.qes-menu-cta > a {
  background: var(--qes-accent);
  color: #fff !important;
  border-radius: var(--qes-radius-md);
  padding-inline: 1.25rem !important;
  margin-inline-start: 0.5rem;
  transition: background var(--qes-transition);
}
.main-navigation li.qes-menu-cta > a:hover {
  background: var(--qes-accent-dark, #1a6bb5);
}


/* Hover でサブメニューを開く（GeneratePress 標準は click のため上書き） */
@media (min-width: 769px) {
  .main-navigation .menu-item-has-children:hover > .sub-menu,
  .main-navigation .menu-item-has-children:focus-within > .sub-menu {
    left: 0 !important;
    opacity: 1 !important;
    pointer-events: auto;
    visibility: visible !important;
  }
}

/* ==========================================================================
   Header Logo (QES)
   ========================================================================== */

.qes-logo a { display: inline-flex; align-items: center; }
.qes-logo img { height: 40px; width: auto; display: block; }
@media (max-width: 768px) { .qes-logo img { height: 30px; } }