/* ============================================================
    ROOT & BASE
============================================================ */
:root {
  --gold:      #f59e0b;
  --gold-dark: #d97706;
  --gold-pale: #fcd34d;
  --navy:      #060e1e;
  --slate:     #0f172a;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
p    { font-feature-settings:"palt"; line-break:strict; overflow-wrap:break-word; word-break:normal; }
h1,h2,h3,h4,h5 { line-break:strict; word-break:keep-all; overflow-wrap:break-word; }

/* ── Scroll-progress bar ── */
#scroll-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-pale));
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(245,158,11,0.6);
}

/* ============================================================
    HERO SAFE AREA
============================================================ */
#home .hero-content { padding-top: clamp(6rem,14vh,9rem); }
.text-shadow { text-shadow: 0 2px 20px rgba(0,0,0,0.7); }

/* ヒーロー本文が画面幅を超えないようサーフガード */
.hero-sub {
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: keep-all;
  max-width: min(36rem, calc(100vw - 2rem));
}
@media (min-width: 641px) and (max-width: 1023px) {
  /* タブレットの中間サイズでも右端が切れないよう */
  .hero-sub {
    max-width: min(32rem, calc(100vw - 3rem)) !important;
    font-size: 1rem !important;
  }
}

/* ── Particle canvas ── */
#hero-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; opacity:0.6;
}

/* ── Hero horizontal gold lines ── */
.hero-line {
  position:absolute; left:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,158,11,0.5), transparent);
  width:100%; pointer-events:none; z-index:2;
  animation: lineFloat 8s ease-in-out infinite;
}
.hero-line:nth-child(1){ top:28%; animation-delay:0s;   opacity:.4; }
.hero-line:nth-child(2){ top:62%; animation-delay:2.5s; opacity:.25; }
@keyframes lineFloat {
  0%,100%{ transform:translateX(-8%); }
  50%    { transform:translateX(8%);  }
}

/* ── Hero corner accents ── */
.hero-corner {
  position:absolute; width:60px; height:60px; z-index:3;
  opacity:0; animation: cornerIn 1s 1.4s both;
}
.hero-corner.tl { top:12%; left:6%;  border-top:1px solid rgba(245,158,11,.5); border-left:1px solid rgba(245,158,11,.5); }
.hero-corner.br { bottom:18%; right:6%; border-bottom:1px solid rgba(245,158,11,.5); border-right:1px solid rgba(245,158,11,.5); }
@keyframes cornerIn {
  from { opacity:0; transform:scale(0.7); }
  to   { opacity:1; transform:scale(1); }
}

/* ============================================================
    HERO TEXT ANIMATIONS
============================================================ */
@keyframes fadeSlideUp   { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:none} }
@keyframes fadeSlideDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:none} }
@keyframes maskReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0);   }
}
.hero-eyebrow { animation: fadeSlideDown .7s .2s both cubic-bezier(.16,1,.3,1); }
.hero-title   { animation: fadeSlideUp   1s  .45s both cubic-bezier(.16,1,.3,1); }
.hero-sub     { animation: fadeSlideUp   1s  .7s  both cubic-bezier(.16,1,.3,1); }
.hero-cta     { animation: fadeSlideUp   1s  .9s  both cubic-bezier(.16,1,.3,1); }
.hero-scroll  { animation: fadeSlideUp   1s  1.1s both cubic-bezier(.16,1,.3,1); }

/* ── Gold word highlight in h1 ── */
.hero-gold-word {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 40%, #d97706 70%, #fcd34d 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(245,158,11,.45));
}

/* ── Typewriter cursor ── */
.cursor-blink::after {
  content:'|'; color:var(--gold);
  animation: blink .8s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ============================================================
    SHIMMER BUTTON
============================================================ */
.btn-shimmer { position:relative; overflow:hidden; }
.btn-shimmer::before {
  content:''; position:absolute; top:0; left:-100%; width:55%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.22),transparent);
  animation: shimmer 3.2s infinite;
}
@keyframes shimmer { 0%{left:-100%} 45%{left:140%} 100%{left:140%} }

/* ============================================================
    SCROLL REVEAL
============================================================ */
.reveal {
  opacity:0; transform:translateY(44px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.from-left  { transform:translateX(-56px); }
.reveal.from-right { transform:translateX(56px);  }
.reveal.scale-in   { transform:scale(.88);         }
.reveal.visible    { opacity:1!important; transform:none!important; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.22s; }
.reveal-delay-3 { transition-delay:.34s; }
.reveal-delay-4 { transition-delay:.5s; }
.reveal-delay-5 { transition-delay:.66s; }

/* ── Animated gold rule that draws itself ── */
.gold-rule {
  display:block; height:1px; width:0; margin-top:.75rem;
  background:linear-gradient(90deg, var(--gold), transparent);
  transition: width 1.1s cubic-bezier(.16,1,.3,1);
}
.reveal.visible .gold-rule, .gold-rule.run { width:72px; }

/* ============================================================
    SECTION LABEL
============================================================ */
.section-label {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.65rem; font-weight:600; letter-spacing:.25em; text-transform:uppercase;
  color: var(--gold);
}
.section-label::before {
  content:''; display:block; width:24px; height:1px;
  background:var(--gold);
}

/* ============================================================
    CONCEPT CARDS (glassmorphism)
============================================================ */
.concept-card {
  position:relative; overflow:hidden;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245,158,11,.12);
  border-radius:2px;
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1),
              border-color .4s;
}
.concept-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(245,158,11,.06) 0%, transparent 60%);
  opacity:0; transition: opacity .4s;
}
.concept-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(245,158,11,.12), 0 4px 20px rgba(0,0,0,.08);
  border-color: rgba(245,158,11,.35);
}
.concept-card:hover::before { opacity:1; }
.concept-icon-wrap {
  position:relative; width:64px; height:64px; margin:0 auto 2rem;
  display:flex; align-items:center; justify-content:center;
}
.concept-icon-wrap::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(rgba(245,158,11,.3), transparent, rgba(245,158,11,.3));
  animation: spin 6s linear infinite; opacity:0;
  transition: opacity .4s;
}
.concept-card:hover .concept-icon-wrap::before { opacity:1; }
@keyframes spin { to{ transform:rotate(360deg); } }

/* ============================================================
    SERVICE SECTION
============================================================ */
.service-img-wrap { overflow:hidden; }
.service-img-wrap img {
  transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .7s;
  filter: grayscale(20%) brightness(.88);
  will-change: transform;
}
.service-img-wrap:hover img { transform:scale(1.08); filter:grayscale(0%) brightness(1); }

/* ── Number badge (01/02/03) ── */
.service-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(4rem,8vw,7rem);
  font-weight:700; line-height:1;
  background: linear-gradient(180deg, rgba(245,158,11,.22) 0%, transparent 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.04em;
  user-select:none;
}

/* ── Magnetic hover cards ── */
.mag-card { transition: transform .4s cubic-bezier(.16,1,.3,1); will-change:transform; }

/* ============================================================
    TRUST / NUMBERS
============================================================ */
.stat-card {
  position:relative; overflow:hidden;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
}
.stat-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 110%, rgba(245,158,11,.08) 0%, transparent 70%);
  opacity:0; transition:opacity .5s;
}
.stat-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(245,158,11,.1); }
.stat-card:hover::after { opacity:1; }
.stat-num { transition:color .3s; }

