/*
 Theme Name:   AI秘書室の子テーマ
 Theme URI:    https://autostyle-japan.net/new/
 Description:  AI秘書室による高度なカスタマイズ用子テーマ（親テーマ: Astra）— v3.4.0 §20破壊オーバーライド全ロールバック（v3.2.0相当）
 Author:       AI秘書室 統括秘書室
 Author URI:   https://and-clea.co.jp/
 Template:     astra
 Version:      3.4.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  ai-hishoshitsu-child
*/

/* ============================================================================
   AutoStyle v5.1 — Apple ライク × 4Cディテール × ファインファクトリー 統合版
   設計書: _memo/autostyle/renewal-design-v5.1-apple-like-20260430.md
   原則: ① 1セクション1メッセージ ② 巨大タイポ×余白支配 ③ 2色の絶対主義 ④ シネマ画像+スクロールアニメ
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FONT IMPORT — Inter (Apple SF Pro fallback) + Noto Sans JP + Noto Serif JP
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;600;700&display=swap');

/* ============================================================================
   1. DESIGN TOKENS (Apple ライク 2 色主義)
   ============================================================================ */
:root {
  /* ===== ベース 2 色（Apple 公式） ===== */
  --as-bg-white:    #ffffff;
  --as-bg-offwhite: #fbfbfd;

  /* ===== テキスト 3 階調 ===== */
  --as-text-headline: #1d1d1f;
  --as-text-body:     #424245;
  --as-text-meta:     #86868b;

  /* ===== アクセント（極小面積で使用） ===== */
  --as-accent-navy:    #1b4296;
  --as-accent-navy-2:  #14336e;
  --as-accent-gold:    #c9a961;
  --as-accent-gold-2:  #a88842;
  --as-gradient-gold:  linear-gradient(135deg, #d4b373 0%, #c9a961 50%, #a88842 100%);

  /* ===== CTA エナジーカラー（最重要 1 箇所のみ） ===== */
  --as-cta:          #ff6600;
  --as-cta-hover:    #e65a00;

  /* ===== 区切り罫線（Apple separator） ===== */
  --as-border:       #d2d2d7;
  --as-border-light: #f5f5f7;

  /* ===== オーバーレイ・グラデ ===== */
  --as-hero-overlay: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.55) 100%);

  /* ===== フォントスタック ===== */
  --as-font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
                     "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN",
                     "Noto Sans JP", sans-serif;
  --as-font-text:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
                     "Helvetica Neue", "Hiragino Kaku Gothic ProN",
                     "Noto Sans JP", sans-serif;
  --as-font-serif:   "Noto Serif JP", "游明朝", "YuMincho",
                     "Hiragino Mincho ProN", serif;

  /* ===== レイアウト（Apple 流の余白支配） ===== */
  --as-max-width:   1440px;
  --as-max-content: 980px;
  --as-text-max:    720px;
  --as-narrow:      560px;

  /* ===== セクション間（v5 の 1.5 倍化） ===== */
  --as-section-y-pc: 180px;
  --as-section-y-sp: 100px;

  /* ===== モーション ===== */
  --as-ease:     cubic-bezier(0.32, 0, 0.16, 1);
  --as-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --as-dur:      0.9s;
  --as-dur-fast: 0.32s;
}

/* ============================================================================
   2. RESET & BASE (Apple 準拠)
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--as-font-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--as-text-body);
  background: var(--as-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1, "kern" 1;
}

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

a {
  color: var(--as-accent-navy);
  text-decoration: none;
  transition: color var(--as-dur-fast) var(--as-ease);
}

a:hover {
  color: var(--as-accent-navy-2);
}

/* ============================================================================
   3. TYPOGRAPHY SCALE (Apple 製品ページ準拠)
   ============================================================================ */
.as-display-1 {
  font-family: var(--as-font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--as-text-headline);
  margin: 0;
}

.as-display-2 {
  font-family: var(--as-font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--as-text-headline);
  margin: 0;
}

.as-display-3 {
  font-family: var(--as-font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--as-text-headline);
  margin: 0;
}

.as-eyebrow {
  font-family: var(--as-font-text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-accent-navy);
  margin: 0 0 24px;
}

.as-body-lead {
  font-family: var(--as-font-text);
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.5;
  color: var(--as-text-body);
  margin: 0;
  max-width: var(--as-text-max);
}

