/* ==========================================================================
   AZUL Energy Theme — Main Stylesheet
   Pattern 2: Modern / Dynamic
   ========================================================================== */

/* ---------- 1. Custom Properties ---------- */
:root {
  /* 基準ブルー: PeptiDream サイト（main.css）の #0065cc 系に準拠 */
  --azul-primary: #2d6daf;
  --azul-primary-light: #2d7ed0;
  --azul-primary-lighter: #00a3e0;
  --azul-primary-dark: #0d59a7;
  --azul-primary-navy: #004488;
  --azul-text: #111;
  --azul-text-light: #666;
  --azul-text-lighter: #999;
  --azul-bg: #fff;
  --azul-bg-alt: #f2f2f2;
  --azul-services-bg: #f2f2f2;
  --azul-border: #e5e5e5;
  /* CF7 PeptiDream 参考（お問い合わせフォーム入力域） */
  --azul-cf7-pepti-field-bg: #f5f5f5;
  --azul-radius-sm: 8px;
  --azul-radius-md: 16px;
  --azul-radius-lg: 20px;
  --azul-radius-xl: 25px;
  --azul-radius-pill: 50px;
  --azul-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  --azul-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
  --azul-container: 1280px;
  --azul-header-h: 70px;
  /* TOP ヒーロー左右・下余白（ヘッダー inner の横 padding と同期） */
  --azul-hero-inset-x: calc(var(--azul-header-h) / 2);
  --azul-gradient: linear-gradient(135deg, #0d59a7 0%, #0065cc 40%, #00a3e0 100%);
  /* 帯グラデーション — Recruit / 下層ヒーロー共通（primary 系・白文字可読性優先） */
  --azul-band-gradient: linear-gradient(
    135deg,
    var(--azul-primary-navy) 0%,
    var(--azul-primary-dark) 22%,
    var(--azul-primary) 48%,
    var(--azul-primary-light) 72%,
    var(--azul-primary-navy) 100%
  );
  --azul-band-gradient-animated: linear-gradient(
    125deg,
    var(--azul-primary-navy) 0%,
    var(--azul-primary-dark) 12%,
    var(--azul-primary) 28%,
    var(--azul-primary-light) 42%,
    var(--azul-primary) 58%,
    var(--azul-primary-dark) 75%,
    var(--azul-primary-navy) 88%,
    var(--azul-primary-dark) 100%
  );
  --azul-section-py: 6rem;
  --azul-section-px: 2rem;
  /* モバイルメニュー内の区切り線（PeptiDream: border #2d7ed0 on blue） */
  --azul-menu-divider-on-blue: #2d7ed0;
}

/* 帯グラデーションアニメーション — Recruit / 下層ヒーロー共通 */
@keyframes azul-band-gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  33% {
    background-position: 100% 0%;
  }
  66% {
    background-position: 0% 100%;
  }
}

.azul-recruit::before,
.azul-news-hero::before,
.azul-page-hero::before,
.azul-technology-hero::before,
.azul-service-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--azul-band-gradient-animated);
  background-size: 400% 400%;
  animation: azul-band-gradient-shift 16s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .azul-recruit::before,
  .azul-news-hero::before,
  .azul-page-hero::before,
  .azul-technology-hero::before,
  .azul-service-hero::before {
    animation: none;
    background: var(--azul-band-gradient);
    background-size: 100% 100%;
  }
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--azul-text);
  background: var(--azul-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- 3. Layout Utilities ---------- */
.azul-container {
  max-width: var(--azul-container);
  margin: 0 auto;
  padding: 0 var(--azul-section-px);
}

.azul-section {
  padding: var(--azul-section-py) var(--azul-section-px);
}

.azul-section--alt {
  background: var(--azul-bg-alt);
}

.azul-section__heading {
  margin: 0 0 0.25rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.azul-section__subheading {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
}

.azul-services > .azul-container > .azul-fade-in:first-child,
.azul-technology > .azul-container > .azul-fade-in:first-child,
.azul-contact > .azul-contact__inner > .azul-fade-in:first-child {
  text-align: center;
}

.azul-services .azul-section__heading,
.azul-news .azul-section__heading,
.azul-technology .azul-section__heading,
.azul-contact .azul-section__heading {
  text-align: center;
}

/**
 * 下層ページのメインコンテンツ用シェル
 * ヘッダー .azul-header__inner / ヒーロー .azul-page-hero__inner と同じく
 * max-width・margin:auto・padding（--azul-section-py / --azul-section-px）でテキスト起点を揃える。
 * 全幅にしたいブロック（page-hero・パンくず帯など）はこのラッパーの外に置く。
 */
.azul-content-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--azul-container);
  margin-left: auto;
  margin-right: auto;
  padding: var(--azul-section-py) var(--azul-section-px);
  min-width: 0;
}

main.wp-block-group.azul-main,
.wp-block-post-content {
  max-width: 100%;
  min-width: 0;
}

/* core が main に付与する margin / max-width をシェル優先で中央寄せに維持する */
main.wp-block-group.azul-main.azul-content-shell {
  margin-left: auto !important;
  margin-right: auto !important;
}

.wp-block-group.azul-single-news.azul-content-shell {
  margin-left: auto !important;
  margin-right: auto !important;
  /* .azul-news-archive-layout.azul-content-shell と同様、一覧・詳細とも WP の layout 指定を確実に上書き */
  padding: var(--azul-section-py) var(--azul-section-px);
  max-width: var(--azul-container);
}

/* ---------- 4. Components ---------- */

/* --- Buttons --- */
.azul-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--azul-radius-pill);
  transition: all 0.3s;
  cursor: pointer;
  border: none;
  text-align: center;
}

.azul-btn--primary {
  background: var(--azul-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 101, 204, 0.25);
}

.azul-btn--white {
  background: #fff;
  color: var(--azul-primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.azul-btn--ghost {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

/* プライマリ塗り → hover で色反転（グロナビ言語切替・Contact CTA 等） */
.azul-btn--cta {
  background: var(--azul-primary);
  color: #fff;
  border: 1px solid var(--azul-primary);
  box-shadow: none;
}

/* --- View More Link --- */
.azul-view-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  color: var(--azul-primary);
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid var(--azul-primary);
  border-radius: var(--azul-radius-sm);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.azul-view-more .fa-arrow-right {
  transition: transform 0.3s;
}

/* --- Cards --- */
.azul-card {
  background: var(--azul-bg);
  border-radius: var(--azul-radius-lg);
  box-shadow: var(--azul-shadow);
  overflow: hidden;
  transition: all 0.3s;
}

.azul-card__image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.azul-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Hover Effects (PC only) --- */
@media (hover: hover) {
  .azul-btn--primary:hover {
    background: var(--azul-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 101, 204, 0.35);
  }

  .azul-btn--white:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  }

  .azul-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
    transform: none;
    box-shadow: none;
  }

  .azul-btn--cta:hover,
  .azul-nav__lang:hover {
    background: #fff;
    color: var(--azul-primary) !important;
    transform: none;
    box-shadow: none;
  }

  .azul-view-more:hover {
    background: var(--azul-primary);
    color: #fff;
    transform: none;
    box-shadow: none;
  }

  .azul-view-more:hover .fa-arrow-right {
    transform: translateX(5px);
  }

  a {
    transition: all 0.3s ease;
  }
}

/* ---------- 5. Header & Navigation ---------- */
.azul-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: none;
  transition: background 0.3s;
  height: var(--azul-header-h);
}

.azul-header.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
}

/* 下層ページ: 帯ヒーロー上でも TOP と同じ白ヘッダーに見えるよう不透明に */
body:not(.home) .azul-header:not(.is-menu-open) {
  background: #fff;
}

.azul-header__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  /* ロゴ・ナビをヒーロー画像エリアの左右端に揃える */
  padding: 0 var(--azul-hero-inset-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
}

.azul-header__logo img {
  height: 40px;
  width: auto;
}

/* Desktop nav */
.azul-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.azul-nav__list {
  display: flex;
  gap: 2rem;
}

.azul-nav__link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--azul-text);
  transition: color 0.3s;
}

@media (hover: hover) {
  .azul-nav__link:hover {
    color: var(--azul-primary);
  }

  /* モバイル全画面メニュー展開中はリンク色を固定（hover で青に戻さない） */
  .azul-header.is-menu-open .azul-nav__link:hover {
    color: #fff !important;
  }
}

.azul-nav__lang {
  background: var(--azul-primary);
  color: #fff !important;
  padding: 0.2rem 1rem;
  border: 1px solid var(--azul-primary);
  border-radius: 0;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

/* Hamburger（モバイルのみ表示 — 3本線） */
.azul-hamburger {
  display: none;
  align-items: center;
  cursor: pointer;
  padding: 0.25rem 0;
  z-index: 10001;
  position: relative;
  background: transparent;
  border: none;
  font: inherit;
  color: var(--azul-text);
}

.azul-hamburger__icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  flex-shrink: 0;
  width: 26px;
  height: 16px;
  position: relative;
}

/* 3本とも同一太さ（サブピクセル差を避けるため整数 px） */
.azul-hamburger__icon span {
  width: 100%;
  height: 2px;
  min-height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: opacity 0.25s ease, transform 0.3s ease;
  display: block;
  flex-shrink: 0;
  transform-origin: center;
  box-sizing: border-box;
}

/* 開いたとき: 中央線を消し、上下を ±30°（レイアウト位置は変えない＝fixed 化しない） */
.azul-hamburger.is-active .azul-hamburger__icon span:nth-child(1) {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  transform: rotate(-30deg);
}

.azul-hamburger.is-active .azul-hamburger__icon span:nth-child(2) {
  opacity: 0;
}

.azul-hamburger.is-active .azul-hamburger__icon span:nth-child(3) {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  transform: rotate(30deg);
}

.azul-header.is-menu-open .azul-hamburger {
  color: #fff;
}

/* Mobile menu overlay（未使用・将来用） */
.azul-nav__overlay {
  display: none;
}

/* ---------- 6. Hero ---------- */
.azul-hero-block {
  position: relative;
  margin-top: var(--azul-header-h);
  display: grid;
}

.azul-hero {
  --azul-hero-inset-bottom: var(--azul-hero-inset-x);
  grid-area: 1 / 1;
  /* vh はフォールバック。svh で固定（dvh はスクロールで高さが変わりカクつくため使わない） */
  height: calc(100vh - var(--azul-header-h));
  height: calc(100svh - var(--azul-header-h));
  min-height: 0;
  background: var(--azul-bg);
  position: relative;
  overflow: visible;
}

/* 左右 inset 内だけに画像・オーバーレイを収め、scale 時も白場へはみ出さない */
.azul-hero__media {
  position: absolute;
  top: 0;
  bottom: var(--azul-hero-inset-bottom);
  left: var(--azul-hero-inset-x);
  right: var(--azul-hero-inset-x);
  overflow: hidden;
  z-index: 0;
}

.azul-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 101, 204, 0.3) 0%, rgba(0, 163, 224, 0.3) 100%);
  z-index: 1;
  pointer-events: none;
}

.azul-hero__video,
.azul-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.azul-hero__content {
  box-sizing: border-box;
  grid-area: 1 / 1;
  position: relative;
  align-self: center;
  justify-self: center;
  width: calc(100% - 2 * var(--azul-hero-inset-x));
  max-width: 1000px;
  height: fit-content;
  max-height: calc(100% - var(--azul-hero-inset-bottom));
  margin: 0;
  padding: 2rem;
  color: #fff;
  z-index: 2;
}

/* 日本語リードは PC=元の改行（--lead-pc）、SP=指定6行（--lead-sp）を出し分け */
.azul-hero__lead--ja .azul-hero__lead-sp {
  display: none;
}

/* JS 有効時のみ、描画前にイントロ対象を隠してチラつき(FOUC)を防ぐ。
   no-JS / reduced-motion 時は通常表示にフォールバックする。 */
.azul-hero-js .azul-hero__image {
  transform: scale(1.12);
}

.azul-hero-js .azul-hero__intro {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .azul-hero-js .azul-hero__image {
    transform: none;
  }
  .azul-hero-js .azul-hero__intro {
    opacity: 1;
  }
}

.azul-hero__title {
  font-size: 4rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
}

.azul-hero__lead {
  font-size: 1rem;
  margin: 0 0 2.5rem;
  line-height: 1.8;
  opacity: 0.95;
}

/* モバイルランドスケープ（低いビューポート）: コピーはヒーロー画像の下・グレー背景に配置 */
@media (orientation: landscape) and (max-height: 480px) {
  .azul-hero-block {
    display: block;
  }

  .azul-hero {
    height: min(38svh, 240px);
    min-height: 0;
  }

  .azul-hero__content {
    position: static;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1rem var(--azul-section-px, 1.25rem) 1.25rem;
    background: var(--azul-bg-alt);
    color: var(--azul-text);
    display: block;
    text-align: center;
  }

  .azul-hero__title {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
    color: var(--azul-text);
    text-shadow: none;
  }

  .azul-hero__lead {
    font-size: 0.75rem;
    line-height: 1.55;
    margin-bottom: 1rem;
    color: var(--azul-text-light);
    opacity: 1;
  }

  .azul-hero__lead--ja .azul-hero__lead-pc {
    display: block;
  }

  .azul-hero__lead--ja .azul-hero__lead-sp {
    display: none;
  }

  .azul-hero__content .azul-btn--ghost {
    background: transparent;
    color: var(--azul-primary);
    border: 2px solid var(--azul-primary);
    backdrop-filter: none;
    padding: 0.65rem 1.75rem;
    font-size: 0.85rem;
  }
}

@keyframes azul-fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 7. Pickup Banners ---------- */
.azul-pickup {
  --azul-pickup-gap: clamp(1rem, 0.5rem + 1.25vw, 2rem);
  --azul-pickup-visible: 3;
  --azul-pickup-nav-inset: 0.85rem;
  position: relative;
  padding: 5rem var(--azul-section-px);
  background-color: var(--azul-primary);
  overflow: visible;
}

.azul-pickup[style*='background-image'] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.azul-pickup[style*='background-image'] .azul-pickup__nav-btn {
  color: #fff;
}

.azul-pickup__viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.azul-pickup .azul-container {
  padding-inline: clamp(2.75rem, 2rem + 2vw, 3.75rem);
}

.azul-pickup__track {
  display: flex;
  gap: var(--azul-pickup-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}

.azul-pickup__track::-webkit-scrollbar {
  display: none;
}

.azul-pickup__item {
  flex: 0 0 calc((100% - var(--azul-pickup-gap) * 2) / 3);
  min-width: 0;
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: var(--azul-text);
  background: #fff;
  border: none;
  border-radius: var(--azul-radius-md);
  overflow: hidden;
  box-shadow: none;
}

.azul-pickup__image {
  width: 100%;
  height: clamp(120px, 6rem + 8vw, 200px);
  overflow: hidden;
}

.azul-pickup__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.azul-pickup__body {
  padding: clamp(1rem, 0.5rem + 1.25vw, 2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.azul-pickup__title {
  font-size: clamp(0.875rem, 0.5rem + 0.9vw, 1.1rem);
  font-weight: 500;
  margin: 0;
  color: var(--wp--preset--color--contrast);
}

.azul-pickup__arrow {
  color: var(--wp--preset--color--contrast);
  font-size: clamp(0.75rem, 0.45rem + 0.55vw, 0.9rem);
  flex-shrink: 0;
  transition: transform 0.3s;
}

@media (hover: hover) {
  .azul-pickup__item:hover .azul-pickup__arrow {
    transform: translateX(3px);
  }

  .azul-pickup__item:hover .azul-pickup__title {
    color: var(--wp--preset--color--contrast);
  }
}

.azul-pickup__nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--azul-pickup-nav-inset);
  pointer-events: none;
  z-index: 2;
}

.azul-pickup__nav-btn {
  pointer-events: auto;
  flex-shrink: 0;
  width: clamp(2.25rem, 1.75rem + 1vw, 2.75rem);
  height: clamp(2.25rem, 1.75rem + 1vw, 2.75rem);
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: opacity 0.3s;
}

.azul-pickup__chevron {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  border-style: solid;
  border-color: currentColor;
  border-width: 2.5px 2.5px 0 0;
}

.azul-pickup__nav-btn--prev .azul-pickup__chevron {
  transform: rotate(-135deg);
  margin-left: 0.25rem;
}

.azul-pickup__nav-btn--next .azul-pickup__chevron {
  transform: rotate(45deg);
  margin-right: 0.25rem;
}

@media (hover: hover) {
  .azul-pickup__nav-btn:hover {
    opacity: 0.7;
  }
}

/* ---------- 8. Technology ---------- */
.azul-technology {
  padding: var(--azul-section-py) var(--azul-section-px);
  background: var(--azul-bg);
}

.azul-technology__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin: 3rem auto;
  max-width: var(--azul-container);
  padding: 4rem;
  background: linear-gradient(135deg, rgba(0, 101, 204, 0.05) 0%, rgba(0, 163, 224, 0.05) 100%);
  border-radius: 30px;
}

.azul-technology__hero-title {
  font-size: clamp(1.25rem, 0.85rem + 1.75vw, 2.2rem);
  font-weight: 700;
  color: var(--azul-text);
  margin: 0 0 1.5rem;
  line-height: 1.45;
}

.azul-technology__hero-text {
  color: var(--azul-text-light);
  line-height: 1.9;
  font-size: 1.15rem;
  margin: 0 0 1.5rem;
}

.azul-technology__hero-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--azul-primary);
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 1.5rem;
}

.azul-technology__hero-image {
  border-radius: var(--azul-radius-lg);
  overflow: hidden;
  box-shadow: none;
}

.azul-technology__hero-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--azul-radius-lg);
}

/* Features grid */
.azul-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: var(--azul-container);
  margin: 0 auto;
}

.azul-features__title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 3rem;
  color: var(--azul-text);
}

.azul-feature-card {
  padding: 2.5rem;
  background: transparent;
  border-radius: var(--azul-radius-xl);
  box-shadow: none;
  border: 1px solid var(--azul-border);
  transition: border-color 0.3s;
}

@media (hover: hover) {
  .azul-feature-card:hover {
    border-color: rgba(0, 101, 204, 0.22);
  }
}

.azul-feature-card__header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.azul-feature-card__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 2.2rem;
  color: #fff;
  background: var(--azul-primary);
}

.azul-feature-card__icon--performance,
.azul-feature-card__icon--raremetal,
.azul-feature-card__icon--cost {
  background: var(--azul-primary);
}

.azul-feature-card__name {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
  color: var(--azul-text);
}

.azul-feature-card__text {
  color: var(--azul-text-light);
  line-height: 1.9;
  font-size: 1.05rem;
  margin: 0;
}

/* ---------- 9. Services ---------- */
.azul-services {
  padding: var(--azul-section-py) var(--azul-section-px);
  background: var(--azul-bg-alt);
}