/* ── Pulse ring on stat icons ── */
.pulse-ring {
  position:relative;
}
.pulse-ring::before {
  content:''; position:absolute;
  inset:-6px; border-radius:50%;
  border:1px solid rgba(245,158,11,.3);
  animation: pulse-r 2.2s ease-out infinite;
  opacity:0;
}
.stat-card:hover .pulse-ring::before { opacity:1; }
@keyframes pulse-r {
  0%  { transform:scale(1);   opacity:.6; }
  100%{ transform:scale(1.7); opacity:0;  }
}

/* ============================================================
    CURSOR GLOW
============================================================ */
#cursor-glow {
  pointer-events:none; position:fixed;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,158,11,.06) 0%, transparent 68%);
  transform:translate(-50%,-50%);
  z-index:0; opacity:0;
  transition: left .18s ease, top .18s ease;
}

/* ============================================================
    BACK TO TOP
============================================================ */
#back-to-top {
  position:fixed; bottom:1.75rem; right:1.75rem;
  width:46px; height:46px;
  background:rgba(6,14,30,.9); backdrop-filter:blur(10px);
  border:1px solid rgba(245,158,11,.35); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transform:translateY(14px);
  transition:opacity .45s, transform .45s, border-color .3s, box-shadow .3s;
  z-index:40;
}
#back-to-top.show     { opacity:1; transform:translateY(0); }
#back-to-top:hover    { border-color:var(--gold); box-shadow:0 0 16px rgba(245,158,11,.35); }

/* ============================================================
    FAQ
============================================================ */
.faq-content {
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .45s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.faq-content.open { opacity:1; }

/* ── FAQ item hover ── */
.faq-item { transition: background .3s; border-radius:2px; }
.faq-item:hover { background:rgba(245,158,11,.03); }

/* ============================================================
    NAV LINK UNDERLINE HOVER
============================================================ */
nav a.nav-link {
  position:relative; padding-bottom:2px;
}
nav a.nav-link::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--gold);
  transition:width .3s cubic-bezier(.16,1,.3,1);
}
nav a.nav-link:hover::after, nav a.nav-link.active::after { width:100%; }

/* ============================================================
    SECTION DIVIDER LINE (decorative)
============================================================ */
.divider-gold {
  display:block; height:1px; margin:0 auto;
  background:linear-gradient(90deg, transparent, rgba(245,158,11,.5), transparent);
  width:0; transition:width 1.4s cubic-bezier(.16,1,.3,1);
}
.reveal.visible .divider-gold { width:100%; }

/* ============================================================
    MESSAGE SECTION
============================================================ */
.message-photo-wrap {
  position:relative;
}
.message-photo-wrap::before {
  content:''; position:absolute;
  inset:-2px; z-index:0;
  background:linear-gradient(135deg, rgba(245,158,11,.4), transparent 60%);
  border-radius:2px;
  opacity:0; transition:opacity .6s;
}
.message-photo-wrap:hover::before { opacity:1; }

/* ── Clip-path reveal for CEO photo ── */
.photo-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.16,1,.3,1);
}
.photo-reveal.visible { clip-path: inset(0 0% 0 0); }

/* ── Name card slide ── */
.namecard-slide {
  transform: translateX(-24px); opacity:0;
  transition: transform .8s .3s cubic-bezier(.16,1,.3,1), opacity .8s .3s;
}
.namecard-slide.visible { transform:none; opacity:1; }

/* ============================================================
    AMBIENT GLOW BACKGROUNDS
============================================================ */
.ambient-hero {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
  pointer-events:none; z-index:2;
  animation: ambientDrift 12s ease-in-out infinite;
}
@keyframes ambientDrift {
  0%,100%{ transform:translate(0,0); }
  33%    { transform:translate(60px,-40px); }
  66%    { transform:translate(-40px,30px); }
}

/* ============================================================
    HORIZONTAL SCROLLING MARQUEE (trust bar)
============================================================ */
.marquee-wrap { overflow:hidden; }
.marquee-track {
  display:flex; gap:3rem; width:max-content;
  animation: marquee 22s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ============================================================
    CONTACT FORM FIELD FOCUS
============================================================ */
input:focus, textarea:focus, select:focus {
  outline:none;
}
.field-wrap { position:relative; }
.field-wrap::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--gold);
  transition:width .4s cubic-bezier(.16,1,.3,1);
}
.field-wrap:focus-within::after { width:100%; }

/* ============================================================
    PREMIUM EFFECTS — CHAR SPLIT
============================================================ */
.split-char {
  display:inline-block;
  opacity:0;
  transform:translateY(40px) rotate(4deg);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),
              transform .55s cubic-bezier(.16,1,.3,1);
}
.split-char.in { opacity:1; transform:none; }

/* ============================================================
    FLOATING GOLD ORBS  (MESSAGE SECTION)
============================================================ */
.float-orb {
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:0;
  animation: orbFloat 10s ease-in-out infinite;
}
.float-orb-1 {
  width:320px; height:320px; top:-80px; right:-80px;
  background:radial-gradient(circle, rgba(245,158,11,.07) 0%, transparent 70%);
  animation-duration:14s;
}
.float-orb-2 {
  width:200px; height:200px; bottom:10%; left:-60px;
  background:radial-gradient(circle, rgba(245,158,11,.05) 0%, transparent 70%);
  animation-duration:9s; animation-delay:-4s;
}
@keyframes orbFloat {
  0%,100%{ transform:translate(0,0) scale(1); }
  33%    { transform:translate(30px,-20px) scale(1.06); }
  66%    { transform:translate(-20px,15px) scale(0.96); }
}

/* ============================================================
    ANIMATED GOLD BORDER  (TRUST CARDS)
============================================================ */
@keyframes borderRun {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.stat-card-glow {
  position:relative;
  background: #1e2a3a;
}
.stat-card-glow::before {
  content:''; position:absolute;
  inset:0; border-radius:inherit;
  padding:1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(245,158,11,.6) 50%, transparent 100%);
  background-size:200% 100%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition:opacity .4s;
  animation: borderRun 2s linear infinite;
}
.stat-card-glow:hover::before { opacity:1; }

/* ============================================================
    GLOWING GOLD LINE  (HERO BOTTOM)
============================================================ */
.gold-beam {
  position:absolute; bottom:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(245,158,11,.7) 50%, transparent 100%);
  animation: beamSlide 4s ease-in-out infinite;
}
@keyframes beamSlide {
  0%,100%{ opacity:.4; transform:scaleX(.6); }
  50%    { opacity:1;  transform:scaleX(1); }
}

/* ============================================================
    STAGGERED WORD REVEAL  (SECTION HEADINGS)
============================================================ */
.word-reveal span {
  display:inline-block;
  opacity:0; transform:translateY(1.2em);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1);
}
.word-reveal.visible span { opacity:1; transform:none; }
.word-reveal.visible span:nth-child(1){ transition-delay:.05s; }
.word-reveal.visible span:nth-child(2){ transition-delay:.12s; }
.word-reveal.visible span:nth-child(3){ transition-delay:.19s; }
.word-reveal.visible span:nth-child(4){ transition-delay:.26s; }
.word-reveal.visible span:nth-child(5){ transition-delay:.33s; }
.word-reveal.visible span:nth-child(6){ transition-delay:.40s; }
.word-reveal.visible span:nth-child(7){ transition-delay:.47s; }
.word-reveal.visible span:nth-child(8){ transition-delay:.54s; }