.as-body {
  font-family: var(--as-font-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--as-text-body);
  margin: 0;
  max-width: var(--as-text-max);
}

.as-meta {
  font-family: var(--as-font-text);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--as-text-meta);
}

.as-mincho {
  font-family: var(--as-font-serif);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============================================================================
   4. LAYOUT
   ============================================================================ */
.as-section {
  padding-block: var(--as-section-y-pc);
  position: relative;
}

.as-section--soft {
  background: var(--as-bg-offwhite);
}

.as-section--dark {
  background: var(--as-text-headline);
  color: var(--as-bg-white);
}

.as-section--dark .as-display-2,
.as-section--dark .as-display-3 {
  color: var(--as-bg-white);
}

@media (max-width: 768px) {
  .as-section { padding-block: var(--as-section-y-sp); }
}

.as-container {
  max-width: var(--as-max-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

.as-content {
  max-width: var(--as-max-content);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

.as-text-center { text-align: center; }

/* ============================================================================
   5. HERO (動画ループ × 巨大タイポ × Apple 流オーバーレイ)
   ============================================================================ */
.as-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 80px 0 96px;
  overflow: hidden;
  background: var(--as-text-headline);
  color: var(--as-bg-white);
}

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

.as-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--as-hero-overlay);
  z-index: 1;
}

.as-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--as-max-width);
  margin-inline: auto;
  width: 100%;
  padding-inline: clamp(20px, 4vw, 64px);
}

.as-hero__h1 {
  color: var(--as-bg-white);
  text-shadow: 0 2px 32px rgba(0,0,0,0.35);
  margin-bottom: 0.4em;
  max-width: 16ch;
}

.as-hero__h1 .as-mincho {
  color: var(--as-accent-gold);
}

.as-hero__sub {
  color: rgba(255,255,255,0.92);
  margin-bottom: 2.4em;
  max-width: 38ch;
  text-shadow: 0 1px 16px rgba(0,0,0,0.35);
}

.as-hero__buttons {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================================
   6. CTA (Apple 流リンク + LINE 大型ボタン)
   ============================================================================ */
.as-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 48px;
  background: var(--as-cta);
  color: #ffffff !important;
  font-family: var(--as-font-text);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
  border-radius: 980px;       /* Apple pill ボタン */
  text-decoration: none;
  transition: background var(--as-dur-fast) var(--as-ease),
              transform var(--as-dur-fast) var(--as-ease);
  box-shadow: 0 8px 24px rgba(255,102,0,0.28);
}

.as-cta-primary:hover {
  background: var(--as-cta-hover);
  color: #ffffff !important;
  transform: translateY(-2px);
}

.as-cta-link {
  font-family: var(--as-font-text);
  font-weight: 500;
  font-size: 17px;
  color: var(--as-bg-white);
  text-decoration: none;
  position: relative;
  transition: opacity var(--as-dur-fast) var(--as-ease);
}

.as-cta-link::after {
  content: " ›";
  display: inline-block;
  margin-left: 4px;
  transition: transform var(--as-dur-fast) var(--as-ease);
}

.as-cta-link:hover {
  opacity: 0.7;
  color: var(--as-bg-white);
}

.as-cta-link:hover::after {
  transform: translateX(4px);
}

.as-cta-link--navy {
  color: var(--as-accent-navy);
}

.as-cta-link--navy:hover {
  color: var(--as-accent-navy-2);
}

/* ============================================================================
   7. PHILOSOPHY (1 セクション 1 メッセージ)
   ============================================================================ */
.as-philosophy {
  text-align: center;
}

.as-philosophy__h2 {
  font-family: var(--as-font-serif);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--as-text-headline);
  max-width: 22ch;
  margin: 0 auto 1.2em;
}

.as-philosophy__body {
  max-width: var(--as-text-max);
  margin-inline: auto;
}

/* ============================================================================
   8. SERVICE FULL-BLEED (1 セクション 1 サービス)
   ============================================================================ */
