/* Nialoko renewal 窶・top page (load after renewal-base.css) */
/* Layout: LP一本道。ロゴの「黄→金→緑」の帯グラデーションを面で使い、Nマークの“一本の線”が採用→育成→活躍をつなぐ。CTAは要所で繰り返す。 */
:root{
  --bg:#fbfbf3;
  --surface:#f3f2dc;
  --card:#ffffff;
  --ink:#2a2e22;
  --muted:#5e6450;
  --line:#e2e1c6;
  --sun:#e2cc3a;      /* ロゴのメインイエロー */
  --gold:#d4ae2b;     /* 中央の金 */
  --lemon:#e3dc35;    /* 明るいレモン */
  --leaf:#a3bb3a;     /* 下部の若葉 */
  --moss:#8db04b;     /* 最下部の緑 */
  --mist:#d5d683;     /* 境目のうすい黄緑 */
  --on-brand:#2a2e22;
  --deep:#2a2e22;
  --deep-fg:#f6f5e6;
  --deep-muted:#c3c6ad;
  --brand-grad:linear-gradient(180deg,#d6d57e 0%,#e2cc3a 20%,#e0d04c 36%,#d4ae2b 50%,#e3dc35 66%,#d5d683 78%,#a3bb3a 90%,#8db04b 100%);
  --brand-grad-x:linear-gradient(100deg,#e3dc35 0%,#e2cc3a 30%,#d4ae2b 55%,#a3bb3a 85%,#8db04b 100%);
  --font-display:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --font-label:"Archivo","Helvetica Neue",Arial,sans-serif;
  --wrap:1140px;
}



h1,h2,h3{font-family:var(--font-display);font-weight:900;line-height:1.4;text-wrap:balance;margin:0;letter-spacing:.01em}
img{max-width:100%;display:block}
.bigN{aspect-ratio:1/1}
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
section{padding-block:clamp(72px,10vw,120px)}
.eyebrow{font-family:var(--font-label);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.eyebrow .nm{width:16px;height:16px;color:var(--gold)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(40px,6vw,60px);max-width:720px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head h2{font-size:clamp(28px,4.2vw,42px)}
.sec-head p{color:var(--muted)}
mark{background:linear-gradient(transparent 60%,color-mix(in srgb,var(--sun) 75%,transparent) 60%);color:inherit;padding-inline:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:16px;text-decoration:none;border-radius:999px;padding:16px 30px;transition:transform .2s,box-shadow .2s,background .2s;border:2px solid transparent;line-height:1.4}
.btn .ico{font-size:20px}
.btn-primary{background:var(--deep);color:#f6f5e6;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--deep) 60%,transparent)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-brand{background:var(--sun);color:var(--on-brand);box-shadow:0 5px 0 var(--gold)}
.btn-brand:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--gold)}
.btn-ghost{border-color:currentColor;color:inherit;background:color-mix(in srgb,var(--bg) 60%,transparent)}
.btn-ghost:hover{background:var(--bg)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,88px) clamp(56px,8vw,96px);background:linear-gradient(180deg,color-mix(in srgb,var(--mist) 28%,var(--bg)) 0%,var(--bg) 70%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;position:relative}
.hero-copy{display:grid;gap:26px;min-width:0}
.pill{justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 8px}
.pill .dot{width:22px;height:22px;border-radius:50%;background:var(--brand-grad);display:grid;place-items:center;color:#fff}
.pill .dot .ico{font-size:13px;stroke-width:2.4}
.hero h1{font-size:clamp(26px,3.5vw,44px);line-height:1.4}
.hero h1 .ln{display:block}
.hero .lead{color:var(--muted);max-width:30em}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .note{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}
.hero .note span{display:inline-flex;align-items:center;gap:6px}
.hero .note .ico{color:var(--leaf);stroke-width:2.6}
.hero-visual{position:relative;min-width:0}
.keyvisual{border-radius:28px;overflow:hidden;aspect-ratio:2000/1209;max-width:100%;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--gold) 70%,transparent)}
.keyvisual img{width:100%;height:100%;object-fit:cover}
.pillars{position:relative;margin-top:-34px;margin-inline:clamp(8px,3vw,24px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 12px;display:grid;justify-items:center;gap:4px;text-align:center;box-shadow:0 10px 24px -16px rgba(40,44,30,.35)}
.pillar .ico{font-size:26px;color:var(--gold)}
.pillar small{overflow-wrap:anywhere;font-family:var(--font-label);font-weight:700;font-size:10px;letter-spacing:.16em;color:var(--muted)}
.pillar b{font-family:var(--font-display);font-size:18px;line-height:1.2}
@media (max-width:880px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}

.services-strip{background:var(--brand-grad-x);color:var(--on-brand)}
.services-strip .wrap{display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:center;padding-block:16px;font-size:14px;font-weight:700}
.services-strip span{display:inline-flex;align-items:center;gap:8px}
.services-strip .ico{font-size:18px}

/* Problems */
.problems{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prob{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:30px 28px;display:grid;gap:16px;align-content:start;min-width:0}
.prob .head{display:flex;align-items:center;gap:12px}
.prob .badge{width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--sun) 30%,var(--card));color:var(--ink);display:grid;place-items:center}
.prob .badge .ico{font-size:28px}
.prob .tag{font-weight:700;font-size:14px;color:var(--muted)}
.prob h3{font-size:21px}
.prob ul{list-style:none;margin:0;padding:16px 0 0;display:grid;gap:10px;border-top:1px dashed var(--line)}
.prob li{display:flex;gap:10px;font-size:15px;align-items:flex-start}
.prob li .ico{font-size:20px;margin-top:4px;color:var(--leaf);stroke-width:2.4}
.reassure{margin-top:44px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;text-align:center;font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.2vw,22px)}
.reassure .chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border-radius:999px;padding:8px 18px;font-size:15px}
.reassure .chip .ico{color:var(--gold);font-size:20px}
@media (max-width:880px){.problems{grid-template-columns:1fr}}

