/* ============================================================
   V5 — Depth, Light, Motion
   Goal: 「整っているが静的」→「奥行き・光・動きで記憶に残る」
   Loads AFTER v4.css.
   ============================================================ */

/* ---------- Shared keyframes ---------- */
@keyframes v5DriftHoriz { 0% { background-position-x: 0%; } 100% { background-position-x: 100%; } }
@keyframes v5PulseSoft { 0% { transform: scale(1); } 100% { transform: scale(1.10); } }
@keyframes v5MotifFloat {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(-1%,-1.2%,0) rotate(2deg); }
  100% { transform: translate3d(1%, 0.8%,0) rotate(-2deg); }
}
@keyframes v5Sheen {
  0%   { background-position: -60% 0; opacity: .55; }
  50%  { background-position: 110% 0; opacity: 1; }
  100% { background-position: 220% 0; opacity: .55; }
}

/* ============================================================
   1. PAGE-HERO 強化（薄すぎる問題の解消）
   ============================================================ */
.page-hero { isolation: isolate; overflow: hidden; }
.page-hero .ph-mesh { opacity: .82 !important; filter: saturate(1.08) contrast(1.02); }
.page-hero .ph-motif {
  opacity: .22 !important;
  width: 560px !important; height: 560px !important;
  animation: v5MotifFloat 32s ease-in-out infinite alternate;
  will-change: transform;
}
/* 右側に光だまりを追加（ブランドのオーラ） */
.page-hero::after {
  content: ""; position: absolute;
  top: -120px; right: -120px;
  width: 760px; height: 560px;
  background:
    radial-gradient(closest-side, rgba(53,199,255,.32), transparent 70%);
  z-index: 0; pointer-events: none;
  animation: v5PulseSoft 14s ease-in-out infinite alternate;
}
/* 左下にもう一つ淡いグロー（奥行き） */
.page-hero::before {
  content: ""; position: absolute;
  bottom: -120px; left: -100px;
  width: 560px; height: 420px;
  background: radial-gradient(closest-side, rgba(46,123,214,.22), transparent 70%);
  z-index: 0; pointer-events: none;
}
.page-hero .container { position: relative; z-index: 3; }

/* 下層ページ毎の差分を強める */
.page-training .page-hero .ph-mesh { opacity: .85 !important; }
.page-training .page-hero .ph-motif { right: -40px !important; top: -80px !important; opacity: .26 !important; }

.page-dx .page-hero .ph-mesh { opacity: .82 !important; }
.page-dx .page-hero .ph-motif { right: -180px !important; top: 40px !important; opacity: .22 !important; transform: rotate(8deg); }

.page-cases .page-hero .ph-mesh { opacity: .80 !important; }
.page-cases .page-hero .ph-motif { right: 4% !important; top: -40px !important; opacity: .24 !important; width: 460px !important; height: 460px !important; }

.page-company .page-hero .ph-mesh { opacity: .78 !important; filter: hue-rotate(-8deg) saturate(1.1); }
.page-company .page-hero .ph-motif { right: -100px !important; top: -100px !important; opacity: .20 !important; width: 480px !important; height: 480px !important; }

.page-contact .page-hero .ph-mesh { opacity: .76 !important; }
.page-contact .page-hero .ph-motif { right: 6% !important; top: 30px !important; opacity: .22 !important; width: 380px !important; height: 380px !important; }

/* ============================================================
   2. 白背景セクションに奥行き
   .values / .services / .about-section / .company-profile
   .feature-list を含む通常セクション全般
   ============================================================ */
.values, .services {
  isolation: isolate;
  position: relative;
}
.values::before, .services::before {
  /* A モチーフ薄敷き */
  content: ""; position: absolute; inset: 0;
  background-image: url("../images/bg/v4/A_motif_pattern_v4.svg");
  background-repeat: repeat;
  background-size: 320px 320px;
  opacity: .045;
  z-index: 0; pointer-events: none;
}
.values::after, .services::after {
  /* 淡い水色グロー */
  content: ""; position: absolute;
  width: 720px; height: 540px;
  background: radial-gradient(closest-side, rgba(53,199,255,.18), transparent 70%);
  z-index: 0; pointer-events: none;
  animation: v5PulseSoft 16s ease-in-out infinite alternate;
}
.values::after { top: -120px; right: -160px; }
.services::after { bottom: -180px; left: -160px; }
.values .container, .services .container { position: relative; z-index: 1; }

/* 会社情報の「企業情報」セクションや「私たちについて」など、通常 section に backdrop */
section.about-section,
section.company-profile,
.page-company section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer),
.page-cases section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer),
.page-training section:not(.page-hero):not(.cta-band):not(.impact-band):not(.tools-band):not(.site-footer),
.page-dx section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer) {
  position: relative;
  isolation: isolate;
}
section.about-section::before,
section.company-profile::before,
.page-company section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer)::before,
.page-cases section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer)::before,
.page-training section:not(.page-hero):not(.cta-band):not(.impact-band):not(.tools-band):not(.site-footer)::before,
.page-dx section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer)::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../images/bg/v4/dot_grid_light_v4.svg");
  background-repeat: repeat;
  background-size: 28px 28px;
  opacity: .08;
  z-index: 0; pointer-events: none;
}
section.about-section > .container,
section.company-profile > .container,
.page-company section > .container,
.page-cases section > .container,
.page-training section > .container,
.page-dx section > .container { position: relative; z-index: 1; }

/* ============================================================
   3. HERO — A モチーフを主役に
   ============================================================ */
.hero-inner { grid-template-columns: 1.25fr .75fr !important; }
.hero-visual { z-index: 5; }
.hero-visual img {
  width: min(40vw, 520px) !important;
  margin-right: -4% !important;
  opacity: .96 !important;
  filter:
    drop-shadow(0 40px 80px rgba(15,36,68,.28))
    drop-shadow(0 12px 28px rgba(46,123,214,.18)) !important;
}
/* 光が A に集まる演出 — Hero 右にコンセントレートグロー */
.hero::after {
  content: ""; position: absolute;
  top: 20%; right: -10%;
  width: 880px; height: 880px;
  background: radial-gradient(closest-side, rgba(53,199,255,.42), rgba(46,123,214,.10) 45%, transparent 70%);
  z-index: 2; pointer-events: none;
  animation: v5PulseSoft 12s ease-in-out infinite alternate;
}

/* H1 - 大きさはそのまま、行ごとリビールで Hero 一撃 */
.hero h1 { font-size: clamp(44px, 6.2vw, 84px) !important; }

/* ============================================================
   4. IMPACT-BAND に動き
   ============================================================ */