/* ============================================================
    CONCEPT CARDS — enhanced
============================================================ */
.concept-card-new {
  position:relative; overflow:hidden;
  background: linear-gradient(135deg,#ffffff 0%,#f8f9ff 100%);
  border:1px solid rgba(245,158,11,.10);
  border-radius:2px;
  display:flex; flex-direction:column; align-items:center;
  transition: transform .6s cubic-bezier(.16,1,.3,1),
              box-shadow .6s cubic-bezier(.16,1,.3,1),
              border-color .4s;
  cursor:default;
}
/* 3枚カードを同じ高さに */
@media (min-width: 640px) {
  .concept-card-new { height: 100%; }
  .grid:has(.concept-card-new) { align-items: stretch; }
}
.concept-card-new::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(245,158,11,.06) 0%, transparent 55%);
  opacity:0; transition:opacity .5s;
}
.concept-card-new:hover {
  transform:translateY(-10px);
  box-shadow:0 28px 60px rgba(245,158,11,.14), 0 8px 24px rgba(0,0,0,.06);
  border-color:rgba(245,158,11,.4);
}
.concept-card-new:hover::after { opacity:1; }
/* gold top-line draw */
.concept-card-new .card-top-line {
  position:absolute; top:0; left:0;
  height:2px; width:0;
  background:linear-gradient(90deg, var(--gold), var(--gold-pale));
  transition:width .7s cubic-bezier(.16,1,.3,1);
}
.concept-card-new:hover .card-top-line { width:100%; }

/* ============================================================
    SERVICE SECTION — number pulse
============================================================ */
.service-num-glow {
  animation: numPulse 3s ease-in-out infinite;
}
@keyframes numPulse {
  0%,100%{ opacity:.15; }
  50%    { opacity:.35; }
}

/* ============================================================
    NAV — glassmorphism on scroll
============================================================ */
#navbar.scrolled {
  background:rgba(6,14,30,.97) !important;
  box-shadow:0 4px 30px rgba(0,0,0,.4);
}

/* ============================================================
    HERO — starfield overlay
============================================================ */
#star-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:1;
  opacity:0.35;
}

/* ============================================================
    FAQ — number accent
============================================================ */
.faq-num {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700; line-height:1;
  color:rgba(245,158,11,.15);
  flex-shrink:0;
  transition:color .3s;
}
.faq-item:hover .faq-num { color:rgba(245,158,11,.35); }

/* ============================================================
    ENHANCED TYPOGRAPHY — 見やすさ向上
============================================================ */
body {
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.03em;
  font-weight: 400;
}
p { line-height: 2.1; font-size: 1rem; }
h1,h2,h3,h4 { letter-spacing: 0.04em; font-weight: 700; }

