/*
Theme Name: TOP MARKETING
Theme URI: https://top-marketing.co.jp/
Author: TOP MARKETING
Description: 合同会社トップマーケティング コーポレートサイト（1カラムLP型・レスポンシブ）。
Version: 1.0
Text Domain: top-marketing
*/

:root{
    --red:#E4231B;
    --red-deep:#B01008;
    --orange:#FF6E1E;
    --amber:#FF9A33;
    --ink:#0E0D0C;
    --paper:#F4F1EA;
    --paper-2:#E9E4D9;
    --white:#FFFFFF;
    --grad:linear-gradient(122deg,#B01008 0%,#E4231B 42%,#FF6E1E 100%);
    --grad-b:linear-gradient(122deg,#E4231B 0%,#FF6E1E 60%,#FF9A33 100%);

    --disp:'Anton', sans-serif;
    --jp:'Zen Kaku Gothic New', sans-serif;
    --latin:'Archivo', sans-serif;

    --maxw:1280px;
    --gutter:clamp(20px,5vw,80px);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper);color:var(--ink);font-family:var(--jp);font-weight:500;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  ::selection{background:var(--ink);color:var(--orange);}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}

  .grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

  h1,h2,h3{font-weight:900;line-height:1.02;letter-spacing:.005em;}
  .en{font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;line-height:.9;}
  .lbl{font-family:var(--latin);font-weight:800;font-size:12px;letter-spacing:.22em;text-transform:uppercase;}

  header{position:fixed;top:0;left:0;right:0;z-index:40;padding:22px 0;transition:background .4s,padding .4s;}
  header.scrolled{background:rgba(14,13,12,.9);backdrop-filter:blur(8px);padding:14px 0;}
  .bar{display:flex;align-items:center;justify-content:space-between;}
  .brand{font-family:var(--disp);font-size:26px;letter-spacing:.02em;color:var(--white);}
  nav.main{display:flex;gap:30px;}
  nav.main a{font-family:var(--latin);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--white);opacity:.85;transition:opacity .25s,color .25s;}
  nav.main a:hover{opacity:1;color:var(--amber);}
  nav.main a:focus-visible{outline:2px solid var(--amber);outline-offset:5px;}
  .cta-top{font-family:var(--latin);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--white);padding:12px 22px;border-radius:2px;transition:transform .25s,background .25s,color .25s;}
  .cta-top:hover{background:var(--ink);color:var(--white);transform:translateY(-2px);}
  .menu-btn{display:none;background:none;border:none;color:var(--white);font-family:var(--latin);font-weight:800;font-size:13px;letter-spacing:.14em;cursor:pointer;}

  .hero{position:relative;min-height:100svh;background:var(--grad);color:var(--white);display:flex;align-items:center;overflow:hidden;}
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(to bottom,transparent,var(--ink));z-index:1;pointer-events:none;}
  .hero .huge-ghost{position:absolute;top:6%;right:-3%;font-family:var(--disp);font-size:min(30vw,440px);line-height:.8;color:rgba(255,255,255,.12);pointer-events:none;user-select:none;}
  .hero .vtag{position:absolute;top:120px;right:clamp(20px,5vw,80px);writing-mode:vertical-rl;font-family:var(--jp);font-weight:700;font-size:14px;letter-spacing:.3em;color:rgba(255,255,255,.8);z-index:3;}
  .hero .wrap{position:relative;z-index:3;width:100%;padding-bottom:clamp(40px,6vh,70px);padding-top:120px;}
  .hero .eyebrow{margin-bottom:26px;color:rgba(255,255,255,.9);}
  .hero h1{font-family:var(--jp);font-weight:900;font-size:clamp(2.1rem,9.5vw,7.2rem);line-height:1.13;letter-spacing:.005em;color:var(--white);}
  .hero h1 span{display:block;white-space:nowrap;}
  .hero h1 .stroke{color:transparent;-webkit-text-stroke:2px var(--white);}
  .hero .subline{margin-top:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
  .hero .subline .en{font-size:clamp(1.1rem,2.4vw,2rem);color:var(--white);}
  .hero .subline .jp{font-family:var(--jp);font-weight:500;font-size:clamp(.9rem,1.3vw,1.05rem);max-width:24em;color:rgba(255,255,255,.92);line-height:1.8;}
  .hero .scrollcue{position:absolute;bottom:26px;left:var(--gutter);z-index:3;font-family:var(--latin);font-weight:800;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:10px;}
  .hero .scrollcue::before{content:"";width:34px;height:2px;background:var(--white);animation:cue 2s ease-in-out infinite;transform-origin:left;}
  @keyframes cue{0%,100%{transform:scaleX(.3);opacity:.5;}50%{transform:scaleX(1);opacity:1;}}

  .marquee{background:var(--ink);color:var(--white);padding:26px 0;overflow:hidden;white-space:nowrap;}
  .marquee .track{display:inline-block;animation:scroll 26s linear infinite;}
  .marquee span{font-family:var(--disp);font-size:clamp(2.4rem,6vw,4.6rem);text-transform:uppercase;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.9);padding:0 .3em;}
  .marquee span.fill{color:var(--orange);-webkit-text-stroke:0;}
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  .about{background:var(--ink);color:var(--white);padding:clamp(90px,14vh,180px) 0;position:relative;overflow:hidden;}
  .about::before{content:"";position:absolute;top:0;left:0;right:0;height:200px;background:linear-gradient(to bottom,var(--ink),transparent);z-index:1;pointer-events:none;}
  .about .wrap{display:flex;align-items:center;gap:clamp(30px,6vw,80px);position:relative;z-index:2;}
  .about .photobg{position:absolute;inset:0;z-index:0;background:url(assets/img/office-sm.jpg) center/cover no-repeat;filter:blur(6px) grayscale(1) brightness(.85);transform:scale(1.08);}
  .about .photobg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,7,.60),rgba(8,7,7,.82));}
  .about .bgnote{position:absolute;top:18px;left:clamp(20px,5vw,80px);z-index:3;font-family:var(--latin);font-weight:800;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.5);}
  .about .bigkanji{font-family:var(--jp);font-weight:900;font-size:min(40vw,400px);line-height:.78;color:#fff;flex-shrink:0;}
  .about-body{flex:1;}
  .about .lbl{color:var(--orange);margin-bottom:26px;display:block;}
  .about-lead{font-family:var(--jp);font-weight:900;font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.75;letter-spacing:.02em;}
  .about-lead .g{background:var(--grad-b);-webkit-background-clip:text;background-clip:text;color:transparent;}

  .approach{padding:clamp(90px,14vh,170px) 0;}
  .approach .head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:50px;}
  .approach .head h2{font-family:var(--jp);font-size:clamp(2.2rem,6vw,4.5rem);}
  .approach .head h2 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .approach .lbl{color:var(--red);}
  .steprow{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,5vw,60px);align-items:center;padding:38px 0;border-top:3px solid var(--ink);}
  .steprow .n{font-family:var(--disp);font-size:clamp(4.5rem,15vw,11rem);line-height:.8;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .steprow .body{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;}
  .steprow h3{font-family:var(--jp);font-size:clamp(1.8rem,4.5vw,3.2rem);}
  .steprow .e{font-family:var(--disp);font-size:clamp(1.2rem,3vw,2.2rem);color:var(--red);}
  .steprow p{font-family:var(--jp);font-weight:500;font-size:1rem;color:#4a4744;width:100%;max-width:30em;}

  .services{position:relative;overflow:hidden;background:var(--ink);color:var(--white);padding:clamp(90px,14vh,170px) 0;min-height:clamp(760px,92vh,960px);display:flex;align-items:center;}
  .services::before{content:"";position:absolute;top:0;left:0;right:0;height:170px;background:linear-gradient(to bottom,var(--paper),transparent);z-index:1;pointer-events:none;}
  .svc-bg{position:absolute;inset:0;z-index:0;background:url(assets/img/track-sm.jpg) center/cover no-repeat;filter:grayscale(1) blur(1.5px) brightness(.95);transform:scale(1.06);}
  .svc-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,12,.42),rgba(14,13,12,.66));}
  .svc-vtext{position:absolute;left:clamp(4px,1.2vw,24px);top:0;writing-mode:vertical-rl;font-family:var(--disp);font-size:clamp(3.6rem,7.6vw,7rem);line-height:1;letter-spacing:.02em;text-transform:uppercase;background:linear-gradient(to bottom,var(--ink) 0%,var(--ink) 15%,var(--orange) 22%,var(--orange) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;z-index:1;pointer-events:none;user-select:none;}
  .services .wrap{position:relative;z-index:2;width:100%;}
  .services .lbl{color:var(--orange);margin-bottom:36px;display:block;}
  .scards{display:flex;gap:22px;}
  .scard{flex:1;position:relative;display:block;padding:2.6rem 2rem 3.2rem;background:rgba(14,13,12,.5);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.2);border-radius:4px;transition:transform .3s,border-color .3s,background .3s;overflow:hidden;}
  .scard::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--grad-b);transition:width .4s;}
  .scard:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.4);background:rgba(14,13,12,.62);}
  .scard:hover::before{width:100%;}
  .scard-e{display:block;font-family:var(--latin);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:20px;}
  .scard-name{font-family:var(--jp);font-weight:900;font-size:clamp(1.9rem,4.5vw,3.2rem);line-height:1.1;margin-bottom:14px;}
  .scard:hover .scard-name{background:var(--grad-b);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .scard-d{font-family:var(--jp);font-weight:500;font-size:.95rem;line-height:1.85;color:rgba(255,255,255,.82);max-width:22em;}
  .scard-go{position:absolute;right:24px;bottom:22px;font-family:var(--disp);font-size:1.6rem;color:rgba(255,255,255,.45);transition:transform .3s,color .3s;}
  .scard:hover .scard-go{color:var(--orange);transform:translateX(6px);}
  @media(max-width:720px){.scards{flex-direction:column;}.svc-vtext{display:none;}.services{min-height:0;}}

  .imgsec{position:relative;min-height:70vh;display:flex;align-items:center;overflow:hidden;background:#3a1512;}
  .imgsec .bg{position:absolute;inset:0;background:
      linear-gradient(115deg,rgba(176,16,8,.86),rgba(255,110,30,.7)),
      radial-gradient(circle at 70% 30%,#7a2a10,#2a0d08 70%);}
  .imgsec .bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.35;mix-blend-mode:overlay;}
  .imgsec .note{position:absolute;top:20px;left:20px;z-index:3;font-family:var(--latin);font-weight:800;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.8);background:rgba(0,0,0,.35);padding:7px 12px;border-radius:2px;}
  .imgsec .wrap{position:relative;z-index:3;color:var(--white);}
  .imgsec h2{font-family:var(--jp);font-size:clamp(2.2rem,7vw,5rem);line-height:1.1;}
  .imgsec .en{font-size:clamp(1rem,2.4vw,1.8rem);margin-top:20px;color:rgba(255,255,255,.9);}

  .company{padding:clamp(90px,13vh,160px) 0;}
  .company .lbl{color:var(--red);margin-bottom:30px;display:block;}
  .company .grid{max-width:880px;}
  .company h2{font-family:var(--jp);font-size:clamp(2rem,5vw,3.4rem);}
  table.info{width:100%;border-collapse:collapse;}
  table.info th,table.info td{text-align:left;vertical-align:top;padding:1.1rem 0;border-bottom:1px solid #d9d3c7;font-weight:500;font-size:.95rem;}
  table.info th{width:30%;font-family:var(--latin);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a857b;padding-right:1rem;line-height:2;}
  table.info tr:first-child th,table.info tr:first-child td{border-top:1px solid #d9d3c7;}

  .contact{background:var(--grad);color:var(--white);text-align:center;padding:clamp(110px,18vh,220px) 0;position:relative;overflow:hidden;}
  .contact .ghost{position:absolute;bottom:-8%;left:50%;transform:translateX(-50%);font-family:var(--disp);font-size:min(34vw,520px);color:rgba(255,255,255,.12);line-height:.8;pointer-events:none;}
  .contact .wrap{position:relative;z-index:3;}
  .contact .lbl{color:rgba(255,255,255,.9);margin-bottom:24px;display:block;}
  .contact h2{font-family:var(--jp);font-size:clamp(2.4rem,7vw,5.5rem);line-height:1.15;margin-bottom:40px;}
  .contact .big-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--jp);font-weight:700;font-size:15px;letter-spacing:.08em;color:#fff;background:transparent;border:1.6px solid rgba(255,255,255,.85);padding:12px 14px 12px 26px;border-radius:999px;transition:background .3s,color .3s,transform .3s,border-color .3s;}
  .contact .big-btn:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px);}
  .contact .big-btn .btn-arw{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid currentColor;font-size:13px;transition:transform .3s;}
  .contact .big-btn:hover .btn-arw{transform:translateX(3px);}

  footer{background:var(--ink);color:var(--white);padding:40px 0;}
  .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
  .foot .brand{font-size:22px;}
  .foot .copy{font-family:var(--latin);font-weight:700;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.5);}

  .eyebrow{font-family:var(--latin);font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.7em;}
  .eyebrow::before{content:"";width:24px;height:2px;background:currentColor;display:inline-block;}

  .ribbon{position:fixed;z-index:50;bottom:16px;right:16px;background:var(--ink);color:var(--paper);font-family:var(--latin);font-weight:700;font-size:11px;letter-spacing:.08em;padding:8px 13px;border-radius:2px;opacity:.85;}

  @media(max-width:860px){
    nav.main,.cta-top{display:none;}
    .menu-btn{display:block;}
    .hero .vtag{display:none;}
    .about .wrap{flex-direction:column;align-items:flex-start;gap:6px;}
    .about .bigkanji{font-size:40vw;}
    .company .grid{grid-template-columns:1fr;gap:2rem;}
    .steprow{grid-template-columns:1fr;gap:6px;}
    .steprow .n{font-size:22vw;}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;scroll-behavior:auto;}
    .marquee .track{animation:none;}
  }

/* ---- mobile menu ---- */
.mobile-menu{position:fixed;inset:0;z-index:55;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:22px;padding:0 var(--gutter);transform:translateY(-100%);transition:transform .45s cubic-bezier(.4,.05,.2,1);}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a{font-family:var(--jp);font-weight:900;font-size:2rem;color:#fff;}
.mobile-menu a .en{display:block;font-family:var(--latin);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:4px;}
.mobile-menu .mm-close{position:absolute;top:24px;right:var(--gutter);background:none;border:none;color:#fff;font-family:var(--latin);font-weight:800;letter-spacing:.1em;font-size:14px;cursor:pointer;}
@media(min-width:861px){.mobile-menu{display:none;}}
@media(min-width:768px){.about .photobg{background-image:url(assets/img/office.jpg);}.svc-bg{background-image:url(assets/img/track.jpg);}}