.azul-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 2rem;
  max-width: var(--azul-container);
  margin: 0 auto;
}

.azul-service-card {
  background: var(--azul-bg);
  padding: 2.5rem;
  border-radius: var(--azul-radius-lg);
  box-shadow: none;
  transition: all 0.3s;
}

.azul-service-card__image {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.azul-service-card__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.azul-service-card__title {
  font-size: 1.25rem;
  margin: 0 0 1rem;
  color: var(--wp--preset--color--contrast);
}

.azul-service-card__text {
  color: var(--azul-text-light);
  line-height: 1.8;
  margin: 0;
}

@media (hover: hover) {
  .azul-service-card:hover {
    transform: translateY(-5px);
  }
}

/* ---------- 10. News ---------- */
.azul-news {
  padding: var(--azul-section-py) var(--azul-section-px);
  max-width: var(--azul-container);
  margin: 0 auto;
}

.azul-news__header {
  text-align: center;
  margin-bottom: 3rem;
}

.azul-news__more {
  margin-top: 3rem;
  text-align: center;
}

.azul-news__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.azul-news__item {
  padding: 1.5rem;
  border-bottom: 1px solid var(--azul-border);
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
}

.azul-news__date {
  min-width: 100px;
  color: var(--azul-text);
  font-size: 0.95rem;
  font-weight: 500;
}

/* カテゴリ列は幅固定・縮まない（ラベル改行防止） */
.azul-news__category {
  flex: 0 0 120px;
  min-width: 120px;
  max-width: 120px;
}

.azul-news__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 120px;
  width: 120px;
  max-width: 120px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--azul-primary);
  border-radius: 4px;
  color: var(--azul-primary);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.azul-news__title {
  flex: 1;
  font-size: 1.05rem;
  line-height: 1.7;
}

.azul-news__title a {
  color: var(--azul-text);
  transition: color 0.3s;
}

@media (hover: hover) {
  .azul-news__item:hover {
    background: var(--azul-bg-alt);
    border-radius: 4px;
  }

  .azul-news__title a:hover {
    color: var(--azul-primary);
  }
}

.azul-news__empty {
  margin: 0;
  padding: 2rem 0;
  color: var(--azul-text-light);
}

/* 投稿一覧（home / archive）：左カテゴリ + 右ニュース一覧（幅・余白は .azul-content-shell と併用） */
.azul-news-archive-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* WP の is-layout-* が margin を上書きする場合に備える（news 一覧ラッパー専用） */
.azul-news-archive-layout.azul-content-shell {
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--azul-section-py) var(--azul-section-px);
  max-width: var(--azul-container);
}

/* WP の is-layout-constrained / is-layout-flow が grid item に当てる max-width / margin-inline を解除 */
.azul-news-archive-layout > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  min-width: 0;
}

.azul-news-sidebar {
  position: sticky;
  top: calc(var(--azul-header-h) + 2rem);
}

.azul-news-sidebar__heading {
  margin: 0 0 0.3rem;
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--azul-text);
}

.azul-news-sidebar__sub {
  margin: 0 0 1.75rem;
  font-size: 0.9rem;
  color: var(--azul-text-light);
}

.azul-news-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.azul-news-sidebar__link {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--azul-border);
  color: var(--azul-text);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.azul-news-sidebar__link.is-active {
  color: var(--azul-primary);
  font-weight: 700;
}

@media (hover: hover) {
  .azul-news-sidebar__link:hover {
    color: var(--azul-primary);
    padding-left: 0.35rem;
  }
}

/* 投稿一覧（右カラム）：TOP NEWS と同じ見せ方に寄せる */
.azul-news--archive {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* WP の constrained 由来の max-width / margin を無効化（右カラム内の入れ子要素すべて） */
.azul-news--archive .wp-block-query,
.azul-news--archive .wp-block-post-template,
.azul-news--archive .azul-news__item,
.azul-news--archive .azul-news__thumb,
.azul-news--archive .azul-news__body,
.azul-news--archive .azul-news__date,
.azul-news--archive .azul-news__category,
.azul-news--archive .azul-news__title {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.azul-news--archive .wp-block-query {
  max-width: 100%;
}

.azul-news--archive .wp-block-post-template {
  margin: 0;
  padding: 0;
}

.azul-news--archive .azul-news__item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1.5rem 1.5rem;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.25rem;
}

.azul-news--archive .azul-news__thumb {
  flex: 0 0 200px;
  width: 200px;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 1200 / 630;
  background: #fff;
  align-self: flex-start;
}

.azul-news--archive .azul-news__thumb a {
  display: block;
  height: 100%;
}

.azul-news--archive .azul-news__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.azul-news--archive .azul-news__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.azul-news--archive .azul-news__date {
  min-width: 0;
}

/* タイトル: 縦並び時も折り返しを確実に（min-width:0 がないとはみ出しやすい） */
.azul-news--archive .azul-news__title {
  flex: none;
  width: 100%;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.azul-news--archive .azul-news__title .wp-block-post-title {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-size: 0.95rem;
  line-height: 1.8;
  font-weight: 400;
}

.azul-news--archive .azul-news__category {
  flex: none;
  flex-basis: auto;
  min-width: 0;
  max-width: none;
}

.azul-news--archive .azul-news__category .wp-block-post-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.azul-news--archive .azul-news__category .wp-block-post-terms a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 80px;
  width: max-content;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--azul-primary);
  border-radius: 4px;
  color: var(--azul-primary);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
}

@media (hover: hover) {
  .azul-news--archive .azul-news__category .wp-block-post-terms a:hover {
    background: rgba(0, 101, 204, 0.08);
  }
}

.azul-news--archive .wp-block-query-pagination {
  margin-top: 3rem;
}

.azul-news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.azul-news-pagination .page-numbers,
.azul-news-pagination .wp-block-query-pagination-previous,
.azul-news-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.8rem;
  border: 1px solid var(--azul-border);
  border-radius: 999px;
  color: var(--azul-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: var(--azul-bg);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.azul-news-pagination .page-numbers.current {
  color: #fff;
  border-color: var(--azul-primary);
  background: var(--azul-primary);
}

@media (hover: hover) {
  .azul-news-pagination a.page-numbers:hover,
  .azul-news-pagination .wp-block-query-pagination-previous:hover,
  .azul-news-pagination .wp-block-query-pagination-next:hover {
    color: var(--azul-primary);
    border-color: var(--azul-primary);
    background: rgba(0, 101, 204, 0.06);
  }
}

/* ---------- 10b. Single post (news) ---------- */
.azul-single-news__back {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
}

.azul-single-news__back a {
  color: var(--azul-primary);
  text-decoration: none;
  font-weight: 500;
}

@media (hover: hover) {
  .azul-single-news__back a:hover {
    text-decoration: underline;
  }
}

.azul-single-news__meta {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.azul-single-news__meta .azul-news__category {
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
}

.azul-single-news__meta .azul-news__category .wp-block-post-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.azul-single-news__meta .azul-news__category .wp-block-post-terms a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 80px;
  width: max-content;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--azul-primary);
  border-radius: 4px;
  color: var(--azul-primary);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.azul-single-news__title {
  margin-bottom: 3.5rem;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.35;
}

.azul-single-news__thumb {
  margin: 0 0 2rem;
  max-width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

.azul-single-news__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.azul-single-news .entry-content,
.azul-single-news .wp-block-post-content {
  max-width: 100%;
}

/* ---------- 11. Recruit ---------- */
.azul-recruit {
  padding: 8rem var(--azul-section-px);
  color: #fff;
  position: relative;
  overflow: hidden;
  /* 背景は ::before でアニメーション（§1 帯グラデーション共通） */
}

.azul-recruit__inner {
  max-width: var(--azul-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.azul-recruit__heading {
  color: #fff;
}

.azul-recruit__text {
  font-size: 1.2rem;
  line-height: 1.9;
  margin: 0 0 3rem;
  color: rgba(255, 255, 255, 0.95);
}

.azul-recruit__image {
  border-radius: var(--azul-radius-lg);
  overflow: hidden;
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.35);
}

.azul-recruit__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--azul-radius-lg);
}

@media (hover: hover) {
  .azul-recruit .azul-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.85);
    transform: none;
    box-shadow: none;
  }
}

/* ---------- 12. Contact ---------- */
.azul-contact {
  padding: 8rem var(--azul-section-px);
  background: var(--azul-bg-alt);
}

.azul-contact__inner {
  max-width: var(--azul-container);
  margin: 0 auto;
}

.azul-contact__box {
  background: var(--azul-bg);
  padding: 4rem;
  border-radius: 30px;
  box-shadow: none;
  border: 1px solid var(--azul-border);
}

.azul-contact__lead {
  color: var(--azul-text-light);
  line-height: 1.9;
  margin: 0 0 2rem;
  font-size: 1.15rem;
  text-align: center;
}

.azul-contact__action {
  text-align: center;
  margin-bottom: 2.5rem;
}

.azul-contact__note {
  color: var(--azul-text-lighter);
  font-size: 0.9rem;
  line-height: 1.7;
  text-align: center;
  margin: 0;
}

.azul-contact__admin-msg {
  color: var(--azul-primary-dark);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(0, 101, 204, 0.08);
  border-radius: 12px;
}

.azul-contact__form {
  margin-bottom: 2.5rem;
}

/* CF7: TOP の .azul-contact 内、または下層ページの .azul-cf7-wrap 内で共通 */
.azul-contact .wpcf7,
.azul-cf7-wrap .wpcf7 {
  margin: 0;
  text-align: left;
}

.azul-contact .wpcf7-form label,
.azul-cf7-wrap .wpcf7-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--azul-text);
  margin-bottom: 0.35rem;
}

.azul-contact .wpcf7-form .wpcf7-form-control-wrap,
.azul-cf7-wrap .wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 1.25rem;
}

.azul-contact .wpcf7-form input[type="text"],
.azul-contact .wpcf7-form input[type="email"],
.azul-contact .wpcf7-form input[type="tel"],
.azul-contact .wpcf7-form input[type="url"],
.azul-contact .wpcf7-form select,
.azul-contact .wpcf7-form textarea,
.azul-cf7-wrap .wpcf7-form input[type="text"],
.azul-cf7-wrap .wpcf7-form input[type="email"],
.azul-cf7-wrap .wpcf7-form input[type="tel"],
.azul-cf7-wrap .wpcf7-form input[type="url"],
.azul-cf7-wrap .wpcf7-form select,
.azul-cf7-wrap .wpcf7-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: var(--azul-bg);
  color: var(--azul-text);
  box-sizing: border-box;
}

.azul-contact .wpcf7-form textarea,
.azul-cf7-wrap .wpcf7-form textarea {
  min-height: 160px;
  resize: vertical;
}

.azul-contact .wpcf7-form input:focus,
.azul-contact .wpcf7-form select:focus,
.azul-contact .wpcf7-form textarea:focus,
.azul-cf7-wrap .wpcf7-form input:focus,
.azul-cf7-wrap .wpcf7-form select:focus,
.azul-cf7-wrap .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--azul-primary);
  box-shadow: none;
}

/* CF7 [acceptance] プライバシー同意（通常 label の display:block より優先） */
.azul-contact .wpcf7-acceptance .wpcf7-list-item label,
.azul-cf7-wrap .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.65;
  cursor: pointer;
}

/* チェックボックスを包む .wpcf7-form-control-wrap に display:block が当たると文言が改行される */
.azul-contact .wpcf7-acceptance .wpcf7-list-item label > .wpcf7-form-control-wrap,
.azul-cf7-wrap .wpcf7-acceptance .wpcf7-list-item label > .wpcf7-form-control-wrap {
  display: inline-flex !important;
  align-items: center;
  align-self: flex-start;
  width: auto !important;
  max-width: none;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.azul-contact .wpcf7-acceptance .wpcf7-list-item-label,
.azul-cf7-wrap .wpcf7-acceptance .wpcf7-list-item-label {
  flex: 1 1 auto;
  min-width: 0;
}

.azul-contact .wpcf7-acceptance input[type="checkbox"],
.azul-cf7-wrap .wpcf7-acceptance input[type="checkbox"] {
  width: auto;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--azul-primary);
}

/* 同意文「全文を読む」— CF7 の Form タブで <a class="azul-cf7-privacy-link" …> を付与すること */
a.azul-cf7-privacy-link {
  color: var(--azul-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover: hover) {
  a.azul-cf7-privacy-link:hover {
    color: var(--azul-primary-dark);
  }
}

.azul-contact .wpcf7-form .wpcf7-submit,
.azul-cf7-wrap .wpcf7-form .wpcf7-submit {
  display: inline-block;
  padding: 0.9rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: var(--azul-primary);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  box-shadow: none;
}

/* 送信ボタン: テキスト直後に矢印（main.js が .azul-cf7-submit-wrap を生成） */
.azul-cf7-submit-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  background-color: var(--azul-primary);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.azul-cf7-submit-wrap .wpcf7-submit {
  background: none !important;
  background-image: none !important;
  border: none;
  padding: 0.9rem 0.25em 0.9rem 2.5rem;
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  box-shadow: none;
}

.azul-cf7-submit-arrow {
  padding-right: 2.5rem;
  color: #fff;
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

.azul-cf7-submit-wrap:has(.wpcf7-submit:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

.wpcf7-form.azul-cf7-form--submit-locked .azul-cf7-submit-wrap,
.wpcf7-form.azul-cf7-form--submit-locked .wpcf7-submit {
  opacity: 0.65;
  cursor: wait;
}

.wpcf7-form.azul-cf7-form--submit-locked .azul-cf7-submit-wrap .wpcf7-submit {
  cursor: wait;
}

.azul-cf7-submit-wrap:has(.wpcf7-submit:disabled) .wpcf7-submit {
  cursor: not-allowed;
  opacity: 1;
}

.azul-contact .wpcf7-form .wpcf7-submit:disabled,
.azul-cf7-wrap .wpcf7-form .wpcf7-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Multi-Step の [previous] 等（送信ボタン以外のボタン） */
.azul-contact .wpcf7-form input[type="button"],
.azul-cf7-wrap .wpcf7-form input[type="button"] {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--azul-primary);
  background: transparent;
  border: 2px solid var(--azul-primary);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  box-shadow: none;
  margin-right: 0.75rem;
  margin-top: 0.5rem;
}

.azul-contact .wpcf7-not-valid-tip,
.azul-cf7-wrap .wpcf7-not-valid-tip {
  font-size: 0.82rem;
  margin-top: 0.25rem;
}

.azul-contact .wpcf7-response-output,
.azul-cf7-wrap .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  border-radius: 12px;
}

/* 下層ページでフォームをカード風に包む（任意） */
.azul-cf7-wrap {
  max-width: var(--azul-container);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.azul-cf7-wrap--boxed {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

/* ---------- CF7: PeptiDream 参考 UI（https://www.peptidream.com/contact/） ---------- */
.azul-cf7-steps-outer {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.azul-cf7-steps {
  margin: 0 0 2.5rem;
}

.azul-cf7-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--azul-text-light);
  border-bottom: 1px solid var(--azul-border);
}

.azul-cf7-steps__item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.9rem 0.5rem;
  text-align: center;
}

.azul-cf7-steps__item:not(:last-child)::after {
  content: none;
}

.azul-cf7-steps__text {
  font-weight: 500;
  letter-spacing: 0.03em;
}

.azul-cf7-steps__item.is-active .azul-cf7-steps__text {
  color: var(--azul-primary);
  font-weight: 700;
}

.azul-cf7-steps__item.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--azul-primary);
}

.azul-cf7-steps__item.is-done .azul-cf7-steps__text {
  color: var(--azul-text);
}

.azul-cf7-wrap--pepti.azul-cf7-wrap--boxed {
  max-width: 52rem;
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 0;
}

.azul-cf7-wrap--pepti .azul-contact__form {
  max-width: 100%;
}

.azul-cf7-intro {
  margin: 0 0 2rem;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--azul-text-light);
}

.azul-cf7-intro__line {
  margin: 0 0 0.5rem;
}

.azul-cf7-intro__line:last-child {
  margin-bottom: 0;
}

.azul-cf7-intro__line--note {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em;
  margin-top: 0.85rem;
  font-size: 0.95rem;
}

/* 必須バッジ（PeptiDream 参考: 必須 / Required） */
.azul-cf7-req-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.12em 0.55em;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--azul-primary);
  border: 1px solid var(--azul-primary);
  border-radius: 3px;
  background: transparent;
  vertical-align: middle;
  white-space: nowrap;
}

.azul-cf7-wrap--pepti .azul-cf7-req-badge {
  font-size: 0.72rem;
  padding: 0.15em 0.6em;
}

.azul-cf7-label-heading {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  min-width: 0;
}

.azul-cf7-wrap label > .azul-cf7-label-text {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  min-width: 0;
}

.azul-cf7-wrap--pepti .wpcf7-form {
  margin: 0;
  max-width: 100%;
  min-width: 0;
}

.azul-cf7-wrap,
.azul-cf7-wrap .wpcf7 {
  max-width: 100%;
  min-width: 0;
}

/* 項目ラベル（左）＋入力（右）。display:contents は * を span にしたときグリッドが3列化するため使わない */
.azul-cf7-wrap--pepti .wpcf7-form > p:has(> label):first-of-type {
  border-top: 1px solid var(--azul-border);
}

.azul-cf7-wrap--pepti .wpcf7-form > p:has(> label) {
  display: block;
  margin: 0;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--azul-border);
}

.azul-cf7-wrap--pepti .wpcf7-form > p:has(> label) > label {
  display: grid;
  grid-template-columns: minmax(9.5rem, 14rem) minmax(0, 1fr);
  gap: 0.65rem 1.75rem;
  align-items: center;
  width: 100%;
  margin: 0;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--azul-text);
}

/* main.js が .azul-cf7-label-text でラベル＋* を1セルにまとめ、入力と2列になる */
.azul-cf7-wrap--pepti .wpcf7-form > p:has(> label) > label > .azul-cf7-label-text {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  min-width: 0;
}

.azul-cf7-intro__line--note .azul-cf7-req-badge {
  margin-right: 0.15em;
}

.azul-cf7-wrap--pepti .wpcf7-form > p:has(textarea) > label {
  align-items: start;
}

/* 「その他」選択時のみ表示する件名行（テーマ main.js が .is-visible を付与） */
.azul-cf7-wrap .wpcf7-form > p.azul-cf7-subject-other-wrap:not(.is-visible) {
  display: none !important;
}

/* 確認フォーム: メール（2）の宛先検証用に置く [email your-email] を画面に出さない（PROJECT.md §11.2） */
.azul-cf7-wrap .wpcf7-form .azul-cf7-confirm-hidden-email {
  display: none !important;
}

.azul-cf7-wrap--pepti .wpcf7-form > p:has(.wpcf7-acceptance) {
  display: block;
  margin: 0;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--azul-border);
}