/* セクション本文 読みやすく・太く */
.text-slate-300  { color: #cbd5e1 !important; }
.text-slate-400  { color: #a8b8cc !important; }
.text-slate-500  { color: #8898aa !important; }
.leading-loose   { line-height: 2.1 !important; }
.leading-relaxed { line-height: 1.9 !important; }
.font-light      { font-weight: 400 !important; }
.font-medium     { font-weight: 600 !important; }
.font-bold       { font-weight: 700 !important; }

/* 本文・説明文を太く読みやすく */
.text-sm  { font-size: 0.925rem !important; }
.text-base{ font-size: 1.05rem  !important; }
.text-xs  { font-size: 0.8rem   !important; }

/* Conceptカード説明文 */
.concept-card-new p { font-weight: 400; font-size: 0.925rem; color: #555f6e; }
/* Serviceセクション本文 */
#services p.text-slate-300 { font-weight: 400; font-size: 1rem; }
/* FAQ本文 */
.faq-content p { font-size: 0.95rem; font-weight: 400; }
/* StatCard説明文 */
.stat-card-glow p { font-size: 0.925rem; font-weight: 400; }

/* ============================================================
    ADVANCED ANIMATIONS — パーティクル・グロー強化
============================================================ */

/* ── Floating particles (concept section) ── */
@keyframes floatParticle {
  0%   { transform: translateY(0px) translateX(0px) scale(1); opacity:0.7; }
  33%  { transform: translateY(-18px) translateX(8px) scale(1.1); opacity:1; }
  66%  { transform: translateY(-8px) translateX(-10px) scale(0.95); opacity:0.8; }
  100% { transform: translateY(0px) translateX(0px) scale(1); opacity:0.7; }
}
.particle-dot {
  position:absolute; border-radius:50%;
  background: radial-gradient(circle, rgba(245,158,11,.8), transparent);
  pointer-events:none; z-index:0;
  animation: floatParticle linear infinite;
}

/* ── Glowing card border sweep ── */
@keyframes borderSweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Section entrance: scale + fade ── */
.reveal-scale {
  opacity:0; transform: scale(0.94) translateY(30px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal-scale.visible { opacity:1; transform: none; }

/* ── Tilt card effect ── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

/* ── Hero title char animation ── */
@keyframes charDrop {
  from { opacity:0; transform: translateY(-30px) rotateX(60deg); }
  to   { opacity:1; transform: none; }
}

/* ── Gold shimmer text ── */
.shimmer-text {
  background: linear-gradient(90deg,
    #d97706 0%, #f59e0b 30%, #fde68a 50%, #f59e0b 70%, #d97706 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 4s linear infinite;
}
@keyframes textShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Animated underline for section labels ── */
.animated-label {
  position: relative; display:inline-block;
}
.animated-label::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background: var(--gold);
  transition: width 0.8s cubic-bezier(.16,1,.3,1);
}
.reveal.visible .animated-label::after { width:100%; }

/* ── Concept card: icon glow on hover ── */
.concept-card-new:hover .card-icon-wrap {
  box-shadow: 0 0 30px rgba(245,158,11,.3);
}
.card-icon-wrap {
  transition: box-shadow 0.5s ease;
}

/* ── Service section: number counter glow ── */
.service-num-wrap {
  position: relative; display: inline-block;
}
.service-num-wrap::before {
  content: attr(data-num);
  position:absolute; top:0; left:0;
  font-family: 'Cormorant Garamond', serif;
  font-size: inherit; font-weight:700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245,158,11,.15);
  transform: translate(3px, 3px);
  z-index: -1;
}

/* ── Stat cards: counter animation ── */
@keyframes countUp {
  from { transform: translateY(10px); opacity:0; }
  to   { transform: none; opacity:1; }
}
.stat-card-glow.visible .stat-num {
  animation: countUp 0.6s cubic-bezier(.16,1,.3,1) both;
}

/* ── Scroll indicator pulse ── */
@keyframes scrollPulse {
  0%,100% { transform: translateY(0); opacity:1; }
  50%     { transform: translateY(6px); opacity:0.5; }
}

/* ── Image parallax overlay ── */
.img-parallax-wrap {
  overflow: hidden; position:relative;
}
.img-parallax-wrap img {
  transition: transform 1.6s cubic-bezier(.16,1,.3,1), filter 0.8s;
  will-change: transform;
}
.img-parallax-wrap:hover img {
  transform: scale(1.06) translateY(-4px);
  filter: brightness(1.05) saturate(1.1);
}

/* ── CEO photo frame glow ── */
.ceo-frame {
  position: relative;
}
.ceo-frame::before {
  content:''; position:absolute;
  inset: -1px; z-index:0; border-radius:2px;
  background: linear-gradient(135deg,
    rgba(245,158,11,.6) 0%,
    transparent 40%,
    rgba(245,158,11,.3) 100%);
  opacity:0; transition: opacity 0.6s;
}
.ceo-frame:hover::before { opacity:1; }

/* ── Navbar: logo shimmer ── */
.nav-logo-shimmer {
  background: linear-gradient(90deg,
    #f59e0b 0%, #fde68a 40%, #f59e0b 80%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 6s linear infinite;
}

/* ── Contact section glow field ── */
.contact-field {
  transition: border-color 0.3s, box-shadow 0.3s;
}
.contact-field:focus {
  border-color: rgba(245,158,11,.6) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.1);
}

/* ── Stagger in for list items ── */
.stagger-list li {
  opacity:0; transform: translateX(-20px);
  transition: opacity 0.5s, transform 0.5s;
}
.stagger-list.visible li { opacity:1; transform: none; }
.stagger-list.visible li:nth-child(1) { transition-delay:0.1s; }
.stagger-list.visible li:nth-child(2) { transition-delay:0.2s; }
.stagger-list.visible li:nth-child(3) { transition-delay:0.3s; }
.stagger-list.visible li:nth-child(4) { transition-delay:0.4s; }

/* ── Page section smooth gradient transitions ── */
#concept  { background: linear-gradient(180deg, #ffffff 0%, #fafaf8 100%); }
#services { background: linear-gradient(180deg, #0f172a 0%, #060e1e 100%); }
#trust    { background: linear-gradient(180deg, #060e1e 0%, #0a1628 100%); }

/* ============================================================
    CONTACT — form field glow
============================================================ */
input, textarea, select {
  transition:border-color .3s, box-shadow .3s;
}
input:focus, textarea:focus, select:focus {
  box-shadow:0 0 0 3px rgba(245,158,11,.12);
  border-color:var(--gold) !important;
}

/* ============================================================
    SCROLL PROGRESS BAR (enhanced)
============================================================ */
#scroll-bar { filter:drop-shadow(0 0 4px rgba(245,158,11,.8)); }

/* ============================================================
    SECTION TRANSITION DIVIDERS
============================================================ */
.section-wave {
  position:absolute; bottom:-1px; left:0; width:100%;
  height:60px; pointer-events:none; z-index:5;
}

/* ============================================================
    MESSAGE PHOTO — parallax overlay strip
============================================================ */
.photo-strip {
  position:absolute; left:0; bottom:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-pale));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s .4s cubic-bezier(.16,1,.3,1);
}
.reveal.visible .photo-strip { transform:scaleX(1); }

/* ============================================================
    MAGNETIC HOVER WRAPPER
============================================================ */
.mag-btn { display:inline-block; transition:transform .3s cubic-bezier(.16,1,.3,1); }

/* ============================================================
    SMARTPHONE READABILITY — スマホ専用改善 (全面改訂版)
============================================================ */
@media (max-width: 639px) {

  /* ── BASE BODY ── */
  body { font-size: 15px; letter-spacing: 0.015em; }
  p    { line-height: 1.85; font-size: 0.9375rem; }

  /* ── OVERRIDE global .text-sm etc. for mobile ── */
  .text-sm   { font-size: 0.875rem !important; }
  .text-xs   { font-size: 0.775rem !important; }
  .text-base { font-size: 0.9375rem !important; }
  .font-light { font-weight: 400 !important; }

  /* ── SECTION 共通 padding ── */
  .py-32 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .mb-20 { margin-bottom: 2.25rem !important; }
  .mb-24 { margin-bottom: 2rem !important; }
  .space-y-20 > * + * { margin-top: 3rem !important; }
  .space-y-24 > * + * { margin-top: 3.5rem !important; }

  /* ── コンテナ左右余白確保 ── */
  .max-w-7xl.mx-auto { padding-left: 1rem !important; padding-right: 1rem !important; }
  .max-w-6xl.mx-auto { padding-left: 1rem !important; padding-right: 1rem !important; }
  .max-w-4xl.mx-auto { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* ── SECTION HEADINGS ── */
  section h3 {
    font-size: 1.4rem !important;
    line-height: 1.5 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  section h4 {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    overflow-wrap: break-word !important;
  }

  /* ── NAVBAR ── */
  #navbar { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

  /* ── HERO ── */
  #home .hero-content {
    padding-top: clamp(5rem,12vh,7rem);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  #home h1 {
    font-size: 2.1rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1.5rem !important;
  }
  .hero-sub {
    font-size: 0.9rem !important;
    line-height: 1.8 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-bottom: 2rem !important;
  }
  .hero-cta a {
    font-size: 0.7rem !important;
    padding: 0.875rem 1.5rem !important;
    letter-spacing: 0.15em !important;
  }

  /* ── CONCEPT SECTION ── */
  #concept { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  #concept .text-center.mb-20 { margin-bottom: 2rem !important; }
  #concept .max-w-2xl { margin-bottom: 1.5rem !important; }
  #concept .max-w-2xl p { font-size: 0.875rem !important; line-height: 1.85 !important; }
  .concept-card-new {
    padding: 1.5rem 1.25rem !important;
    margin-bottom: 0 !important;
  }
  .concept-card-new h4 {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5rem !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .concept-card-new p {
    font-size: 0.875rem !important;
    line-height: 1.8 !important;
    max-width: none !important;
  }
  .concept-card-new .w-14.h-14 {
    width: 3rem !important;
    height: 3rem !important;
    margin-bottom: 1rem !important;
  }
  .concept-card-new span.text-\[11px\] {
    font-size: 0.65rem !important;
    margin-bottom: 0.375rem !important;
  }
  /* Conceptカード grid: スマホは1列 */
  #concept .grid { gap: 0.875rem !important; }

  /* ── SERVICES SECTION ── */
  #services { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  #services .text-center.mb-20 { margin-bottom: 2rem !important; }
  #services h4 { font-size: 1.1rem !important; margin-bottom: 0.5rem !important; }
  #services p.text-amber-500.text-sm { font-size: 0.875rem !important; margin-bottom: 0.75rem !important; }
  #services p.text-slate-300,
  #services p.text-slate-400 {
    font-size: 0.875rem !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    margin-bottom: 1rem !important;
  }
  #services .space-y-3 { gap: 0.625rem !important; }
  #services .space-y-4 { gap: 0.75rem !important; }
  #services ul li span { font-size: 0.875rem !important; line-height: 1.65 !important; }
  #services ul li i { width: 1rem !important; height: 1rem !important; margin-right: 0.625rem !important; flex-shrink: 0 !important; }
  .service-num { font-size: 3rem !important; margin-bottom: 0.125rem !important; line-height: 1 !important; }
  /* サービスカードの区切り余白 */
  #services .space-y-16 > * + * { margin-top: 2.5rem !important; }
  #services .space-y-20 > * + * { margin-top: 2.5rem !important; }
  /* 画像エリア高さ */
  #services .h-\[220px\] { height: 180px !important; }
  #services .h-\[300px\] { height: 180px !important; }
  /* S3 Core Value のラベル */
  #services .inline-block.bg-amber-500 { font-size: 0.6rem !important; padding: 0.2rem 0.6rem !important; }

  /* ── MARQUEE ── */
  .marquee-track { font-size: 0.6rem !important; letter-spacing: 0.18em !important; gap: 1.5rem !important; }

  /* ── TRUST SECTION ── */
  #trust { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  #trust .text-center.mb-20 { margin-bottom: 2rem !important; }
  #trust .grid { gap: 0.875rem !important; }
  /* スマホは1列 */
  #trust .grid.grid-cols-1.sm\:grid-cols-2 { grid-template-columns: 1fr !important; }
  #trust .sm\:col-span-2 { grid-column: auto !important; }
  .stat-card-glow { padding: 2rem 1.25rem !important; }
  .stat-card-glow .text-4xl { font-size: 2.5rem !important; }
  .stat-card-glow .text-5xl { font-size: 2.5rem !important; }
  .stat-card-glow h4 { font-size: 0.95rem !important; line-height: 1.5 !important; margin-bottom: 0.75rem !important; }
  .stat-card-glow p  { font-size: 0.875rem !important; line-height: 1.75 !important; }
  .pulse-ring {
    width: 2.75rem !important;
    height: 2.75rem !important;
    margin-bottom: 1.25rem !important;
  }
  .pulse-ring i { width: 1.25rem !important; height: 1.25rem !important; }

  /* ── MESSAGE SECTION ── */
  #message { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  #message .flex.items-center.gap-4.mb-10 { margin-bottom: 1.5rem !important; }
  #message h3 {
    font-size: 1.3rem !important;
    line-height: 1.55 !important;
    margin-bottom: 0.75rem !important;
  }
  #message .space-y-5 p {
    font-size: 0.875rem !important;
    line-height: 1.85 !important;
  }
  #message .space-y-5 { gap: 0.875rem !important; }
  /* 写真 */
  #message img.h-\[260px\] { height: 220px !important; }
  #message img.h-\[320px\] { height: 220px !important; }
  /* CEO 名刺カード */
  #message .bg-slate-900.border-l-4 { padding: 0.875rem 1rem !important; }
  #message .bg-slate-900.border-l-4 p:first-child { font-size: 0.9rem !important; }
  #message .bg-slate-900.border-l-4 .text-amber-400.text-xs { font-size: 0.65rem !important; }
  #message .bg-slate-900.border-l-4 .text-slate-300.text-sm { font-size: 0.875rem !important; }
  /* 学歴カード：3列→1列（横並びrow）レイアウトに変更 */
  .academic-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .academic-item {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.875rem !important;
    padding: 0.875rem 1rem !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(71,85,105,0.4) !important;
  }
  .academic-item:last-child {
    border-bottom: none !important;
  }
  .academic-icon {
    width: 2.25rem !important;
    height: 2.25rem !important;
    flex-shrink: 0 !important;
  }
  .academic-icon i {
    width: 1.1rem !important;
    height: 1.1rem !important;
  }
  .academic-text .text-\[9px\] { font-size: 0.65rem !important; }
  .academic-text .text-\[11px\] { font-size: 0.85rem !important; font-weight: 700 !important; }
  .academic-text .text-\[10px\] { font-size: 0.75rem !important; }
  .academic-text p.text-slate-400 { font-size: 0.72rem !important; }
  /* 学歴ヘッダー */
  #message .border.border-slate-700\/50 .flex.items-center.gap-2 { padding: 0.5rem 0.875rem !important; }
  #message .border.border-slate-700\/50 span.text-amber-400 { font-size: 0.62rem !important; }

  /* ── FAQ ── */
  #faq { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  #faq .text-center.mb-20 { margin-bottom: 1.75rem !important; }
  #faq h3 { font-size: 1.5rem !important; }
  .faq-btn {
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
    gap: 0.625rem !important;
  }
  .faq-num { font-size: 1.4rem !important; min-width: 1.75rem !important; flex-shrink: 0 !important; }
  .faq-btn span.flex-1 {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
  }
  /* 回答エリア：インデント調整（数字幅+gap分） */
  .faq-content p {
    font-size: 0.875rem !important;
    padding-left: 2.5rem !important;
    padding-right: 0.25rem !important;
    line-height: 1.8 !important;
    padding-bottom: 1rem !important;
  }
  .faq-btn .w-8.h-8 { width: 1.75rem !important; height: 1.75rem !important; flex-shrink: 0 !important; }
  #faq .mt-10 { margin-top: 1.5rem !important; }
  #faq .text-slate-400.text-sm { font-size: 0.875rem !important; }

  /* ── CONTACT SECTION ── */
  #company { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  /* コンテナ内パディング縮小 */
  #company .bg-slate-900.p-5 { padding: 1.25rem !important; }
  /* 会社情報テキスト */
  #company h3 { font-size: 1.25rem !important; margin-bottom: 0.875rem !important; }
  #company p.text-slate-300 { font-size: 0.875rem !important; line-height: 1.8 !important; margin-bottom: 1.25rem !important; }
  #company .space-y-5 { gap: 0.875rem !important; }
  #company .space-y-8 { gap: 0.875rem !important; }
  #company .flex.items-start i { width: 1rem !important; height: 1rem !important; margin-right: 0.75rem !important; }
  #company .flex.items-start h4 { font-size: 0.65rem !important; letter-spacing: 0.12em !important; }
  #company .flex.items-start p { font-size: 0.875rem !important; }
  /* フォームエリア */
  #company .bg-slate-900\/50 { padding: 1.25rem !important; }
  #company .grid.grid-cols-1.sm\:grid-cols-2 { gap: 0.875rem !important; }
  /* iOSズーム防止 (≥16px必須) */
  #company input,
  #company textarea,
  #company select {
    font-size: 1rem !important;
    padding: 0.75rem 0.875rem !important;
    border-radius: 2px !important;
  }
  #company label { font-size: 0.725rem !important; letter-spacing: 0.1em !important; margin-bottom: 0.375rem !important; }
  #company textarea { min-height: 5rem !important; }
  #company .privacy-row { gap: 0.625rem !important; }
  #company .privacy-row label { font-size: 0.775rem !important; line-height: 1.6 !important; }
  #company button[type="submit"] {
    font-size: 0.775rem !important;
    padding: 0.875rem 1rem !important;
    letter-spacing: 0.1em !important;
  }
  #company .space-y-5 { gap: 0.875rem !important; }
  #company .space-y-6 { gap: 0.875rem !important; }
  #company .mt-4 { margin-top: 0.75rem !important; }
  /* Contact section grid: 1列 */
  #company .grid.grid-cols-1.lg\:grid-cols-2 { gap: 1.5rem !important; }

  /* ── FOOTER ── */
  footer { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  footer .text-2xl { font-size: 1.5rem !important; margin-bottom: 1.25rem !important; }
  footer .flex-wrap { gap: 0.75rem !important; }
  footer .flex-wrap a { font-size: 0.65rem !important; }
  footer .max-w-4xl { padding: 1rem !important; }
  footer p { font-size: 0.75rem !important; line-height: 1.8 !important; }
  #copyright-year { font-size: 0.65rem !important; }

  /* ── BACK TO TOP ── */
  #back-to-top { bottom: 1rem !important; right: 1rem !important; width: 40px !important; height: 40px !important; }

  /* ── section-label 上部の余白 ── */
  .text-center.mb-20.reveal { margin-bottom: 1.75rem !important; }

  /* ── SECTION LABEL (TRUST / FAQ / SERVICES等) ── */
  .text-amber-500.tracking-\[0\.3em\] { font-size: 0.6rem !important; letter-spacing: 0.2em !important; }
  .text-amber-600.tracking-\[0\.3em\] { font-size: 0.6rem !important; }
  .flex.items-center.justify-center.gap-3 .w-8 { width: 1.25rem !important; }

  /* ── HERO: scroll indicator ── */
  .hero-scroll { bottom: 1.5rem !important; }
  .hero-scroll span { font-size: 0.55rem !important; }
  .hero-scroll .h-12 { height: 2rem !important; }

  /* ── concept リード文（mb-16を縮小） ── */
  #concept .mb-16 { margin-bottom: 1.5rem !important; }
  #concept .sm\:mb-24 { margin-bottom: 1.5rem !important; }

  /* ── Service S3 余白 ── */
  #services .py-6 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  #services .sm\:py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

  /* ── Trust セクション grid: 1列確実 ── */
  #trust .grid.grid-cols-1 { grid-template-columns: 1fr !important; }

  /* ── Message gap ── */
  #message .gap-12 { gap: 2rem !important; }
  #message .gap-8  { gap: 0.75rem !important; }

  /* ── FAQ CTA ── */
  #faq .text-center.reveal p { font-size: 0.875rem !important; }

  /* ── Privacy checkbox row ── */
  .flex.items-start.gap-3.mt-4 { gap: 0.5rem !important; margin-top: 0.5rem !important; }
  .flex.items-start.gap-3 label.text-xs { font-size: 0.775rem !important; line-height: 1.65 !important; }

  /* ── Footer免責事項 ── */
  footer .max-w-4xl.bg-slate-900\/50 p { font-size: 0.725rem !important; line-height: 1.75 !important; }
  footer .mb-12 { margin-bottom: 1.5rem !important; }
  footer .mb-10 { margin-bottom: 1.25rem !important; }
  footer .mb-8  { margin-bottom: 1rem !important; }
}

/* ============================================================
    PLAN 5 v3 - 日本語改行最適化（語句保護）
============================================================ */
/* 見出し: バランス重視・禁則強化 */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
/* 本文: prettyで美しい折り返し */
p {
  text-wrap: pretty;
  line-break: strict;
  overflow-wrap: break-word;
  word-break: normal;
}

/* ── Flexレイアウト内のテキストがオーバーフローしないよう ── */
/* チェックマーク付きリストの本文spanに min-width:0 と flex:1 を強制
    【重要】ドット（w-1, h-1などのサイズ指定span）は除外 */
ul li.flex > span:not([class*="w-"]):not([class*="h-"]):not(.rounded-full),
ul li.flex.items-start > span:not([class*="w-"]):not([class*="h-"]):not(.rounded-full),
ul li.flex.items-center > span:not([class*="w-"]):not([class*="h-"]):not(.rounded-full) {
  min-width: 0;
  flex: 1 1 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
/* 丸ポチやインジケーターは必ず固定サイズを保つ（最高優先度） */
li.flex > span.w-1,
li.flex > span.w-1\.5,
li.flex > span.w-2,
li.flex > span.rounded-full,
li.flex > span.flex-shrink-0 {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: 0.25rem !important;
  height: 0.25rem !important;
  border-radius: 9999px !important;
  display: inline-block !important;
}

/* スマホ時の改行制御 */
@media (max-width: 640px) {
  .hero-sub { line-height: 1.95; }
  h3.font-serif br[class*="hidden sm"] { display: none; }
  br.hidden.sm\:block { display: none !important; }
  br.hidden.sm\:inline { display: none !important; }

  /* スマホ専用：見出し h3/h4 のみ keep-all で日本語禁則を効かせる。
      本文 p は normal で自然な改行を許容する */
  li span, h3, h4 {
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
  }
  p {
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
  }
  /* 本文 p は normal で折り返し可。text-wrap で美観を整える */
  .concept-card-new p,
  #services p,
  #message .space-y-5 p,
  .faq-content p,
  #company p.text-slate-300,
  #concept .max-w-2xl p,
  .stat-card-glow p {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-wrap: pretty;
  }

  /* チェックマーク付きリストの本文をスマホで確実に折り返す
      【重要】丸ポチサイズ指定のspanは除外 */
  ul li.flex > span:not([class*="w-"]):not([class*="h-"]):not(.rounded-full):not(.flex-shrink-0),
  #services ul li > span:not([class*="w-"]):not([class*="h-"]):not(.rounded-full):not(.flex-shrink-0),
  #services ul li > span:not([class*="w-"]):not([class*="h-"]):not(.rounded-full) {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  /* Servicesの2カラムグリッドやグリッドアイテムにmin-width:0を強制 */
  #services .grid > div,
  #business .grid > div,
  #trust .grid > div,
  .grid > * { min-width: 0; }

  /* コンテナ全体のオーバーフロー防止 */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  .max-w-7xl, .max-w-6xl, .max-w-4xl, .max-w-3xl, .max-w-2xl, .max-w-xl, .max-w-lg, .max-w-md {
    max-width: 100% !important;
  }

  /* チェックマーク本文のサイズ調整（スマホで読みやすく） */
  #services ul li {
    align-items: flex-start !important;
    gap: 0 !important;
  }
  #services ul li i {
    flex-shrink: 0 !important;
    margin-right: 0.625rem !important;
    width: 1rem !important;
    height: 1rem !important;
    margin-top: 0.35rem !important;
  }
  #services ul li > span {
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
    display: block !important;
    flex: 1 !important;
  }

  /* Business Areas リストも同様
      【重要】span.w-1 （丸ポチ）は除外して、本文のspanだけに適用 */
  #business ul li > span:not([class*="w-"]):not([class*="h-"]):not(.rounded-full):not(.flex-shrink-0),
  #business ul li > span.w-1 + span,
  #business ul li > span.w-1\.5 + span,
  #business ul li > span.rounded-full + span {
    min-width: 0 !important;
    flex: 1 1 0% !important;
    overflow-wrap: anywhere !important;
  }
  #business ul li {
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  /* 丸ポチを確実に丸い小さなドットに保つ */
  #business ul li > span.w-1,
  #business ul li > span.rounded-full {
    flex: 0 0 auto !important;
    width: 0.25rem !important;
    height: 0.25rem !important;
    min-width: 0.25rem !important;
    max-width: 0.25rem !important;
    border-radius: 9999px !important;
    margin-top: 0.5rem !important;
    display: inline-block !important;
    background-color: rgb(245 158 11) !important;
  }
}
/* PC時、スマホ用の<br>は無効化 */
@media (min-width: 641px) {
  br.sm\:hidden { display: none !important; }
}