.impact-band {
  background-size: cover, 110% 110% !important;
  background-position: center, 0% center !important;
  animation: v5DriftHoriz 32s ease-in-out infinite alternate !important;
}
.impact-band::before { display: block !important; content: ""; position: absolute; inset: -8% -10%;
  background: linear-gradient(110deg, transparent 32%, rgba(53,199,255,.10) 50%, transparent 68%);
  background-size: 220% 100%; background-position: -60% 0;
  pointer-events: none; z-index: 0;
  animation: v5Sheen 22s ease-in-out infinite;
}
.impact-band::after {
  /* Aモチーフ薄敷き */
  display: block !important; content: ""; position: absolute; inset: 0;
  background-image: url("../images/bg/v4/A_motif_pattern_v4.svg");
  background-repeat: repeat; background-size: 360px 360px;
  opacity: .06; z-index: 1; pointer-events: none;
  animation: v5DriftHoriz 60s linear infinite;
}
.impact-band .container { position: relative; z-index: 3; }
.impact-band .bg-canvas { z-index: 2; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* カード出現 stagger */
.impact-stat {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.impact-stat.is-in { opacity: 1; transform: translateY(0); }
.impact-stat:nth-child(1).is-in { transition-delay: 0.05s; }
.impact-stat:nth-child(2).is-in { transition-delay: 0.18s; }
.impact-stat:nth-child(3).is-in { transition-delay: 0.32s; }

/* ============================================================
   5. CTA — 可読性 × 光集約
   ============================================================ */
.cta-band {
  isolation: isolate;
  background-size: cover, cover, 110% 110% !important;
  background-position: center, center, 0% center !important;
  animation: v5DriftHoriz 26s ease-in-out infinite alternate !important;
}
/* コピー背面の暗いマスク（中央のみ濃く） */
.cta-band::before {
  display: block !important; content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 40% at 50% 45%, rgba(5,15,36,.62), rgba(5,15,36,0) 70%);
  z-index: 1; pointer-events: none;
}
/* ボタン周辺グロー */
.cta-band::after {
  display: block !important; content: ""; position: absolute;
  left: 50%; top: 64%; transform: translate(-50%, -50%);
  width: 760px; height: 460px;
  background: radial-gradient(closest-side, rgba(53,199,255,.55), rgba(46,123,214,.08) 50%, transparent 75%);
  z-index: 2; pointer-events: none;
  animation: v5PulseSoft 10s ease-in-out infinite alternate;
}
.cta-band .bg-canvas { z-index: 3; }
.cta-band .container { position: relative; z-index: 4; }
.cta-band h2 {
  font-size: clamp(28px, 3.6vw, 48px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
/* accent: text-shadow と background-clip:text の干渉でハローが出るため、accent 部分はシャドウを切り、ベタ塗りシアンに */
.cta-band h2 .accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #35C7FF !important;
  -webkit-text-fill-color: #35C7FF !important;
  text-shadow: none !important;
}
@media (min-width: 1024px) {
  .page-company .cta-band h2 { white-space: nowrap; }
}
.cta-band p { text-shadow: 0 2px 12px rgba(0,0,0,.25); }
/* btn-primary は末尾の FINAL 統合ブロックで定義 */

/* ============================================================
   6. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .page-hero::after, .page-hero::before,
  .values::after, .services::after,
  .impact-band, .impact-band::before, .impact-band::after,
  .cta-band, .cta-band::after, .cta-band .btn-primary,
  .hero::after, .page-hero .ph-motif,
  .hero-bg-mesh, .hero-bg-streak, .hero-bg-motif,
  .hero-visual img { animation: none !important; }
  .impact-stat { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   7. Mobile
   ============================================================ */
@media (max-width: 740px) {
  .hero::after { width: 460px; height: 460px; right: -20%; }
  .page-hero::after { width: 360px; height: 280px; right: -80px; top: -60px; }
  .page-hero::before { display: none; }
  .impact-band, .cta-band, .hero-bg-mesh, .page-hero .ph-motif,
  .values::after, .services::after { animation: none !important; }
  .impact-band::before, .cta-band::after { display: none !important; }
  .hero-visual img { width: 90% !important; margin-right: 0 !important; }
  .impact-band .bg-canvas, .cta-band .bg-canvas { display: none; }
}

/* ============================================================
   8. Typography Refresh — Noto Sans JP + Inter for numerals
   ============================================================ */
body {
  font-family: "Space Grotesk", "Noto Sans JP", "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, sans-serif;
  font-feature-settings: "palt" 1;
}
.price-amt,
.price-amt small,
.impact-stat strong,
.metric strong,
.bi-val, .cf-val {
  font-family: "Space Grotesk", "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-feature-settings: "tnum" 1, "ss02" 1;
  letter-spacing: -.025em;
}
.section-eyebrow,
.breadcrumb {
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-feature-settings: "tnum" 1;
  letter-spacing: .08em;
}
.price-amt { font-weight: 700; }

/* ============================================================
   9. Page-hero with side logo (service-training.html)
   ============================================================ */
.page-hero--with-logo .ph-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
.page-hero--with-logo .ph-text { min-width: 0; }
.page-hero--with-logo .ph-grid { position: relative; z-index: 5; }
.page-hero--with-logo .ph-logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  isolation: isolate;
  z-index: 5;
}
.page-hero--with-logo .ph-logo::before {
  content: "";
  position: absolute;
  inset: 50% 50% auto auto;
  width: 360px; height: 360px;
  transform: translate(50%, -50%) translateZ(0);
  background: radial-gradient(closest-side, rgba(255,255,255,.92), rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 78%);
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.page-hero--with-logo .ph-logo img {
  width: 100%;
  max-width: 260px;
  height: auto;
  position: relative;
  z-index: 1;
  will-change: transform;
  backface-visibility: hidden;
  animation: phLogoFloat 12s ease-in-out infinite alternate;
}
@keyframes phLogoFloat {
  0%   { transform: translate3d(0, 0, 0) rotate(-1.2deg) scale(1); }
  50%  { transform: translate3d(0, -10px, 0) rotate(0.8deg) scale(1.015); }
  100% { transform: translate3d(0, 4px, 0) rotate(-0.4deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero--with-logo .ph-logo img { animation: none; }
}
@media (max-width: 860px) {
  .page-hero--with-logo .ph-grid { grid-template-columns: 1fr; gap: 16px; }
  .page-hero--with-logo .ph-logo { order: -1; }
  .page-hero--with-logo .ph-logo img { max-width: 180px; }
}

/* ============================================================
  10. Plan grid — 2-card balanced layout
   ============================================================ */
.plan-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}
.plan-grid .price-card-item {
  padding: 36px 32px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-grid .price-card-item h3 {
  font-size: 22px;
  font-weight: 700;
}
.plan-grid .price-amt {
  font-size: 38px;
  margin: 18px 0 12px;
  font-feature-settings: "tnum" 1;
}
.plan-grid .price-amt small {
  font-size: 13px;
  margin-left: 4px;
}
.plan-grid .price-card-item.featured {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(46, 123, 214, .18);
  border-width: 2px;
}
.plan-grid .price-card-item.featured::before {
  content: "おすすめ";
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 6px 16px rgba(46, 123, 214, .35);
}
@media (max-width: 720px) {
  .plan-grid { grid-template-columns: 1fr; }
  .plan-grid .price-card-item.featured { transform: none; }
}

/* ============================================================
  11. CTA-band click fix — overlays must not intercept clicks
   ============================================================ */
.cta-bg-streak,
.cta-bg-lightstreak,
.cta-bg-grid,
.cta-bg-pulse {
  pointer-events: none !important;
}
.cta-band .container { position: relative; z-index: 10; }
.cta-band .btn-primary { position: relative; z-index: 11; }

/* ============================================================
  12. 日本語の中途半端な改行を抑制
   ============================================================ */
/* 日本語の不自然な改行（名詞分断・中黒分断）を抑制 */
.section-lead,
.lead,
.page-hero p.lead,
.ib-sub,
.cta-band p,
.about-pillars .pillar p,
.about-pillars .pillar h3,
.about-mission,
.about-lead,
.feature-list .item p,
.feature-list .item h3,
.panel-intro,
.panel-note,
.values-grid p, .values-grid h3,
.services-grid p, .services-grid h3,
.case-card p, .case-card h3 {
  /* モダンブラウザ: 意味の塊で改行 / 旧ブラウザ: 単語の途中で折らない */
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}
@supports not (word-break: auto-phrase) {
  .section-lead, .lead, .page-hero p.lead, .ib-sub, .cta-band p,
  .about-pillars .pillar p, .about-pillars .pillar h3,
  .about-mission, .about-lead,
  .feature-list .item p, .feature-list .item h3,
  .panel-intro, .panel-note,
  .values-grid p, .values-grid h3,
  .services-grid p, .services-grid h3,
  .case-card p, .case-card h3 {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* ============================================================
  13. Curriculum tabs (service-training.html)
   ============================================================ */
.curriculum-tabs { margin-top: 40px; }
.tab-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.tab-btn {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 16px;
  cursor: pointer;
  text-align: left;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: inherit;
  color: var(--text);
}
.tab-btn:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46, 123, 214, .12);
}
.tab-btn.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(46, 123, 214, .28);
}
.tab-btn .tab-label {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
}
.tab-btn .tab-meta {
  font-size: 12px;
  opacity: .75;
  font-feature-settings: "tnum" 1;
}
.tab-panel { display: none; animation: tabFadeIn .35s ease; }
.tab-panel.is-active { display: block; }
.tab-panel .panel-intro {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0 0 20px;
  line-height: 1.85;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .tab-buttons { grid-template-columns: 1fr; }
}

/* ============================================================
  14. About Us — editorial layout (company.html)
   ============================================================ */
.about-section { padding: 100px 0 110px; }
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.about-head {
  position: relative;
}
.about-title {
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--navy);
  margin: 14px 0 28px;
  word-break: keep-all;
}
.about-title .grad {
  background: linear-gradient(110deg, #2E7BD6 0%, #35C7FF 60%, #6FB7F2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-divider {
  width: 64px; height: 3px;
  background: linear-gradient(90deg, var(--blue), #35C7FF);
  border-radius: 3px;
  margin-top: 8px;
}
.about-body { position: relative; }
.about-mission {
  position: relative;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.7;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  padding: 8px 0 0 40px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.about-mission em {
  font-style: normal;
  background: linear-gradient(transparent 64%, rgba(53,199,255,.32) 64%);
  padding: 0 2px;
  color: var(--blue);
  font-weight: 700;
}
.about-mission .quote-mark {
  position: absolute;
  top: -28px; left: -10px;
  font-family: "Space Grotesk", serif;
  font-size: 96px;
  line-height: 1;
  color: var(--blue);
  opacity: .18;
  font-weight: 700;
}
.about-lead {
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 2;
  margin: 0 0 48px;
  padding-left: 40px;
  border-left: 1px solid var(--line);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.about-pillars .pillar {
  position: relative;
  padding: 26px 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.about-pillars .pillar:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 18px 36px rgba(46, 123, 214, .14);
}
.about-pillars .pillar-no {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: .12em;
  margin-bottom: 12px;
  font-feature-settings: "tnum" 1;
}
.about-pillars .pillar h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.about-pillars .pillar p {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-muted);
  margin: 0;
  line-break: strict;
}
@media (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-head { position: static; }
  .about-pillars { grid-template-columns: 1fr; }
  .about-mission { padding-left: 28px; }
  .about-mission .quote-mark { font-size: 72px; top: -18px; }
  .about-lead { padding-left: 28px; }
}

/* ============================================================
  15. Curriculum — plan switch (通常版 / 定額版)
   ============================================================ */
.plan-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.plan-btn {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  color: var(--text);
  transition: all .25s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.plan-btn::after {
  content: "クリックで切替 →";
  position: absolute;
  bottom: 8px; right: 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--blue);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  transform: translateX(-4px);
}
.plan-btn:not(.is-active)::after { opacity: .85; transform: translateX(0); }
.plan-btn:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(46, 123, 214, .15);
}
.plan-btn:hover::after { opacity: 1; }
.plan-btn.is-active {
  background: linear-gradient(135deg, var(--blue) 0%, #35C7FF 100%);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 14px 30px rgba(46, 123, 214, .28);
  transform: translateY(-1px);
}
.plan-btn .plan-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.plan-btn .plan-name::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  background: #fff;
  transition: all .25s ease;
}
.plan-btn.is-active .plan-name::before {
  border-color: #fff;
  background: radial-gradient(circle, #fff 35%, transparent 38%);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.plan-btn .plan-sub {
  font-size: 12.5px;
  font-weight: 500;
  opacity: .85;
  font-feature-settings: "tnum" 1;
}
.plan-btn.is-active .plan-sub { opacity: .95; }

/* plan-aware tab-meta : 表示するメタ情報を data-plan で切替 */
.curriculum-tabs[data-plan="std"] .tab-meta-sub,
.curriculum-tabs[data-plan="sub"] .tab-meta-std { display: none; }

/* SUBSIDY バッジ */
.panel-note {
  margin-top: 18px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(46,123,214,.08), rgba(53,199,255,.05));
  border-left: 3px solid var(--blue);
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  color: var(--navy);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tag-subsidy {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-right: 10px;
  vertical-align: 1px;
}
@media (max-width: 720px) {
  .plan-switch { grid-template-columns: 1fr; }
}

/* ============================================================
  16. Curriculum tables — give title column more breathing room
   ============================================================ */
.tab-panel .info-table th {
  width: 38%;
  min-width: 280px;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  line-height: 1.55;
  padding: 18px 22px;
}
.tab-panel .info-table td {
  font-size: 14px;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .tab-panel .info-table th { width: auto; min-width: 0; }
}

/* ============================================================
  17. feature-list .num をTOPのvalue-iconと同じ角丸グラデーション badge に統一
   ============================================================ */
.feature-list .num {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--blue) 0%, #35C7FF 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  box-shadow: 0 10px 22px rgba(46,123,214,.28), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ============================================================
  18. サブページの page-hero 追加レイヤー整理
  ::before のグローと ::after の pulse は静止（多重アニメ防止）。
  ph-motif / ph-mesh のアニメーション制御は FINAL++ ブロックで定義。
   ============================================================ */
.page-training .page-hero::after,
.page-dx       .page-hero::after,
.page-cases    .page-hero::after,
.page-company  .page-hero::after,
.page-contact  .page-hero::after {
  animation: none !important;
}
.page-training .page-hero::before,
.page-dx       .page-hero::before,
.page-cases    .page-hero::before,
.page-company  .page-hero::before,
.page-contact  .page-hero::before {
  display: none;
}

/* サブページの cta-band 内ボタン / ::after は静止
  cta-bg-streak / cta-band 本体の軽量アニメーションは FINAL++ ブロックで定義 */
.page-training .cta-band::after,
.page-dx       .cta-band::after,
.page-cases    .cta-band::after,
.page-company  .cta-band::after,
.page-contact  .cta-band::after,
.page-training .cta-band .btn-primary,
.page-dx       .cta-band .btn-primary,
.page-cases    .cta-band .btn-primary,
.page-company  .cta-band .btn-primary,
.page-contact  .cta-band .btn-primary {
  animation: none !important;
  will-change: auto;
}

/* サブページ cta-band の bg-canvas (粒子) も停止 */
.page-training .cta-band .bg-canvas,
.page-dx       .cta-band .bg-canvas,
.page-cases    .cta-band .bg-canvas,
.page-company  .cta-band .bg-canvas,
.page-contact  .cta-band .bg-canvas { display: none !important; }

/* bg-noise の重さ対策 — fixed指定のSVG繰り返しはスクロール時に再合成。サブページのみ簡素化 */
.page-training .bg-noise,
.page-dx       .bg-noise,
.page-cases    .bg-noise,
.page-company  .bg-noise,
.page-contact  .bg-noise { display: none; }

/* ph-logo の float は維持しつつ、will-change を transform のみに限定 */
.page-hero--with-logo .ph-logo img { will-change: transform; }

/* ============================================================
  19. プランカード内の助成金バッジ
   ============================================================ */
.plan-subsidy {
  margin-top: auto;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(46,123,214,.08), rgba(53,199,255,.05));
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.55;
  text-align: left;
  display: flex;
  align-items: center;
  min-height: 96px;
  gap: 6px;
  flex-wrap: wrap;
}
.plan-subsidy .tag-subsidy { margin-right: 4px; }

/* セクション 20: CTA-band ボタン視認性改善 — FINAL 統合ブロックに移動 */

/* ============================================================
  21. 白背景セクションに透かしA＋淡いグラデーション
  対象: service-training / service-dx / company / cases の通常セクション
   ============================================================ */
.page-training section:not(.page-hero):not(.cta-band):not(.impact-band):not(.tools-band):not(.site-footer),
.page-dx       section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer),
.page-cases    section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer),
.page-company  section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer) {
  background:
    linear-gradient(180deg, #FAFCFE 0%, #F4FAFE 100%);
}

/* 偶数番目のセクションはより濃いブルーティント — 縞模様で奥行き */
.page-training section:not(.page-hero):not(.cta-band):not(.impact-band):not(.tools-band):not(.site-footer):nth-of-type(even),
.page-dx       section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer):nth-of-type(even),
.page-cases    section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer):nth-of-type(even),
.page-company  section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer):nth-of-type(even) {
  background:
    linear-gradient(180deg, #F4FAFE 0%, #EAF4FC 100%);
}

/* 透かしAロゴ — 各セクション右端に大きく薄く */
.page-training section:not(.page-hero):not(.cta-band):not(.impact-band):not(.tools-band):not(.site-footer)::after,
.page-dx       section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer)::after,
.page-cases    section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer)::after,
.page-company  section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer)::after {
  content: "";
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 540px;
  height: 320px;
  background: url("../images/aim-logo-transparent.png") center/contain no-repeat;
  opacity: .06;
  z-index: 0;
  pointer-events: none;
}

