/* ============================================================
   株式会社協真金属
   Teal #0ABAB5 × White × Dark
============================================================ */

/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  --g:        #0ABAB5;
  --g-dim:    #0ABAB5;
  --g-soft:   #ccf5f4;
  --g-glow:   rgba(10,186,181,0.28);
  --ink:      #ffffff;
  --steel:    #f5f5f2;
  --plate:    #ededea;
  --rule:     rgba(0,0,0,0.08);
  --text:     #1a1a1a;
  --muted:    #666666;
  --white:    #0a0a0a;

  --fam-display: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  --fam-label:   'Barlow Condensed', sans-serif;
  --fam-body:    'Noto Sans JP', sans-serif;
  --fam-serif:   'Cormorant Garamond', Georgia, serif;

  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-in:  cubic-bezier(0.7,0,0.84,0);
}

/* ============================================================
   RESET & BASE
============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--fam-body);
  background: var(--ink);
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* noise texture overlay */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:9998;
}

/* ============================================================
   TICKER
============================================================ */
.ticker {
  position:fixed; top:0; left:0; right:0;
  height:36px;
  background: var(--g);
  color: #fff;
  font-family: var(--fam-label);
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  display:flex; align-items:center;
  overflow:hidden;
  z-index:2000;
}
.ticker-track {
  display:flex;
  animation: ticker-scroll 28s linear infinite;
  white-space:nowrap;
  will-change:transform;
}
.ticker-track span { padding:0 3rem; }
@keyframes ticker-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ============================================================
   HEADER
============================================================ */
header {
  position:fixed;
  top:36px; left:0; right:0;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6%;
  z-index:1900;
  background:transparent;
  border-bottom:1px solid transparent;
  transition: background .4s var(--ease-out), backdrop-filter .2s;
}
header.scrolled {
  background: #FFFFFF;
  backdrop-filter: blur(20px) saturate(120%);
  border-bottom-color: var(--rule);
  box-shadow: 0 2px 20px rgba(0,0,0,.04);
}

.logo-wrap { display:flex; align-items:center; }
.main-logo {
  display:inline-block;
  position:relative;
  height:44px;
  line-height:0;
}
.main-logo img { height:100%; width:auto; }
/* At top: show white logo; scrolled: swap to dark logo */
.main-logo .logo-default  { display:block; }
.main-logo .logo-scrolled { display:none; }
header.scrolled .main-logo .logo-default  { display:none; }
header.scrolled .main-logo .logo-scrolled { display:block; }

.header-tel {
    font-family: var(--fam-label);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
    background: var(--g);
    padding: 10px 30px;
    border-radius: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .25s;
}
.header-tel:hover { background: var(--g-dim); }

nav {
  display:flex;
  align-items: center;
  background: #0cc7b4;
  backdrop-filter: blur(6px);
  border-radius: 2rem;
  padding: 0 20px;
  height: 56px;
}
nav ul {
  display:flex; 
	/*gap:28px;*/
  align-items: center;
}
nav ul li{
  margin-left: 15px;
}
header.scrolled nav {
 /* background: rgba(0,0,0,.06);*/
  backdrop-filter: none;
}
nav a {
  font-family: var(--fam-label);
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: #fff;
  position:relative;
  transition: color .3s;
}
nav a::after {
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:1px;
  background: currentColor;
  transition: width .3s var(--ease-out);
}
nav a:hover { color:rgba(255,255,255,.7); }
nav a:hover::after { width:100%; }
header.scrolled nav a { color: #FFFFFF; }
header.scrolled nav a:hover { color: var(--g-dim); }

.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:6px;
  background: none;
  border: none;
  outline: none;
}
.hamburger span {
  display:block;
  width:26px; height:2px;
  background: #fff;
  transition: background .35s var(--ease-out), transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
header.scrolled .hamburger span { background: var(--g); }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav-close { display:none; }

/* ============================================================
   HERO
============================================================ */
.hero {
  min-height:100vh;
  padding-top: calc(36px + 70px);
  display:grid;
  grid-template-rows:1fr auto;
  position:relative;
  overflow:hidden;
}

.hero-bg {
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(-55deg, transparent, transparent 60px, rgba(0,0,0,.025) 60px, rgba(0,0,0,.025) 61px),
    linear-gradient(160deg, #ffffff 0%, #f5f5f2 60%, #f0f5e8 100%);
}
.hero-bg::after {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 60% at 75% 55%, rgba(10,186,181,.18) 0%, transparent 70%);
}

.hero-label {
  font-family: var(--fam-display);
  font-size: clamp(8rem,18vw,18rem);
  line-height:.85;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.14);
  pointer-events:none;
  position:absolute;
  right:-3%; top:14%;
  letter-spacing:-.03em;
  user-select:none;
  z-index:3;
}