.as-service-full {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: var(--as-max-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

.as-service-full--reverse .as-service-full__media {
  order: 2;
}

.as-service-full__media img,
.as-service-full__media video {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 18px;
}

.as-service-full__copy {
  max-width: 540px;
}

.as-service-full__copy .as-eyebrow { margin-bottom: 16px; }
.as-service-full__copy .as-display-2 { margin-bottom: 24px; }
.as-service-full__copy .as-body-lead { margin-bottom: 32px; }

@media (max-width: 768px) {
  .as-service-full {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .as-service-full--reverse .as-service-full__media {
    order: -1;
  }
}

/* ============================================================================
   9. AUTHORITY LOGOS (Apple "Made with..." 風グレースケール)
   ============================================================================ */
.as-authority {
  text-align: center;
}

.as-authority__h2 {
  font-family: var(--as-font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--as-text-meta);
  margin: 0 0 56px;
  letter-spacing: 0.02em;
}

.as-authority__logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 48px;
  align-items: center;
  justify-items: center;
  max-width: 1180px;
  margin-inline: auto;
}

.as-authority__logos img {
  max-height: 56px;
  width: auto;
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--as-dur) var(--as-ease);
}

.as-authority__logos img:hover {
  filter: grayscale(0) opacity(1);
}

/* ============================================================================
   10. NUMBERS (Apple 巨大カウンター風)
   ============================================================================ */
.as-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 48px;
  text-align: center;
  max-width: 1180px;
  margin-inline: auto;
}

.as-number__value {
  font-family: var(--as-font-display);
  font-weight: 800;
  font-size: clamp(80px, 12vw, 200px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--as-text-headline);
  margin: 0;
  background: var(--as-gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.as-number__unit {
  font-family: var(--as-font-display);
  font-weight: 600;
  font-size: 0.4em;
  letter-spacing: 0.02em;
  background: none;
  -webkit-text-fill-color: var(--as-text-headline);
}

.as-number__label {
  font-family: var(--as-font-text);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--as-text-meta);
  margin: 16px 0 0;
}

/* ============================================================================
   11. WORKS GALLERY (横スクロール可・Apple TV+ 風)
   ============================================================================ */
.as-works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  max-width: var(--as-max-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

.as-work-card {
  background: var(--as-bg-white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: transform var(--as-dur) var(--as-ease),
              box-shadow var(--as-dur) var(--as-ease);
}

.as-work-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.08);
}

.as-work-card__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--as-bg-offwhite);
}

.as-work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--as-ease);
}

.as-work-card:hover .as-work-card__media img {
  transform: scale(1.04);
}

.as-work-card__body {
  padding: 28px 28px 32px;
}

.as-work-card__title {
  font-family: var(--as-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--as-text-headline);
  margin: 0 0 8px;
}

.as-work-card__meta {
  font-family: var(--as-font-text);
  font-size: 14px;
  color: var(--as-text-meta);
  margin: 0;
}

/* ============================================================================
   12. THREE WAYS (お悩み/車種/予算 3 軸セレクター・Apple "Why Mac" 風)
   ============================================================================ */
.as-three-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

.as-way-card {
  background: var(--as-bg-white);
  border: 1px solid var(--as-border);
  border-radius: 18px;
  padding: 48px 36px;
  transition: border-color var(--as-dur) var(--as-ease),
              transform var(--as-dur) var(--as-ease);
}

.as-way-card:hover {
  border-color: var(--as-accent-navy);
  transform: translateY(-4px);
}

.as-way-card__h3 {
  font-family: var(--as-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.005em;
  color: var(--as-text-headline);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--as-accent-gold);
}

.as-way-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.as-way-card__list li {
  font-family: var(--as-font-text);
  font-size: 15px;
  line-height: 1.7;
  color: var(--as-text-body);
  padding: 8px 0;
  border-bottom: 1px solid var(--as-border-light);
}

.as-way-card__list li:last-child { border-bottom: none; }

.as-way-card__list strong {
  font-weight: 600;
  color: var(--as-accent-navy);
}

/* ============================================================================
   13. FINAL CTA SECTION
   ============================================================================ */
.as-final-cta {
  text-align: center;
}

.as-final-cta__h2 {
  margin: 0 0 24px;
  max-width: 18ch;
  margin-inline: auto;
}

.as-final-cta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 48px;
}

/* ============================================================================
   14. FOOTER SNS CARDS
   ============================================================================ */