.azul-cf7-wrap--pepti .wpcf7-form .wpcf7-form-control-wrap {
  margin-bottom: 0;
  display: inline-block;
}

.azul-cf7-wrap--pepti .wpcf7-form input[type="text"],
.azul-cf7-wrap--pepti .wpcf7-form input[type="email"],
.azul-cf7-wrap--pepti .wpcf7-form input[type="tel"],
.azul-cf7-wrap--pepti .wpcf7-form input[type="url"],
.azul-cf7-wrap--pepti .wpcf7-form select,
.azul-cf7-wrap--pepti .wpcf7-form textarea {
  border: 1px solid var(--azul-border);
  border-radius: 2px;
  background: var(--azul-cf7-pepti-field-bg);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.azul-cf7-wrap--pepti .wpcf7-form input[type="text"]:focus,
.azul-cf7-wrap--pepti .wpcf7-form input[type="email"]:focus,
.azul-cf7-wrap--pepti .wpcf7-form input[type="tel"]:focus,
.azul-cf7-wrap--pepti .wpcf7-form input[type="url"]:focus,
.azul-cf7-wrap--pepti .wpcf7-form select:focus,
.azul-cf7-wrap--pepti .wpcf7-form textarea:focus {
  background: var(--azul-bg);
  border-color: var(--azul-primary);
  box-shadow: none;
}

/* placeholder — 薄字 */
.azul-contact .wpcf7-form input::placeholder,
.azul-contact .wpcf7-form textarea::placeholder,
.azul-cf7-wrap .wpcf7-form input::placeholder,
.azul-cf7-wrap .wpcf7-form textarea::placeholder {
  color: var(--azul-text-lighter);
  opacity: 1;
}

.azul-cf7-wrap .wpcf7-form select.azul-cf7-select--placeholder {
  color: var(--azul-text-lighter);
}

.azul-cf7-wrap .wpcf7-form select:not(.azul-cf7-select--placeholder) {
  color: var(--azul-text);
}

/* プルダウン：右内側の余白（矢印と枠の間） */
.azul-cf7-wrap--pepti .wpcf7-form select {
  padding-right: 2.75rem;
}

.azul-cf7-wrap--pepti .wpcf7-form .wpcf7-list-item {
  margin: 0 0rem 0.5rem 0;
}

.azul-cf7-wrap--pepti .wpcf7-form .wpcf7-list-item label {
  font-weight: 500;
}

.azul-cf7-wrap--pepti .wpcf7-acceptance .wpcf7-list-item label {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  flex-wrap: nowrap !important;
  gap: 0.5rem 0.65rem;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.65;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.azul-cf7-wrap--pepti .wpcf7-acceptance .wpcf7-list-item label > .wpcf7-form-control-wrap {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.azul-cf7-wrap--pepti .wpcf7-acceptance .wpcf7-list-item-label {
  flex: 1 1 auto;
  min-width: 0;
}

.azul-cf7-wrap--pepti .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 0;
  flex-shrink: 0;
}

/* 送信・戻るボタン行（main.js が .azul-cf7-form-actions にまとめる） */
.azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.75rem 1rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding-top: 1.75rem;
  border-bottom: none;
  box-sizing: border-box;
}

.azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions .azul-cf7-submit-wrap,
.azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions .wpcf7-submit,
.azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions input[type="button"],
.azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions input[type="reset"] {
  flex: 1 1 13rem;
  min-width: 0;
  max-width: 100%;
  width: auto;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}

.azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions .azul-cf7-submit-wrap .wpcf7-submit {
  flex: 0 0 auto;
  width: auto;
}

.azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions:has(> .azul-cf7-submit-wrap:only-child) .azul-cf7-submit-wrap,
.azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions:has(> .wpcf7-submit:only-child) .wpcf7-submit,
.azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions:has(> input[type="submit"]:only-child) input[type="submit"] {
  flex: 0 1 auto;
  min-width: min(13rem, 100%);
}

/* JS 未実行時のフォールバック */
.azul-cf7-wrap--pepti .wpcf7-form p:has(.wpcf7-submit),
.azul-cf7-wrap--pepti .wpcf7-form p:has(input[type="reset"]) {
  border-bottom: none;
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
  max-width: 100%;
  min-width: 0;
}

.azul-cf7-wrap--pepti .wpcf7-form p:has(.wpcf7-submit) .wpcf7-submit,
.azul-cf7-wrap--pepti .wpcf7-form p:has(.wpcf7-submit) input[type="button"],
.azul-cf7-wrap--pepti .wpcf7-form p:has(.wpcf7-submit) input[type="reset"] {
  flex: 1 1 13rem;
  min-width: 0;
  max-width: 100%;
}

.azul-cf7-wrap--pepti .wpcf7-form .wpcf7-submit {
  border-radius: 2px;
  padding: 0.9rem 2.25rem;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  box-shadow: none;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  background-color: var(--azul-primary);
}

.azul-cf7-wrap--pepti .azul-cf7-submit-wrap {
  border-radius: 2px;
}

.azul-cf7-wrap--pepti .azul-cf7-submit-wrap .wpcf7-submit {
  padding: 0.9rem 0.25em 0.9rem 2.25rem;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}

.azul-cf7-wrap--pepti .azul-cf7-submit-arrow {
  padding-right: 2.25rem;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.azul-cf7-wrap--pepti .wpcf7-form input[type="button"],
.azul-cf7-wrap--pepti .wpcf7-form input[type="reset"] {
  border-radius: 2px;
  padding: 0.9rem 2.25rem;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  background: var(--azul-bg);
  border: 1px solid var(--azul-primary);
  color: var(--azul-primary);
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 確認フォーム（multiform）: ラベル＋値を1行グリッド */
.azul-cf7-wrap--pepti .wpcf7-form > .azul-cf7-confirm-row {
  display: grid;
  grid-template-columns: minmax(9.5rem, 14rem) minmax(0, 1fr);
  gap: 0.65rem 1.75rem;
  align-items: baseline;
  margin: 0;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--azul-border);
}

.azul-cf7-wrap--pepti .wpcf7-form > .azul-cf7-confirm-row:first-of-type {
  border-top: 1px solid var(--azul-border);
}

.azul-cf7-wrap--pepti .azul-cf7-confirm-row > p {
  margin: 0;
  padding: 0;
  border: none;
}

.azul-cf7-wrap--pepti .azul-cf7-confirm-row > p:first-child {
  grid-column: 1;
}

.azul-cf7-wrap--pepti .azul-cf7-confirm-row > p:first-child strong {
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--azul-text);
}

.azul-cf7-wrap--pepti .azul-cf7-confirm-row > p:last-child {
  grid-column: 2;
  color: var(--azul-text);
  line-height: 1.75;
  word-break: break-word;
}

/* 確認フォーム: ラベルと値が同一 p 内にある場合（レガシー） */
.azul-cf7-wrap--pepti .wpcf7-form > p:has(> .azul-cf7-label-heading):has(.wpcf7-form-control-wrap),
.azul-cf7-wrap--pepti .wpcf7-form > p:has(> strong):not(:has(> label)):not(:has(> strong:only-child)):not(:has(> .azul-cf7-label-heading)) {
  display: grid;
  grid-template-columns: minmax(9.5rem, 14rem) minmax(0, 1fr);
  gap: 0.65rem 1.75rem;
  align-items: baseline;
  margin: 0;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--azul-border);
}

.azul-cf7-wrap--pepti .wpcf7-form > p:has(> strong):not(:has(> label)):not(:has(> strong:only-child)) strong {
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--azul-text);
}

/* お問い合わせ下層ページ（Contact Page テンプレート） */
main.wp-block-group.azul-main.azul-contact-page.azul-content-shell {
  padding-top: clamp(2rem, 3.5vw, calc(var(--azul-section-py) / 2));
  padding-bottom: clamp(2.5rem, 4.5vw, calc((var(--azul-section-py) + 2rem) / 2));
  padding-left: var(--azul-section-px);
  padding-right: var(--azul-section-px);
}

.azul-contact-page .wp-block-post-content {
  max-width: min(52rem, 100%);
  margin-inline: auto;
  padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
  padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  min-width: 0;
  overflow-x: clip;
}

.azul-contact-page .azul-cf7-wrap {
  margin-top: clamp(0.5rem, 1vw, 0.875rem);
  margin-bottom: clamp(0.5rem, 1vw, 0.875rem);
  padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.azul-contact-page .azul-cf7-steps-outer {
  margin-top: clamp(0.25rem, 0.75vw, 0.5rem);
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

@media (max-width: 767px) {
  .azul-cf7-wrap--pepti .wpcf7-form > p:has(> label) > label {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.35rem 0;
  }

  .azul-cf7-wrap--pepti .wpcf7-form > .azul-cf7-confirm-row {
    grid-template-columns: 1fr;
    gap: 0.35rem 0;
    align-items: start;
  }

  .azul-cf7-wrap--pepti .azul-cf7-confirm-row > p:last-child {
    grid-column: 1;
  }

  .azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions,
  .azul-cf7-wrap--pepti .wpcf7-form p:has(.wpcf7-submit) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions .azul-cf7-submit-wrap,
  .azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions .wpcf7-submit,
  .azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions input[type="button"],
  .azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions input[type="reset"],
  .azul-cf7-wrap--pepti .wpcf7-form p:has(.wpcf7-submit) .wpcf7-submit,
  .azul-cf7-wrap--pepti .wpcf7-form p:has(.wpcf7-submit) input[type="button"],
  .azul-cf7-wrap--pepti .wpcf7-form p:has(.wpcf7-submit) input[type="reset"] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .azul-cf7-wrap--pepti .wpcf7-form .azul-cf7-form-actions .azul-cf7-submit-wrap .wpcf7-submit {
    width: auto;
  }

  .azul-cf7-steps__list {
    font-size: 0.82rem;
  }

  .azul-cf7-steps__item {
    padding: 0.75rem 0.35rem;
  }
}

@media (hover: hover) {
  .azul-contact .wpcf7-form .wpcf7-submit:hover,
  .azul-cf7-wrap .wpcf7-form .wpcf7-submit:hover,
  .azul-cf7-submit-wrap:hover {
    background-color: var(--azul-primary-dark);
    transform: none;
    box-shadow: none;
  }

  .azul-cf7-submit-wrap:has(.wpcf7-submit:disabled):hover {
    background-color: var(--azul-primary);
  }

  .azul-contact .wpcf7-form input[type="button"]:hover,
  .azul-cf7-wrap .wpcf7-form input[type="button"]:hover {
    background: rgba(45, 109, 175, 0.08);
    transform: none;
    box-shadow: none;
  }

  .azul-cf7-wrap--pepti .wpcf7-form input[type="button"]:hover,
  .azul-cf7-wrap--pepti .wpcf7-form input[type="reset"]:hover {
    background: rgba(45, 109, 175, 0.06);
    transform: none;
    box-shadow: none;
  }

  .azul-contact .azul-btn--cta:hover {
    background: #fff;
    color: var(--azul-primary);
    transform: none;
    box-shadow: none;
  }
}

/* ---------- 13. Footer ---------- */
.azul-footer {
  background: var(--azul-text);
  color: #fff;
  padding: 4rem 2rem 2rem;
}

.azul-footer__grid {
  max-width: var(--azul-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}

.azul-footer__heading {
  font-size: 1.1rem;
  margin: 0 0 1rem;
  color: var(--azul-primary);
}

.azul-footer__list li {
  margin-bottom: 0.5rem;
}

.azul-footer__list a {
  color: #ccc;
  transition: color 0.3s;
}

@media (hover: hover) {
  .azul-footer__list a:hover {
    color: #fff;
  }
}

.azul-footer__bottom {
  max-width: var(--azul-container);
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid #333;
  text-align: center;
  color: var(--azul-text-lighter);
  font-size: 0.9rem;
}

/* ---------- 14. Scroll Animations ---------- */
.azul-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  box-shadow: none !important;
}

.azul-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
  box-shadow: none !important;
}

/* ---------- 15. Responsive ---------- */
@media (max-width: 1024px) {
  /* 3つの特徴 — タブレット幅では1列（767px と同じ） */
  .azul-features {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .azul-features__title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }

  .azul-feature-card {
    padding: 1.75rem;
    border-radius: 18px;
  }

  .azul-feature-card__icon {
    width: 60px;
    height: 60px;
    font-size: 1.7rem;
  }

  .azul-feature-card__name {
    font-size: 1.2rem;
  }

  .azul-feature-card__text {
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  :root {
    --azul-section-py: 4rem;
  }

  /* Header mobile — 開時は Recruit 同様のグラデーションアニメ背景・白文字 */
  .azul-hamburger {
    display: inline-flex;
  }

  .azul-header.is-menu-open {
    background: var(--azul-primary) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    overflow: visible;
  }

  .azul-header.is-menu-open .azul-header__inner {
    position: relative;
    z-index: 2;
  }

  .azul-nav {
    position: fixed;
    top: var(--azul-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100vh - var(--azul-header-h));
    height: calc(100dvh - var(--azul-header-h));
    background: var(--azul-primary);
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    padding: 0 0 max(2rem, env(safe-area-inset-bottom));
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition:
      opacity 0.35s cubic-bezier(0.08, 0.8, 0.72, 1),
      transform 0.35s cubic-bezier(0.08, 0.8, 0.72, 1),
      visibility 0.35s;
    pointer-events: none;
  }

  .azul-nav.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .azul-nav__list {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .azul-nav__list li {
    position: relative;
  }

  .azul-nav__list li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1rem;
    right: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
  }

  .azul-nav__list li:first-child::before {
    display: none;
  }

  .azul-nav__list li:last-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.75rem;
    right: 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
  }

  .azul-nav__link {
    display: block;
    padding: 1.15rem 1.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
  }

  /* メニュー展開中は hover / focus で色や背景が変わらないようにする */
  .azul-header.is-menu-open .azul-nav__link:hover,
  .azul-header.is-menu-open .azul-nav__link:focus-visible,
  .azul-header.is-menu-open .azul-nav__link:active {
    background: transparent !important;
    color: #fff !important;
    opacity: 1 !important;
  }

  .azul-nav__lang {
    margin: 1.5rem 1.75rem 0;
    text-align: center;
    border-radius: var(--azul-radius-pill);
    display: block;
    background: #fff !important;
    color: var(--azul-primary) !important;
    padding: 0.65rem 1.25rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.9);
  }

  .azul-header.is-menu-open .azul-nav__lang:hover,
  .azul-header.is-menu-open .azul-nav__lang:focus-visible,
  .azul-header.is-menu-open .azul-nav__lang:active {
    background: #fff !important;
    color: var(--azul-primary) !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  /* ===== Mobile — セクション共通の余白拡大 ===== */
  :root {
    --azul-section-px: 1.25rem;
    --azul-hero-inset-x: calc(var(--azul-header-h) / 4);
  }

  .azul-section__heading {
    font-size: 2rem;
  }

  .azul-section__subheading {
    font-size: 0.8rem;
  }

  /* ===== Hero mobile ===== */
  .azul-hero__title {
    font-size: 2.2rem;
  }

  .azul-hero__lead {
    font-size: 1rem;
    line-height: 1.75;
  }

  /* 日本語 SP: PC 用は隠し、6行固定の SP 用を表示 */
  .azul-hero__lead--ja .azul-hero__lead-pc {
    display: none;
  }

  .azul-hero__lead--ja .azul-hero__lead-sp {
    display: block;
    /* 画面幅に追従して縮小し、各行が折り返さないサイズに収める */
    font-size: clamp(0.7rem, 4vw, 1rem);
    line-height: 1.85;
  }

  .azul-hero__lead--ja .azul-hero__lead-line {
    display: block;
    white-space: nowrap;
  }

  .azul-hero__content {
    padding: 1.5rem var(--azul-section-px);
  }

  /* ===== Pickup mobile — 1枚表示・矢印はPC同様に左右 ===== */
  .azul-pickup {
    --azul-pickup-gap: 1rem;
    --azul-pickup-nav-gutter: 2.5rem;
    padding: 3rem var(--azul-section-px);
  }

  .azul-pickup .azul-container {
    padding-inline: var(--azul-pickup-nav-gutter);
    max-width: none;
    width: 100%;
  }

  .azul-pickup__track {
    width: 100%;
  }

  .azul-pickup__item {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    box-shadow: none;
  }

  .azul-pickup__image {
    height: clamp(150px, 42vw, 200px);
  }

  .azul-pickup__nav-btn {
    width: 2.25rem;
    height: 2.25rem;
  }

  .azul-pickup__chevron {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 2px 2px 0 0;
  }

  /* ===== Technology mobile ===== */
  .azul-technology {
    padding: var(--azul-section-py) var(--azul-section-px);
  }

  .azul-technology__hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1.5rem;
    border-radius: 20px;
    margin: 2rem 0;
  }

  .azul-technology__hero-text {
    font-size: 1rem;
  }

  /* ===== Services mobile ===== */
  .azul-services__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .azul-service-card {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .azul-service-card__image {
    border-radius: 12px;
    margin-bottom: 1.25rem;
  }

  .azul-service-card__title {
    font-size: 1.25rem;
  }

  .azul-service-card__text {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  /* ===== News mobile ===== */
  .azul-news {
    padding: var(--azul-section-py) var(--azul-section-px);
  }

  .azul-news-archive-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .azul-news-sidebar {
    position: static;
  }

  .azul-news-sidebar__heading {
    font-size: 1.75rem;
  }

  .azul-news-sidebar__sub {
    margin-bottom: 1rem;
  }

  .azul-news-sidebar__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .azul-news-sidebar__link {
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--azul-border);
    border-radius: 999px;
    font-size: 0.85rem;
  }

  .azul-news-sidebar__link.is-active {
    color: #fff;
    border-color: var(--azul-primary);
    background: var(--azul-primary);
  }

  .azul-news--archive {
    padding: 0;
  }

  .azul-news__header {
    margin-bottom: 2rem;
  }

  .azul-news__more {
    margin-top: 2rem;
  }

  .azul-news__item {
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.25rem 0;
  }

  .azul-news--archive .azul-news__item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 1.25rem 0;
  }

  /* 日付・カテゴリ・タイトル → サムネの順（DOM はサムネ先行のため order で入れ替え） */
  .azul-news--archive .azul-news__body {
    order: 1;
  }

  .azul-news--archive .azul-news__thumb {
    order: 2;
    flex: none;
    width: 100%;
    margin-top: 0.35rem;
  }

  .azul-news__date {
    min-width: auto;
    font-size: 0.85rem;
  }

  .azul-news__category {
    flex: 0 0 auto;
    min-width: auto;
    max-width: none;
  }

  .azul-news--archive .azul-news__category {
    flex-basis: auto;
    min-width: auto;
    max-width: none;
  }

  .azul-news__title {
    font-size: 0.95rem;
    line-height: 1.65;
  }

  /* ===== Recruit mobile ===== */
  .azul-recruit {
    padding: 5rem var(--azul-section-px);
  }

  .azul-recruit__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .azul-recruit__text {
    font-size: 1.05rem;
    margin-bottom: 2rem;
  }

  .azul-recruit__image {
    box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.25);
  }

  /* ===== Contact mobile ===== */
  main.wp-block-group.azul-main.azul-contact-page.azul-content-shell {
    padding-top: clamp(1.5rem, 4vw, 2.25rem);
    padding-bottom: clamp(2rem, 5vw, 2.75rem);
  }

  .azul-contact-page .wp-block-post-content {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  .azul-contact-page .azul-cf7-wrap {
    padding-top: 0.65rem;
    padding-bottom: 0.875rem;
  }

  .azul-contact {
    padding: 5rem var(--azul-section-px);
  }

  .azul-contact__box {
    padding: 2rem 1.5rem;
    border-radius: 20px;
  }

  .azul-contact__lead {
    font-size: 1rem;
  }

  .azul-contact__note {
    font-size: 0.82rem;
  }

  .azul-cf7-steps__list {
    font-size: 0.85rem;
  }

  /* ===== Footer mobile ===== */
  .azul-footer {
    padding: 3rem var(--azul-section-px) 1.5rem;
  }

  .azul-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .azul-footer__heading {
    font-size: 1rem;
  }

  .azul-footer__bottom {
    margin-top: 2rem;
    padding-top: 1.5rem;
    font-size: 0.8rem;
  }


  /* ===== VIEW MORE ボタン（モバイル） ===== */
  .azul-view-more {
    font-size: 0.95rem;
    padding: 0.6rem 1.25rem;
  }
}