/* ============================================================
    u-pc / u-sp — PC/SP 出し分けユーティリティ
    ・SP（≤640） は u-pc を隠す / PC（≥641） は u-sp を隠す
    ・表示時は revert で要素デフォルトの display（br=inline, div=block 等）を尊重
============================================================ */
/* --- スマートフォン (640px以下) --- */
@media (max-width: 640px) {
  .u-pc, .u-tab { display: none !important; }
}

@media (min-width: 641px) and (max-width: 1200px) {
  .u-pc, .u-sp { display: none !important; }
}

/* --- PC (1025px以上) --- */
@media (min-width: 1201px) {
  .u-sp, .u-tab { display: none !important; }
}

/* ============================================================
    UNIVERSAL RESPONSIVE SAFETY — 全デバイス幅で崩れないサーフガード
    対象: iPhone SE (375), iPhone 14 Pro (393), 14 Pro Max (430),
          Pixel (412), iPad (820), iPad Pro (1024)
============================================================ */

/* ルート: 横スクロールを絶対に起こさない */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
body { position: relative; }

/* あらゆる要素の box-sizing を border-box に統一 */
*, *::before, *::after { box-sizing: border-box; }

/* 画像やiframeが親を越えない */
img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}
/* ただしHero番組canvasは幅100%を保つ */
#hero-canvas, #star-canvas { height: 100% !important; }

