/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Noto Sans JP', sans-serif; background: #f8f9fa; color: #0b0e14; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* ─── Keyframes ─── */
@keyframes float        { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes marquee      { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes spin-slow    { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes dot-shift    { 0%{background-position:0 0} 100%{background-position:32px 32px} }
@keyframes grid-pulse   { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes rise         { 0%{transform:translateX(-50%) translateY(0)} 100%{transform:translateX(-50%) translateY(-70px)} }
@keyframes drift-a      { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(55px,38px) scale(1.16)} }
@keyframes drift-b      { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-38px,-52px) scale(1.12)} }
@keyframes ripple       { from{width:0;height:0;opacity:1} to{width:220px;height:220px;opacity:0} }
@keyframes wsmv         { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes oani1        { from{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(0)} to{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(360deg)} }
@keyframes oani2        { from{transform:translate(-50%,-50%) rotateX(56deg) rotateZ(55deg)} to{transform:translate(-50%,-50%) rotateX(56deg) rotateZ(415deg)} }
@keyframes oani3        { from{transform:translate(-50%,-50%) rotateX(38deg) rotateZ(-22deg)} to{transform:translate(-50%,-50%) rotateX(38deg) rotateZ(338deg)} }

/* ─── Scroll Reveal ─── */
.sr, .srw {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
}
.sr.in, .srw.in { opacity: 1 !important; transform: none !important; }

.sr-up,  .srw.su  { transform: translateY(60px); }
.sr-left, .srw.sl { transform: translateX(60px); }
.sr-right,.srw.sr2{ transform: translateX(-60px); }
.sr-rotate,.srw.srot { transform: translateY(50px) rotate(-5deg); transform-origin: left center; }
.sr-rotateR { transform: translateY(50px) rotate(5deg); transform-origin: right center; }
.sr-flip    { transform: perspective(800px) rotateX(20deg) translateY(40px); }
.sr-scale   { transform: scale(.84); }

.d1 { transition-delay: 80ms; }
.d2 { transition-delay: 160ms; }
.d3 { transition-delay: 240ms; }
.d4 { transition-delay: 320ms; }
.d5 { transition-delay: 400ms; }
.d6 { transition-delay: 480ms; }

/* ─── Typography utils ─── */
.h-block { display: block; white-space: nowrap; }
@media (max-width: 390px) { .h-block { white-space: normal; word-break: keep-all; } }

.grad-text {
  background: linear-gradient(130deg, #00A1CC 0%, #005f8a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* sec-label / slbl → 統合 */
.sec-label, .slbl {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #00A1CC;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.sec-label::before, .slbl::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: #00A1CC;
}

.tag {
  display: inline-flex;
  align-items: center;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #00A1CC;
  border: 1px solid rgba(0,161,204,.35);
  border-radius: 999px;
  padding: .18rem .65rem;
}

.rule-line { width: 0; height: 2px; background: #00A1CC; transition: width 1.2s cubic-bezier(.16,1,.3,1); }
.rule-line.in { width: 100%; }
.wrule { width: 0; height: 2px; background: linear-gradient(90deg,#00A1CC,#004f7c); border-radius: 999px; transition: width 1.3s cubic-bezier(.16,1,.3,1); }
.wrule.in { width: 64px; }

.marquee-inner { display: flex; white-space: nowrap; gap: 2.5rem; animation: marquee 24s linear infinite; }
.floating { animation: float 5s ease-in-out infinite; }

.bignumber {
  position: absolute;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -.05em;
  font-size: clamp(8rem, 18vw, 14rem);
}
@media (max-width: 640px) { .bignumber { display: none; } }

/* ─── Section Backgrounds ─── */
.bg-who {
  background: #ffffff;
  position: relative;
}
.bg-who::before, .bg-who::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.bg-who::before {
  width: 700px; height: 700px;
  top: -220px; right: -220px;
  background: radial-gradient(circle, rgba(0,161,204,.09) 0%, transparent 68%);
  animation: drift-a 22s ease-in-out infinite alternate;
}
.bg-who::after {
  width: 500px; height: 500px;
  bottom: -160px; left: -160px;
  background: radial-gradient(circle, rgba(0,161,204,.06) 0%, transparent 70%);
  animation: drift-b 28s ease-in-out infinite alternate;
}

.bg-philosophy { background: #f0f6fa; position: relative; overflow: hidden; }
.bg-philosophy::before {
  content: ''; position: absolute; inset: -50%;
  background: conic-gradient(from 0deg at 30% 40%, rgba(0,161,204,.05) 0deg, transparent 60deg, rgba(0,161,204,.03) 120deg, transparent 180deg, rgba(0,161,204,.05) 240deg, transparent 300deg, rgba(0,161,204,.03) 360deg);
  animation: spin-slow 50s linear infinite;
  pointer-events: none;
}

.bg-products { background: #f7f9fb; position: relative; overflow: hidden; }
.bg-products::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,161,204,.22) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: dot-shift 20s ease-in-out infinite alternate;
  pointer-events: none;
  opacity: .45;
}

.bg-values { background: #ffffff; position: relative; overflow: hidden; }
.bg-values::after {
  content: ''; position: absolute;
  top: -100px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,161,204,.08) 0%, transparent 65%);
  animation: drift-a 26s ease-in-out infinite alternate;
  pointer-events: none;
}

.bg-rules { background: #f0f4f8; position: relative; overflow: hidden; }
.bg-rules::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,161,204,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,161,204,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: grid-pulse 5s ease-in-out infinite;
  pointer-events: none;
}

.bg-join {
  background: linear-gradient(160deg, #eaf7fc 0%, #f5fbfe 50%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}
.bg-join::before {
  content: ''; position: absolute;
  bottom: -120px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,161,204,.1) 0%, transparent 60%);
  animation: rise 14s ease-in-out infinite alternate;
  pointer-events: none;
}

/* ─── Interactive Cards ─── */
.card-h {
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.card-h:hover, .card-h:active {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,161,204,.13);
}

.pillar-c {
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pillar-c::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: #00A1CC;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.pillar-c:hover::before, .pillar-c:active::before { transform: scaleX(1); }
.pillar-c:hover, .pillar-c:active { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,.08); }

.prow {
  position: relative;
  transition: background .25s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.prow::after {
  content: ''; position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: #00A1CC;
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.prow:hover::after, .prow:active::after { width: 100%; }
.prow:hover, .prow:active { background: rgba(0,161,204,.04); }

.arrow-btn { transition: border-color .2s, color .2s, transform .3s; -webkit-tap-highlight-color: transparent; }
.prow:hover .arrow-btn, .prow:active .arrow-btn { border-color: #00A1CC !important; color: #00A1CC !important; transform: rotate(45deg); }

.mv-card { transition: background .25s, border-color .25s; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mv-card:hover, .mv-card:active { background: rgba(0,161,204,.05) !important; border-color: rgba(0,161,204,.25) !important; }
.mv-underline { width: 2rem; height: 2px; background: #00A1CC; transition: width .5s cubic-bezier(.16,1,.3,1); }
.mv-card:hover .mv-underline, .mv-card:active .mv-underline { width: 4rem; }

/* ─── Images ─── */
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease; }
.img-wrap:hover .img-cover, .img-wrap:active .img-cover { transform: scale(1.04); }

/* ─── Buttons ─── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.75rem;
  background: #00A1CC; color: #fff;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px;
  transition: background .25s, transform .25s, box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:hover, .btn-primary:active { background: #007fa0; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,161,204,.35); }
.btn-primary svg { transition: transform .25s; }
.btn-primary:hover svg, .btn-primary:active svg { transform: translateX(4px); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.75rem;
  background: transparent; color: #374151;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; border: 1.5px solid #d1d5db;
  transition: border-color .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn-outline:hover, .btn-outline:active { border-color: #00A1CC; color: #00A1CC; }

/* ─── WHO Section ─── */
.wsbg { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; overflow: hidden; pointer-events: none; user-select: none; z-index: 1; }
.wstr { display: inline-flex; gap: 2.5rem; animation: wsmv 30s linear infinite; white-space: nowrap; }
.wstr span { font-size: clamp(5rem,14vw,11rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; color: transparent; -webkit-text-stroke: 1.5px rgba(0,161,204,.1); }

.wh { font-size: clamp(3rem,6.5vw,5.2rem); font-weight: 900; line-height: 1.08; letter-spacing: -.025em; color: #0b0e14; overflow: visible; }
.wl1 { display: block; white-space: nowrap; }
.wl2 { display: block; white-space: nowrap; overflow: visible; padding-bottom: .18em; background: linear-gradient(130deg,#00A1CC 0%,#004f7c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@media (max-width: 400px) { .wl1, .wl2 { white-space: normal; word-break: keep-all; } }

.wbadge { background: #fff; border: 1px solid rgba(0,161,204,.18); border-radius: 1.2rem; box-shadow: 0 8px 32px rgba(0,0,0,.08); padding: .85rem 1.25rem; display: flex; flex-direction: column; gap: .1rem; animation: float 5s ease-in-out infinite; }
.wbadge .bn { font-size: 1.4rem; font-weight: 900; color: #0b0e14; line-height: 1; }
.wbadge .bn span { color: #00A1CC; }
.wbadge .bl { font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9ca3af; }

.wimgw { border-radius: 1.75rem; overflow: hidden; box-shadow: 0 28px 70px rgba(0,0,0,.13); }
.wimgw img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 7s ease; }
.wimgw:hover img { transform: scale(1.04); }

.wcta { display: inline-flex; align-items: center; gap: .55rem; padding: .9rem 1.9rem; background: #0b0e14; color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; transition: background .25s, transform .25s, box-shadow .25s; -webkit-tap-highlight-color: transparent; text-decoration: none; }
.wcta:hover, .wcta:active { background: #00A1CC; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,161,204,.35); }
.wcta svg { transition: transform .25s; }
.wcta:hover svg, .wcta:active svg { transform: translateX(4px); }

/* ─── Globe ─── */
.gstage { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; }
#gc { border-radius: 50%; display: block; }
.oring { position: absolute; border-radius: 50%; pointer-events: none; top: 50%; left: 50%; }
.or1 { width: 112%; height: 112%; border: 1.5px solid rgba(0,161,204,.28); animation: oani1 13s linear infinite; }
.or2 { width: 126%; height: 126%; border: 1.5px solid rgba(0,161,204,.18); animation: oani2 20s linear infinite reverse; }
.or3 { width: 140%; height: 140%; border: 1px solid rgba(0,161,204,.12); animation: oani3 30s linear infinite; }
.gshadow { position: absolute; bottom: -20px; left: 12%; width: 76%; height: 30px; background: radial-gradient(ellipse,rgba(0,161,204,.32) 0%,transparent 70%); filter: blur(14px); pointer-events: none; }

/* ─── Spec strip ─── */
.spk { font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #c4ccd4; }
.spv { font-size: 1rem; font-weight: 900; color: #0b0e14; }