/* ---------- 15b. Responsive — 480px以下 ---------- */
@media (max-width: 480px) {
  .azul-section__heading {
    font-size: 1.75rem;
  }

  .azul-hero__title {
    font-size: 1.85rem;
  }

  .azul-technology__hero-title {
    font-size: clamp(1.15rem, 2.5vw + 0.7rem, 1.3rem);
  }

  .azul-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 16. WordPress Block Overrides ---------- */
.wp-site-blocks {
  padding: 0 !important;
}

.wp-block-group {
  padding: 0;
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none;
}

/*
 * 上記より詳細度を上げる: About / Technology いずれも .azul-about__container が
 * .is-layout-constrained 配下で max-width:none に食われるため 1280px が効かなくなる。
 * Technology はコンテナが plain div のみ（wp-block-group クラス無し）の行もあるが、
 * 必ず祖先に section 等の .wp-block-group があるためこのセレクタで拾える。
 */
.wp-block-group .azul-about__container {
  max-width: var(--azul-container);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   404 Page
   ========================================================================== */

/**
 * 固定ヘッダー分を差し引いたビューポート内でメインを伸ばし、
 * 短いコンテンツでもフッタがすぐ上に来ないよう中央配置する。
 */
body.error404 .wp-site-blocks {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--azul-header-h);
}

main.wp-block-group.azul-main.azul-404-page.azul-content-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--azul-container);
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  text-align: center;
  padding-top: clamp(3rem, 8vh, 5.5rem);
  padding-bottom: clamp(3.5rem, 10vh, 6.5rem);
  padding-left: var(--azul-section-px);
  padding-right: var(--azul-section-px);
}

.azul-404-page__inner {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
}

.azul-404-page__code {
  margin: 0 0 0.35rem;
  font-size: clamp(4.5rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--azul-primary);
  opacity: 0.18;
}

.azul-404-page__title {
  margin: 0 0 1rem;
  font-size: clamp(1.65rem, 3.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--azul-text);
}

.azul-404-page__message {
  margin: 0 0 2rem;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.8;
  color: var(--azul-text-light);
}

.azul-404-page__actions {
  margin: 0;
}

.azul-404-page__link {
  gap: 0.4rem;
}

.azul-404-page__link-arrow {
  display: inline-block;
  transition: transform 0.3s;
}

@media (hover: hover) {
  .azul-404-page__link:hover .azul-404-page__link-arrow {
    transform: translateX(-4px);
  }
}

@media (max-width: 768px) {
  main.wp-block-group.azul-main.azul-404-page.azul-content-shell {
    padding-top: clamp(2.5rem, 8vh, 4rem);
    padding-bottom: clamp(3rem, 10vh, 5rem);
  }

  .azul-404-page__code {
    font-size: clamp(3.75rem, 18vw, 5.5rem);
    margin-bottom: 0.25rem;
  }

  .azul-404-page__title {
    font-size: clamp(1.45rem, 5.5vw, 1.85rem);
    margin-bottom: 0.85rem;
  }

  .azul-404-page__message {
    margin-bottom: 1.75rem;
    padding-inline: 0.25rem;
  }
}

@media (max-width: 480px) {
  .azul-404-page__link {
    width: 100%;
    max-width: 18rem;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   Legal Page — Privacy Policy / Terms (page-legal.html)
   ========================================================================== */

main.wp-block-group.azul-main.azul-legal-page.azul-content-shell {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(2.5rem, 5vw, var(--azul-section-py));
  padding-bottom: clamp(3rem, 6vw, calc(var(--azul-section-py) + 1rem));
  padding-left: var(--azul-section-px);
  padding-right: var(--azul-section-px);
}

.azul-legal-page > .wp-block-post-title {
  max-width: min(52rem, 100%);
  margin-inline: auto;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  border-bottom: 1px solid var(--azul-border);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--azul-text);
}

.azul-legal-page .wp-block-post-content {
  max-width: min(52rem, 100%);
  margin-inline: auto;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--azul-text);
}

.azul-legal-page .wp-block-post-content > :first-child {
  margin-top: 0;
}

.azul-legal-page .wp-block-post-content h2 {
  margin: clamp(2.25rem, 4vw, 3rem) 0 0.875rem;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--azul-text);
}

.azul-legal-page .wp-block-post-content h2:first-child {
  margin-top: 0;
}

.azul-legal-page .wp-block-post-content h3 {
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0.75rem;
  font-size: clamp(1.05rem, 2vw, 1.15rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--azul-text);
}

.azul-legal-page .wp-block-post-content p {
  margin: 0 0 1rem;
}

.azul-legal-page .wp-block-post-content p:last-child {
  margin-bottom: 0;
}

.azul-legal-page .wp-block-post-content ol,
.azul-legal-page .wp-block-post-content ul {
  margin: 0.5rem 0 1.25rem;
  padding-left: 1.5rem;
  list-style-position: outside;
}

/* 番号リスト（第1階層） */
.azul-legal-page .wp-block-post-content ol {
  list-style: decimal;
}

/* 番号リストの入れ子 */
.azul-legal-page .wp-block-post-content ol ol {
  list-style: lower-alpha;
}

.azul-legal-page .wp-block-post-content ol ol ol {
  list-style: lower-roman;
}

/* 箇条書き（第1階層） */
.azul-legal-page .wp-block-post-content > ul,
.azul-legal-page .wp-block-post-content ul:not(ul ul):not(ol ul) {
  list-style: disc;
}

.azul-legal-page .wp-block-post-content > ul > li::marker,
.azul-legal-page .wp-block-post-content ul:not(ul ul):not(ol ul) > li::marker {
  color: var(--azul-text);
}

/* 入れ子 ul（第2階層）— 白丸 */
.azul-legal-page .wp-block-post-content ol ul,
.azul-legal-page .wp-block-post-content ul ul {
  list-style: circle;
  padding-left: 1.65rem;
}

.azul-legal-page .wp-block-post-content ol ul > li::marker,
.azul-legal-page .wp-block-post-content ul ul > li::marker {
  color: var(--azul-text-light);
}

/* 入れ子 ul（第3階層）— 四角 */
.azul-legal-page .wp-block-post-content ol ul ul,
.azul-legal-page .wp-block-post-content ul ul ul {
  list-style: square;
  padding-left: 1.75rem;
}

.azul-legal-page .wp-block-post-content ol ul ul > li::marker,
.azul-legal-page .wp-block-post-content ul ul ul > li::marker {
  color: var(--azul-text-lighter);
}

.azul-legal-page .wp-block-post-content ol ol,
.azul-legal-page .wp-block-post-content ol ul,
.azul-legal-page .wp-block-post-content ul ol,
.azul-legal-page .wp-block-post-content ul ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.azul-legal-page .wp-block-post-content li {
  display: list-item;
  margin-bottom: 0.45rem;
}

.azul-legal-page .wp-block-post-content li:last-child {
  margin-bottom: 0;
}

.azul-legal-page .wp-block-post-content a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.azul-legal-page .wp-block-post-content a:hover {
  color: var(--wp--preset--color--primary-dark, #0d59a7);
}

/* WP layout（is-layout-constrained > * の margin-block-start: 0）より後・高詳細度で上余白を確保 */
.azul-legal-page .wp-block-post-content p.azul-legal-page__note {
  margin-block-start: clamp(3rem, 6vw, 4rem);
  margin-block-end: 0;
  font-size: 0.9rem;
  color: var(--azul-text-light);
  line-height: 1.65;
  text-align: right;
}

@media (max-width: 767px) {
  main.wp-block-group.azul-main.azul-legal-page.azul-content-shell {
    padding-top: clamp(2rem, 6vw, 2.75rem);
    padding-bottom: clamp(2.5rem, 7vw, 3.5rem);
  }

  .azul-legal-page .wp-block-post-content ol,
  .azul-legal-page .wp-block-post-content ul {
    padding-left: 1.25rem;
  }
}

/* ---- Complianz: 同意バナーをヘッダー（z-index 最大 10001 付近）より手前に ---- */
#cmplz-cookiebanner-container,
.cmplz-cookiebanner.cmplz-show,
.cmplz-cookiebanner:not(.cmplz-manage-consent) {
  z-index: 2147483646 !important;
}

#cmplz-manage-consent .cmplz-manage-consent,
button.cmplz-manage-consent {
  z-index: 2147483645 !important;
}

/* ==========================================================================
   17. News Archive — Page Header & Category Filter
   ========================================================================== */

/* ---- News Hero (ページヘッダー帯) — page-hero に合わせた構造・スタイル ---- */
.azul-news-hero {
  color: #fff;
  padding: 5rem 0 4rem;          /* 横 padding は __inner 側で管理（ロゴ揃え） */
  position: relative;
  overflow: hidden;
  /* 背景は ::before でアニメーション（§1 帯グラデーション共通） */
}

/* dots overlay */
.azul-news-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(255,255,255,0.08)'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

.azul-news-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--azul-container);
  margin: 0 auto;
  padding: 0 var(--azul-section-px); /* = header__inner と同じ構造でロゴ位置に揃う */
}

/* Large English heading（.azul-page-hero__title と同一スタイル・アニメーション） */
.azul-news-hero__title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.4rem;
  color: #fff;
  letter-spacing: -0.01em;
  animation: azul-page-hero-title-in 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Japanese subtitle（常にレンダリング。EN は visibility:hidden でスペース確保） */
.azul-news-hero__sub {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  letter-spacing: 0.04em;
  animation: azul-page-hero-fade-up 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both;
}

.azul-news-hero__sub.is-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .azul-news-hero__title,
  .azul-news-hero__sub {
    animation: none;
  }
}

/* ---- Category Filter Tabs ---- */
.azul-news-filter {
  background: var(--azul-bg);
  border-bottom: 1px solid var(--azul-border);
  padding: 0;                    /* 横 padding は __list 側で管理（ロゴ揃え） */
  position: sticky;
  top: var(--azul-header-h);
  z-index: 10;
}

.azul-news-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--azul-section-px); /* ロゴ揃え */
  max-width: var(--azul-container);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.azul-news-filter__list::-webkit-scrollbar {
  display: none;
}

.azul-news-filter__item {
  flex-shrink: 0;
}

.azul-news-filter__btn {
  display: inline-block;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--azul-text-light);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.azul-news-filter__btn.is-active {
  color: var(--azul-primary);
  border-bottom-color: var(--azul-primary);
}

@media (hover: hover) {
  .azul-news-filter__btn:not(.is-active):hover {
    color: var(--azul-primary);
    border-bottom-color: rgba(0, 101, 204, 0.3);
  }
}

/* ==========================================================================
   18. Single Post — Post Navigation (Prev / Next)
   ========================================================================== */

.azul-post-nav {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--azul-border);
}

.azul-post-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.azul-post-nav__item {
  min-width: 0;
}

.azul-post-nav__item--next {
  text-align: right;
}

.azul-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--azul-border);
  border-radius: var(--azul-radius-md);
  background: var(--azul-bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.azul-post-nav__link--next {
  align-items: flex-end;
}

@media (hover: hover) {
  .azul-post-nav__link:hover {
    border-color: var(--azul-primary);
    box-shadow: 0 2px 12px rgba(0, 101, 204, 0.1);
    background: rgba(0, 101, 204, 0.02);
  }
}

.azul-post-nav__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul-primary);
}

.azul-post-nav__title {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--azul-text);
  font-weight: 500;

  /* 2行で省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Single post: 区切り線 ---- */
.azul-single-news__divider {
  border: none;
  border-top: 1px solid var(--azul-border);
  margin-top: 0;
}

/* ---- Single post: 本文エリアのタイポグラフィ強化 ---- */
.azul-single-news .wp-block-post-content {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--azul-text);
}

.azul-single-news .wp-block-post-content h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--azul-primary);
}

.azul-single-news .wp-block-post-content h3 {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.azul-single-news .wp-block-post-content p {
  margin-bottom: 1.5rem;
}

.azul-single-news .wp-block-post-content ul,
.azul-single-news .wp-block-post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.azul-single-news .wp-block-post-content li {
  margin-bottom: 0.5rem;
  line-height: 1.8;
}

/*
 * NEWS 本文リンク
 * - インライン <a>: 下線スタイル（2537 相当）。別タブは同色・下線のまま FA で外部アイコン。
 * - ボタンブロック（.wp-block-button__link）: core / theme.json のグレー帯を上書きし、白地ピル + プライマリー。
 *   別タブのときは外部アイコンを右に付与。
 */

/* インライン（ボタンブロックの <a> は除外 — global-styles / block-library と競合） */
.azul-single-news .wp-block-post-content a:not(.wp-block-button__link):not([target="_blank"]) {
  color: var(--azul-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover: hover) {
  .azul-single-news .wp-block-post-content a:not(.wp-block-button__link):not([target="_blank"]):hover {
    color: var(--azul-primary-dark);
  }
}

/* インライン + 別タブ */
.azul-single-news .wp-block-post-content a:not(.wp-block-button__link)[target="_blank"] {
  color: var(--azul-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: inherit;
}

.azul-single-news .wp-block-post-content a:not(.wp-block-button__link)[target="_blank"]::after {
  display: inline-block;
  margin-left: 0.28em;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.78em;
  line-height: 1;
  font-style: normal;
  text-decoration: none;
  vertical-align: 0.05em;
  -webkit-font-smoothing: antialiased;
  content: '\f08e';
}

@media (hover: hover) {
  .azul-single-news .wp-block-post-content a:not(.wp-block-button__link)[target="_blank"]:hover {
    color: var(--azul-primary-dark);
  }
}

/* ボタンブロック: theme.json / :root .wp-element-button の #32373c 等より強く上書き */
.azul-single-news .wp-block-post-content .wp-block-buttons .wp-block-button .wp-block-button__link,
.azul-single-news .wp-block-post-content .wp-block-button .wp-block-button__link {
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1.35rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--azul-primary) !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--azul-primary) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  text-underline-offset: unset;
}

@media (hover: hover) {
  .azul-single-news .wp-block-post-content .wp-block-buttons .wp-block-button .wp-block-button__link:hover,
  .azul-single-news .wp-block-post-content .wp-block-button .wp-block-button__link:hover {
    border-color: var(--azul-primary-dark) !important;
    background-color: rgba(0, 101, 204, 0.06) !important;
    color: var(--azul-primary-dark) !important;
  }
}

.azul-single-news .wp-block-post-content .wp-block-buttons .wp-block-button .wp-block-button__link[target="_blank"]::after,
.azul-single-news .wp-block-post-content .wp-block-button .wp-block-button__link[target="_blank"]::after {
  flex-shrink: 0;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.85em;
  line-height: 1;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  content: '\f08e';
}

/* NEWS 本文のボタングループ: 中央指定でも左寄せに／縦積み時は gap でボタン間をあける。
 * （ひっつき対策はコンテナの gap。直下に続く段落との間は margin-block-end。） */
.azul-single-news .wp-block-post-content .wp-block-buttons.is-content-justification-center {
  justify-content: flex-start;
}

.azul-single-news .wp-block-post-content .wp-block-buttons {
  gap: 0.75rem 1rem;
  margin-block-end: 1.5rem;
}

.azul-single-news .wp-block-post-content img {
  border-radius: var(--azul-radius-md);
  margin-bottom: 1.5rem;
}

.azul-single-news .wp-block-post-content blockquote {
  border-left: 4px solid var(--azul-primary);
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  background: rgba(0, 101, 204, 0.04);
  border-radius: 0 var(--azul-radius-sm) var(--azul-radius-sm) 0;
  color: var(--azul-text-light);
  font-style: italic;
}

/* ==========================================================================
   19. Subpage — Page Hero Header（下層ページ共通グラデーション帯）
   ========================================================================== */

/* ---- Hero Band（page-hero / news-hero / technology-hero / service-hero 共通） ---- */
.azul-page-hero,
.azul-technology-hero,
.azul-service-hero {
  color: #fff;
  padding: 4.5rem 0 4rem;       /* 横 padding は __inner 側で管理（ロゴ揃え） */
  position: relative;
  overflow: hidden;
  /* 背景は ::before でアニメーション（§1 帯グラデーション共通） */
}

/* 本文パターン内ヒーロー — 固定ヘッダー分は main 側（テンプレ inline / 下記）で確保 */
main.azul-main.azul-technology-page,
main.azul-main.azul-service-page {
  margin-block-start: var(--azul-header-h);
}

/* dots overlay（news-hero と共通意匠） */
.azul-page-hero::after,
.azul-technology-hero::after,
.azul-service-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(255,255,255,0.08)'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

.azul-page-hero__inner,
.azul-technology-hero__inner,
.azul-service-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--azul-container);
  margin: 0 auto;
  padding: 0 var(--azul-section-px); /* = header__inner と同じ構造でロゴ位置に揃う */
}

/* ---- Text entrance animations ---- */
@keyframes azul-page-hero-title-in {
  from {
    opacity: 0;
    transform: translateY(22px);
    letter-spacing: 0.04em;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: -0.01em;
  }
}

@keyframes azul-page-hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Large English heading */
.azul-page-hero__title,
.azul-technology-hero__title,
.azul-service-hero__title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.4rem;
  color: #fff;
  letter-spacing: -0.01em;
  animation: azul-page-hero-title-in 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Japanese subtitle（常にレンダリング。EN は visibility:hidden でスペース確保） */