/* コンテナ類は全て画面幅を超えない */
.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl,
.max-w-3xl, .max-w-2xl, .max-w-xl, .max-w-lg, .max-w-md {
  width: 100%;
  max-width: min(var(--mw, 80rem), 100%);
}
.max-w-7xl { --mw: 80rem; }
.max-w-6xl { --mw: 72rem; }
.max-w-5xl { --mw: 64rem; }
.max-w-4xl { --mw: 56rem; }
.max-w-3xl { --mw: 48rem; }
.max-w-2xl { --mw: 42rem; }
.max-w-xl  { --mw: 36rem; }
.max-w-lg  { --mw: 32rem; }
.max-w-md  { --mw: 28rem; }

/* Flex ・ Grid の子要素は min-width:0 でオーバーフローを防ぐ */
.flex > *, .grid > * { min-width: 0; }

/* チェックマークリストの本文を確実に折り返す ——すべての画面幅で
    【重要】ドット（w-1, rounded-full などのサイズ指定span）は必ず除外 */
li.flex > span:not([class*="w-"]):not([class*="h-"]):not(.rounded-full):not(.flex-shrink-0),
li.flex.items-start > span:not([class*="w-"]):not([class*="h-"]):not(.rounded-full):not(.flex-shrink-0),
li.flex.items-center > span:not([class*="w-"]):not([class*="h-"]):not(.rounded-full):not(.flex-shrink-0) {
  min-width: 0;
  flex: 1 1 0%;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}