/* 奇数セクションは左側に透かし配置 */
.page-training section:not(.page-hero):not(.cta-band):not(.impact-band):not(.tools-band):not(.site-footer):nth-of-type(odd)::after,
.page-dx       section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer):nth-of-type(odd)::after,
.page-cases    section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer):nth-of-type(odd)::after,
.page-company  section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer):nth-of-type(odd)::after {
  right: auto;
  left: -120px;
  transform: translateY(-50%);
  opacity: .05;
}

/* セクション間の細い水平線 — ブランドアクセント */
.page-training section:not(.page-hero):not(.cta-band):not(.impact-band):not(.tools-band):not(.site-footer):not(:first-of-type)::before,
.page-dx       section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer):not(:first-of-type)::before,
.page-cases    section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer):not(:first-of-type)::before,
.page-company  section:not(.page-hero):not(.cta-band):not(.impact-band):not(.site-footer):not(:first-of-type)::before {
  background-image: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(46,123,214,.18) 50%, transparent 100%);
  height: 1px;
  width: 60%;
  inset: 0 auto auto 20%;
  opacity: 1;
}

/* ============================================================
  22. Flow chart — DX導入の流れ
   ============================================================ */
.flow-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 880px;
  margin: 40px auto 0;
}
.flow-chart::before {
  content: "";
  position: absolute;
  left: 39px;
  top: 36px;
  bottom: 36px;
  width: 2px;
  background: linear-gradient(180deg, var(--blue) 0%, #35C7FF 100%);
  opacity: .35;
  z-index: 0;
}
.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: stretch;
  z-index: 1;
}
.flow-num {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 0%, #35C7FF 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: 0 10px 24px rgba(46, 123, 214, .28), inset 0 1px 0 rgba(255,255,255,.4);
  flex-shrink: 0;
}
.flow-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 28px;
  box-shadow: 0 4px 14px rgba(15, 36, 68, .05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flow-card:hover {
  transform: translateX(4px);
  border-color: var(--blue);
  box-shadow: 0 12px 28px rgba(46, 123, 214, .14);
}
.flow-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.flow-card p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0;
}
.flow-tag {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: 1px;
}
@media (max-width: 720px) {
  .flow-step { grid-template-columns: 60px 1fr; gap: 16px; }
  .flow-num { width: 60px; height: 60px; font-size: 20px; }
  .flow-chart::before { left: 29px; }
  .flow-card { padding: 16px 18px; }
}