.as-footer-sns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: var(--as-max-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

.as-footer-sns__card {
  display: block;
  background: var(--as-bg-white);
  border: 1px solid var(--as-border);
  border-top: 3px solid var(--as-accent-gold);
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  text-decoration: none;
  transition: all var(--as-dur-fast) var(--as-ease);
}

.as-footer-sns__card:hover {
  border-top-color: var(--as-cta);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}

.as-footer-sns__card-name {
  font-family: var(--as-font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--as-text-headline);
  margin: 12px 0 4px;
}

.as-footer-sns__card-action {
  font-family: var(--as-font-text);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--as-text-meta);
}

/* ============================================================================
   15. SCROLL-DRIVEN ANIMATIONS (IntersectionObserver で is-visible 付与)
   ============================================================================ */
.as-fade-in {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity var(--as-dur) var(--as-ease-out),
              transform var(--as-dur) var(--as-ease-out);
}

.as-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.as-fade-in--delay-1 { transition-delay: 0.12s; }
.as-fade-in--delay-2 { transition-delay: 0.24s; }
.as-fade-in--delay-3 { transition-delay: 0.36s; }

/* ============================================================================
   16. ACCESSIBILITY
   ============================================================================ */
:focus-visible {
  outline: 2px solid var(--as-accent-navy);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .as-fade-in {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
   17. ASTRA OVERRIDES (親テーマの干渉を吸収)
   ============================================================================ */
.ast-container,
.site-content > .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

#primary { padding: 0 !important; }
.entry-content > * { margin: 0 !important; }
.entry-content { margin: 0 !important; }

/* ============================================================================
   18. SP 強化パッチ（yuushin v2.8.0 知見統合 + as-* 専用最適化）
   - 検証サイズ: 375px (iPhone SE) / 414px (iPhone Pro Max) / 768px (iPad)
   - 出典: _output/yuushin/ai-hishoshitsu-child-v2.8.0/style.css の汎用 SP セクション
   ============================================================================ */

/* ---------- 18.1 yuushin から継承した汎用 SP 対応 ---------- */
@media (max-width: 768px) {
  /* タッチターゲット最低 44px（WCAG 2.5.5・yuushin 実戦適用） */
  .menu-link, .ast-button, .ast-custom-button, .wp-block-button__link,
  input[type="submit"], button, .as-cta-primary, .as-cta-link {
    min-height: 44px;
  }
  /* テーブル横スクロール（はみ出し防止） */
  .entry-content table, .as-section table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* max-width 強制 100%（横スクロール根絶） */
  .entry-content img, .as-section img {
    max-width: 100% !important;
    height: auto;
  }
  /* Astra コンテナのインラインパディング縮小 */
  .ast-container, #primary { padding-inline: 0 !important; }
}

/* ---------- 18.2 as-hero（巨大タイポの SP 改行制御） ---------- */
@media (max-width: 768px) {
  .as-hero {
    min-height: 88vh;
    padding: 64px 0 80px;
    align-items: flex-end;
  }
  .as-hero__inner {
    padding-inline: 24px;
  }
  .as-hero__h1 {
    font-size: clamp(36px, 9vw, 56px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-width: 14ch;
    margin-bottom: 0.5em;
  }
  .as-hero__sub {
    font-size: 15px;
    line-height: 1.7;
    max-width: 28ch;
    margin-bottom: 1.6em;
  }
  .as-hero__buttons {
    gap: 14px;
    flex-direction: column;
    align-items: flex-start;
  }
  .as-hero__buttons > .as-cta-primary {
    width: 100%;
    text-align: center;
    padding: 16px 24px;
  }
}

/* ---------- 18.3 as-display-* （見出しの SP 圧縮） ---------- */
@media (max-width: 768px) {
  .as-display-1 { font-size: clamp(36px, 9vw, 56px); line-height: 1.15; }
  .as-display-2 { font-size: clamp(28px, 7.5vw, 42px); line-height: 1.2; }
  .as-display-3 { font-size: clamp(22px, 5.5vw, 30px); line-height: 1.3; }
  .as-philosophy__h2 {
    font-size: clamp(24px, 6.5vw, 36px);
    line-height: 1.5;
    max-width: 18ch;
  }
  .as-eyebrow { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 16px; }
  .as-body-lead { font-size: 16px; line-height: 1.7; }
}

/* ---------- 18.4 as-section（SP 余白を yuushin 流に圧縮） ---------- */
@media (max-width: 768px) {
  .as-section { padding-block: 72px; }
  .as-content, .as-container { padding-inline: 20px; }
}

/* ---------- 18.5 as-service-full（SP で画像縦長を抑制） ---------- */
@media (max-width: 768px) {
  .as-service-full {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-inline: 20px;
  }
  .as-service-full--reverse .as-service-full__media { order: -1; }
  .as-service-full__media img,
  .as-service-full__media video {
    aspect-ratio: 4/3;     /* SP は縦長を抑え 4:3 にして画面占有率を下げる */
    border-radius: 12px;
  }
  .as-service-full__copy { max-width: 100%; }
  .as-service-full__copy .as-eyebrow { margin-bottom: 12px; }
  .as-service-full__copy .as-display-2 { margin-bottom: 16px; }
  .as-service-full__copy .as-body-lead { margin-bottom: 20px; font-size: 15px; }
}

/* ---------- 18.6 as-numbers（SP で 2x2 グリッド） ---------- */
@media (max-width: 768px) {
  .as-numbers {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .as-number__value { font-size: clamp(48px, 14vw, 72px); }
  .as-number__unit  { font-size: 0.45em; }
  .as-number__label { font-size: 11px; letter-spacing: 0.1em; margin-top: 8px; }
}

/* ---------- 18.7 as-authority logos（SP 3 列 grid・寂しさ解消） ---------- */
@media (max-width: 768px) {
  .as-authority__logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 16px;
  }
  .as-authority__logos img { max-height: 40px; }
  .as-authority__h2 { font-size: clamp(18px, 4vw, 22px); margin-bottom: 32px; }
}

/* ---------- 18.8 as-works（SP で 1 列・カード余白圧縮） ---------- */
@media (max-width: 768px) {
  .as-works {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-inline: 20px;
  }
  .as-work-card { border-radius: 12px; }
  .as-work-card__body { padding: 20px 20px 24px; }
  .as-work-card__title { font-size: 18px; line-height: 1.35; }
  .as-work-card__meta { font-size: 13px; }
}

/* ---------- 18.9 as-three-ways（SP 1 列・カード余白圧縮） ---------- */
@media (max-width: 768px) {
  .as-three-ways {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-inline: 20px;
  }
  .as-way-card {
    padding: 32px 24px;
    border-radius: 12px;
  }
  .as-way-card__h3 {
    font-size: 22px;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  .as-way-card__list li { font-size: 14px; line-height: 1.65; padding: 6px 0; }
}

/* ---------- 18.10 as-final-cta（SP で 3 ボタン縦積み・余白確保） ---------- */
@media (max-width: 768px) {
  .as-final-cta__h2 {
    font-size: clamp(26px, 6.5vw, 36px);
    line-height: 1.35;
    max-width: 16ch;
    margin-bottom: 16px;
  }
  .as-final-cta__buttons {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    margin-top: 32px;
  }
  .as-final-cta__buttons > .as-cta-primary {
    width: 100%;
    text-align: center;
  }
  .as-final-cta__buttons > .as-cta-link {
    text-align: center;
    padding: 12px 0;
  }
}

/* ---------- 18.11 as-footer-sns（SP で 2x2 / 寂しさ回避） ---------- */
@media (max-width: 768px) {
  .as-footer-sns {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding-inline: 20px;
  }
  .as-footer-sns__card { padding: 20px 12px; }
  .as-footer-sns__card-name { font-size: 14px; margin-top: 8px; }
  .as-footer-sns__card-action { font-size: 11px; }
}

/* ---------- 18.12 as-sns-bar（SP で 1 列縦積み） ---------- */
@media (max-width: 768px) {
  .as-sns-bar { padding: 20px; }
  .as-sns-bar__inner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .as-sns-bar__copy { font-size: 14px; }
  .as-sns-bar__icons { gap: 12px; }
  .as-sns-bar__icons a { width: 40px; height: 40px; }
}

/* ---------- 18.13 微細サイズ（375px 以下の極小端末） ---------- */
@media (max-width: 374px) {
  .as-hero__h1 { font-size: 30px; max-width: 12ch; }
  .as-display-2 { font-size: 26px; }
  .as-numbers { grid-template-columns: 1fr; gap: 24px; }
  .as-authority__logos { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   19. 既存 Spectra/Astra 要素 → Apple ライクオーバーライド層 (v3.2.0)
   既存 HTML（wp-block-cover / wp-block-heading / wp-block-button__link 等）
   を書き換えずに、CSS だけで Apple 公式風の見た目に化粧する。
   インライン style="font-size:32px" 等は !important で上書き。
   ============================================================================ */

/* ---------- 19.1 ベース：body 全体に Apple フォント＆色を強制 ---------- */
body, body.ast-blog-meta-weight {
  font-family: var(--as-font-text) !important;
  color: var(--as-text-body);
  background: var(--as-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1, "kern" 1;
}

/* リンクの不要な下線・色は Apple 流に */
.entry-content a:not(.wp-block-button__link):not(.ast-button) {
  color: var(--as-accent-navy);
  text-decoration: none;
  transition: opacity 0.32s var(--as-ease);
}
.entry-content a:not(.wp-block-button__link):not(.ast-button):hover {
  opacity: 0.7;
}

/* ---------- 19.2 wp-block-heading：見出しを Apple タイポに ---------- */
.entry-content .wp-block-heading {
  font-family: var(--as-font-display) !important;
  color: var(--as-text-headline) !important;
  letter-spacing: -0.012em !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* H1（インライン 48px）→ Apple 級に拡張 */
.entry-content h1.wp-block-heading,
.entry-content .wp-block-heading[style*="font-size:48px"] {
  font-size: clamp(48px, 8vw, 120px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
}

/* H2（インライン 32px）→ Apple セクションヘッダー級 */
.entry-content h2.wp-block-heading,
.entry-content .wp-block-heading[style*="font-size:32px"] {
  font-size: clamp(36px, 5.5vw, 80px) !important;
  line-height: 1.08 !important;
  margin-block: 0.6em 0.8em !important;
}

/* H3（インライン 22px / 20px / 18px）→ Apple サブヘッダー */
.entry-content h3.wp-block-heading,
.entry-content .wp-block-heading[style*="font-size:22px"],
.entry-content .wp-block-heading[style*="font-size:20px"],
.entry-content .wp-block-heading[style*="font-size:18px"] {
  font-size: clamp(20px, 2.4vw, 28px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* 白色見出しは保護（cover 内部用） */
.entry-content .wp-block-heading.has-white-color {
  color: #ffffff !important;
}

/* 中央寄せ見出しの下にゴールド極細罫線（Apple 流の控えめアクセント） */
.entry-content h2.wp-block-heading.has-text-align-center::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--as-accent-gold);
  margin: 16px auto 0;
}

/* ---------- 19.3 wp-block-cover：ヒーロー / バナーを Apple 化 ---------- */
.entry-content .wp-block-cover.alignfull {
  min-height: clamp(560px, 88vh, 800px) !important;
  margin-block: 0 !important;
  padding-block: clamp(80px, 12vw, 160px) !important;
}

/* cover 内のオーバーレイを Apple グラデに統一 */
.entry-content .wp-block-cover.alignfull > .wp-block-cover__background.has-background-dim {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.30) 60%,
    rgba(0,0,0,0.65) 100%) !important;
  opacity: 1 !important;
}

/* インナーコンテナの中央余白拡張 */
.entry-content .wp-block-cover__inner-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

/* 小型 cover (service-card) は Apple カード風 */
.entry-content .wp-block-cover.service-card {
  border-radius: 18px !important;
  overflow: hidden;
  transition: transform 0.32s var(--as-ease), box-shadow 0.32s var(--as-ease);
}
.entry-content .wp-block-cover.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.10);
}

/* ---------- 19.4 wp-block-button__link：Apple Pill ボタンに強制 ---------- */
.entry-content .wp-block-button__link.wp-element-button {
  border-radius: 980px !important;
  font-family: var(--as-font-text) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: 0.02em !important;
  padding: 16px 36px !important;
  transition: transform 0.32s var(--as-ease),
              background-color 0.32s var(--as-ease),
              box-shadow 0.32s var(--as-ease) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  line-height: 1.2 !important;
}

.entry-content .wp-block-button__link.wp-element-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
}

/* オレンジ CTA = メインアクション */
.entry-content .wp-block-button__link[style*="background-color:#ff6600"] {
  background-color: var(--as-cta) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(255,102,0,0.28);
}

/* シアン (#00bcd4) → Apple ネイビーに統一 */
.entry-content .wp-block-button__link[style*="background-color:#00bcd4"] {
  background-color: var(--as-accent-navy) !important;
  color: #ffffff !important;
}

/* ダークネイビー (#081a28) → Apple ヘッドライン色に */
.entry-content .wp-block-button__link[style*="background-color:#081a28"] {
  background-color: var(--as-text-headline) !important;
  color: #ffffff !important;
}

/* ---------- 19.5 wp-block-columns / wp-block-group：余白を Apple 流に ---------- */
.entry-content .wp-block-columns {
  gap: clamp(24px, 3vw, 48px) !important;
  margin-block: clamp(48px, 6vw, 96px) !important;
}

.entry-content .wp-block-group.alignfull,
.entry-content .wp-block-group.alignwide {
  padding-block: clamp(80px, 10vw, 140px);
}

/* group / column 内の段落は Apple 流のリーディング幅 */
.entry-content p:not(.has-text-align-center):not(.has-large-font-size):not(.has-huge-font-size) {
  font-size: 17px;
  line-height: 1.65;
  color: var(--as-text-body);
  max-width: 720px;
}

/* ---------- 19.6 wp-block-image：画像の角丸＋ふんわり影 ---------- */
.entry-content .wp-block-image img {
  border-radius: 14px;
}

.entry-content figure.wp-block-image {
  margin-block: clamp(24px, 3vw, 48px);
}

/* ---------- 19.7 wp-block-media-text：文字＋画像の縦横比 Apple 流 ---------- */
.entry-content .wp-block-media-text {
  gap: clamp(32px, 5vw, 80px) !important;
  margin-block: clamp(64px, 8vw, 120px) !important;
}

.entry-content .wp-block-media-text__media img {
  border-radius: 18px;
  aspect-ratio: 4/5;
  object-fit: cover;
}

/* ---------- 19.8 ast-* ヘッダー / メニュー：Apple ナビゲーションバー風 ---------- */
.ast-desktop .ast-builder-menu-1 .menu-link {
  font-family: var(--as-font-text) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  color: var(--as-text-headline) !important;
  text-decoration: none !important;
  padding: 0 16px !important;
  transition: opacity 0.32s var(--as-ease) !important;
}

.ast-desktop .ast-builder-menu-1 .menu-link:hover {
  opacity: 0.7;
}

#masthead {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--as-border) !important;
  box-shadow: none !important;
}

/* ---------- 19.9 ast-* フッター：Apple footer 風（極小・控えめ） ---------- */
#colophon {
  background: var(--as-bg-offwhite) !important;
  color: var(--as-text-meta) !important;
  font-size: 13px;
}

#colophon a {
  color: var(--as-text-meta) !important;
}

#colophon a:hover {
  color: var(--as-text-headline) !important;
}