.hero-body {
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:left;
  padding: 80px 8% 40px;
}

.hero-slides {
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  overflow:hidden;
  z-index:1;
}
.hero-slide {
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

.hero-overlay {
  position:absolute; inset:0;
  z-index:2;
  background: linear-gradient(100deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.2) 100%);
  pointer-events:none;
}

.hero-eyebrow {
  font-family: var(--fam-label);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.32em;
  color:rgba(255,255,255,.75);
  text-transform:uppercase;
  margin-bottom:32px;
  display:inline-flex;
  align-items:center;
  gap:16px;
  align-self:center;
}
.hero-eyebrow::before {
  content:'';
  display:block;
  width:32px; height:2px;
  background:rgba(255,255,255,.5);
  flex-shrink:0;
}/**/

.hero h1 {
  font-family: 'Noto Sans JP', var(--fam-display);
  font-size: clamp(3.6rem, 9.5vw, 7rem);
  line-height:1.0;
  letter-spacing:-.04em;
  color:#fff;
  max-width:900px;
  font-weight:700;
}
.hero h1 .accent {
  /*color:#f0c040;
  display:inline-block;
  border-bottom:4px solid #f0c040;
  padding-bottom:.04em;*/
color: #0ABAB5;
  display: inline-block;
 /* border-bottom: 4px solid #0ABAB5;*/
  padding-bottom: .04em;
}
.hero-sub {
  margin-top:32px;
  font-size:1.05rem;
  color:rgba(255,255,255,.82);
  max-width:750px;/**/
  font-weight:500;
  line-height:1.9;
}

.hero-actions {
  margin-top:48px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.hero .btn-ghost {
  color:#fff;
  border-color:transparent;
}
.hero .btn-ghost:hover { border-color:transparent; color:var(--g); }

.hero-scroll {
  position:relative; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:28px 8%;
  font-family:var(--fam-label);
  font-size:.72rem;
  letter-spacing:.25em;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
}
.scroll-line {
  width:40px; height:1px;
  background:rgba(255,255,255,.25);
  position:relative;
  overflow:hidden;
}
.scroll-line::after {
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background:var(--g);
  animation: scroll-ping 2s ease-in-out infinite;
}
@keyframes scroll-ping {
  0%   { left:-100%; }
  50%  { left:100%; }
  100% { left:100%; }
}

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:18px 34px;
  font-family:var(--fam-label);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:3px;
  cursor:pointer;
  transition: all .3s var(--ease-out);
  position:relative;
  overflow:hidden;
}
.btn::before {
  content:'';
  position:absolute; inset:0;
  background:var(--white);
  opacity:0;
  transition:.3s;
}
.btn:hover::before { opacity:.06; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.btn-primary {
  background:var(--g);
  color:#0a0a0a;
  font-weight:800;
  box-shadow:0 6px 20px rgba(10,186,181,.35);
}
.btn-primary:hover { box-shadow:0 10px 32px rgba(10,186,181,.6); }

.btn-ghost {
  background:transparent;
  color:var(--text);
  border:1px solid rgba(0,0,0,.18);
}
.btn-ghost:hover { border-color:var(--g-dim); color:var(--g-dim); }

/* ============================================================
   SECTION COMMONS
============================================================ */
.section { padding:120px 0; }
.container {
  width:90%;
  max-width:1250px;
  margin:0 auto;
}

.sec-head {
  text-align:center;
  margin-bottom:64px;
}
.sec-en-title {
  font-family: var(--fam-serif);
  font-style: italic;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: var(--g);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 8px;
  display: block;
}
.sec-en-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--g);
  margin: 10px auto 0;
  border-radius: 1px;
}
.sec-ja-title {
  display: block;
  font-family: var(--fam-body);
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .32em;
  font-weight: 500;
  margin-top: 10px;
}

/* ============================================================
   ABOUT
============================================================ */
.about-section {
  background: var(--steel);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  position:relative;
  overflow:hidden;
}
.about-section::before {
  content:'';
  position:absolute; right:-10%; top:-20%;
  width:600px; height:600px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(10,186,181,.06), transparent 65%);
  pointer-events:none;
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}

.about-text p {
  color:var(--muted);
  margin-bottom:20px;
  font-size:1.02rem;
  line-height:1.85;
}
.about-text p strong { color:var(--text); font-weight:500; }