/* セクション 23: CTA-band btn-primary — FINAL 統合ブロックに移動 */

/* ============================================================
  24. 研修実績セクション (service-training.html)
   ============================================================ */
.training-record {
  position: relative;
}
.record-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.record-stat {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 24px 28px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.record-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue) 0%, #35C7FF 100%);
}
.record-stat:hover {
  transform: translateY(-6px);
  border-color: var(--blue);
  box-shadow: 0 18px 36px rgba(46, 123, 214, .16);
}
.record-num {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  background: linear-gradient(135deg, var(--blue) 0%, #35C7FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 8px 0 4px;
  font-feature-settings: "tnum" 1;
}
.record-num small {
  font-size: 16px;
  font-weight: 600;
  margin-left: 2px;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}
.record-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.005em;
  margin-bottom: 12px;
}
.record-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 960px) {
  .record-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .record-stats { grid-template-columns: 1fr; }
}

/* ============================================================
  25. 研修実績セクション背景デザイン強化 (TOP)
   ============================================================ */
.training-record {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 100px 0 110px;
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(53,199,255,.12), transparent 65%),
    linear-gradient(180deg, #F4FAFE 0%, #EAF4FC 60%, #F4FAFE 100%);
}
.training-record::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/bg/v4/A_motif_pattern_v4.svg");
  background-repeat: repeat;
  background-size: 280px 280px;
  opacity: .07;
  z-index: 0;
  pointer-events: none;
}
.training-record::after {
  content: "";
  position: absolute;
  right: -160px; top: 50%;
  transform: translateY(-50%);
  width: 560px; height: 330px;
  background: url("../images/aim-logo-transparent.png") center/contain no-repeat;
  opacity: .05;
  z-index: 0;
  pointer-events: none;
}
.training-record .container { position: relative; z-index: 1; }