/* ---------- 19.10 SP 強化（オーバーライド層も SP 最適化） ---------- */
@media (max-width: 768px) {
  .entry-content .wp-block-cover.alignfull {
    min-height: clamp(440px, 80vh, 600px) !important;
    padding-block: 64px !important;
  }
  .entry-content h1.wp-block-heading,
  .entry-content .wp-block-heading[style*="font-size:48px"] {
    font-size: clamp(34px, 9vw, 56px) !important;
    line-height: 1.15 !important;
  }
  .entry-content h2.wp-block-heading,
  .entry-content .wp-block-heading[style*="font-size:32px"] {
    font-size: clamp(26px, 7.5vw, 40px) !important;
    line-height: 1.2 !important;
  }
  .entry-content h3.wp-block-heading,
  .entry-content .wp-block-heading[style*="font-size:22px"],
  .entry-content .wp-block-heading[style*="font-size:20px"],
  .entry-content .wp-block-heading[style*="font-size:18px"] {
    font-size: 18px !important;
  }
  .entry-content .wp-block-button__link.wp-element-button {
    width: 100%;
    padding: 14px 24px !important;
    font-size: 15px !important;
  }
  .entry-content .wp-block-buttons {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .entry-content .wp-block-columns {
    gap: 16px !important;
    margin-block: 32px !important;
  }
  .entry-content .wp-block-group.alignfull,
  .entry-content .wp-block-group.alignwide {
    padding-block: 56px;
    padding-inline: 20px;
  }
}

/* ---------- 19.11 安全策：横スクロール根絶 ---------- */
html, body {
  overflow-x: hidden;
}

/* ============================================================================
   今後のページ固有カスタムは末尾に追記
   ============================================================================ */