.company-table {
  margin-top:40px;
  border-collapse:collapse;
  width:100%;
  font-size:.95rem;
}
.company-table tr { border-bottom:1px solid var(--rule); }
.company-table td { padding:14px 0; vertical-align:top; }
.company-table td:first-child {
  color:var(--g-dim);
  font-family:var(--fam-label);
  letter-spacing:.12em;
  font-size:.78rem;
  text-transform:uppercase;
  white-space:nowrap;
  padding-right:24px;
  font-weight:700;
}
.company-table td:last-child { color:var(--muted); line-height:1.8; }

/* ============================================================
   SERVICES
============================================================ */
.services-section { background: var(--steel); }

.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;
}

.service-card {
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 28px rgba(0,0,0,.09);
  padding:0;
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.service-card:hover {
  transform:translateY(-6px);
  box-shadow:0 14px 40px rgba(0,0,0,.14);
}
.service-card-img {
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
}
.service-card-img img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s var(--ease-out);
}
.service-card:hover .service-card-img img { transform:scale(1.06); }
.service-card-body { padding:28px 30px 36px; }
.service-card h3 {
  font-family:'Noto Sans JP', sans-serif;
  font-size:1.18rem;
  letter-spacing:.02em;
  color:var(--text);
  margin-bottom:14px;
  line-height:1.4;
  font-weight:700;
  border-left:3px solid var(--g);
  padding-left:12px;
}
.service-card p {
  font-size:.94rem;
  color:var(--muted);
  line-height:1.85;
}

/* ============================================================
   SERVICES PHOTO TICKER
============================================================ */
.svc-slider {
  overflow:hidden;
  width:100%;
  margin-top:56px;
}
.svc-slider-track {
  display:flex;
  gap:12px;
  width: calc(16 * 500px + 15 * 12px); /* 8180px — explicit for Safari */
  animation: svc-scroll 36s linear infinite;
  will-change:transform;
}
@keyframes svc-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-4096px); } /* 8×(500+12) — exact seam point */
}
.svc-slider:hover .svc-slider-track { animation-play-state:paused; }
.svc-slide {
  flex: 0 0 500px;
  height: 320px;
  overflow: hidden;
  border-radius: 4px;
}
.svc-slide img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s var(--ease-out);
}
.svc-slider:hover .svc-slide img { transform:scale(1.03); }

/* ============================================================
   ACCESS
============================================================ */
.access-section {
  background:var(--steel);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.access-grid {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:60px;
  align-items:start;
}
.access-info h3 {
  font-family:'Noto Sans JP', var(--fam-display);
  font-size:1rem;
  color:var(--g-dim);
  letter-spacing:.08em;
  font-weight:700;
  margin-bottom:14px;
 /* margin-top:32px;*/
}
.access-info h3:first-child { margin-top:0; }
.access-info p, .access-info li {
  font-size:.98rem;
  color:var(--muted);
  line-height:1.85;
}
.map-frame {
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--rule);
  position:relative;
}
.map-frame::before {
  content:'MAP';
  position:absolute; top:12px; left:12px;
  font-family:var(--fam-display);
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--g-dim);
  background:rgba(255,255,255,.92);
  padding:4px 10px;
  border-radius:2px;
  z-index:1;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.map-frame iframe {
  width:100%; height:480px;
  border:0; display:block;
  filter: grayscale(.3);
}

/* ============================================================
   CONTACT
============================================================ */
.contact-section {
  background: #0ABAB5;
  text-align:center;
  padding:100px 0;
  overflow:hidden;
}
.contact-section .contact-sub        { text-align:left; }
.contact-section .sec-en-title       { color:rgba(255,255,255,.9); }
.contact-section .sec-en-title::after { background:rgba(255,255,255,.5); }
.contact-section .sec-ja-title       { color:rgba(255,255,255,.65); }

.contact-sub {
  color:rgba(255,255,255,.85);
  font-size:.98rem;
  line-height:1.9;
  margin-left:0;
  margin-right:auto;
  text-align:left;
}