/* カードの背景を半透明にして奥行きを出す */
.training-record .record-stat {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ============================================================
  26. 助成金代行サポート注記
   ============================================================ */
.plan-subsidy { flex-direction: column; align-items: flex-start; }
.plan-subsidy .subsidy-note {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(46, 123, 214, .25);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: .01em;
}

/* ============================================================
  27. plan-subsidy 改行制御
   ============================================================ */
.plan-subsidy .subsidy-main {
  display: block;
  width: 100%;
  word-break: keep-all;
  line-break: strict;
}
.plan-subsidy .subsidy-main small {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
  white-space: nowrap;
}

/* セクション 28-33: CTA-band btn-primary 各種上書き — FINAL 統合ブロックに統一して削除済み */

/* ============================================================
  34. Hero h1 の不自然な改行を防止
   ============================================================ */
.hero h1 {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}

/* ============================================================
  35-36. CTA-band 装飾オーバーレイ無効化（シンプル化）
  cta-bg-* と ::before/::after を非表示にして CTA をミニマルに
   ============================================================ */
.cta-band .cta-bg-streak,
.cta-band .cta-bg-lightstreak,
.cta-band .cta-bg-grid,
.cta-band .cta-bg-pulse,
.cta-band .bg-canvas,
.cta-band::before,
.cta-band::after { display: none; }

/* ============================================================
  37. btn-outline hover時に文字が消える問題の修正
  style.css の color:#fff (青背景前提) と v2.css の background:#fff (色未指定)
  が衝突し、白背景に白文字となって文字が消えていた
   ============================================================ */
.btn-outline,
a.btn.btn-outline,
.btn.btn-outline {
  background: #ffffff !important;
  color: var(--navy, #0F2444) !important;
  border: 1.5px solid var(--blue, #2E7BD6) !important;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
a.btn.btn-outline:hover,
a.btn.btn-outline:focus,
a.btn.btn-outline:active,
.btn.btn-outline:hover,
.btn.btn-outline:focus,
.btn.btn-outline:active {
  background: var(--blue, #2E7BD6) !important;
  background-color: var(--blue, #2E7BD6) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: var(--blue, #2E7BD6) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
  38. 日本語の改行位置を文節単位に最適化
  カード説明文が「経営層から現場担当者まで、全階層で効\n果を実感」のように
  単語の途中で割れていた問題の対処
   ============================================================ */
.record-desc,
.value-card p,
.service-card .body p,
.pillar p,
.feature-list .item p,
.price-card-item p,
.case-card p,
.case-card .body p,
.about-pillars .pillar p {
  /* Chrome 119+ : 文節（フレーズ）単位で改行 */
  word-break: auto-phrase;
  /* それ以前のブラウザ向け：単語の途中で割らない */
  line-break: strict;
  /* 最新の行送り最適化（孤立行を減らす） */
  text-wrap: pretty;
  /* はみ出し時のみ許可 */
  overflow-wrap: break-word;
}

/* nb クラス: 分断禁止フレーズ — span を inline-block にして内部で改行させない */
.nb { display: inline-block; white-space: nowrap; }

/* ============================================================
  39. 新要素スタイル + 光演出のトーンダウン (v=20260525e)
  「AIっぽさ」を 20-30% 抑え、信頼ある法人サイトに寄せる
   ============================================================ */

/* --- ヒーロー旧コピー（サブ） --- */
.hero-text .lead-sub {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(15, 36, 68, .55);
  font-weight: 500;
  font-family: "游明朝", "Yu Mincho", serif;
  font-style: italic;
}

/* --- サービスカード「こんな方に」導線 --- */
.service-card .service-tag {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .15em;
  color: var(--blue);
  background: rgba(46, 123, 214, .08);
  border-radius: 999px;
}
.service-card .service-target {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--navy);
  font-weight: 700;
  border-left: 3px solid var(--blue);
  padding-left: 10px;
  word-break: auto-phrase;
  line-break: strict;
}

/* --- 実績数字の注釈 --- */
.training-record .record-footnote {
  margin: 28px auto 0;
  max-width: 800px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.65;
  color: rgba(15, 36, 68, .5);
  word-break: auto-phrase;
}

/* --- 対応業種ブロック --- */
.training-record .industries {
  margin: 36px auto 0;
  max-width: 920px;
  padding: 22px 28px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(46, 123, 214, .18);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.training-record .industries-label {
  margin: 0 0 12px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .3em;
  color: var(--blue);
  text-transform: uppercase;
}
.training-record .industries-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}
.training-record .industries-list li {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid rgba(46, 123, 214, .22);
  border-radius: 999px;
}

/* --- 支援の流れ セクション --- */
.support-flow {
  position: relative;
  padding: 100px 0 110px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FD 100%);
  isolation: isolate;
}
.support-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/bg/v4/dot_grid_light_v4.svg");
  background-repeat: repeat;
  background-size: 28px 28px;
  opacity: .05;
  z-index: 0;
  pointer-events: none;
}
.support-flow .container { position: relative; z-index: 1; }
.support-flow .flow-list {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: flow;
}
.support-flow .flow-item {
  position: relative;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid #E5ECF5;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15, 36, 68, .04);
}
.support-flow .flow-item:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: -18px; top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: rgba(46, 123, 214, .35);
  font-weight: 700;
  z-index: 2;
}
.support-flow .flow-step {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 14px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--blue);
  background: rgba(46, 123, 214, .08);
  border-radius: 999px;
}
.support-flow .flow-item h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.support-flow .flow-item p {
  font-size: 13px;
  line-height: 1.85;
  color: #4A5468;
  margin: 0;
  word-break: auto-phrase;
  line-break: strict;
}
@media (max-width: 960px) {
  .support-flow .flow-list { grid-template-columns: 1fr 1fr; gap: 18px; }
  .support-flow .flow-item:not(:last-child)::after,
  .support-flow .flow-item:nth-child(2)::after { display: none; }
}
@media (max-width: 640px) {
  .support-flow .flow-list { grid-template-columns: 1fr; }
}

/* ============================================================
  40. 光演出のトーンダウン（AIっぽさ抑制）
   ============================================================ */
/* ヒーロー背景mesh/streak/motifを薄く */
.hero-bg-mesh { opacity: .55 !important; }
.hero-bg-streak { opacity: .35 !important; }
.hero-bg-motif { opacity: .45 !important; }
/* hero::after の右奥のシアン光だまりを抑える */
.hero::after {
  background: radial-gradient(closest-side, rgba(53,199,255,.20), rgba(46,123,214,.06) 45%, transparent 70%) !important;
  animation: v5PulseSoft 22s ease-in-out infinite alternate !important;
}
/* page-hero グロー抑制 */
.page-hero::after {
  background: radial-gradient(closest-side, rgba(53,199,255,.18), transparent 70%) !important;
  animation: v5PulseSoft 24s ease-in-out infinite alternate !important;
}
.page-hero::before {
  background: radial-gradient(closest-side, rgba(46,123,214,.12), transparent 70%) !important;
}
.page-hero .ph-mesh { opacity: .55 !important; }
.page-hero .ph-motif { opacity: .14 !important; }
/* values / services の radial glow を控えめに */
.values::after, .services::after {
  background: radial-gradient(closest-side, rgba(53,199,255,.08), transparent 70%) !important;
}
/* values / services のA motif も薄く */
.values::before, .services::before { opacity: .025 !important; }
/* impact-band の sheen を抑える */
.impact-band::before {
  background: linear-gradient(110deg, transparent 32%, rgba(53,199,255,.05) 50%, transparent 68%) !important;
}
.impact-band::after { opacity: .035 !important; }
/* training-record の radial cyan glow を抑える */
.training-record {
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(53,199,255,.06), transparent 65%),
    linear-gradient(180deg, #F4FAFE 0%, #EAF4FC 60%, #F4FAFE 100%) !important;
}
.training-record::before { opacity: .04 !important; }

/* ============================================================
  41. ヒーロー「A」ロゴ位置調整 — 右見切れを解消、全体を表示
  原因: 左セル(h1)の min-content が大きく、右セル(.hero-visual)を圧迫
  対策: 右セルに最小幅を明示 + grid-template の比率も明示
   ============================================================ */
.hero-inner {
  grid-template-columns: 1fr !important;
  align-items: center !important;
  max-width: 900px !important;
}
.hero-text { min-width: 0 !important; }
.hero-visual {
  position: relative !important;
  z-index: 5 !important;
  overflow: visible !important;
  text-align: center !important;
  padding: 0 !important;
}
.hero-visual img {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  display: block !important;
}
/* hero::after の右光だまりを内側へ */
.hero::after {
  right: -3% !important;
  width: 780px !important;
  height: 780px !important;
}

/* h1 が割れるのを防ぐため、文節保護＋font-size をやや小さく */
.hero h1 {
  font-size: clamp(36px, 4.5vw, 64px) !important;
  word-break: auto-phrase !important;
  line-break: strict !important;
  text-wrap: balance !important;
}

/* ============================================================
  35. 「・」での改行を抑制 — flow-list / flow-item にも展開
   ============================================================ */
.flow-list p, .flow-list h3,
.flow-item p, .flow-item h3,
.values-grid p, .value-card p,
.services-grid p, .service-card p,
.hero .lead, .hero p.lead {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}
@supports not (word-break: auto-phrase) {
  .flow-list p, .flow-list h3,
  .flow-item p, .flow-item h3,
  .values-grid p, .value-card p,
  .services-grid p, .service-card p,
  .hero .lead, .hero p.lead {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* ============================================================
  36. ヒーロー lead と lead-sub の隙間を詰める
   ============================================================ */
.hero-text .lead { margin-bottom: 4px !important; }
.hero-text .lead-sub { margin-top: 0 !important; margin-bottom: 36px !important; }

/* ============================================================
  37. cases.html リニューアル — 業種カバレッジ + 業種別アプローチ
   ============================================================ */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.industry-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.industry-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 12px 26px rgba(46, 123, 214, .14);
}
.industry-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 12px;
}
.industry-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
}
.industry-card p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.7;
}