.azul-page-hero__sub,
.azul-technology-hero__sub,
.azul-service-hero__sub {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  letter-spacing: 0.04em;
  animation: azul-page-hero-fade-up 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both;
}

.azul-page-hero__sub.is-hidden,
.azul-technology-hero__sub.is-hidden,
.azul-service-hero__sub.is-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .azul-page-hero__title,
  .azul-page-hero__sub,
  .azul-technology-hero__title,
  .azul-technology-hero__sub,
  .azul-service-hero__title,
  .azul-service-hero__sub {
    animation: none;
  }
}

/* ---- Breadcrumb（帯の下・白背景） ---- */
.azul-page-hero-breadcrumb {
  background: var(--azul-bg);
  border-bottom: 1px solid var(--azul-border);
  padding: 0;                    /* 横 padding は __inner 側で管理 */
}

.azul-page-hero-breadcrumb__inner {
  max-width: var(--azul-container);
  margin: 0 auto;
  padding: 0 var(--azul-section-px); /* ロゴ揃え */
  min-width: 0;
}

.azul-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem 0.4rem;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  list-style: none;
  margin: 0;
  padding: 0.7rem 0;
}

.azul-breadcrumb__item {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--azul-text-light);
}

.azul-breadcrumb__item a {
  color: var(--azul-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .azul-breadcrumb__item a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

.azul-breadcrumb__item--sep {
  color: var(--azul-text-lighter);
  font-size: 0.75rem;
  line-height: 1;
}

.azul-breadcrumb__item--current {
  color: var(--azul-text);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .azul-page-hero,
  .azul-technology-hero,
  .azul-service-hero {
    padding: 3rem 0 2.5rem;  /* 横は __inner の var(--azul-section-px) が 1.25rem に切り替わる */
  }

  .azul-page-hero__title,
  .azul-technology-hero__title,
  .azul-service-hero__title {
    font-size: 2rem;
  }

  .azul-page-hero__sub,
  .azul-technology-hero__sub,
  .azul-service-hero__sub {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .azul-page-hero,
  .azul-technology-hero,
  .azul-service-hero {
    padding: 2.5rem 0 2rem;
  }
}

/* ---- Responsive: News Hero ---- */
@media (max-width: 768px) {
  .azul-news-hero {
    padding: 3rem 0 2.5rem;    /* 横は __inner の var(--azul-section-px) が 1.25rem に切り替わる */
  }

  .azul-news-hero__title {
    font-size: 2rem;
  }

  .azul-news-hero__sub {
    font-size: 0.9rem;
  }

  .azul-news-filter__btn {
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
  }

  .azul-post-nav__inner {
    grid-template-columns: 1fr;
  }

  .azul-post-nav__item--next {
    text-align: left;
  }

  .azul-post-nav__link--next {
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .azul-news-hero {
    padding: 3rem 0 2.5rem;
  }

  .azul-post-nav__link {
    padding: 1rem 1.25rem;
  }
}

/* ==========================================================================
   20. About Us Page
   --------------------------------------------------------------------------
   - patterns/page-about.php（ブロックパターン）が出力するセクション群のスタイル。
   - 各セクションは全幅背景（淡いグレー切替）を扱えるよう main 直下に並ぶため、
     コンテナは内側の .azul-about__container（max-width: var(--azul-container)）で揃える。
   - ブロックエディタで挿入された wp-block-group の Flow Layout（is-layout-flow）が
     子要素に margin を入れるが、本セクションでは grid / flex / 明示マージンで上書きする。
   ========================================================================== */

/* main wrapper（page-about.html） */
.azul-about-page {
  /* main 自体には max-width を付けず、内側コンテナで管理 */
  min-width: 0;
  box-sizing: border-box;
}

/* セクション共通 */
.azul-about__section {
  padding: var(--azul-section-py) var(--azul-section-px);
  background: var(--azul-bg);
}

.azul-about__section--alt {
  background: var(--azul-bg-alt);
}

.azul-about__container {
  max-width: var(--azul-container);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* セクション見出し
 * （下層帯ヘッダー page-hero / news-hero と同系）
 * → 英語見出し .azul-about__title（大）＋ 日本語 .azul-about__sub（小・グレー）
 * 英語版では編集画面上で .azul-about__sub の段落を削除するのみでよい。 */
.azul-about__section-head {
  text-align: center;
  margin: 0 auto 3rem;
  max-width: 760px;
}

.azul-about__section-head--left {
  text-align: left;
  margin-left: 0;
}

.azul-about__title {
  margin: 0 0 0.35rem !important;
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--azul-text);
  letter-spacing: -0.01em;
}

.azul-about__sub {
  margin: 0 !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--azul-text-light);
  letter-spacing: 0.04em;
}

.azul-about__lead {
  margin: 1.25rem auto 0 !important;
  max-width: 720px;
  color: var(--azul-text-light);
  line-height: 1.9;
  font-size: var(--wp--preset--font-size--medium);
  text-align: left;
}

/* --- 20.1 Mission / Concept / Vision --- */
.azul-about-mcv__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  margin: 0 !important;
}

.azul-about-mcv__grid > * {
  margin-top: 0 !important;
}

.azul-about-mcv__card {
  position: relative;
  background: var(--azul-bg);
  border: 1px solid var(--azul-border);
  border-radius: var(--azul-radius-md);
  padding: 2.5rem 1.75rem 2rem;
  overflow: hidden;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.azul-about-mcv__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--azul-gradient);
}

@media (hover: hover) {
  .azul-about-mcv__card:hover {
    border-color: var(--azul-primary);
    transform: translateY(-3px);
  }
}

.azul-about-mcv__num {
  margin: 0 0 0.4rem !important;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--azul-primary);
}

.azul-about-mcv__heading {
  margin: 0 0 1.25rem !important;
  padding-bottom: 0.9rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--azul-text);
  border-bottom: 1px solid var(--azul-border);
}

.azul-about-mcv__body {
  margin: 0 !important;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--azul-text);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .azul-about-mcv__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* --- 20.2 Top Message --- */
.azul-about-message__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(268px, 28vw, 22rem);
  gap: 3rem;
  align-items: start;
  margin: 0 !important;
}

.azul-about-message__inner > * {
  margin-top: 0 !important;
  min-width: 0;
}

.azul-about-message__body {
  max-width: 780px;
}

.azul-about-message__body > * {
  margin-top: 0 !important;
}

.azul-about-message__body p {
  margin: 0 0 1.5rem !important;
  font-size: 1rem;
  line-height: 2;
  color: var(--azul-text);
}

.azul-about-message__body p:last-child {
  margin-bottom: 0 !important;
}

.azul-about-message__aside {
  position: sticky;
  top: calc(var(--azul-header-h) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 0 !important;
}

.azul-about-message__aside > * {
  margin-top: 0 !important;
}

.azul-about-message__photo {
  margin: 0 !important;
  width: 100%;
  max-width: none;
  aspect-ratio: 3 / 4;
  background: var(--azul-bg-alt);
  border-radius: var(--azul-radius-md);
  overflow: hidden;
}

/* コア画像ブロックが is-resized / サムネサイズ / インライン width で枠より小さくなるのを防ぐ */
.azul-about-message__aside .azul-about-message__photo.wp-block-image {
  width: 100% !important;
  max-width: none !important;
}

.azul-about-message__aside .azul-about-message__photo.wp-block-image > a {
  width: 100%;
  height: 100%;
  display: block;
}

.azul-about-message__photo img {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

.azul-about-message__signature {
  margin: 0 !important;
  text-align: right;
}

.azul-about-message__signature > * {
  margin-top: 0 !important;
}

.azul-about-message__signature p {
  margin: 0 !important;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--azul-text);
}

.azul-about-message__signature p + p {
  margin-top: 0.5rem !important;
}

.azul-about-message__signature strong {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.azul-about-message__date {
  color: var(--azul-text-light) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .azul-about-message__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
    max-width: 100%;
  }

  .azul-about-message__aside {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* タブレット幅はやや広め、本文とのバランスを取る */
  .azul-about-message__photo {
    flex: 0 0 auto;
    width: min(38vw, 15rem);
    max-width: 42%;
    aspect-ratio: 3 / 4;
  }

  /* ベースの wp-block-image に width:100%!important があるため、狭い画面では必ずここで上書き */
  .azul-about-message__aside .azul-about-message__photo.wp-block-image {
    width: min(38vw, 15rem) !important;
    max-width: 42% !important;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .azul-about-message__photo img {
    object-fit: contain;
    object-position: center top;
  }

  .azul-about-message__signature {
    flex: 1 1 auto;
    text-align: left;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  /* 縦積みだと写真が主張しすぎるため、SP でも左写真・右署名の横並び */
  .azul-about-message__aside {
    flex-direction: row;
    align-items: center;
    gap: 0.875rem;
  }

  .azul-about-message__photo {
    flex: 0 0 auto;
    width: clamp(6.25rem, 28vw, 7.75rem);
    max-width: 34%;
    aspect-ratio: 3 / 4;
    margin-left: 0;
    margin-right: 0;
  }

  .azul-about-message__aside .azul-about-message__photo.wp-block-image {
    width: clamp(6.25rem, 28vw, 7.75rem) !important;
    max-width: 34% !important;
    flex-shrink: 0;
  }

  .azul-about-message__signature {
    flex: 1 1 auto;
    text-align: left;
    min-width: 0;
  }

  .azul-about-message__signature p {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* --- 20.3 Company Profile --- */
.azul-about-profile__table {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--azul-border);
}

.azul-about-profile__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1.5rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--azul-border);
}

.azul-about-profile__label {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--azul-text);
  letter-spacing: 0.04em;
}

.azul-about-profile__value {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--azul-text);
}

.azul-about-profile__value ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.5rem 0 0;
}

.azul-about-profile__value ul li {
  line-height: 1.4;
}

.azul-about-profile__value ul li + li {
  margin-top: 0.7rem;
}

@media (max-width: 768px) {
  .azul-about-profile__row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 1.25rem 0;
  }

  .azul-about-profile__label {
    color: var(--azul-primary);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* --- 20.3b History --- */
.azul-about-history__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  margin-top: 1rem;
}

.azul-about-history__timeline {
  min-width: 0;
}

.azul-about-history__entry {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.35rem 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--azul-border);
}

.azul-about-history__entry:first-child {
  padding-top: 0;
}

.azul-about-history__entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.azul-about-history__year {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--azul-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.azul-about-history__text {
  margin: 0;
  color: var(--azul-text-light);
  line-height: 1.85;
  font-size: 0.95rem;
}

.azul-about-history__media {
  border-radius: var(--azul-service-media-radius);
  overflow: hidden;
  background: var(--azul-bg-alt);
}

.azul-about-history__video {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
  background: #000;
}

@media (max-width: 900px) {
  .azul-about-history__intro {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* --- 20.4 Our Team --- */
.azul-about-team__sub-title {
  margin: 0 0 0.35rem !important;
  font-size: clamp(1.15rem, 2.8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--azul-text);
}

.azul-about-team__sub-caption {
  margin: 0 0 2rem !important;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--azul-border);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--azul-text-light);
  letter-spacing: 0.04em;
}

/* 英語のみ等: 日本語キャプションが無いときは h3 直下に罫線（JP は .sub-caption 側に罫線） */
.azul-about-team .azul-about__container:not(:has(.azul-about-team__sub-caption)) .azul-about-team__sub-title {
  margin: 0 0 2rem !important;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--azul-border);
}
.azul-about-team__grid {
  /* Grid だと最終行が常に左詰めになるため、折り返し + 中央寄せで 5人時は下段2枚をセンターに */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  margin: 0 !important;
}

.azul-about-team__grid > * {
  margin-top: 0 !important;
  flex: 0 1 calc((100% - 3.5rem) / 3);
  max-width: calc((100% - 3.5rem) / 3);
  min-width: 0;
}

.azul-about-team__card {
  display: flex;
  flex-direction: column;
  background: var(--azul-bg);
  border: 1px solid var(--azul-border);
  border-radius: var(--azul-radius-md);
  padding: 1.5rem;
}

.azul-about-team__card > * {
  margin-top: 0 !important;
}

.azul-about-team__photo {
  margin: 0 0 1.25rem !important;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--azul-bg-alt);
  border-radius: var(--azul-radius-sm);
  overflow: hidden;
}

.azul-about-team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.azul-about-team__name {
  margin: 0 0 0.2rem !important;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--azul-text);
}

.azul-about-team__name-en {
  margin: 0 0 0.55rem !important;
  font-size: 0.85rem;
  color: var(--azul-text-light);
  letter-spacing: 0.06em;
}

.azul-about-team__degree {
  margin: 0 0 0.85rem !important;
  font-size: 0.82rem;
  color: var(--azul-text-light);
  min-height: 1.2em;
}

.azul-about-team__role {
  margin: auto 0 0 !important;
  padding-top: 0.85rem;
  border-top: 1px solid var(--azul-border);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--azul-primary);
}

@media (max-width: 1024px) {
  .azul-about-team__grid > * {
    flex: 0 1 calc((100% - 1.75rem) / 2);
    max-width: calc((100% - 1.75rem) / 2);
  }
}

@media (max-width: 600px) {
  .azul-about-team__grid > * {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* --- 20.5 Partner --- */
.azul-about-partner__card {
  margin: 0 0 1.75rem !important;
  background: var(--azul-bg);
  border: 1px solid var(--azul-border);
  border-radius: var(--azul-radius-md);
  padding: 2.25rem;
}

.azul-about-partner__card > * {
  margin-top: 0 !important;
}

.azul-about-partner__card-title {
  margin: 0 0 1rem !important;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--azul-text);
  letter-spacing: 0.04em;
}

.azul-about-partner__card p {
  margin: 0 !important;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--azul-text);
}

/* デケル教授カード + 研究所カード（PC: 2カラム／バナー行と揃え）— 旧 Partner 2カラム用 */
.azul-about-partner__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 0 1.75rem !important;
}

/* 技術アドバイザー: 教授1名・ワンカラム */
.azul-about-advisor .azul-about-partner__card {
  margin: 0 !important;
}

/* 左: 見出し＋本文（写真の高さに対して縦中央） / 右: 写真 */
.azul-about-advisor__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  column-gap: 2.5rem;
  width: 100%;
  margin: 0 auto !important;
}

.azul-about-advisor__inner > * {
  margin-top: 0 !important;
}

.azul-about-advisor__content {
  grid-column: 1;
  align-self: center;
  min-width: 0;
  text-align: left;
}

.azul-about-advisor__content > * {
  margin-top: 0 !important;
}

.azul-about-advisor__content .azul-about-partner__card-title {
  margin: 0 0 1rem !important;
}

.azul-about-advisor__content p {
  margin: 0 !important;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--azul-text);
}

.azul-about-advisor .azul-about-partner__profile-media {
  grid-column: 2;
  align-self: center;
  width: 300px;
  max-width: 300px;
  justify-self: end;
}

.azul-about-advisor .azul-about-partner__profile-photo img {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
}

/* 共働パートナー: 研究所カード + バナー（バナー見出しなし） */
.azul-about-co-partner .azul-about-partner__card {
  margin: 0 0 1.75rem !important;
}

.azul-about-co-partner .azul-about-partner__banners {
  margin-top: 0 !important;
}

.azul-about-partner__cards > * {
  margin-top: 0 !important;
}

.azul-about-partner__cards .azul-about-partner__card {
  margin: 0 !important;
  min-height: 100%;
}

.azul-about-partner__profile-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1.75rem;
}

.azul-about-partner__profile-row > *,
.azul-about-partner__profile-media > *,
.azul-about-partner__profile-body > * {
  margin-top: 0 !important;
}

.azul-about-partner__profile-body {
  flex: 1 1 0;
  min-width: 0;
}

.azul-about-partner__profile-media {
  flex: 0 0 auto;
  width: min(100%, 180px);
  max-width: 180px;
}

.azul-about-partner__profile-photo {
  margin: 0 !important;
  overflow: hidden;
  border-radius: var(--azul-radius-sm);
  background: var(--azul-bg-alt);
}

.azul-about-partner__profile-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4.5;
  object-fit: cover;
  object-position: center;
}

.azul-about-partner__banners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 !important;
}

.azul-about-partner__banners > * {
  margin-top: 0 !important;
}

.azul-about-partner__banner {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 !important;
  border-radius: 0;
}

/* 画像＋ラベルをまとめたクリック／キーボードリンク領域 */
.azul-about-partner__banner--hit {
  position: relative;
}

.azul-about-partner__banner--hit > .wp-block-html {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.azul-about-partner__banner-hit {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  cursor: pointer;
  border-radius: var(--azul-radius-sm);
}

.azul-about-partner__banner-hit:focus {
  outline: none;
}

.azul-about-partner__banner-hit:focus-visible {
  outline: 2px solid var(--azul-primary);
  outline-offset: 3px;
}

.azul-about-partner__banner > * {
  margin-top: 0 !important;
}

.azul-about-partner__banner-img {
  margin: 0 0 0.75rem !important;
  width: 100%;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  display: block;
}

.azul-about-partner__banner-img figure {
  margin: 0 !important;
  width: 100%;
  line-height: 0;
}

.azul-about-partner__banner-img a {
  display: block;
  width: 100%;
  line-height: 0;
}

.azul-about-partner__banner-img img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
}