li.flex > i,
li.flex.items-start > i,
li.flex.items-center > i {
  flex-shrink: 0;
}
/* Business Areas のドットを確実に丸い小さいドットに（最高優先度） */
ul li.flex > span.w-1,
ul li.flex > span.w-1\.5,
ul li.flex > span.rounded-full,
ul li.flex.items-center > span.w-1,
ul li.flex.items-center > span.rounded-full {
  flex: 0 0 auto !important;
  width: 0.25rem !important;
  height: 0.25rem !important;
  min-width: 0.25rem !important;
  max-width: 0.25rem !important;
  border-radius: 9999px !important;
  display: inline-block !important;
  background-color: rgb(245 158 11) !important;
}

/* テキストの最適化（全画面幅） */
p, li, span, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ============================================================
    BREAKPOINT 1: 超狭幅 スマホ (〜 380px) — iPhone SE 考慮
============================================================ */
@media (max-width: 380px) {
  body { font-size: 14px; letter-spacing: 0.01em; }
  p { line-height: 1.8; font-size: 0.875rem; }

  /* コンテナ余白をさらに圧縮 */
  .max-w-7xl.mx-auto, .max-w-6xl.mx-auto,
  .max-w-4xl.mx-auto, .max-w-3xl.mx-auto {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  /* 見出しを一回り小さく */
  section h3 { font-size: 1.25rem !important; line-height: 1.45 !important; }
  section h4 { font-size: 0.95rem !important; }

  /* HERO */
  #home h1 { font-size: 1.85rem !important; line-height: 1.3 !important; }
  .hero-sub { font-size: 0.875rem !important; line-height: 1.75 !important; }
  .hero-cta a { font-size: 0.65rem !important; padding: 0.75rem 1.25rem !important; }

  /* チェックマークリストの本文を少し小さく */
  #services ul li > span,
  #business ul li > span { font-size: 0.875rem !important; line-height: 1.65 !important; }

  /* TRUST数字 */
  .stat-card-glow .text-4xl, .stat-card-glow .text-5xl { font-size: 2.25rem !important; }

  /* Conceptカード */
  .concept-card-new h4 { font-size: 0.95rem !important; }
  .concept-card-new p  { font-size: 0.875rem !important; }
}

/* ============================================================
    BREAKPOINT 2: 標準スマホ (381〜430px) — 14 Pro / Pro Max / Pixel
============================================================ */
@media (min-width: 381px) and (max-width: 430px) {
  body { font-size: 15px; }
  .max-w-7xl.mx-auto, .max-w-6xl.mx-auto,
  .max-w-4xl.mx-auto, .max-w-3xl.mx-auto {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* チェックマークリストの本文 */
  #services ul li > span,
  #business ul li > span { font-size: 0.875rem !important; line-height: 1.7 !important; }
}

/* ============================================================
    BREAKPOINT 3: スマホ広め (431〜640px)
============================================================ */
@media (min-width: 431px) and (max-width: 640px) {
  .max-w-7xl.mx-auto, .max-w-6xl.mx-auto,
  .max-w-4xl.mx-auto, .max-w-3xl.mx-auto {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  #services ul li > span,
  #business ul li > span { font-size: 0.875rem !important; line-height: 1.75 !important; }
}

/* ============================================================
    BREAKPOINT 4: タブレット縦 (641〜834px) — iPad mini / iPad
============================================================ */
@media (min-width: 641px) and (max-width: 834px) {
  /* コンテナの余白 */
  .max-w-7xl.mx-auto, .max-w-6xl.mx-auto,
  .max-w-4xl.mx-auto, .max-w-3xl.mx-auto {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* HERO 本文をタブレットでも確実に画面内に */
  .hero-sub {
    max-width: min(34rem, calc(100vw - 4rem)) !important;
    font-size: 1rem !important;
    line-height: 1.85 !important;
  }
  #home h1 { font-size: 3rem !important; line-height: 1.25 !important; }

  /* 見出し */
  section h3 { font-size: 1.75rem !important; }
  section h4 { font-size: 1.15rem !important; }

  /* Conceptカードはタブレットでも2列に */
  #concept .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; }
  #concept .grid > div:last-child { grid-column: span 2; max-width: 50%; margin: 0 auto; }

  /* Service セクションの画像高さ */
  #services .h-\[220px\], #services .h-\[300px\] { height: 280px !important; }

  /* Business Areas */
  #business .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Trustカード */
  #trust .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; }
  #trust .sm\:col-span-2.md\:col-span-1 { grid-column: span 2 !important; max-width: 50%; margin: 0 auto; }

  /* チェックマークリスト */
  #services ul li > span,
  #business ul li > span { font-size: 0.925rem !important; line-height: 1.75 !important; }

  /* MESSAGE セクションは縦並びのまま */
  #message .grid.lg\:grid-cols-2 { grid-template-columns: 1fr !important; }

  /* Contact 2カラムを縦に */
  #company .grid.lg\:grid-cols-2 { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ============================================================
    BREAKPOINT 5: タブレット横 / iPad Pro (835〜1024px)
============================================================ */
@media (min-width: 835px) and (max-width: 1024px) {
  .max-w-7xl.mx-auto, .max-w-6xl.mx-auto {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }

  .hero-sub {
    max-width: min(36rem, calc(100vw - 5rem)) !important;
    font-size: 1.1rem !important;
  }
  #home h1 { font-size: 3.5rem !important; }

  /* Conceptカードは3列（本来のレイアウトを維持） */
  /* Trustカードも3列 */
  /* Serviceは2カラム（画像+テキスト）を維持 */
}

/* ============================================================
    セーフティネット: どのサイズでも押さえておきたいルール
============================================================ */
/* 画像コンテナが画面を超えない */
.service-img-wrap { max-width: 100%; }

/* コーナー装飾やオーブ、パーティクルがオーバーフローしない */
.ambient-hero, .float-orb { max-width: 100vw; }

/* Marquee は意図的にオーバーフローさせるため例外 */
.marquee-wrap { overflow-x: hidden; }
.marquee-track { width: max-content; }

/* ナビゲーションメニューの崩れ防止 */
#mobile-menu { max-width: 100vw; }

/* ヘッダー画像が拡張されても画面を超えない */
#home img { max-width: none; }

/* ============================================================
    V9 FINAL OVERRIDE — ドット・レイアウト修正、最高優先度
    【重要】それまでのあらゆるCSSを上書きするため <style> 末尾に配置
============================================================ */

/* 【1】Business Areas のドット（丸ポチ）を確実に丸い小さなドットに
        どの画面幅でも丸いドットとして表示されるよう、CSS変数とダブルリストで安全に */
ul li.flex span.w-1,
ul li.flex span.h-1,
ul li.flex span.w-1.h-1,
ul li.flex span.rounded-full,
.flex span.w-1.h-1.rounded-full,
span.w-1.h-1.rounded-full.bg-amber-500,
span.w-1.h-1.rounded-full.flex-shrink-0 {
  flex: 0 0 0.3rem !important;
  width: 0.3rem !important;
  height: 0.3rem !important;
  min-width: 0.3rem !important;
  max-width: 0.3rem !important;
  min-height: 0.3rem !important;
  max-height: 0.3rem !important;
  border-radius: 9999px !important;
  display: inline-block !important;
  background-color: rgb(245 158 11) !important;
  align-self: center !important;
  margin-top: 0 !important;
}

/* 【2】Business Areas リストのレイアウトを明示的に左揃え */
#business ul {
  list-style: none !important;
  padding-left: 0 !important;
}
#business ul li.flex {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.625rem !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
#business ul li.flex > *:last-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* 【3】back-to-top ボタンと本文の重なりを減らす
        スマホではさらに小さく、そして透明度を上げて本文を隠しにくく */
@media (max-width: 640px) {
  #back-to-top {
    width: 36px !important;
    height: 36px !important;
    bottom: 0.75rem !important;
    right: 0.75rem !important;
    background: rgba(6, 14, 30, 0.75) !important;
    backdrop-filter: blur(8px) !important;
  }
  #back-to-top i { width: 1rem !important; height: 1rem !important; }

  /* コンテンツ下部にボタン分のスペースを確保 */
  section:last-of-type { padding-bottom: 5rem !important; }
  footer { padding-bottom: 5rem !important; }
}

/* 【4】Marqueeトラックの例外応用 */
.marquee-track > * { min-width: auto !important; }

/* 【5】Conceptカードのアイコンも丸さを保つ */
.concept-card-new .w-14, .concept-card-new .w-16 {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

/* 【6】ロゴ・アイコン類のサイズ保護（flexの不意な拡張を防ぐ） */
.w-2, .w-3, .w-4, .w-5, .w-6, .w-7, .w-8, .w-10, .w-12, .w-14, .w-16,
.h-2, .h-3, .h-4, .h-5, .h-6, .h-7, .h-8, .h-10, .h-12, .h-14, .h-16 {
  flex-shrink: 0;
}
/* 丸アイコンの aspect-ratio を保護 */
.rounded-full[class*="w-"][class*="h-"] {
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1;
}

/* 【7】 スマホで Business Areas カードの padding を調整 */
@media (max-width: 640px) {
  #business .group.bg-slate-900 .p-8,
  #business .group.bg-slate-900 [class*="p-"] {
  }
  #business ul li.flex {
  }
}

/* ============================================================
    V10 CRITICAL FIX — Conceptカード本文の右端切れとレイアウト修正
============================================================ */

/* 【1】Conceptカード本文の text-wrap:balance を上書きして右端切れを修正
        【重要】インラインの style="text-wrap:balance" をすべて上書き */
.concept-card-new p[style*="text-wrap"],
.concept-card-new p {
  text-wrap: pretty !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
}

/* 【2】カード内部の余白を確保 */
.concept-card-new {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 【4】SERVICESリード文の右はみ出し修正 */
#services .text-center p.mt-6 {
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  text-wrap: pretty !important;
  overflow-wrap: break-word !important;
}

/* 【5】Business Areasリード文 */
#business .text-center p.mt-6 {
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  text-wrap: pretty !important;
  overflow-wrap: break-word !important;
}

/* 【6】見出しh3のtext-wrap:balanceは維持（見出しはバランスした方が美しい）
        ただしmax-widthとoverflow保護は付ける */
section h3 {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

/* 【7】 text-wrap:balance を持つすべての本文を安全化 */
p[style*="text-wrap:balance"],
p[style*="text-wrap: balance"] {
  text-wrap: pretty !important;
  max-width: 100% !important;
}

/* 【8】タブレット～PC中間サイズでConceptカード本文を中央揃えながら右端を押さえる */
@media (min-width: 641px) and (max-width: 1024px) {
  .concept-card-new p {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.75 !important;
  }
  .concept-card-new {
    padding: 1.5rem 1.25rem !important;
  }
}

/* 【9】人生に選択肢と共に SERVICES と BUSINESS のリード文にも同様の保護 */
@media (min-width: 641px) and (max-width: 1024px) {
  #services .text-center p,
  #business .text-center p {
    font-size: 0.925rem !important;
    line-height: 1.85 !important;
  }
}

/* ============================================================
    V11 日本語禁則処理強化 — 「。」「、」の行頭孤立を防ぐ
============================================================ */

/* 【A】ブラウザレベルで句読点を行末にぶら下げる（Safari/Chrome最新版対応） */
p, h1, h2, h3, h4, h5, h6, li, span {
  hanging-punctuation: allow-end last;
}

/* 【B】本文 p は line-break のみ厳密化、word-break は normal で自然な改行を許容 */
section p,
.concept-card-new p,
#services p,
#business p,
.faq-content p,
#message p,
#trust p,
#company p {
  line-break: strict !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hanging-punctuation: allow-end last !important;
  text-spacing-trim: trim-start;
}