.approach-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.approach-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 28px 26px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.approach-item:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 14px 32px rgba(46, 123, 214, .14);
}
.approach-tag {
  display: inline-block;
  background: linear-gradient(135deg, var(--blue) 0%, #35C7FF 100%);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.approach-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.approach-item p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-muted);
  margin: 0;
  word-break: auto-phrase;
  line-break: strict;
}
@media (max-width: 860px) {
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .approach-list { grid-template-columns: 1fr; }
}

/* ============================================================
  38. contact.html フォーム簡略版 — Googleフォーム+mailto導線
   ============================================================ */
.contact-form--simple {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 32px 28px;
  box-shadow: 0 6px 20px rgba(15, 36, 68, .06);
}
.contact-form-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.contact-form-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.85;
  margin: 0 0 24px;
}
.contact-channel {
  padding: 20px 0;
  border-top: 1px dashed var(--line);
}
.contact-channel:last-of-type { padding-bottom: 6px; }
.contact-channel-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 8px;
  letter-spacing: .01em;
}
.contact-channel p {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text);
  margin: 0 0 14px;
}
.contact-mail-link {
  display: inline-block;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  letter-spacing: .01em;
}
.contact-mail-link:hover { color: var(--blue); }
.contact-form-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ============================================================
   FINAL — 整理統合ブロック（公開前リファクタリング）
   このブロックは全ての過去 CTAボタン/btn調整を最終的に確定する
   以前の section 5/20/23/28-33 は読み込み順で残置しているが
   ここで全プロパティを明示的に再定義しているため上書き不要
   ============================================================ */

/* ---- 共通 .btn ベース ---- */
.btn {
  display: inline-block;
  padding: 16px 36px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .03em;
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}

/* ---- Primary（標準）— ヒーロー等の通常版 ---- */
.btn-primary {
  background: var(--blue);
  background-image: none;
  color: #fff;
  border-color: var(--blue);
}
.btn-primary:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(46, 123, 214, .35);
}