.azul-about-partner__banner-label {
  margin: 0 !important;
  font-size: 1rem;
  font-weight: 700;
  color: var(--azul-text);
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.azul-about-partner__banner-label:not(:has(a))::after {
  content: '↗';
  display: inline-block;
  font-size: 0.85em;
  color: var(--azul-primary);
}

@media (hover: hover) {
  .azul-about-partner__banner--hit:has(.azul-about-partner__banner-hit:hover) .azul-about-partner__banner-label {
    color: var(--azul-primary);
  }

  /* 既に DB に保存済みのブロックでラベル内に &lt;a&gt; が残る場合 */
  .azul-about-partner__banner-label a:hover {
    color: var(--azul-primary);
  }
}

.azul-about-partner__banner--hit:has(.azul-about-partner__banner-hit:focus-visible) .azul-about-partner__banner-label {
  color: var(--azul-primary);
}

.azul-about-partner__banner-label a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.azul-about-partner__banner-label a::after {
  content: '↗';
  display: inline-block;
  font-size: 0.85em;
  color: var(--azul-primary);
}
@media (max-width: 700px) {
  .azul-about-partner__banners {
    grid-template-columns: 1fr;
  }

  .azul-about-partner__cards {
    grid-template-columns: 1fr;
  }

  .azul-about-partner__card {
    padding: 1.75rem 1.25rem;
  }

  .azul-about-partner__profile-row {
    flex-direction: column;
    gap: 1.25rem;
  }

  .azul-about-partner__profile-media {
    order: -1;
    width: 100%;
    max-width: 220px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .azul-about-advisor__inner {
    grid-template-columns: minmax(0, 1fr) 220px;
    column-gap: 1.5rem;
  }

  .azul-about-advisor .azul-about-partner__profile-media {
    width: 220px;
    max-width: 220px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: unset;
  }
}

@media (max-width: 560px) {
  .azul-about-advisor__inner {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }

  .azul-about-advisor__content {
    grid-column: 1;
    grid-row: 1;
  }

  .azul-about-advisor .azul-about-partner__profile-media {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
  }
}

/* --- 20.6 Research Integrity Hotline --- */
.azul-about-hotline {
  background: var(--azul-bg);
}

/* 末尾ブロックは英語見出しを一段小さく（メインコンテンツより邪魔にならない程度） */
.azul-about-hotline .azul-about__title {
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  line-height: 1.2;
}

.azul-about-hotline .azul-about__sub {
  font-size: 0.9rem;
}
.azul-about-hotline__container {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.azul-about-hotline__card {
  margin: 0 !important;
  background: var(--azul-bg);
  border: 1px solid var(--azul-border);
  border-radius: var(--azul-radius-md);
  padding: 2.25rem;
}

.azul-about-hotline__card > * {
  margin-top: 0 !important;
}

.azul-about-hotline__card p {
  margin: 0 0 1rem !important;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--azul-text);
}

.azul-about-hotline__card p:last-child {
  margin-bottom: 0 !important;
}

.azul-about-hotline__list {
  list-style: disc;
  padding-left: 1.4rem;
  margin: 0 0 1rem;
}

.azul-about-hotline__list li {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--azul-text);
}

.azul-about-hotline__list li + li {
  margin-top: 0.4rem;
}

.azul-about-hotline__card a {
  color: var(--azul-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover: hover) {
  .azul-about-hotline__card a:hover {
    text-decoration: none;
  }
}

@media (max-width: 600px) {
  .azul-about-hotline__card {
    padding: 1.75rem 1.25rem;
  }
}

/* --- 20.7 Responsive: section padding shrink --- */
@media (max-width: 768px) {
  .azul-about__section {
    padding: 4rem var(--azul-section-px);
  }

  .azul-about__section-head {
    margin-bottom: 2.25rem;
  }
}

@media (max-width: 480px) {
  .azul-about__section {
    padding: 3rem var(--azul-section-px);
  }
}


/* --- 20.1.1 Mission / Concept / Vision (Proposed Redesign) --- */
.azul-about-mcv-v2 {
  padding: 8rem 0;
  background-color: var(--azul-bg);
  border-bottom: 1px solid var(--azul-border);
}

.azul-about-mcv-v2__hero {
  margin-bottom: 6rem;
}

.azul-about-mcv-v2__main-title {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--azul-text);
  margin: 0 0 1.5rem !important;
  white-space: nowrap;
}

.azul-about-mcv-v2__main-title span {
  display: inline;
}

.azul-about-mcv-v2__sub-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--azul-primary);
  letter-spacing: 0.1em;
  margin: 0 !important;
  position: relative;
  padding-left: 3rem;
}

.azul-about-mcv-v2__sub-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2rem;
  height: 2px;
  background-color: var(--azul-primary);
  transform: translateY(-50%);
}

.azul-about-mcv-v2__content {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  max-width: 900px;
  margin-left: auto;
}

/* --- 旧 item スタイルは 20.1.4 セクションに統合済み --- */

@media (max-width: 768px) {
  .azul-about-mcv-v2 {
    padding: 1rem 0 5rem;
  }
  
  .azul-about-mcv-v2__hero {
    margin-bottom: 4rem;
  }

  .azul-about-mcv-v2__main-title {
    white-space: normal;
  }
  
  .azul-about-mcv-v2__content {
    gap: 3.5rem;
  }

  .azul-about__lead br {
    display: contents;
  }
  
    /* 旧 item::before / item-header は 20.1.4 に統合済み */
}

/* --- 20.1.2 MCV v2: stagger delay は GSAP対応につき 20.1.4 に統合済み --- */

/* --- 20.1.3 MCV v2: AzaPc Background Graphic --- */
.azul-about-mcv-v2 {
  position: relative;
  overflow: hidden;
  padding: var(--azul-section-py) var(--azul-section-px);
  background: var(--azul-bg);
}

.azul-about-mcv-v2::before {
  content: '';
  position: absolute;
  top: -10%;
  left: auto;
  /* 1280 列の右端付近にロック。旧 right:-10% はセクション全幅%のためウルトラワイドで右端へ吸い寄せられる */
  /* A = パディング内の利用可能幅, B = min(1280, A)（実コンテンツ列幅） */
  /* 右ガター = max(0, (A-B)/2) ／ はみ出しは列幅の約10%（旧 -10% 相当を列基準に） */
  right: calc(
    max(
      0px,
      calc(
        (
          (100% - 2 * var(--azul-section-px))
          - min(var(--azul-container), (100% - 2 * var(--azul-section-px)))
        )
        / 2
      )
    )
    - min(var(--azul-container), (100% - 2 * var(--azul-section-px))) * 0.1
  );
  width: 520px;
  height: 520px;
  background-image: url('../images/azpc-molecule.svg');
  background-repeat: no-repeat;
  background-size: 72%;
  background-position: center;
  /* 
   * 背景グラフィックの濃さ調整
   * opacity: 0.05;  // デフォルト（かなり薄め）
   * opacity: 0.1;   // 少し目立たせる
   * opacity: 0;     // 完全に消す
   */
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  
  /* ゆっくり回転するアニメーション */
  animation: azul-spin-slow 120s linear infinite;
}

@keyframes azul-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.azul-about__container {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  /* デスクトップ 520px の約半分。右上に寄せて主張を抑える */
  .azul-about-mcv-v2::before {
    width: 300px;
    height: 300px;
    background-size: 72%;
    top: -7vw;
    right: -16vw;
    left: auto;
    background-position: top right;
  }
}

@media (max-width: 480px) {
  .azul-about-mcv-v2::before {
    width: 160px;
    height: 160px;
    background-size: 72%;
    top: 0;
    right: 0;
    /* opacity: 0.045; */
  }
}

/* ============================================================
   20.1.4 MCV v2: GSAP アニメーション対応スタイル
   about-mcv-anim.js と連動。
   .azul-about-mcv-v2__item の内部構造を
   item-border / item-content / item-label / item-heading / item-body
   に整理し直した版。
   ============================================================ */

/* アイテム本体: flex で border + content を横並びに */
/* wp-block-group は display: flow-root を出力するため !important で上書き */
.azul-about-mcv-v2__item,
.wp-block-group.azul-about-mcv-v2__item {
  display: flex !important;
  align-items: stretch;
  gap: 2.5rem;
  position: relative;
}

/* 左ボーダー要素（JSで scaleY: 0→1 アニメーション） */
.azul-about-mcv-v2__item-border {
  flex-shrink: 0;
  width: 2px;
  background: var(--azul-gradient, linear-gradient(180deg, #0065cc 0%, #00b4d8 100%));
  border-radius: 2px;
  /* JS で scaleY: 0 に初期化されるため、ここでは通常表示 */
  transform-origin: top center;
}

/* コンテンツ本体: wp-block-group の display 上書きに対応するため !important を付与 */
.azul-about-mcv-v2__item-content,
.azul-about-mcv-v2__item > .wp-block-group.azul-about-mcv-v2__item-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem;
  min-width: 0; /* flex child の text overflow 対策 */
}

/* ラベル（01 — Mission 等） */
.azul-about-mcv-v2__item-label,
h3.azul-about-mcv-v2__item-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--azul-primary, #0065cc);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 !important;
  line-height: 1.4;
  /* JS で opacity: 0, y: 10 に初期化 */
}

/* 見出し（使命 / 開発思想 / 目指す世界） */
.azul-about-mcv-v2__item-heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--azul-text, #0d1b2a);
  margin: 0 !important;
  /* JS で単語ごとに分割・アニメーション */
}

/* 本文 */
.azul-about-mcv-v2__item-body {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--azul-text, #0d1b2a);
  margin: 0 !important;
  /* JS で行ごとに分割・アニメーション */
}

/* splitWords / splitLines で生成される span の overflow 制御 */
.azul-about-mcv-v2__item-heading .azul-split-word {
  overflow: hidden;
  vertical-align: bottom;
}
.azul-about-mcv-v2__item-body p {
  overflow: hidden;
  margin: 0 0 0.5em !important;
}
.azul-about-mcv-v2__item-body p:last-child {
  margin-bottom: 0 !important;
}

/* 旧 ::before ボーダー（新構造では item-border 要素に移行したため無効化） */
.azul-about-mcv-v2__item::before {
  display: none;
}

/* 旧 azul-fade-in クラスとの競合を防ぐ（GSAP が制御するため opacity/transform をリセット） */
.azul-about-mcv-v2__item.azul-fade-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
  .azul-about-mcv-v2__item {
    gap: 1.5rem;
  }
  .azul-about-mcv-v2__item-border {
    width: 2px;
  }
  .azul-about-mcv-v2__item-body {
    font-size: clamp(1.35rem, 4.5vw, 1.75rem);
    line-height: 1.5;
  }
}


/* ==========================================================================
   Technology Page
   ========================================================================== */

/*
 * 幅はグローバルの「.wp-block-group .azul-about__container」で統一（§16 直後を参照）。
 * カード用トークンはセクションに置き、テンプレート非依存にする。
 */

/* 旧保存データ向け: パターンが生 div だった版では保存時にラッパーが落ち、section 直下にブロックだけ並ぶ。
 * その場合でも各直下子を 1280px に収める（新パターンでは内側 Group が1つなので二重に効いても問題なし）。 */
body .azul-technology__section.wp-block-group > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--azul-container);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Hero（§19 page-hero と共通スタイル） ---------- */

/* ---------- 共通セクション ---------- */
.azul-technology__section {
  --azul-tech-card-radius: 12px;
  --azul-tech-card-border: 1px solid var(--azul-border);
  --azul-tech-media-radius: 10px;
  padding: var(--azul-section-py) var(--azul-section-px);
}

/* ---------- Section 1: 技術力 Overview（4ステップ） ---------- */
.azul-tech-overview__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.azul-tech-step {
  background: var(--azul-bg);
  border-radius: var(--azul-tech-card-radius);
  border: var(--azul-tech-card-border);
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.azul-tech-step__image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--azul-bg-alt);
}

.azul-tech-step__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.azul-tech-step__body {
  padding: 1.5rem;
  flex: 1;
}

.azul-tech-step__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--azul-primary);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--azul-primary);
}

.azul-tech-step__list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
  color: var(--azul-text-light);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.8;
}

.azul-tech-step__list li {
  margin-bottom: 0.25rem;
}

/* ---------- Section 2: コア技術（2カラム） ---------- */
.azul-tech-core .azul-about__section-head .azul-about__lead {
  text-align: center;
}

.azul-tech-core__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 3rem;
}

.azul-tech-core__card {
  background: var(--azul-bg);
  border-radius: var(--azul-tech-card-radius);
  border: var(--azul-tech-card-border);
  box-shadow: none;
  overflow: hidden;
}

.azul-tech-core__image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--azul-bg-alt);
}

.azul-tech-core__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.azul-tech-core__content {
  padding: 2rem;
}

.azul-tech-core__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--azul-text);
  margin: 0 0 1.25rem;
}

.azul-tech-core__label {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--azul-text);
  margin: 1.75rem 0 0.75rem;
  padding: 0.15rem 0 0.15rem 0.875rem;
  background: none;
  border: none;
  border-left: 3px solid var(--azul-primary);
  border-radius: 0;
  display: block;
}

.azul-tech-core__content ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 0.75rem;
  color: var(--azul-text-light);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.8;
}

/* ---------- Section 3: 設計思想（交互2カラム） ---------- */
.azul-tech-concept__block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 4rem;
  align-items: center;
  margin-bottom: 4rem;
}

.azul-tech-concept__block > * {
  min-width: 0;
}

.azul-tech-concept__block:last-child {
  margin-bottom: 0;
}

.azul-tech-concept__block--reverse {
  direction: rtl;
}

.azul-tech-concept__block--reverse > * {
  direction: ltr;
}

.azul-tech-concept__block--reverse {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.azul-tech-concept__heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--azul-text);
  margin: 0 0 1.25rem;
}

.azul-tech-concept__text p {
  color: var(--azul-text-light);
  line-height: 1.9;
  font-size: var(--wp--preset--font-size--medium);
  margin: 0 0 1rem;
}

.azul-tech-concept__text p strong {
  color: var(--azul-primary);
}

.azul-tech-concept__images {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  min-width: 0;
}

.azul-tech-concept__block:not(.azul-tech-concept__block--reverse) .azul-tech-concept__images {
  flex-direction: row;
  align-items: stretch;
  height: clamp(300px, 30vw, 480px);
}

.azul-tech-concept__images img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--azul-tech-media-radius);
  border: var(--azul-tech-card-border);
  background: var(--azul-bg);
  box-shadow: none;
  object-fit: contain;
}

.azul-tech-concept__block:not(.azul-tech-concept__block--reverse) .azul-tech-concept__images img {
  flex: 1 1 0;
  height: 100%;
  object-fit: cover;
}

.azul-tech-concept__block:not(.azul-tech-concept__block--reverse) .azul-tech-concept__images img:nth-child(2) {
  flex: 2 2 0;
}

/* ---------- Section 4: 特長（01〜03） ---------- */
.azul-tech-feature {
  padding: 3rem;
  background: var(--azul-bg);
  border-radius: var(--azul-tech-card-radius);
  border: var(--azul-tech-card-border);
  box-shadow: none;
  margin-bottom: 2.5rem;
}

.azul-tech-feature:last-child {
  margin-bottom: 0;
}

.azul-tech-feature__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.azul-tech-feature__num {
  flex-shrink: 0;
  font-size: 3rem;
  font-weight: 700;
  color: var(--azul-primary);
  line-height: 1;
  /* opacity: 0.25; */
  letter-spacing: -0.03em;
}

.azul-tech-feature__title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--azul-text);
  margin: 0;
  transform: translateY(0.1em);
}

.azul-tech-feature__text {
  color: var(--azul-text-light);
  line-height: 1.9;
  font-size: var(--wp--preset--font-size--medium);
  margin: 0 0 2rem;
}

.azul-tech-feature__images {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
}

.azul-tech-feature__images figure {
  flex: 1;
  margin: 0;
}

.azul-tech-feature__images img {
  width: 100%;
  border-radius: var(--azul-tech-media-radius);
  border: var(--azul-tech-card-border);
  box-shadow: none;
  background: var(--azul-bg-alt);
}

.azul-tech-feature__images figcaption {
  font-size: 0.8rem;
  color: var(--azul-text-lighter);
  text-align: center;
  margin-top: 0.5rem;
}

.azul-tech-feature__note {
  font-size: 0.8rem;
  color: var(--azul-text-lighter);
  margin: 0;
}

/* ---------- 拡張性インフォグラフィック（特長 03） ---------- */
.azul-tech-feature__scalability {
  margin-top: 2rem;
  max-width: 100%;
  min-width: 0;
}

.azul-scalability-infographic {
  --azul-si-line: #c5c5c5;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--azul-text);
}

.azul-si__heading {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--azul-primary);
}

.azul-si__scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.azul-si__body {
  min-width: 0;
}

.azul-si__card {
  border: 1px solid var(--azul-si-line);
  border-radius: var(--azul-tech-card-radius);
  overflow: hidden;
  background: var(--azul-bg);
  box-shadow: none;
}

.azul-si__grid {
  display: grid;
  grid-template-columns: 12.5rem 1fr 1fr;
  gap: 0;
  background: var(--azul-bg);
}

.azul-si__col-header-empty {
  background: var(--azul-bg-alt);
  border-bottom: 1px solid var(--azul-si-line);
  border-right: 1px solid var(--azul-si-line);
}

.azul-si__col-header {
  padding: 0.875rem 1rem;
  background: var(--azul-bg-alt);
  border-bottom: 1px solid var(--azul-si-line);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--azul-text-light);
}

.azul-si__col-header + .azul-si__col-header {
  border-left: 1px solid var(--azul-si-line);
}

.azul-si__row {
  display: contents;
}

.azul-si__mat-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 11.25rem;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--azul-si-line);
  background: var(--azul-bg);
}

.azul-si__row--platinum .azul-si__mat-cell {
  border-bottom: 1px solid var(--azul-si-line);
}

.azul-si__row--azul .azul-si__mat-cell,
.azul-si__row--azul .azul-si__val-cell {
  background: rgba(0, 101, 204, 0.03);
}

.azul-si__mat-img {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  border: 1px solid var(--azul-si-line);
  border-radius: var(--azul-radius-sm);
}

.azul-si__mat-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.azul-si__mat-name {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--azul-text);
}

.azul-si__mat-sub {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--azul-text-lighter);
}

.azul-si__mat-badge {
  display: inline-block;
  margin-top: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--azul-text-lighter);
  background: var(--azul-bg-alt);
  border-radius: 4px;
}

.azul-si__val-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 11.25rem;
  padding: 1.75rem 1rem;
  text-align: center;
  background: var(--azul-bg);
}

.azul-si__row--platinum .azul-si__val-cell {
  border-bottom: 1px solid var(--azul-si-line);
}

.azul-si__val-cell + .azul-si__val-cell {
  border-left: 1px solid var(--azul-si-line);
}

.azul-si__bubble {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.azul-si__bubble--cost-lg {
  width: 8.75rem;
  height: 8.75rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(145deg, #f5e6c8 0%, #e8d0a0 100%);
  border: 2px solid #d4b870;
}

.azul-si__bubble--co2-lg {
  width: 8.75rem;
  height: 8.75rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(145deg, #e8e8e8 0%, #d0d0d0 100%);
  border: 2px solid #bbb;
}

.azul-si__bubble-num {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--azul-text);
}

.azul-si__bubble-unit {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--azul-text-light);
}

.azul-si__azul-val {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--azul-primary);
}

.azul-si__azul-sub {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--azul-text-lighter);
}

.azul-si__azul-dot {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
}

.azul-si__azul-dot--cost {
  background: linear-gradient(145deg, #f5e6c8 0%, #e8d0a0 100%);
  border: 1.5px solid #d4b870;
}

.azul-si__azul-dot--co2 {
  background: linear-gradient(145deg, #e8e8e8 0%, #d0d0d0 100%);
  border: 1.5px solid #bbb;
}

.azul-si__footer {
  display: grid;
  grid-template-columns: 12.5rem 1fr 1fr;
  border-top: 2px solid var(--azul-primary);
  background: linear-gradient(
    90deg,
    rgba(0, 101, 204, 0.06) 0%,
    rgba(0, 101, 204, 0.1) 50%,
    rgba(0, 101, 204, 0.06) 100%
  );
}

.azul-si__footer-label {
  display: flex;
  align-items: center;
  padding: 1.25rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--azul-primary);
  opacity: 0.75;
}

.azul-si__footer-val {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.25rem 1rem;
  border-left: 1px solid rgba(0, 101, 204, 0.15);
}

.azul-si__footer-num {
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--azul-primary);
}

