*{margin:0;padding:0;box-sizing:border-box}
:root{
  --red:#e8402a;
  --red2:#f05a40;
  --bg:#ffffff;
  --bg2:#f5f4f2;
  --bg3:#eeede9;
  --text:#1e1e1e;
  --text2:#444444;
  --muted:#777;
  --border:#e0ddd8;
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Zen Kaku Gothic New',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;width:100%;position:relative;-webkit-font-smoothing:antialiased;font-weight:400}

/* HEADER & NAV */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border);
  transition: all 0.3s ease;
}
.header.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  height: 64px;
  width: 100%;
}
.nav-logo img{height:34px;display:block}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{color:var(--text2);text-decoration:none;font-size:.82rem;font-weight:700;letter-spacing:.04em;padding:.2rem 0;border-bottom:1.5px solid transparent;transition:all .2s}
.nav-links a:hover{color:var(--red);border-bottom-color:var(--red)}
.nav-cta{background:var(--red);color:#fff;border:none;padding:.55rem 1.4rem;font-size:.82rem;font-family:'Zen Kaku Gothic New',sans-serif;cursor:pointer;font-weight:700;letter-spacing:.06em;transition:background .2s}
.nav-cta:hover{background:var(--red2)}

/* HAMBURGER BUTTON */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 110;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: left center;
}
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(2px, -1px);
  background-color: var(--red);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(2px, 1px);
  background-color: var(--red);
}
.nav-links .mobile-cta-wrapper {
  display: none;
}