/* ---- Outline ---- */
.btn-outline {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-outline:hover {
  background: var(--blue);
  color: #fff;
}

/* ---- CTA-band 内の Primary だけは白背景 × 濃紺文字（ダーク背景上で映える）---- */
.cta-band .btn-primary {
  background: #fff;
  background-image: none;
  color: var(--navy);
  border-color: #fff;
  padding: 18px 44px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .05em;
  opacity: 1;
  transform: none;
  text-shadow: none;
  filter: none;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, .28),
    inset 0 0 0 2px #fff;
  animation: none;
  -webkit-text-fill-color: var(--navy);
}
.cta-band .btn-primary:hover {
  background: #fff;
  color: var(--navy);
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow:
    0 20px 44px rgba(46, 123, 214, .45),
    inset 0 0 0 2px var(--blue);
}

/* ---- CTA-band の z-index 維持（クリック領域確保） ---- */
.cta-band .container { position: relative; z-index: 10; }
.cta-band .btn-primary { position: relative; z-index: 11; }
.cta-bg-streak,
.cta-bg-lightstreak,
.cta-bg-grid,
.cta-bg-pulse { pointer-events: none; }

/* ---- セクション標準パディング統一 ---- */
section { padding: 88px 0; }
.page-hero { padding: 80px 0 64px; }
@media (max-width: 740px) {
  section { padding: 64px 0; }
  .page-hero { padding: 56px 0 44px; }
}

/* ---- スマホ調整 ---- */
@media (max-width: 740px) {
  .btn { padding: 14px 28px; font-size: 14px; }
  .cta-band .btn-primary { padding: 16px 32px; font-size: 15px; }
  .hero-cta { flex-wrap: wrap; gap: 12px; }
  .hero-cta .btn { width: 100%; max-width: 320px; }
}

/* ============================================================
   FINAL+: 残存インライン style を CSS へ集約
   ============================================================ */
.section--tinted { background: var(--sky-2); }
.section-head--spaced { margin-top: 72px; }

.plan-card-sub {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 6px;
}
.plan-card-desc {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 14px;
}
.price-card-sub {
  color: var(--text-muted);
  font-size: 13px;
}
.access-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
.access-grid .map-embed { border: 1px solid var(--line); }
@media (max-width: 740px) {
  .access-grid { grid-template-columns: 1fr; }
}

/* アクセスマップ iframe 高さ */
.map-embed--access iframe { height: 380px; }

/* contact.html サイドバーマップ */
.map-embed--contact {
  margin-top: 18px;
  border: 1px solid var(--line);
}
.map-embed--contact iframe { height: 220px; }

/* セクション末尾の中央寄せCTA行 */
.section-cta-row { text-align: center; margin-top: 40px; }

/* ============================================================
   FINAL++: 下層ページのアニメーション「軽量化」
   TOP は強い演出を維持。下層は小さくゆっくり漂う動きに統一。
   方針:
     - scale を使わない（再ペイント負荷大）
     - translate は ±1% 以内に抑える
     - duration は 30s 以上で十分にゆっくり
     - filter / opacity のアニメーションは使わない
     - will-change は transform のみに限定
   ============================================================ */

/* --- 軽量keyframes（下層ページ専用：translate3d のみで GPU 合成）--- */
@keyframes subPageLogoFloatSoft {
  0%   { transform: translate3d(0, 0, 0) rotate(-1deg); }
  100% { transform: translate3d(0, -14px, 0) rotate(1deg); }
}
@keyframes subPageMeshDriftSoft {
  0%   { transform: translate3d(-2%, 0, 0); }
  100% { transform: translate3d( 2.5%, -1.5%, 0); }
}
@keyframes subPageMotifDriftSoft {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(1.5%, -1.8%, 0) rotate(2deg); }
}
@keyframes subPageCtaDriftSoft {
  0%   { background-position: center, center, 48% center; }
  100% { background-position: center, center, 52% center; }
}