.azul-si__footer-pct {
  align-self: flex-end;
  margin-bottom: 0.25rem;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--azul-primary);
}

.azul-si__footer-kanji {
  align-self: flex-end;
  margin-bottom: 0.375rem;
  margin-left: 0.125rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(0, 101, 204, 0.65);
}

.azul-si__caption {
  margin: 0.625rem 0 0;
  font-size: 0.8rem;
  text-align: center;
  color: var(--azul-text-lighter);
}

/* ---------- Section 5: 比較表 ---------- */
.azul-tech-table-wrapper {
  overflow-x: auto;
  margin-top: 2rem;
  -webkit-overflow-scrolling: touch;
}

.azul-tech-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 700px;
}

.azul-tech-table thead tr {
  background: var(--azul-gradient);
}

.azul-tech-table thead th {
  padding: 1rem 1.25rem;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 0.95rem;
}

.azul-tech-table thead th.azul-tech-table__item-col {
  text-align: left;
  width: 15%;
}

.azul-tech-table thead th.azul-tech-table__azul-col {
  background: rgba(255, 255, 255, 0.15);
}

.azul-tech-table tbody tr {
  border-bottom: 1px solid var(--azul-border);
}

.azul-tech-table tbody tr:last-child {
  border-bottom: none;
}

.azul-tech-table tbody tr:nth-child(even) {
  background: var(--azul-bg-alt);
}

.azul-tech-table tbody th {
  padding: 1.25rem 1.25rem;
  font-weight: 700;
  color: var(--azul-text);
  vertical-align: middle;
  white-space: nowrap;
  background: transparent;
  text-align: left;
}

.azul-tech-table tbody td {
  padding: 1.25rem 1.25rem;
  color: var(--azul-text-light);
  vertical-align: middle;
  text-align: center;
  line-height: 1.6;
}

.azul-tech-table__azul-col {
  background: rgba(0, 101, 204, 0.04) !important;
  border-left: 2px solid var(--azul-primary);
  border-right: 2px solid var(--azul-primary);
}

.azul-tech-table tbody tr:last-child .azul-tech-table__azul-col {
  border-bottom: 2px solid var(--azul-primary);
}

/* 評価バッジ */
.azul-tech-table__badge {
  display: inline-block;
  font-size: 0.85rem;
  line-height: 1.6;
}

.azul-tech-table__badge--ok {
  color: var(--azul-text);
}

.azul-tech-table__badge--ng {
  color: var(--azul-text-lighter);
}

.azul-tech-table__badge--warn {
  color: #b07000;
}

.azul-tech-table__azul-col .azul-tech-table__badge--ok {
  color: var(--azul-primary-dark);
  font-weight: 600;
}

/* 注釈 */
.azul-tech-table-notes {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.azul-tech-table-notes li {
  font-size: 0.78rem;
  color: var(--azul-text-lighter);
  line-height: 1.7;
}

/* ---------- Section 5: 比較表（PPT 風・新版） ----------
 * 軸を入れ替え: 行 = 触媒種 / 列 = 評価項目（拡張性 は コスト × サステナビリティ × 安全性 の 3 列）
 * セルは ○ / △ / × アイコン（CSS のみで描画）＋ 短文。AZUL 行は青枠で強調。
 */
.azul-tech-cmp-wrapper {
  --azul-tech-cmp-good:   #5ba3d6;
  --azul-tech-cmp-warn:   #f0c33c;
  --azul-tech-cmp-bad:    #ec5d8a;
  --azul-tech-cmp-head:   #7f8a96;
  --azul-tech-cmp-head-2: #98a1aa;
  --azul-tech-cmp-cell:   #f1f3f6;

  margin-top: 2rem;
}

/* 横スクロール領域（ScrollHint の対象） */
.azul-tech-cmp-scroll,
.azul-si__scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 769px) {
  .azul-si__scroll {
    overflow-x: visible;
  }
}

/* ScrollHint — Technology 横スクロール（ガラスピル・指・矢印は標準／文言 scroll） */
.azul-tech-cmp-scroll .scroll-hint-icon-wrap,
.azul-si__scroll .scroll-hint-icon-wrap {
  z-index: 2;
}

.azul-tech-cmp-scroll.scroll-hint.is-right-scrollable,
.azul-si__scroll.scroll-hint.is-right-scrollable {
  background: linear-gradient(
    270deg,
    rgba(0, 101, 204, 0.1) 0,
    rgba(0, 101, 204, 0) 28px,
    transparent
  );
}

.azul-tech-cmp-scroll.scroll-hint.is-left-scrollable,
.azul-si__scroll.scroll-hint.is-left-scrollable {
  background: linear-gradient(
    90deg,
    rgba(0, 101, 204, 0.1) 0,
    rgba(0, 101, 204, 0) 28px,
    transparent
  );
}

.azul-tech-cmp-scroll.scroll-hint.is-right-scrollable.is-left-scrollable,
.azul-si__scroll.scroll-hint.is-right-scrollable.is-left-scrollable {
  background: linear-gradient(
      90deg,
      rgba(0, 101, 204, 0.1) 0,
      rgba(0, 101, 204, 0) 28px,
      transparent
    ),
    linear-gradient(
      270deg,
      rgba(0, 101, 204, 0.1) 0,
      rgba(0, 101, 204, 0) 28px,
      transparent
    );
}

/* 下地のみガラスピル（指・横矢印アニメはライブラリ標準のまま） */
.azul-tech-cmp-scroll .scroll-hint-icon.azul-scroll-hint-icon,
.azul-si__scroll .scroll-hint-icon.azul-scroll-hint-icon {
  top: 50%;
  left: 50%;
  width: 7.25rem;
  height: auto;
  min-height: 4.75rem;
  padding: 0.85rem 0.65rem 0.55rem;
  transform: translate(-50%, -50%);
  border-radius: var(--azul-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 101, 204, 0.2);
  box-shadow:
    0 8px 28px rgba(0, 101, 204, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.azul-tech-cmp-scroll .scroll-hint-icon-wrap.is-active .scroll-hint-icon.azul-scroll-hint-icon,
.azul-si__scroll .scroll-hint-icon-wrap.is-active .scroll-hint-icon.azul-scroll-hint-icon {
  opacity: 1;
}

.azul-tech-cmp-scroll .scroll-hint-icon.azul-scroll-hint-icon .scroll-hint-text,
.azul-si__scroll .scroll-hint-icon.azul-scroll-hint-icon .scroll-hint-text {
  margin-top: 0.35rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--azul-primary);
}

.azul-tech-cmp {
  width: auto;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 6px;
  font-size: var(--wp--preset--font-size--medium);
  table-layout: fixed;
}

.azul-tech-cmp__corner {
  background: transparent;
  border: 0;
  width: 96px;
}

.azul-tech-cmp thead th {
  background: var(--azul-tech-cmp-head);
  color: #fff;
  font-weight: 700;
  padding: 0.85rem 0.5rem;
  text-align: center;
  vertical-align: middle;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.35;
}

.azul-tech-cmp thead .azul-tech-cmp__group-h {
  background: var(--azul-tech-cmp-head);
}

.azul-tech-cmp thead .azul-tech-cmp__sub {
  background: var(--azul-tech-cmp-head-2);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
}

.azul-tech-cmp tbody th {
  background: var(--azul-tech-cmp-head);
  color: #fff;
  font-weight: 700;
  padding: 0.85rem 0.5rem;
  text-align: center;
  vertical-align: middle;
  line-height: 1.35;
  font-size: var(--wp--preset--font-size--medium);
}

.azul-tech-cmp tbody .azul-tech-cmp__row--azul th{
  background: var(--azul-primary);
}

.azul-tech-cmp tbody td {
  background: var(--azul-tech-cmp-cell);
  padding: 1.1rem 0.85rem;
  text-align: center;
  vertical-align: top;
  line-height: 1.55;
  color: var(--azul-text);
}

/* AZUL 行: 行ヘッダはブランド色、各セルは白＋青枠で抜き出す */
.azul-tech-cmp__row--azul th {
  background: var(--azul-primary);
}

.azul-tech-cmp__row--azul td {
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--azul-primary);
}

.azul-tech-cmp__row--azul td:nth-of-type(2) {
  box-shadow: none;
}

/* アイコン: ○ / △ / × を擬似要素で描画 */
.azul-tech-cmp__icon {
  display: block;
  margin: 0 auto 0.6rem;
  width: 46px;
  height: 46px;
  position: relative;
}

.azul-tech-cmp__icon[data-mark="good"],
.azul-tech-cmp__icon--good {
  border: 7px solid var(--azul-tech-cmp-good);
  border-radius: 50%;
}

.azul-tech-cmp__icon[data-mark="warn"],
.azul-tech-cmp__icon--warn {
  background: var(--azul-tech-cmp-warn);
  clip-path: polygon(50% 6%, 96% 94%, 4% 94%);
}

.azul-tech-cmp__icon[data-mark="bad"]::before,
.azul-tech-cmp__icon[data-mark="bad"]::after,
.azul-tech-cmp__icon--bad::before,
.azul-tech-cmp__icon--bad::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 9px;
  background: var(--azul-tech-cmp-bad);
  border-radius: 5px;
  transform: translateY(-50%) rotate(45deg);
}

.azul-tech-cmp__icon[data-mark="bad"]::after,
.azul-tech-cmp__icon--bad::after {
  transform: translateY(-50%) rotate(-45deg);
}

.azul-tech-cmp__text {
  display: block;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.6;
  color: var(--azul-text-light);
}

.azul-tech-cmp__row--azul .azul-tech-cmp__text {
  color: var(--azul-text);
}

@media (max-width: 768px) {
  .azul-tech-cmp {
    border-spacing: 4px;
    font-size: var(--wp--preset--font-size--medium);
  }
  .azul-tech-cmp__icon {
    width: 36px;
    height: 36px;
    margin-bottom: 0.4rem;
  }
  .azul-tech-cmp__icon[data-mark="good"],
  .azul-tech-cmp__icon--good {
    border-width: 5px;
  }
  .azul-tech-cmp__icon[data-mark="bad"]::before,
  .azul-tech-cmp__icon[data-mark="bad"]::after,
  .azul-tech-cmp__icon--bad::before,
  .azul-tech-cmp__icon--bad::after {
    height: 7px;
  }
  .azul-tech-cmp__text {
    font-size: var(--wp--preset--font-size--medium);
  }
  .azul-tech-cmp tbody td {
    padding: 0.85rem 0.5rem;
  }
}

/* ==========================================================================
   Technology Page — Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .azul-tech-overview__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .azul-tech-overview__steps {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .azul-tech-core__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .azul-tech-concept__block,
  .azul-tech-concept__block--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 1.5rem;
  }

  .azul-tech-concept__images {
    flex-direction: column;
  }

  /* 2枚横並びは幅を狭めて高さ220pxで維持 */
  .azul-tech-concept__block:not(.azul-tech-concept__block--reverse) .azul-tech-concept__images {
    flex-direction: row;
    height: 220px;
  }

  .azul-tech-concept__block:not(.azul-tech-concept__block--reverse) .azul-tech-concept__images img {
    height: 100%;
    object-fit: cover;
  }

  .azul-tech-feature {
    padding: 2rem 1.5rem;
  }

  .azul-tech-feature__images {
    flex-direction: column;
  }

  .azul-si__heading {
    text-align: left;
    font-size: 1rem;
  }

  .azul-si__scroll {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .azul-si__card {
    overflow: visible;
    width: max-content;
    min-width: 100%;
    max-width: none;
  }

  .azul-si__body {
    min-width: 36rem;
  }

  .azul-si__grid,
  .azul-si__footer {
    min-width: 0;
    grid-template-columns: 8.75rem 1fr 1fr;
  }

  .azul-si__col-header {
    font-size: 0.75rem;
  }

  /* 触媒セル：テキスト上・画像下（狭い列での不自然な改行を防ぐ） */
  .azul-si__mat-cell {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: auto;
    padding: 0.75rem 0.5rem;
    text-align: center;
  }

  .azul-si__mat-cell > div:not(.azul-si__mat-img) {
    width: 100%;
    min-width: 0;
  }

  .azul-si__mat-img {
    width: 3.25rem;
    height: 3.25rem;
  }

  .azul-si__mat-name {
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .azul-si__mat-badge {
    white-space: nowrap;
    margin-top: 0.25rem;
  }

  .azul-si__mat-sub,
  .azul-si__azul-sub {
    font-size: 0.75rem;
  }

  .azul-si__mat-badge,
  .azul-si__footer-label {
    font-size: 0.6875rem;
  }

  .azul-si__bubble--cost-lg,
  .azul-si__bubble--co2-lg {
    width: 5.5rem;
    height: 5.5rem;
  }

  .azul-si__bubble-num {
    font-size: 1.25rem;
  }

  .azul-si__footer-num {
    font-size: 2rem;
  }

  .azul-si__footer-pct {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .azul-tech-overview__steps {
    grid-template-columns: 1fr;
  }

  /* スマホでは2枚を縦積み・自然比率・全幅 */
  .azul-tech-concept__block:not(.azul-tech-concept__block--reverse) .azul-tech-concept__images {
    flex-direction: column;
    height: auto;
  }

  .azul-tech-concept__block:not(.azul-tech-concept__block--reverse) .azul-tech-concept__images img {
    flex: none;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ==========================================================================
   §22  Service & Product Page（page-service.html / patterns/page-service.php）
   - クラス命名は azul-service-* / azul-service__* / azul-service-hero__* など。
   - セクション見出しは About / Technology と同じ .azul-about__title / __sub /
     __lead を流用する。各セクションのコンテナも .azul-about__container（1280px）。
   - 交互背景は .azul-about__section--alt をパターン側で付与。
   - 比較表は ScrollHint を Technology と共有（functions.php 側の判定で読み込み）。
   ========================================================================== */

/* main wrapper（page-service.html） */
.azul-service-page {
  min-width: 0;
}

/* ---------- Hero（§19 page-hero と共通スタイル） ---------- */

/* ---------- Page index（ページ内リンク・PeptiDream / News フィルタ系） ---------- */
.azul-service-index {
  margin: 0;
  padding: 0;
}

.azul-service-index__eyebrow {
  margin: 0 0 0.75rem;
  padding: 0 var(--azul-section-px);
  max-width: var(--azul-container);
  margin-left: auto;
  margin-right: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul-text-light);
  text-align: left;
}

.azul-service-index__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--azul-border);
}

.azul-service-index__item {
  min-width: 0;
  border-right: 1px solid var(--azul-border);
}

.azul-service-index__item:last-child {
  border-right: none;
}

.azul-service-index__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 4.75rem;
  height: 100%;
  padding: 0.85rem 0.75rem 0.9rem;
  color: var(--azul-text-light);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  border-bottom: 2px solid var(--azul-border);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

@media (min-width: 1025px) {
  .azul-about-index .azul-service-index__list,
  .azul-about-page .azul-service__section.azul-service-index-section .azul-service-index__list,
  .azul-about__section.azul-service-index-section .azul-service-index__list {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: start;
  }

  .azul-about-index .azul-service-index__link,
  .azul-about-page .azul-service__section.azul-service-index-section .azul-service-index__link,
  .azul-about__section.azul-service-index-section .azul-service-index__link {
    justify-content: flex-start;
    min-height: 5.75rem;
    padding: 1rem 0.55rem 0.9rem;
    font-size: 0.8rem;
  }
}

.azul-service-index__num {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--azul-primary);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.azul-service-index__text {
  display: block;
  max-width: 11rem;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .azul-service-index__link:hover,
  .azul-service-index__link:focus-visible {
    color: var(--azul-primary);
    border-bottom-color: var(--azul-primary);
    background: rgba(45, 109, 175, 0.04);
  }
}

#azul-catalyst,
#ferion,
#azul-supercapacitor,
#azul-new-product,
#about-mcv,
#about-message,
#about-profile,
#about-history,
#about-team,
#about-advisor,
#about-partner,
#about-hotline {
  scroll-margin-top: var(--azul-header-h);
}

.azul-service-anchor {
  display: block;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .azul-service-index__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .azul-service-index__item {
    border-right: 1px solid var(--azul-border);
  }

  .azul-service-index__item:nth-child(2n) {
    border-right: none;
  }

  .azul-service-index__link {
    min-height: 4.25rem;
    font-size: 0.84rem;
    border-bottom-width: 1px;
  }
}

@media (max-width: 768px) {
  .azul-service-index__eyebrow {
    margin-bottom: 0.65rem;
  }

  .azul-service-index__list {
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--azul-border);
  }

  .azul-service-index__item {
    border-right: none;
    border-bottom: 1px solid var(--azul-border);
  }

  .azul-service-index__item:last-child {
    border-bottom: none;
  }

  .azul-service-index__item:nth-child(2n) {
    border-right: none;
  }

  .azul-service-index__link {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    min-height: 0;
    padding: 0.9rem var(--azul-section-px);
    font-size: 0.88rem;
    text-align: left;
    border-bottom: none;
  }

  .azul-service-index__num {
    flex-shrink: 0;
    min-width: 1.75rem;
  }

  .azul-service-index__text {
    max-width: none;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* ---------- 共通セクション ---------- */
.azul-service__section {
  --azul-service-card-radius: 12px;
  --azul-service-card-border: 1px solid var(--azul-border);
  --azul-service-media-radius: 10px;
  padding: var(--azul-section-py) var(--azul-section-px);
}

/* 目次セクション — 上記 .azul-service__section の padding より後に記述（6rem 上書き防止） */
.azul-service__section.azul-service-index-section,
.azul-about__section.azul-service-index-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: var(--azul-bg);
}

/* 目次直下セクション — 通常 6rem/8rem の上余白を 3rem に */
.azul-service-page .azul-service-index-section + .azul-service__section,
.azul-about-page .azul-service-index-section + .azul-about__section,
.azul-about-page .azul-service-index-section + .azul-service__section {
  padding-top: 3rem;
}

/* 旧保存データ向け: 各直下子を 1280px に収める（new pattern では Group が 1 つなので二重に効いても無害） */
body .azul-service__section.wp-block-group > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--azul-container);
  margin-left: auto;
  margin-right: auto;
}

.azul-service-prose {
  max-width: 880px;
  margin: 0 auto;
  color: var(--azul-text);
  line-height: 1.9;
  font-size: var(--wp--preset--font-size--medium);
}

.azul-service-prose p {
  margin: 0 0 1.25em;
}

.azul-service-prose p:last-child {
  margin-bottom: 0;
}

/* ---------- Section 2: CTA ボタン（問い合わせ） ---------- */
.azul-service-prose__cta {
  margin-top: 2.5rem !important;
  text-align: center;
}