/* Bridge (brand gradient) */
.bridge{background:var(--brand-grad);color:var(--on-brand);position:relative;overflow:hidden}
.bridge .bigN{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:min(520px,60vw);height:auto;color:#fff;opacity:.38;pointer-events:none}
.bridge .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start;position:relative}
.bridge .eyebrow{color:var(--on-brand)}
.bridge .eyebrow .nm{color:#fff}
.bridge h2{font-size:clamp(28px,4.4vw,48px);margin-top:18px}
.ends{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ends li{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.2vw,22px)}
.ends .x{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;flex:none}
.ends .x .ico{font-size:18px;stroke-width:2.6}
.bridge .copy{display:grid;gap:20px;background:rgba(255,255,255,.82);border-radius:24px;padding:clamp(24px,4vw,40px);min-width:0;color:#2a2e22}
.bridge .copy strong{font-family:var(--font-display);font-size:clamp(20px,2.4vw,25px);line-height:1.6;display:block}
.bridge .copy p{color:#4c5240}
.bridge a.more{font-weight:700;text-underline-offset:6px;display:inline-flex;gap:6px;align-items:center}
@media (max-width:880px){.bridge .wrap{grid-template-columns:1fr}}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:var(--card);border:1px solid var(--line);border-radius:26px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;min-width:0}
.svc .visual{position:relative;aspect-ratio:16/10;max-width:100%;display:grid;place-items:center;color:#fff;overflow:hidden}
.svc:nth-child(1) .visual{background:linear-gradient(160deg,#e3dc35,#e2cc3a 60%,#d4ae2b)}
.svc:nth-child(2) .visual{background:linear-gradient(160deg,#e2cc3a,#d4ae2b 50%,#c9c252)}
.svc:nth-child(3) .visual{background:linear-gradient(160deg,#d5d683,#a3bb3a 55%,#8db04b)}
.svc .visual .big{width:46%;height:auto;max-width:100%;stroke:#fff;stroke-width:1.4}
.svc .visual .num{position:absolute;left:20px;top:16px;font-family:var(--font-label);font-weight:800;font-size:14px;letter-spacing:.16em;color:var(--on-brand)}
.svc .visual .verb{position:absolute;right:16px;bottom:14px;font-family:var(--font-display);font-weight:900;font-size:15px;background:#fff;color:var(--on-brand);border-radius:999px;padding:4px 14px}
.svc .body{padding:26px 26px 28px;display:grid;gap:14px;align-content:start}
.svc h3{font-size:clamp(20px,2.2vw,23px)}
.svc p{color:var(--muted);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{font-size:13px;background:var(--surface);border-radius:999px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px}
.chips .ico{font-size:14px;color:var(--leaf);stroke-width:2.6}
.textlink{font-weight:700;font-size:14px;text-underline-offset:5px;display:inline-flex;align-items:center;gap:6px}
.textlink .ico{font-size:16px}
.extra{margin-top:24px;background:var(--surface);border-radius:24px;padding:22px 26px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.extra .badge{width:52px;height:52px;border-radius:16px;background:var(--card);display:grid;place-items:center;color:var(--leaf)}
.extra .badge .ico{font-size:28px}
.extra div.t{flex:1 1 300px;min-width:0}
.extra b{font-family:var(--font-display);font-size:18px;display:block}
.extra p{color:var(--muted);font-size:14px}
@media (max-width:960px){.svc-grid{grid-template-columns:1fr}.svc{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:none}.svc .visual{aspect-ratio:auto;min-height:100%}}
@media (max-width:620px){.svc{grid-template-columns:1fr}.svc .visual{aspect-ratio:16/9}}

/* Mid CTA */
.midcta{background:var(--deep);color:var(--deep-fg);padding-block:clamp(36px,5vw,52px);position:relative;overflow:hidden}
.midcta::before{content:"";position:absolute;inset:0 auto 0 0;width:10px;background:var(--brand-grad)}
.midcta .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.midcta .t{display:flex;align-items:center;gap:18px}
.midcta .t .bubble{width:58px;height:58px;border-radius:50%;background:var(--brand-grad);display:grid;place-items:center;color:var(--on-brand);flex:none}
.midcta .t .bubble .ico{font-size:28px}
.midcta p{font-family:var(--font-display);font-weight:900;font-size:clamp(19px,2.6vw,26px);line-height:1.5}

/* Stance */
.stance{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.st{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px 24px;display:grid;gap:14px;align-content:start;min-width:0}
.st .icon{width:64px;height:64px;border-radius:50%;background:var(--surface);display:grid;place-items:center;position:relative}
.st .icon .ico{font-size:32px}
.st .icon .n{position:absolute;right:-6px;top:-4px;width:26px;height:26px;border-radius:50%;background:var(--sun);color:var(--on-brand);font-family:var(--font-label);font-weight:800;font-size:12px;display:grid;place-items:center}
.st h3{font-size:18px}
.st p{color:var(--muted);font-size:14px}
@media (max-width:1000px){.stance{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.stance{grid-template-columns:1fr}}

/* Flow */
.flow-sec{background:var(--surface)}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.flow::before{content:"";position:absolute;left:10%;right:10%;top:38px;height:6px;border-radius:3px;background:var(--brand-grad-x)}
.flow li{position:relative;display:grid;gap:10px;justify-items:center;text-align:center;min-width:0}
.flow .dot{width:82px;height:82px;border-radius:50%;background:var(--card);border:2px solid var(--line);display:grid;place-items:center;position:relative}
.flow .dot .ico{font-size:34px}
.flow .dot .n{position:absolute;left:-4px;top:-4px;width:28px;height:28px;border-radius:50%;background:var(--deep);color:#f6f5e6;font-family:var(--font-label);font-weight:800;font-size:13px;display:grid;place-items:center}
.flow h3{font-size:18px}
.flow p{font-size:14px;color:var(--muted)}
@media (max-width:880px){
  .flow{grid-template-columns:1fr;gap:20px}
  .flow::before{left:38px;right:auto;top:30px;bottom:30px;width:6px;height:auto;background:var(--brand-grad)}
  .flow li{grid-template-columns:82px 1fr;justify-items:start;text-align:left;column-gap:18px;row-gap:0}
  .flow .dot{grid-row:span 2}
  .flow h3{align-self:end}
}

/* Cases */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case{display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;padding:26px;border-radius:24px;background:var(--card);border:1px solid var(--line);text-decoration:none;transition:border-color .2s,transform .2s;min-width:0}
.case:hover{border-color:var(--gold);transform:translateY(-3px)}
.case .top{display:flex;justify-content:space-between;align-items:center}
.case .cat{font-size:12px;font-weight:700;background:var(--sun);color:var(--on-brand);padding:4px 12px;border-radius:999px}
.case .top .ico{font-size:30px;color:var(--gold)}
.case .q{display:flex;gap:10px;align-items:flex-start}
.case .q .ico{font-size:22px;margin-top:5px;color:var(--muted)}
.case h3{font-size:18px;line-height:1.65}
.case p{font-size:14px;color:var(--muted);padding-left:32px}
.case .go{font-size:14px;font-weight:700;border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;align-items:center}
@media (max-width:880px){.cases{grid-template-columns:1fr}}

/* Message */
.msg .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,80px);align-items:center}
.portrait{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:28px;overflow:hidden;background:var(--brand-grad)}
.portrait .silhouette{position:absolute;inset:auto 0 0 0;width:100%;height:82%;color:rgba(255,255,255,.55)}
.portrait .ph{position:absolute;top:18px;left:18px;font-size:12px;font-weight:700;background:rgba(255,255,255,.85);color:#2a2e22;border-radius:999px;padding:4px 12px;display:inline-flex;gap:6px;align-items:center}
.portrait .name{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(255,255,255,.92);color:#2a2e22;border-radius:18px;padding:14px 18px;display:grid;gap:2px}
.portrait .name small{font-size:12px;color:#5e6450}
.portrait .name b{font-family:var(--font-display);font-weight:900;font-size:24px}
.msg-copy{display:grid;gap:22px;min-width:0}
.msg-copy h2{font-size:clamp(28px,4vw,40px)}
.msg-copy blockquote{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(19px,2.2vw,23px);line-height:1.7;padding:20px 24px 20px 64px;background:var(--surface);border-radius:20px;position:relative}
.msg-copy blockquote .ico{position:absolute;left:20px;top:22px;font-size:30px;color:var(--gold)}
.msg-copy p{color:var(--muted);max-width:34em}
@media (max-width:880px){.msg .wrap{grid-template-columns:1fr}.portrait{max-width:380px;aspect-ratio:1/1}}

/* Final CTA */
.final{background:var(--brand-grad);color:var(--on-brand);position:relative;overflow:hidden}
.final .bigN{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,90vw);height:auto;color:#fff;opacity:.3;pointer-events:none}
.final .wrap{position:relative;display:grid;gap:26px;justify-items:center;text-align:center}
.final .eyebrow{color:var(--on-brand);justify-content:center}
.final .eyebrow .nm{color:#fff}
.final h2{font-size:clamp(28px,4.6vw,48px)}
.final p.sub{max-width:32em;color:#3c4231}
.contact-box{background:rgba(255,255,255,.9);color:#2a2e22;border-radius:28px;padding:clamp(20px,3vw,30px);display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:center;align-items:center;margin-top:6px;max-width:100%}
.final .btn-primary{font-size:18px;padding:20px 38px;background:#2a2e22;color:#f6f5e6}
.tel{display:flex;align-items:center;gap:14px;text-align:left}
.tel .ico{font-size:30px;color:#a3bb3a}
.tel small{display:block;font-size:12px;color:#5e6450}
.tel b{font-family:var(--font-label);font-weight:800;font-size:26px;letter-spacing:.04em;user-select:all;font-variant-numeric:tabular-nums;line-height:1.2}


/* Mobile sticky CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:none}
.sticky-cta .btn{width:100%;padding:14px}
@media (max-width:700px){.sticky-cta{display:block}body{padding-bottom:76px}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}