/* --- 1. page-hero ph-mesh: transform のみ、filter は外す（重い再ラスタライズ防止）--- */
body.page-training .page-hero .ph-mesh,
body.page-dx       .page-hero .ph-mesh,
body.page-cases    .page-hero .ph-mesh,
body.page-company  .page-hero .ph-mesh,
body.page-contact  .page-hero .ph-mesh {
  animation: subPageMeshDriftSoft 32s ease-in-out infinite alternate !important;
  filter: none !important;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* --- 2. page-hero ph-motif: ゆっくり浮遊（transformのみ）--- */
body.page-training .page-hero .ph-motif,
body.page-dx       .page-hero .ph-motif,
body.page-cases    .page-hero .ph-motif,
body.page-company  .page-hero .ph-motif,
body.page-contact  .page-hero .ph-motif {
  animation: subPageMotifDriftSoft 40s ease-in-out infinite alternate !important;
  will-change: transform;
}

/* --- 2b. page-hero::after: opacity/scale変化のpulseは重いため静止 --- */
body.page-training .page-hero::after,
body.page-dx       .page-hero::after,
body.page-cases    .page-hero::after,
body.page-company  .page-hero::after,
body.page-contact  .page-hero::after {
  animation: none !important;
}

/* --- 3. CTA-band 本体: 45sでゆっくり background-position ドリフト --- */
body.page-training .cta-band,
body.page-dx       .cta-band,
body.page-cases    .cta-band,
body.page-company  .cta-band,
body.page-contact  .cta-band {
  animation: subPageCtaDriftSoft 45s ease-in-out infinite alternate !important;
}

/* --- 4. CTA-band の ::before / ::after は静止化 --- */
body.page-training .cta-band::before,
body.page-dx       .cta-band::before,
body.page-cases    .cta-band::before,
body.page-company  .cta-band::before,
body.page-contact  .cta-band::before,
body.page-training .cta-band::after,
body.page-dx       .cta-band::after,
body.page-cases    .cta-band::after,
body.page-company  .cta-band::after,
body.page-contact  .cta-band::after {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* --- 5. CTA装飾レイヤーは全て静止（多重描画削減）--- */
body.page-training .cta-bg-streak,
body.page-dx       .cta-bg-streak,
body.page-cases    .cta-bg-streak,
body.page-company  .cta-bg-streak,
body.page-contact  .cta-bg-streak,
body.page-training .cta-bg-lightstreak,
body.page-dx       .cta-bg-lightstreak,
body.page-cases    .cta-bg-lightstreak,
body.page-company  .cta-bg-lightstreak,
body.page-contact  .cta-bg-lightstreak,
body.page-training .cta-bg-pulse,
body.page-dx       .cta-bg-pulse,
body.page-cases    .cta-bg-pulse,
body.page-company  .cta-bg-pulse,
body.page-contact  .cta-bg-pulse {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}
body.page-training .cta-bg-lightstreak,
body.page-dx       .cta-bg-lightstreak,
body.page-cases    .cta-bg-lightstreak,
body.page-company  .cta-bg-lightstreak,
body.page-contact  .cta-bg-lightstreak,
body.page-training .cta-bg-pulse,
body.page-dx       .cta-bg-pulse,
body.page-cases    .cta-bg-pulse,
body.page-company  .cta-bg-pulse,
body.page-contact  .cta-bg-pulse {
  opacity: .35;
}

/* --- 6. ph-logo: 縦10px ± 0.5deg ふんわり浮遊（特異性0,4,2で section 9 に勝つ）--- */
body.page-training .page-hero--with-logo .ph-logo img,
body.page-dx       .page-hero--with-logo .ph-logo img,
body.page-cases    .page-hero--with-logo .ph-logo img,
body.page-company  .page-hero--with-logo .ph-logo img,
body.page-contact  .page-hero--with-logo .ph-logo img,
body.page-training .ph-logo img,
body.page-dx       .ph-logo img,
body.page-cases    .ph-logo img,
body.page-company  .ph-logo img,
body.page-contact  .ph-logo img {
  animation: subPageLogoFloatSoft 14s ease-in-out infinite alternate !important;
  will-change: transform;
}

/* --- 7. スマホ: 下層のアニメ全停止（モバイル負荷対策）--- */
@media (max-width: 740px) {
  body.page-training .page-hero .ph-mesh,
  body.page-dx       .page-hero .ph-mesh,
  body.page-cases    .page-hero .ph-mesh,
  body.page-company  .page-hero .ph-mesh,
  body.page-contact  .page-hero .ph-mesh,
  body.page-training .page-hero .ph-motif,
  body.page-dx       .page-hero .ph-motif,
  body.page-cases    .page-hero .ph-motif,
  body.page-company  .page-hero .ph-motif,
  body.page-contact  .page-hero .ph-motif,
  body.page-training .cta-band,
  body.page-dx       .cta-band,
  body.page-cases    .cta-band,
  body.page-company  .cta-band,
  body.page-contact  .cta-band,
  body.page-training .cta-bg-streak,
  body.page-dx       .cta-bg-streak,
  body.page-cases    .cta-bg-streak,
  body.page-company  .cta-bg-streak,
  body.page-contact  .cta-bg-streak,
  body.page-training .ph-logo img,
  body.page-dx       .ph-logo img,
  body.page-cases    .ph-logo img,
  body.page-company  .ph-logo img,
  body.page-contact  .ph-logo img {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* --- 8. reduced motion 設定ユーザーには全停止（アクセシビリティ） --- */
@media (prefers-reduced-motion: reduce) {
  body[class*="page-"] .ph-mesh,
  body[class*="page-"] .ph-motif,
  body[class*="page-"] .cta-band,
  body[class*="page-"] .cta-band::before,
  body[class*="page-"] .cta-band::after,
  body[class*="page-"] .cta-bg-streak,
  body[class*="page-"] .ph-logo img {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   FINAL+++: 下層CTAに「CSSだけの軽い動き」を戻す
   方針:
     - GSAP / Canvas は使わない（CSSのみ）
     - background-position を 36s〜42s でゆっくり推移
     - ボタン自体は動かさない（::before / ::after のみ）
     - 周期は十分長く、派手さを出さない
     - prefers-reduced-motion は 8. で別途停止される
   ============================================================ */
@keyframes ctaSoftDrift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
/* ctaSoftGlow は opacity 変化を含むため削除（下層CTAの ::after は静止化） */

/* 下層CTA帯本体：背景グラデの位置だけゆっくり動かす（要素自体は動かさない） */
body.page-training .cta-band,
body.page-dx       .cta-band,
body.page-cases    .cta-band,
body.page-company  .cta-band,
body.page-contact  .cta-band {
  background-size: 220% 220%;
  animation: ctaSoftDrift 42s ease-in-out infinite alternate !important;
  transform: none !important;
  will-change: background-position;
}

/* 下層CTA帯の ::after は静止（opacityを含むアニメは完全排除） */
body.page-training .cta-band::after,
body.page-dx       .cta-band::after,
body.page-cases    .cta-band::after,
body.page-company  .cta-band::after,
body.page-contact  .cta-band::after {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* ボタンは絶対に動かさない（hover時のCSS演出は別途） */
body[class*="page-"] .cta-band .btn-primary,
body[class*="page-"] .cta-band .btn,
body[class*="page-"] .cta-band a.btn-primary {
  animation: none !important;
  transform: none !important;
}

/* モバイルでは復活させたCTA動きも止める（先の section 7 のメディアクエリと整合） */
@media (max-width: 740px) {
  body.page-training .cta-band,
  body.page-dx       .cta-band,
  body.page-cases    .cta-band,
  body.page-company  .cta-band,
  body.page-contact  .cta-band,
  body.page-training .cta-band::after,
  body.page-dx       .cta-band::after,
  body.page-cases    .cta-band::after,
  body.page-company  .cta-band::after,
  body.page-contact  .cta-band::after {
    animation: none !important;
    transform: none !important;
  }
}

/* prefers-reduced-motion で再度停止保証 */
@media (prefers-reduced-motion: reduce) {
  body[class*="page-"] .cta-band,
  body[class*="page-"] .cta-band::after {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   42. お問い合わせフォーム（PHP送信版）
   ============================================================ */
.contact-form-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px 32px 28px;
  box-shadow: 0 6px 20px rgba(15, 36, 68, .06);
}
.contact-form-panel .contact-form-title { margin-bottom: 6px; }
.contact-form-panel .contact-form-desc { margin-bottom: 24px; }
.contact-form-panel .req { color: #e25757; margin-left: 3px; font-weight: 700; }

/* 同意チェック */
.contact-form .form-check {
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  line-height: 1.7;
  color: var(--text);
}
.contact-form .form-check input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto;
  accent-color: var(--blue); cursor: pointer;
}

/* 送信ボタン（全幅） */
.contact-submit {
  width: 100%;
  margin-top: 8px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border: none;
}

/* honeypot（人間には非表示） */
.form-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============================================================
   43. 送信完了ページ thanks.html
   ============================================================ */
.thanks-box {
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(15, 36, 68, .06);
}
.thanks-icon {
  width: 72px; height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #2E7BD6 0%, #35C7FF 100%);
  box-shadow: 0 8px 20px rgba(46, 123, 214, .3);
}
.thanks-box h2 {
  font-size: 24px; color: var(--navy);
  margin: 0 0 18px; letter-spacing: -.01em;
}
.thanks-box p {
  font-size: 15px; line-height: 1.9; color: var(--text);
  margin: 0 0 14px;
}
.thanks-box .thanks-note {
  font-size: 13px; color: var(--text-muted); line-height: 1.8;
}
.thanks-actions { margin-top: 28px; }