.azul-service-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 2rem;
  background: var(--azul-primary);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  border-radius: var(--azul-radius-pill);
  text-decoration: none;
  transition: background 0.2s ease;
}

.azul-service-cta:hover,
.azul-service-cta:focus-visible {
  background: var(--azul-primary-dark);
  color: #fff;
}

.azul-service-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.95em;
  line-height: 1;
  transition: transform 0.2s ease;
}

.azul-service-cta:hover .azul-service-cta__icon,
.azul-service-cta:focus-visible .azul-service-cta__icon {
  transform: translateX(3px);
}

/* ---------- Section 1: Taylor & Supply（テキスト + 右画像 2 カラム） ---------- */
.azul-service-taylor__intro {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 3rem;
  align-items: center;
  margin-top: 1rem;
}

.azul-service-taylor__intro-text {
  min-width: 0;
  color: var(--azul-text);
  line-height: 1.9;
}

.azul-service-taylor__intro-text p {
  margin: 0 0 1.25em;
  color: var(--azul-text-light);
}

.azul-service-taylor__intro-text p:last-child {
  margin-bottom: 0;
}

.azul-service-taylor__link {
  margin-top: 1.75rem !important;
}

.azul-service-taylor__link .azul-view-more {
  text-decoration: none;
}

.azul-service-taylor__intro-image {
  border-radius: var(--azul-service-media-radius);
  overflow: hidden;
  background: var(--azul-bg-alt);
}

.azul-service-taylor__intro-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  vertical-align: middle;
}

.azul-service-taylor__features {
  list-style: disc;
  margin: 0 0 1.25em;
  padding-left: 1.4rem;
  color: var(--azul-text-light);
  line-height: 1.7;
}

.azul-service-taylor__features li + li {
  margin-top: 0.65em;
}

.azul-service-taylor__figures {
  margin-top: 2.5rem;
}

.azul-service-taylor__follow-up {
  margin-top: 2.5rem;
  line-height: 1.9;
}

.azul-service-taylor__follow-up p {
  margin: 0 0 1.25em;
  color: var(--azul-text-light);
}

.azul-service-taylor__follow-up p:last-child {
  margin-bottom: 0;
}

.azul-service-external-link {
  text-decoration: none;
}

.azul-service-external-link::after {
  content: '↗';
  display: inline-block;
  font-size: 0.85em;
  line-height: 1;
  transition: transform 0.3s;
}

@media (hover: hover) {
  .azul-service-external-link:hover::after,
  .azul-service-external-link:focus-visible::after {
    transform: translate(3px, -3px);
  }
}

/* ---------- Section 2: 顧客ニーズに応えた材料形態（テキスト下に画像） ---------- */
.azul-service-tailored__intro {
  max-width: var(--azul-container);
  margin: 0 auto;
}

.azul-service-tailored__intro .azul-service-prose {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.azul-service-tailored__image {
  border-radius: var(--azul-service-media-radius);
  overflow: hidden;
  background: var(--azul-bg-alt);
  margin: 0 auto;
  max-width: 100%;
}

.azul-service-tailored__image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  vertical-align: middle;
}

/* ---------- Section 3: Ferion ---------- */
.azul-service-ferion__intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem;
  align-items: center;
  margin-top: 1rem;
}

.azul-service-ferion__intro-image {
  border-radius: var(--azul-service-media-radius);
  overflow: hidden;
  background: var(--azul-bg-alt);
}

.azul-service-ferion__intro-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  vertical-align: middle;
}

.azul-service-ferion__intro-text {
  color: var(--azul-text);
  line-height: 1.9;
}

.azul-service-ferion__lead {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--azul-text);
  margin: 0 0 1.25rem;
}

.azul-service-ferion__intro-text p:not(.azul-service-ferion__lead) {
  margin: 0;
  color: var(--azul-text-light);
}

/* Ferion サブセクション共通 */
.azul-service-ferion__sub {
  margin-top: 4rem;
}

.azul-service-ferion__heading {
  font-size: clamp(1.35rem, 2.6vw, 1.6rem);
  font-weight: 700;
  color: var(--azul-text);
  margin: 0 0 1.25rem;
  padding-left: 0.9rem;
  border-left: 4px solid var(--azul-primary);
  line-height: 1.35;
}

.azul-service-ferion__sub p {
  color: var(--azul-text-light);
  line-height: 1.9;
  margin: 0 0 1em;
}

.azul-service-ferion__sub p:last-child {
  margin-bottom: 0;
}

/* 金属空気電池とは（単カラム本文 ＋ 下に 3 カラム解説）
   .azul-service-ferion__sub のままで充分。共有スタイルを使う。 */

/* 3 カラム解説（原理・特長・充電方式）— 「空気電池の用途」と同スタイル */
.azul-service-principle__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}

.azul-service-principle__card {
  background: var(--azul-bg);
  border: var(--azul-service-card-border);
  border-radius: var(--azul-service-card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.azul-service-principle__image {
  overflow: hidden;
  background: var(--azul-bg-alt);
}

.azul-service-principle__image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  vertical-align: middle;
}

.azul-service-principle__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.azul-service-principle__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--azul-text);
  margin: 0;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--azul-primary);
  line-height: 1.4;
}

.azul-service-principle__body p {
  margin: 0;
  color: var(--azul-text-light);
  line-height: 1.8;
  font-size: 0.95rem;
}

.azul-service-principle__body ul {
  list-style: disc;
  margin: 0;
  padding-left: 1.4rem;
  color: var(--azul-text-light);
  line-height: 1.7;
  font-size: 0.95rem;
}

.azul-service-principle__body ul li + li {
  margin-top: 0.45rem;
}

/* 比較表 */
.azul-service-cmp-wrapper {
  margin-top: 2rem;
}

.azul-service-cmp-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ScrollHint（Technology と同系統のガラスピル） */
.azul-service-cmp-scroll .scroll-hint-icon-wrap {
  z-index: 2;
}

.azul-service-cmp-scroll.scroll-hint.is-right-scrollable {
  background: linear-gradient(
    270deg,
    rgba(0, 101, 204, 0.1) 0,
    rgba(0, 101, 204, 0) 28px,
    transparent
  );
}

.azul-service-cmp-scroll.scroll-hint.is-left-scrollable {
  background: linear-gradient(
    90deg,
    rgba(0, 101, 204, 0.1) 0,
    rgba(0, 101, 204, 0) 28px,
    transparent
  );
}

.azul-service-cmp-scroll.scroll-hint.is-right-scrollable.is-left-scrollable {
  background: linear-gradient(
      90deg,
      rgba(0, 101, 204, 0.1) 0,
      rgba(0, 101, 204, 0) 28px,
      transparent
    ),
    linear-gradient(
      270deg,
      rgba(0, 101, 204, 0.1) 0,
      rgba(0, 101, 204, 0) 28px,
      transparent
    );
}

.azul-service-cmp-scroll .scroll-hint-icon.azul-scroll-hint-icon {
  top: 50%;
  left: 50%;
  width: 7.25rem;
  height: auto;
  min-height: 4.75rem;
  padding: 0.85rem 0.65rem 0.55rem;
  transform: translate(-50%, -50%);
  border-radius: var(--azul-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 101, 204, 0.2);
  box-shadow:
    0 8px 28px rgba(0, 101, 204, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.azul-service-cmp-scroll .scroll-hint-icon-wrap.is-active .scroll-hint-icon.azul-scroll-hint-icon {
  opacity: 1;
}

.azul-service-cmp-scroll .scroll-hint-icon.azul-scroll-hint-icon .scroll-hint-text {
  margin-top: 0.35rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--azul-primary);
}

.azul-service-cmp-wrapper {
  /* Technology の比較表と同系統のトークンを共有する */
  --azul-service-cmp-good: #5ba3d6;
  --azul-service-cmp-warn: #f0c33c;
  --azul-service-cmp-bad:  #ec5d8a;
  --azul-service-cmp-head: #7f8a96;
  --azul-service-cmp-head-2: #98a1aa;
  --azul-service-cmp-cell: #f1f3f6;
}

.azul-service-cmp {
  width: auto;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 6px;
  font-size: var(--wp--preset--font-size--medium);
  table-layout: fixed;
}

.azul-service-cmp thead th {
  background: var(--azul-service-cmp-head);
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 0.85rem 0.5rem;
  vertical-align: middle;
  line-height: 1.35;
  white-space: nowrap;
}

.azul-service-cmp thead th.azul-service-cmp__col--azul {
  background: var(--azul-primary);
}

.azul-service-cmp__corner {
  background: var(--azul-service-cmp-head-2);
  text-align: center;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  letter-spacing: 0.04em;
  width: 11.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.azul-service-cmp tbody th {
  background: var(--azul-service-cmp-head);
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 0.85rem 1.25rem;
  vertical-align: middle;
  line-height: 1.35;
  white-space: nowrap;
  width: 11.5rem;
}

/* 金属空気電池行: Technology の AZUL 触媒行と同系統 */
.azul-service-cmp tbody .azul-service-cmp__row--azul th {
  background: var(--azul-primary);
}

.azul-service-cmp tbody td {
  background: var(--azul-service-cmp-cell);
  color: var(--azul-text);
  padding: 1.1rem 1.25rem;
  vertical-align: top;
  text-align: center;
  line-height: 1.55;
}

.azul-service-cmp__cell--azul {
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--azul-primary);
}

/* アイコン: ○ / △ / × を擬似要素で描画（Technology 表と同系統） */
.azul-service-cmp__icon {
  display: block;
  margin: 0 auto 0.6rem;
  width: 46px;
  height: 46px;
  position: relative;
}

.azul-service-cmp__icon[data-mark="good"],
.azul-service-cmp__icon--good {
  border: 7px solid var(--azul-service-cmp-good);
  border-radius: 50%;
}

.azul-service-cmp__icon[data-mark="warn"],
.azul-service-cmp__icon--warn {
  background: var(--azul-service-cmp-warn);
  clip-path: polygon(50% 6%, 96% 94%, 4% 94%);
}

.azul-service-cmp__icon[data-mark="bad"]::before,
.azul-service-cmp__icon[data-mark="bad"]::after,
.azul-service-cmp__icon--bad::before,
.azul-service-cmp__icon--bad::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 8px;
  background: var(--azul-service-cmp-bad);
  border-radius: 4px;
  transform: translateY(-50%) rotate(45deg);
}

.azul-service-cmp__icon[data-mark="bad"]::after,
.azul-service-cmp__icon--bad::after {
  transform: translateY(-50%) rotate(-45deg);
}

.azul-service-cmp__text {
  display: block;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.55;
  color: var(--azul-text);
}

/* 空気電池の用途（3 カード） */
.azul-service-use__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 1.5rem;
}

.azul-service-use__card {
  background: var(--azul-bg);
  border: var(--azul-service-card-border);
  border-radius: var(--azul-service-card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.azul-service-use__image {
  overflow: hidden;
  background: var(--azul-bg-alt);
}

.azul-service-use__image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  vertical-align: middle;
}

.azul-service-use__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.azul-service-use__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--azul-text);
  margin: 0;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--azul-primary);
  line-height: 1.4;
}

.azul-service-use__body p {
  margin: 0;
  color: var(--azul-text-light);
  line-height: 1.8;
  font-size: 0.95rem;
}

/* ---------- Section 4: Supercapacitor ---------- */
.azul-service-supercap__intro {
  max-width: 880px;
  margin: 1rem auto 0;
  color: var(--azul-text);
}

.azul-service-supercap__lead {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.85;
  margin: 0;
}

.azul-service-supercap__lead strong {
  color: var(--azul-primary);
  font-size: 1.05em;
}

.azul-service-supercap__sub {
  margin-top: 3.5rem;
}

.azul-service-supercap__heading {
  font-size: clamp(1.35rem, 2.6vw, 1.6rem);
  font-weight: 700;
  color: var(--azul-text);
  margin: 0 0 1.25rem;
  padding-left: 0.9rem;
  border-left: 4px solid var(--azul-primary);
  line-height: 1.35;
}

.azul-service-supercap__sub > p {
  color: var(--azul-text-light);
  line-height: 1.9;
  margin: 0;
}

.azul-service-supercap__sub > p strong {
  color: var(--azul-text);
}

.azul-service-supercap__note {
  margin-top: 1.25rem !important;
  font-size: 0.875rem;
  color: var(--azul-text-lighter);
  line-height: 1.7;
}

/* 技術的特長: 2 ブロック（見出し・テキスト・画像の左右） */
.azul-service-supercap__tech {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 1.5rem;
}

.azul-service-supercap__tech-card {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem;
  align-items: center;
  background: var(--azul-bg);
  border: var(--azul-service-card-border);
  border-radius: var(--azul-service-card-radius);
  padding: 1.75rem;
}

.azul-service-supercap__tech-card--reverse {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.azul-service-supercap__tech-card--reverse .azul-service-supercap__tech-image {
  order: 2;
}

.azul-service-supercap__tech-image {
  border-radius: var(--azul-service-media-radius);
  overflow: hidden;
  background: var(--azul-bg-alt);
}

.azul-service-supercap__tech-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  vertical-align: middle;
}

.azul-service-supercap__tech-body {
  min-width: 0;
  color: var(--azul-text);
}

.azul-service-supercap__tech-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--azul-text);
  margin: 0 0 0.9rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--azul-primary);
  line-height: 1.4;
}

.azul-service-supercap__tech-body ul {
  list-style: disc;
  margin: 0;
  padding-left: 1.4rem;
  color: var(--azul-text-light);
  line-height: 1.85;
  font-size: 0.97rem;
}

.azul-service-supercap__tech-body ul li + li {
  margin-top: 0.55rem;
}

.azul-service-supercap__tech-body ul strong {
  color: var(--azul-text);
}

/* 課題解決の背景: 本文下に左右並びの画像 2 枚 */
.azul-service-supercap__bg-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.azul-service-supercap__bg-image {
  border-radius: var(--azul-service-media-radius);
  overflow: hidden;
  background: var(--azul-bg);
  border: var(--azul-service-card-border);
}

.azul-service-supercap__bg-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  vertical-align: middle;
}

/* データセンター価値: KPI 下の図解 */
.azul-service-supercap__value-figure {
  margin-top: 2rem;
  border-radius: var(--azul-service-media-radius);
  overflow: hidden;
  background: var(--azul-bg);
  border: var(--azul-service-card-border);
}

.azul-service-supercap__value-figure img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  vertical-align: middle;
}

/* KPI カード（30% / 15% / 7-10%） */
.azul-service-kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.azul-service-kpi__card {
  background: var(--azul-bg);
  border: var(--azul-service-card-border);
  border-radius: var(--azul-service-card-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.azul-service-kpi__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.azul-service-kpi__card--accent {
  background: linear-gradient(135deg, rgba(0, 101, 204, 0.06), rgba(0, 163, 224, 0.08));
  border-color: rgba(0, 101, 204, 0.25);
}

.azul-service-kpi__num {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  color: var(--azul-primary);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.azul-service-kpi__value {
  font-size: clamp(2.75rem, 5vw, 3.75rem);
}

.azul-service-kpi__unit {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 600;
}

.azul-service-kpi__label {
  font-size: 0.95rem;
  color: var(--azul-text);
  font-weight: 600;
  line-height: 1.55;
}

/* ---------- Responsive: Service & Product ---------- */
@media (max-width: 1024px) {
  .azul-service-taylor__intro,
  .azul-service-ferion__intro {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .azul-service-taylor__intro-image,
  .azul-service-ferion__intro-image {
    order: -1;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .azul-service-use__grid,
  .azul-service-principle__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .azul-service-kpi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .azul-service-supercap__tech-card,
  .azul-service-supercap__tech-card--reverse {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .azul-service-supercap__tech-card--reverse .azul-service-supercap__tech-image {
    order: 0;
  }

  .azul-service-supercap__tech-image {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .azul-service__section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .azul-service__section.azul-service-index-section,
  .azul-about__section.azul-service-index-section {
    padding-top: 2.5rem;
    padding-bottom: 0;
  }

  .azul-service-page .azul-service-index-section + .azul-service__section,
  .azul-about-page .azul-service-index-section + .azul-about__section,
  .azul-about-page .azul-service-index-section + .azul-service__section {
    padding-top: 2.5rem;
  }

  .azul-service-ferion__sub {
    margin-top: 3rem;
  }

  .azul-service-supercap__sub {
    margin-top: 2.5rem;
  }

  .azul-service-use__grid,
  .azul-service-principle__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .azul-service-supercap__bg-images {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .azul-service-supercap__tech {
    gap: 1.75rem;
  }

  .azul-service-kpi {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .azul-service-kpi__card {
    padding: 1.5rem 1.25rem;
  }

  .azul-service-cmp {
    border-spacing: 4px;
    font-size: var(--wp--preset--font-size--medium);
  }

  .azul-service-cmp tbody th {
    padding: 0.85rem 1rem;
  }

  .azul-service-cmp tbody td {
    padding: 0.85rem 1rem;
  }

  .azul-service-cmp__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 0.4rem;
  }

  .azul-service-cmp__icon[data-mark="good"],
  .azul-service-cmp__icon--good {
    border-width: 5px;
  }

  .azul-service-cmp__icon[data-mark="bad"]::before,
  .azul-service-cmp__icon[data-mark="bad"]::after,
  .azul-service-cmp__icon--bad::before,
  .azul-service-cmp__icon--bad::after {
    height: 6px;
  }

  .azul-service-cmp__text {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .azul-service-ferion__lead,
  .azul-service-supercap__lead {
    font-size: 1.05rem;
  }
}

/* ---------- Page Top Button ---------- */
:root {
  --page-top-sticky-offset: 0px;
}

.page-top {
  position: fixed;
  right: 0.75rem;
  bottom: calc(5.75rem + var(--page-top-sticky-offset));
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--azul-primary);
  color: #fff;
  box-shadow: var(--azul-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease;
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-top__icon {
  display: block;
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
  overflow: visible;
}

.page-top__icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  box-sizing: border-box;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translate(-50%, -25%) rotate(-45deg);
  transition: transform 0.3s ease;
}

.page-top:focus-visible {
  outline: 2px solid var(--azul-primary-lighter);
  outline-offset: 3px;
}

@media (hover: hover) {
  .page-top:hover {
    background: var(--azul-primary-dark);
  }

  .page-top:hover .page-top__icon::before {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

@media (max-width: 767px) {
  .page-top {
    right: 1rem;
    bottom: calc(5rem + var(--page-top-sticky-offset));
    width: 2.5rem;
    height: 2.5rem;
  }

  .page-top__icon {
    width: 0.65rem;
    height: 0.65rem;
  }

  .page-top__icon::before {
    width: 0.65rem;
    height: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-top {
    transition: opacity 0.01s, visibility 0.01s, background 0.3s ease;
    transform: none;
  }

  .page-top.is-visible {
    transform: none;
  }

  .page-top__icon::before {
    transition: none;
  }
}