/* HERO */
#hero{
  min-height:auto; /* 画面比率ではなくコンテンツの高さに合わせる */
  height:auto;
  padding-top:64px;
  display:flex;align-items:center;
  position:relative;overflow:hidden;
  background-color:var(--red);
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-deco{display:none}
.hero-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:5rem 2rem 2.5rem; /* 上下の無駄な余白をきゅっと詰める */
  width:100%;
  max-width:920px;
  margin:0 auto;
}
.hero-eyebrow{font-size:1.3rem;color:#ffffff;font-weight:700;letter-spacing:.12em;margin-bottom:1.4rem;display:flex;align-items:center;gap:.7rem;justify-content:center}
.hero-eyebrow::before{display:none}
.hero-logo{display:block;width:min(720px,92%);height:auto;margin:0 auto 2.4rem;filter:brightness(0) invert(1)}
.hero-lead{font-size:1rem;color:rgba(255,255,255,0.85);line-height:1.95;font-weight:400;margin:0 auto 2.8rem;max-width:700px;text-align:left;letter-spacing:.02em}
.hero-lead strong{color:#ffffff;font-weight:700;display:block;margin-bottom:.5rem;font-size:1.25rem;letter-spacing:.03em;text-align:left}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn-main{background:var(--red);color:#fff;border:none;padding:.8rem 2rem;font-size:.88rem;font-family:'Zen Kaku Gothic New',sans-serif;cursor:pointer;font-weight:700;letter-spacing:.06em;transition:background .2s;text-decoration:none;display:inline-block}
.btn-main:hover{background:var(--red2)}
.btn-sub{background:#fff;color:var(--text);border:1.5px solid var(--border);padding:.8rem 2rem;font-size:.88rem;font-family:'Zen Kaku Gothic New',sans-serif;cursor:pointer;font-weight:600;letter-spacing:.05em;transition:all .2s;text-decoration:none;display:inline-block}
.btn-sub:hover{border-color:var(--red);color:var(--red)}

/* オレンジ背景上のヒーローセクション内ボタン用の上書き設定 */
#hero .btn-main {
  background: #ffffff;
  color: var(--red);
  border: 1.5px solid #ffffff;
}
#hero .btn-main:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--red2);
}
#hero .btn-sub {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
#hero .btn-sub:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* TICKER */
.ticker{background:var(--red);color:#fff;padding:.6rem 0;overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;gap:2.5rem;animation:ticker 22s linear infinite}
.ticker-track span{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.ticker-track .sep{color:rgba(255,255,255,0.35)}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* STATS */
.stats{background:var(--bg2);border-bottom:1px solid var(--border);padding:2.5rem 3rem}
.stats-row{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.stt{text-align:center;padding:0 1.5rem;border-right:1px solid var(--border)}
.stt:last-child{border-right:none}
.stt-n{font-size:2.5rem;font-weight:900;color:var(--red);line-height:1;letter-spacing:-.02em;font-family:'Zen Kaku Gothic New',sans-serif}
.stt-l{font-size:.73rem;color:var(--muted);margin-top:.4rem;letter-spacing:.08em}

/* SHARED SECTION STYLES */
section{padding:6rem 3rem}
.wrap{max-width:1100px;margin:0 auto}
.sh{margin-bottom:3.5rem}
.sh-en{font-size:.68rem;letter-spacing:.3em;color:var(--red);font-weight:700;text-transform:uppercase;margin-bottom:.5rem}
.sh-ja{font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:700;line-height:1.3;color:var(--text);font-family:'Zen Kaku Gothic New',sans-serif;letter-spacing:.04em;white-space:nowrap}
.sh-desc{color:var(--text2);font-size:.92rem;line-height:1.9;font-weight:400;max-width:500px;margin-top:.8rem}

/* SERVICES */
#services{background:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border)}
.svc{padding:2.5rem;border-right:1px solid var(--border);position:relative;overflow:hidden;transition:background .2s}
.svc:last-child{border-right:none}
.svc:hover{background:var(--bg2)}
.svc-no{font-size:.65rem;color:var(--muted);letter-spacing:.16em;margin-bottom:1.4rem;font-weight:500}
.svc-h{font-size:1.15rem;font-weight:700;line-height:1.5;margin-bottom:.8rem;color:var(--text);font-family:'Zen Kaku Gothic New',sans-serif;letter-spacing:.03em;font-weight:700}
.svc-p{font-size:.83rem;color:var(--text2);line-height:1.9;font-weight:400;margin-bottom:1.4rem}
.svc-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.stag{font-size:.66rem;color:var(--red);border:1px solid rgba(232,64,42,0.22);padding:.18rem .55rem;letter-spacing:.03em}
.svc-line{position:absolute;bottom:0;left:0;height:2px;width:0;background:var(--red);transition:width .3s}
.svc:hover .svc-line{width:100%}

/* SAAS */
.saas-wrap{background:var(--bg2);padding:5rem 3rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.saas-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.45fr;gap:4.5rem;align-items:center}
.saas-badge{display:inline-block;background:var(--red);color:#fff;font-size:.62rem;font-weight:700;padding:.2rem .65rem;letter-spacing:.1em;margin-bottom:1.2rem}
.saas-h{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:900;line-height:1.35;margin-bottom:1.2rem;color:var(--text)}
.saas-p{font-size:.88rem;color:var(--text2);line-height:1.95;font-weight:300}
.saas-btns{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
.btn-rakuten{background:#bf0000;color:#fff;border:none;padding:.85rem 2rem;font-size:.88rem;font-family:'Zen Kaku Gothic New',sans-serif;cursor:pointer;font-weight:700;letter-spacing:.06em;transition:all .25s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border-radius:4px}
.btn-rakuten:hover{background:#d60000;transform:translateY(-2px);box-shadow:0 6px 15px rgba(191,0,0,0.25)}
.btn-yahoo{background:#ff0033;color:#fff;border:none;padding:.85rem 2rem;font-size:.88rem;font-family:'Zen Kaku Gothic New',sans-serif;cursor:pointer;font-weight:700;letter-spacing:.06em;transition:all .25s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border-radius:4px}
.btn-yahoo:hover{background:#ff2255;transform:translateY(-2px);box-shadow:0 6px 15px rgba(255,0,51,0.25)}
.mock{background:#fff;border:1px solid var(--border);box-shadow:5px 5px 0 var(--border)}
.mock-tb{background:var(--bg3);padding:.55rem .9rem;display:flex;align-items:center;gap:.35rem;border-bottom:1px solid var(--border)}
.dot{width:8px;height:8px;border-radius:50%}
.mock-lbl{font-size:.58rem;color:var(--muted);margin-left:.3rem;letter-spacing:.05em}
.mock-b{padding:1.1rem}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:.9rem}
.kpi{background:var(--bg2);padding:.7rem;border:1px solid var(--border)}
.kpi-l{font-size:.52rem;color:var(--muted);margin-bottom:.2rem;letter-spacing:.06em}
.kpi-v{font-size:1rem;font-weight:900;color:var(--text)}
.kpi-v.r{color:var(--red)}
.kpi-v.g{color:#197a48}
.kbadge{font-size:.48rem;padding:.08rem .28rem;margin-left:.2rem;font-weight:700}
.kbadge.g{background:#e6f4ee;color:#197a48}
.kbadge.y{background:#fef3e2;color:#a06000}
.chart{background:var(--bg2);padding:.75rem;border:1px solid var(--border);margin-bottom:.7rem}
.chart-lbl{font-size:.52rem;color:var(--muted);margin-bottom:.45rem;letter-spacing:.08em}
.bars{display:flex;align-items:flex-end;gap:.22rem;height:48px}
.bar{flex:1;background:rgba(232,64,42,0.15)}
.bar.hi{background:var(--red)}
.tbl{border:1px solid var(--border)}
.tbl-h{display:grid;grid-template-columns:2fr 1fr 1fr;padding:.38rem .65rem;background:var(--bg3);font-size:.5rem;color:var(--muted);letter-spacing:.06em;border-bottom:1px solid var(--border)}
.tbl-r{display:grid;grid-template-columns:2fr 1fr 1fr;padding:.38rem .65rem;font-size:.6rem;color:var(--text);border-bottom:1px solid var(--border)}
.tbl-r:last-child{border-bottom:none}
.bg{font-size:.5rem;background:#e6f4ee;color:#197a48;padding:.08rem .3rem;font-weight:700}
.by{font-size:.5rem;background:#fef3e2;color:#a06000;padding:.08rem .3rem;font-weight:700}

/* ABOUT */
#about{background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.acard{border:1px solid var(--border);padding:2rem;background:#fff}
.acard-logo{padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border)}
.acard-logo img{height:30px;display:block}
.arow{display:flex;justify-content:space-between;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.86rem}
.arow:last-child{border-bottom:none}
.akey{color:var(--muted);font-size:.75rem;flex-shrink:0;margin-right:1rem}
.aval{font-weight:500;text-align:right;color:var(--text)}
.aval a{color:inherit;text-decoration:none;transition:color .2s}
.aval a:hover{color:var(--red);text-decoration:underline}
.at h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;line-height:1.4;margin-bottom:1.4rem;font-family:'Zen Kaku Gothic New',sans-serif;letter-spacing:.04em;font-weight:700}
.at p{font-size:.9rem;color:var(--text2);line-height:2;font-weight:400;margin-bottom:.9rem}
.at strong{color:var(--text);font-weight:700}
.vals{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:2rem}
.val{background:var(--bg2);padding:1.1rem;border-left:2.5px solid var(--red)}
.val-no{font-size:.62rem;color:var(--red);font-weight:700;letter-spacing:.1em;margin-bottom:.3rem}
.val-t{font-size:.8rem;color:var(--text);font-weight:500;line-height:1.55}

/* CONTACT */
#contact{background:var(--bg2);border-top:1px solid var(--border)}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:start}
.cl h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;line-height:1.4;margin-bottom:1rem;font-family:'Zen Kaku Gothic New',sans-serif;letter-spacing:.04em;font-weight:700}
.cl p{font-size:.88rem;color:var(--text2);line-height:1.95;font-weight:400;margin-bottom:2rem}
.cinfos{display:flex;flex-direction:column;gap:.9rem}
.ci{display:flex;gap:.8rem;align-items:flex-start}
.ci-ico{width:34px;height:34px;background:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:.85rem}
.ci-lbl{font-size:.68rem;color:var(--muted);margin-bottom:.1rem;letter-spacing:.04em}
.ci-val{font-size:.85rem;font-weight:500;color:var(--text)}
.ci-val a{color:inherit;text-decoration:none;transition:color .2s}
.ci-val a:hover{color:var(--red);text-decoration:underline}
.fwrap{background:#fff;padding:2.5rem;border:1px solid var(--border)}
.fg{margin-bottom:0.65rem}
.fl{font-size:.75rem;font-weight:700;display:block;margin-bottom:.4rem;color:var(--text);letter-spacing:.04em}
.fl .req{color:var(--red)}
.fi{width:100%;border:1.5px solid var(--border);padding:.72rem .85rem;font-family:'Noto Sans JP',sans-serif;font-size:.86rem;color:var(--text);outline:none;background:#fff;transition:border-color .2s}
.fi:focus{border-color:var(--red)}
.fi::placeholder{color:#ccc}
textarea.fi{min-height:115px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.fsub{width:100%;background:var(--red);color:#fff;border:none;padding:.85rem;font-size:.88rem;font-family:'Zen Kaku Gothic New',sans-serif;cursor:pointer;font-weight:700;letter-spacing:.07em;transition:background .2s;margin-top:.3rem}
.fsub:hover{background:var(--red2)}

/* FOOTER */
footer{background:#1a1a1a;padding:3rem 3rem 2.2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.fl-logo img{height:28px;filter:brightness(0) invert(1);opacity:.85;display:block}
.fl-nav{display:flex;gap:1.8rem;flex-wrap:wrap;justify-content:center}
.fl-nav a{font-size:.78rem;color:rgba(255,255,255,0.45);text-decoration:none;transition:color .2s;font-weight:500}
.fl-nav a:hover{color:var(--red)}
.fl-sns{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;margin:.2rem 0 .5rem}
.fl-sns a{font-size:.73rem;color:rgba(255,255,255,0.35);text-decoration:none;transition:color .2s;display:flex;align-items:center;gap:.4rem}
.fl-sns a:hover{color:#fff}
.fl-copy{font-size:.65rem;color:rgba(255,255,255,.22);letter-spacing:.04em}

/* RESPONSIVE */
@media(max-width:960px){
  nav{padding:0 1.5rem}
  .nav-links{
    display: flex;
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: -5px 0 25px rgba(0,0,0,0.05);
    flex-direction: column;
    align-items: flex-start;
    padding: 6rem 2.5rem;
    gap: 1.8rem;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 105;
    border-left: 1px solid var(--border);
  }
  .nav-links.active {
    right: 0;
  }
  .nav-links li {
    width: 100%;
  }
  .nav-links a {
    font-size: 1.05rem;
    width: 100%;
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bg2);
  }
  .nav-links a:hover, .nav-links a.active {
    color: var(--red);
    border-bottom-color: var(--red);
  }
  .hamburger {
    display: flex;
  }
  .nav-cta {
    display: none;
  }
  .nav-links .mobile-cta-wrapper {
    display: block;
    width: 100%;
    margin-top: 1rem;
  }
  .mobile-cta-btn {
    text-align: center;
    background: var(--red);
    color: #fff !important;
    border: none !important;
    padding: .8rem 2rem;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .06em;
    transition: background .2s;
    text-decoration: none;
    display: block !important;
    border-bottom: none !important;
  }
  .mobile-cta-btn:hover {
    background: var(--red2);
  }
  #hero{min-height:auto}
  .hero-content{padding:4rem 1.5rem 3rem}
  .hero-logo{width:min(300px,85%)}
  section,.saas-wrap,.stats{padding:4rem 1.5rem}
  .stats-row{grid-template-columns:1fr 1fr}
  .stt{border-right:none;border-bottom:1px solid var(--border);padding:1rem 0}
  .stt:nth-child(2n){border-right:none}
  .stt:last-child{border-bottom:none}
  .svc-grid{grid-template-columns:1fr}
  .svc{border-right:none;border-bottom:1px solid var(--border)}
  .svc:last-child{border-bottom:none}
  .saas-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .saas-btns{gap:.8rem;justify-content:center;margin-top:1.8rem}
  .btn-rakuten,.btn-yahoo{width:100%;text-align:center}
  .frow{grid-template-columns:1fr}
  footer{flex-direction:column;gap:1.1rem;text-align:center;padding:1.8rem 1.5rem}
  .fl-nav{flex-wrap:wrap;justify-content:center;gap:1rem}
}