.contact-icon-row {
  display:flex;
  justify-content:center;
  gap:56px;
  flex-wrap:wrap;
  margin-top:52px;
}
.contact-icon-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:200px;
  cursor:pointer;
  transition:transform .25s var(--ease-out);
  text-decoration:none;
  color:#fff;
}
.contact-icon-item:hover { transform:translateY(-6px); }
.contact-icon-circle {
  width:86px; height:86px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s;
}
.contact-icon-item:hover .contact-icon-circle {
  background:rgba(255,255,255,.32);
  border-color:rgba(255,255,255,.6);
}
.contact-icon-circle svg { color:#fff; }
.contact-icon-label {
  font-family:var(--fam-label);
  font-size:.68rem;
  letter-spacing:.22em;
  color:rgba(255,255,255,.65);
  text-transform:uppercase;
}
.contact-icon-value {
  font-family:var(--fam-display);
  font-size:1.15rem;
  color:#fff;
  letter-spacing:.04em;
  line-height:1.2;
}

/* ============================================================
   FOOTER
============================================================ */
footer {
  background:#0a0a0a;
  border-top:1px solid rgba(255,255,255,.06);
  padding:80px 0 40px;
  color:#c8c8c8;
}
.footer-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
  margin-bottom:64px;
}
.footer-col h4 {
  font-family:var(--fam-label);
  font-size:.78rem;
  letter-spacing:.22em;
  color:var(--g);
  text-transform:uppercase;
  margin-bottom:22px;
}
.footer-col li, .footer-col p {
  font-size:.92rem;
  color:#a5a5a5;
  margin-bottom:6px;
  line-height:1.85;
}
.footer-col a { color:#a5a5a5; transition: color .2s; }
.footer-col a:hover { color:var(--g); }
.footer-copy {
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.footer-copy p {
  font-size:.73rem;
  color:#0abab5;
  font-family:var(--fam-label);
  letter-spacing:.1em;
}
.footer-logo { line-height:0; }
.footer-logo-img { height:38px; width:auto; display:block; opacity:.9; }
footer [style*="color:#555"] { color:#8a8a8a !important; }
footer [style*="color:#444"] { color:#9a9a9a !important; }

/* ============================================================
   FLOATING CTA
============================================================ */
.float-cta {
  position:fixed;
  z-index:3000;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.float-tel  { background:#1a1a1a; border-left-color:#555; }
.float-mail { background:#0ABAB5; }
.float-tel .float-num {
  font-family:var(--fam-display);
  font-size:.95rem;
  letter-spacing:.04em;
  color:var(--g-dim);
  line-height:1;
}

/* ============================================================
   BACK TO TOP
============================================================ */
.back-to-top {
  position:fixed;
  right:32px; bottom:40px;
  width:48px; height:48px;
  background: #0aba89;
  color:#fff;
  border:none; outline:none;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  opacity:0; pointer-events:none;
  transform:translateY(12px);
  transition: opacity .3s, transform .3s, background .25s;
  z-index:3000;
 /* box-shadow: 0 4px 16px rgba(10,186,181,.45);*/
}
.back-to-top.visible {
  opacity:1; pointer-events:auto;
  transform:translateY(0);
}
.back-to-top:hover { background: var(--g-dim); }

/* ============================================================
   SCROLL-IN REVEAL
============================================================ */
.reveal {
  opacity:0;
  transform:translateY(44px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.18s; }
.reveal-d2 { transition-delay:.36s; }
.reveal-d3 { transition-delay:.54s; }
.reveal-d4 { transition-delay:.72s; }

/* ============================================================
   UTILITY
============================================================ */
.text-green { color:var(--g-dim); }
.mt-8  { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-32 { margin-top:32px; }

/* ============================================================
   RESPONSIVE
============================================================ */

/* tablet */
@media(max-width:900px) {
  .about-grid { grid-template-columns:1fr; gap:48px; }
  .access-grid { grid-template-columns:1fr; }
  .map-frame iframe { height:360px; }
}

/* desktop float CTA */
@media(min-width:769px) {
  .float-cta { right:0; top:50%; transform:translateY(-50%); width:88px; }
  .float-btn {
    height:80px;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:6px;
    font-size:.65rem;
    font-family:var(--fam-label);
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#fff;
    transition:.3s;
    cursor:pointer;
    border-left:3px solid transparent;
  }
  .float-btn:hover { transform:translateX(-4px); }
  .float-btn svg { width:20px; height:20px; }
}

/* mobile */
@media(max-width:768px) {
  body { font-size:18px; }

  /* Header */
  .main-logo   { height:36px; }
  .header-tel  { display:none; }
  .hamburger   { display:flex; }
  .hamburger.open { display:none; }
  header.nav-open { z-index:2100; backdrop-filter:none; }
	header {
    height: 100px;
}
  nav {
    position:fixed; top:0; left:0; width:100vw; height:100vh;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(8px);
    flex-direction:column;
    align-items:center; justify-content:center;
    padding:0;
    transform:translateX(100%);
    transition:.45s var(--ease-out);
    z-index:2100;
  }
  nav ul {
    flex-direction:column;
    align-items:center; justify-content:center;
    gap:32px;
  }
  nav.open { transform:translateX(0); }
  nav a,
  header.scrolled nav a { font-size:1.4rem; color:var(--g); letter-spacing:.12em; }
  .nav-close {
    display:block;
    position:absolute; top:22px; right:22px;
    width:48px; height:48px;
    padding:0;
    border:none;
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    color:var(--text);
    transition: transform .35s var(--ease-out), color .25s;
  }
  .nav-close::before,
  .nav-close::after {
    content:'';
    position:absolute; left:50%; top:50%;
    width:20px; height:2px;
    background:currentColor;
    transform-origin:center;
  }
  .nav-close::before { transform: translate(-50%,-50%) rotate(45deg); }
  .nav-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }
  .nav-close:hover, .nav-close:focus-visible {
    border-color: var(--g-dim); color: var(--g-dim);
    transform: rotate(90deg); outline:none;
  }

  /* Float CTA — bottom bar */
  .float-cta  { bottom:0; left:0; right:0; flex-direction:row; height:64px; }
  .float-btn  {
    flex:1;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:4px;
    font-size:.62rem;
    font-family:var(--fam-label);
    font-weight:700;
    letter-spacing:.1em;
    color:#fff;
    transition:.3s;
    cursor:pointer;
  }
  .float-btn svg { width:18px; height:18px; }

  /* Hero */
  .hero-body    { padding:60px 6% 30px; align-items:flex-start; }
  .hero h1      { font-size:clamp(2.2rem, 9.5vw, 3rem); line-height:1; letter-spacing:-.025em; }
  .hero-sub     { font-size:1.1rem; line-height:1.8; margin-top:24px; text-align:left; }
  .hero-eyebrow { font-size:.78rem; letter-spacing:.18em; gap:8px; align-self:flex-start; }
  .hero-eyebrow::before { display:none; }
  .hero-label   { font-size:clamp(4.5rem, 22vw, 8rem); top:16%; right:auto; left:6%; }
  .hero-actions { gap:12px; }

  /* Reveal */
  .reveal {
    transform:translateY(32px);
    transition: opacity 1.5s var(--ease-out), transform 1.5s var(--ease-out);
  }

  /* Sections */
  .section      { padding:80px 0; }
  .sec-head     { margin-bottom:48px; }
  .sec-en-title { font-size:clamp(1.9rem, 8vw, 2.8rem); }
  .sec-ja-title { font-size:.76rem; letter-spacing:.22em; }

  /* About */
  .about-text p { font-size:1.08rem; line-height:1.85; }
  .company-table { font-size:1.02rem; }
  .company-table td:first-child { font-size:.78rem; }

  /* Services */
  .service-card-body { padding:20px 20px 28px; }
  .service-card h3   { font-size:1.05rem; }
  .service-card p    { font-size:.98rem; }
  .svc-slide         { flex:0 0 300px; height:200px; }
  .svc-slider-track  { gap:8px; width: calc(16 * 300px + 15 * 8px); } /* 4920px */
  @keyframes svc-scroll {
    from { transform:translateX(0); }
    to   { transform:translateX(-2464px); } /* 8×(300+8) */
  }

  /* Access */
  .access-info h3 { font-size:1.1rem; }
  .access-info p,
  .access-info li { font-size:1.05rem; line-height:1.8; }

  /* Contact */
  .contact-sub         { font-size:1rem; line-height:1.8; }
  .contact-icon-row    { flex-direction:column; align-items:center; gap:36px; margin-top:40px; }
  .contact-icon-circle { width:72px; height:72px; }
  .contact-icon-circle svg { width:26px; height:26px; }
  .contact-icon-value  { font-size:1rem; word-break:break-all; text-align:left; max-width:240px; }

  /* Buttons */
  .btn { font-size:1rem; padding:18px 28px; letter-spacing:.1em; }

  /* Footer */
  .footer-grid     { gap:32px; }
  .footer-col h4   { font-size:.8rem; margin-bottom:16px; }
  .footer-col li,
  .footer-col p    { font-size:.98rem; line-height:1.8; }
  .footer-copy p   { font-size:.78rem; }
  .footer-logo-img { height:32px; }
}

/* very small phones */
@media(max-width:380px) {
  .hero h1    { font-size:2rem; }
  .hero-label { font-size:4.5rem; }
}