:root{
  --ink:#0C2628; --ink2:#3D5A5C; --mute:#7C9698; --note:#5A6B83;
  --teal:#00BEC8; --teal-dk:#00969E; --teal-deep:#0A2A2E; 
  --green:#1CC37A;
  --orange:#F57821; --orange-dk:#D65E0A;
  --paper:#F2F8F8; --paper2:#E8F4F4; --rule:#D8E4E4; --input-bg:#F7F8F8;
  --marker:#DDFA7C;
  --grad:linear-gradient(165deg,#1CC37A 8%,#00BEC8 67%);
  --r-s:8px; --r-m:12px; --r-l:16px; --r-full:999px;
  --shadow-s:0 4px 16px rgba(10,42,46,.08);
  --shadow-m:0 12px 30px rgba(10,42,46,.12);
  --shadow-l:0 26px 56px rgba(10,42,46,.18);
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px;
  --sp-6:48px; --sp-7:56px; --sp-8:64px; --sp-9:72px; --sp-10:80px; --sp-12:96px;
  --sec-y:88px; --gutter:28px;
  --ease:cubic-bezier(.25,.8,.25,1);
  --spring:cubic-bezier(.2,1.4,.4,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  color:var(--ink);background:#fff;line-height:1.9;overflow-x:clip;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt";
}
h1,h2,h3,h4{line-height:1.45}
img{max-width:100%;height:auto}
.en{font-family:"Archivo",sans-serif}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutter)}
::selection{background:var(--teal);color:#fff}

/* ===== scroll progress ===== */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:1000}

/* ===== buttons ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-weight:700;text-decoration:none;cursor:pointer;border:none;white-space:nowrap;overflow:hidden;
  font-size:16px;padding:18px 38px;border-radius:var(--r-s);
  transition:transform .3s var(--ease),box-shadow .3s,color .35s;isolation:isolate}
.btn::before{content:"";position:absolute;top:-2px;bottom:-2px;left:-14%;width:0;transform:skewX(-14deg);
  transition:width .5s var(--ease);z-index:-1}
.btn:hover::before{width:135%}
.btn:hover{transform:translateY(-2px)}
.btn .arw{width:15px;height:15px;flex:none;transition:transform .35s var(--ease)}
.icon-arrow {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-image: url('../images/common/arrow.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}
.btn:hover .arw{transform:translateX(6px)}
.btn-orange{color:#fff;background:var(--orange);box-shadow:0 10px 26px rgba(245,121,35,.32)}
.btn-orange::before{background:var(--orange-dk)}
.btn-orange:hover{box-shadow:0 14px 34px rgba(245,121,35,.42)}
.btn-white{color:var(--teal-dk);background:#fff;box-shadow:0 10px 26px rgba(10,42,46,.14)}
.btn-white::before{background:var(--teal)}
.btn-white:hover{color:#fff}
.btn-teal{color:#fff;background:var(--teal);box-shadow:0 10px 26px rgba(0,190,200,.32)}
.btn-teal::before{background:var(--teal-dk)}
.btn-ink{color:#fff;background:var(--ink)}
.btn-ink::before{background:#08383C}
.btn-outline{color:var(--teal-dk);background:#fff;border:2px solid var(--teal);box-shadow:none}
.btn-outline::before{background:var(--teal)}
.btn-outline:hover{color:#fff}
.chip{display:inline-flex;align-items:center;font-size:13px;font-weight:700;background:#fff;color:var(--orange);
  border-radius:3px;padding:1px 9px}


/* ===== spacing ===== */
/* 強制リセット用(多用厳禁) */
.m0 {margin: 0 !important;} .mt0{ margin-top: 0 !important;} .mb0{ margin-bottom: 0 !important;}
.p0 {padding: 0 !important;} .pt0 {padding-top: 0 !important;} .pb0 {padding-bottom: 0 !important;}
/* margin */
.mt1em {margin-top:1em !important;} .mt2em {margin-top:2em !important;} .mt3em {margin-top:3em !important;} .mt4em {margin-top:4em !important;}
.mr1em {margin-right:1em !important;} .mr2em {margin-right:2em !important;} .mr3em {margin-right:3em !important;} .mr4em {margin-right:4em !important;}
.mbHem {margin-bottom:0.5em !important;} .mb1em {margin-bottom:1em !important;} .mb2em {margin-bottom:2em !important;} .mb3em {margin-bottom:3em !important;} .mb4em {margin-bottom:4em !important;}
.ml1em {margin-left:1em !important;} .ml2em {margin-left:2em !important;} .ml3em {margin-left:3em !important;} .ml4em {margin-left:4em !important;}
/* padding */
.pt1em {padding-top:1em !important;} .pt2em {padding-top:2em !important;} .pt3em {padding-top:3em !important;} .pt4em {padding-top:4em !important;}
.pr1em {padding-right:1em !important;} .pr2em {padding-right:2em !important;} .pr3em {padding-right:3em !important;} .pr4em {padding-right:4em !important;}
.pb1em {padding-bottom:1em !important;} .pb2em {padding-bottom:2em !important;} .pb3em {padding-bottom:3em !important;} .pb4em {padding-bottom:4em !important;}
.pl1em {padding-left:1em !important;} .pl2em {padding-left:2em !important;} .pl3em {padding-left:3em !important;} .pl4em {padding-left:4em !important;}
/* 旧margin(使用禁止。リニューアル後削除します) */
.mt5 {margin-top:5px;} .mt10 {margin-top:10px;} .mt15 {margin-top:15px;} .mt20 {margin-top:20px;}
.mr5 {margin-right:5px;} .mr10 {margin-right:10px;} .mr15 {margin-right:15px;} .mr20 {margin-right:20px;}
.mb5 {margin-bottom:5px;} .mb10 {margin-bottom:10px;} .mb15 {margin-bottom:15px;} .mb20 {margin-bottom:20px;}
.ml5 {margin-left:5px;} .ml10 {margin-left:10px;} .ml15 {margin-left:15px;} .ml20 {margin-left:20px;} .ml40 {margin-left:40px;}
/* 旧padding(使用禁止。リニューアル後削除します) */
.pt5 {padding-top:5px;} .pt10 {padding-top:10px;} .pt15 {padding-top:15px;} .pt20 {padding-top:20px;}
.pr5 {padding-right:5px;} .pr10 {padding-right:10px;} .pr15 {padding-right:15px;} .pr20 {padding-right:20px;}
.pb5 {padding-bottom:5px;} .pb10 {padding-bottom:10px;} .pb15 {padding-bottom:15px;} .pb20 {padding-bottom:20px;}
.pl5 {padding-left:5px;} .pl10 {padding-left:10px;} .pl15 {padding-left:15px;} .pl20 {padding-left:20px;}



/* ===== header ===== */
header{position:fixed;top:0;left:0;right:0;z-index:900;padding:18px 0;transition:.4s var(--ease)}
header.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);padding:12px 0;box-shadow:var(--shadow-s)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{position:relative;text-decoration:none;color:var(--ink);font-weight:900;font-size:23px;letter-spacing:.08em;display:flex;align-items:baseline;gap:2px}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{position:relative;color:var(--ink);text-decoration:none;font-size:14px;font-weight:700}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:2px;background:var(--teal);
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:flex;gap:10px}
.nav-cta .btn{font-size:13.5px;padding:11px 20px}
@media(max-width:960px){.nav-links{display:none}}
@media(max-width:560px){.nav-cta{display:none}}

/* ---- mobile menu ---- */
.menu-btn{display:none;position:relative;z-index:970;width:46px;height:46px;border:none;background:#fff;border-radius:var(--r-m);
  cursor:pointer;box-shadow:var(--shadow-s);flex:none;align-items:center;justify-content:center}
.menu-btn i{position:absolute;left:13px;right:13px;height:2.5px;border-radius:2px;background:var(--ink);transition:.35s var(--ease)}
.menu-btn i:nth-child(1){top:15px}
.menu-btn i:nth-child(2){top:22px}
.menu-btn i:nth-child(3){top:29px}
.menu-btn.open i:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-btn.open i:nth-child(2){opacity:0}
.menu-btn.open i:nth-child(3){top:22px;transform:rotate(-45deg)}
@media(max-width:960px){.menu-btn{display:flex}}
.m-ov{position:fixed;inset:0;background:rgba(10,42,46,.45);z-index:940;opacity:0;pointer-events:none;transition:opacity .4s}
.m-ov.open{opacity:1;pointer-events:auto}
.m-nav{position:fixed;top:0;right:0;bottom:0;width:min(320px,84vw);background:#fff;z-index:950;
  transform:translateX(105%);transition:transform .45s var(--ease);padding:96px 28px 32px;overflow-y:auto;
  box-shadow:-16px 0 50px rgba(10,42,46,.15);display:flex;flex-direction:column}
.m-nav.open{transform:none}
.m-close{position:absolute;top:var(--sp-2);right:var(--sp-2);width:44px;height:44px;border:none;border-radius:var(--r-m);
  background:var(--paper);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.m-close svg{width:20px;height:20px}
.m-nav ul{list-style:none;display:grid;gap:2px;margin-bottom:var(--sp-3)}
.m-nav ul a{display:flex;align-items:center;justify-content:space-between;padding:15px 6px;color:var(--ink);
  text-decoration:none;font-size:15.5px;font-weight:700;border-bottom:1.5px solid var(--rule)}
.m-nav ul a::after{content:"";width:8px;height:8px;border-top:2px solid var(--teal);border-right:2px solid var(--teal);transform:rotate(45deg)}
.m-nav .m-cta{display:grid;gap:12px;margin-top:auto}
.m-nav .m-cta .btn{width:100%}

.icon-close {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-image: url('../images/common/close.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}

/* ===== load reveal ===== */
.lf{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s var(--ease)}
body.loaded .lf{opacity:1;transform:none}
.dl1{transition-delay:.05s}.dl2{transition-delay:.2s}.dl3{transition-delay:.35s}.dl4{transition-delay:.55s}.dl5{transition-delay:.75s}.dl6{transition-delay:.95s}

/* ===== MV ===== */
.mv{position:relative;padding:4em 0 1.25em;overflow:hidden;
  background:radial-gradient(85% 75% at 82% 18%,var(--paper2) 0%,#fff 58%)}
.mv .grid-bg{position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,190,200,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,190,200,.08) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(70% 60% at 70% 35%,#000,transparent 80%)}
.mv .ring{position:absolute;border-radius:50%;border:1.5px solid rgba(0,190,200,.24);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 32%,#000 62%)}
.mv .r1{width:820px;height:820px;top:-180px;right:-220px}
.mv .r2{width:600px;height:600px;top:-40px;right:-100px;border-color:rgba(0,190,200,.17)}
.mv .r3{width:400px;height:400px;top:70px;right:20px;border-color:rgba(0,190,200,.15)}
@keyframes spin{to{transform:rotate(360deg)}}
.mv-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center}
@media(max-width:900px){
  .mv{padding:104px 0 56px}
  .mv-grid{grid-template-columns:1fr;gap:40px}
  .mv-visual img{max-width:min(62vw,340px)}
  .mv-visual .shield-ring{width:min(76vw,410px)}
}
@media(max-width:560px){
  .mv h1 .l1{font-size:clamp(22px,7.2vw,30px)}
  .mv h1 .l2{font-size:clamp(56px,20vw,96px)}
}
.mv-badge{display:inline-block;font-size:clamp(13px,1.6vw,17px);font-weight:700;letter-spacing:.1em;
  color:#fff;background:var(--ink);padding:.32em 1.35em;
  clip-path:polygon(.5em 0,100% 0,calc(100% - .5em) 100%,0 100%)}
.mv h1{margin:28px 0 0;font-weight:900;line-height:1.1}
.mv h1 .l1{display:block;font-size:clamp(24px,3.4vw,42px);color:var(--ink2);letter-spacing:.05em;margin-bottom:4px}
.mv h1 .l2{display:inline-block;font-size:clamp(50px,10.5vw,138px);letter-spacing:.03em;color:var(--ink)}
.mv h1 .l2 .ch{display:inline-block;position:relative;z-index:1;transform:translateY(1.05em);opacity:0;transition:transform .8s var(--ease),opacity .5s}
body.loaded .mv h1 .l2 .ch{transform:none;opacity:1}
.mv h1 .l2{position:relative}
.mv h1 .l2 .uline{position:absolute;left:.04em;right:.06em;bottom:.04em;height:.24em;background:var(--grad);border-radius:4px;
  z-index:0;opacity:.55;
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) 1.05s}
body.loaded .mv h1 .l2 .uline{transform:scaleX(1)}
.mv-list{margin:34px 0 0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;max-width:600px}
@media(max-width:560px){.mv-list{grid-template-columns:1fr}}
.mv-list li{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--rule);
  border-radius:var(--r-s);padding:12px 16px;font-size:clamp(13.5px,1.5vw,15.5px);font-weight:700;line-height:1.5;cursor:default}
.mv-list li svg{width:19px;height:19px;flex:none}
.mv-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.mv-cta .btn{font-size:clamp(15px,1.8vw,18px);padding:19px 40px}
.mv-visual{position:relative;display:flex;justify-content:center}
.mv-visual .shield-ring{position:absolute;top:50%;left:50%;width:min(112%,620px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;border:1.5px dashed rgba(0,190,200,.3);
  mask-image:linear-gradient(90deg,transparent 0%,#000 40%)}
.mv-visual img{position:relative;width:100%;max-width:520px;height:auto;
  filter:drop-shadow(0 12px 26px rgba(10,42,46,.09));
  opacity:0;transform:translateY(28px) scale(.95);transition:opacity .9s ease .45s,transform 1s var(--ease) .45s;
  animation:mvfloat 7s ease-in-out 1.5s infinite}
body.loaded .mv-visual img{opacity:1;transform:none}
@keyframes mvfloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
.mv-visual .ph-fallback{display:none;width:100%;max-width:460px;aspect-ratio:4/5;border:1.5px dashed var(--rule);
  background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(10,42,46,.03) 14px 15px),var(--paper);
  flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;border-radius:var(--r-l)}
.mv-visual .ph-fallback p{font-size:12.5px;color:var(--mute);line-height:2}
.mv-visual.noimg img,.mv-visual.noimg .shield-ring{display:none}
.mv-visual.noimg .ph-fallback{display:flex}

/* ===== section common ===== */
section{padding:var(--sec-y) 0}
.sec-h{margin-bottom:var(--sp-7)}
.sec-h h2{font-size:clamp(28px,4vw,46px);font-weight:900;letter-spacing:.01em;line-height:1.45}
.sec-h.center{text-align:center}
.marker{background-image:linear-gradient(165deg,rgba(28,195,122,.55) 8%,rgba(0,190,200,.55) 67%);
  background-repeat:no-repeat;background-size:100% .24em;background-position:0 94%}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .85s var(--ease)}
.rv.shown{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-36px);transition:opacity .7s ease,transform .85s var(--ease)}
.rv-r{opacity:0;transform:translateX(36px);transition:opacity .7s ease,transform .85s var(--ease)}
.rv-l.shown,.rv-r.shown{opacity:1;transform:none}

/* ===== 課題 ===== */
#problem{position:relative}
.prob-list{display:grid;gap:0;border-top:1.5px solid var(--rule)}
.prob{position:relative;display:flex;gap:clamp(24px,5vw,64px);align-items:center;padding:var(--sp-6) 20px}
.prob::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .25s}
.prob.shown::after{transform:scaleX(1)}
.prob:nth-child(2){margin-left:clamp(0px,4vw,56px)}
.prob:nth-child(3){margin-left:clamp(0px,8vw,112px)}
.prob .n{font-family:"Archivo";font-size:clamp(40px,5vw,64px);font-weight:800;line-height:1;flex:none;
  color:transparent;-webkit-text-stroke:1.5px var(--teal);
  opacity:0;transform:translateX(-26px);transition:opacity .6s ease .15s,transform .8s var(--ease) .15s}
.prob.shown .n{opacity:1;transform:none}
.prob p{opacity:0;transform:translateY(14px);transition:opacity .6s ease .35s,transform .8s var(--ease) .35s}
.prob.shown p{opacity:1;transform:none}
.prob p{font-size:clamp(16px,2.3vw,26px);font-weight:700;line-height:1.75}

/* ===== マモルオとは？ ===== */
#about{position:relative;background:var(--teal);color:#fff;overflow:hidden}
#about .ring{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.18)}
#about .ar1{width:560px;height:560px;top:-180px;right:-140px}
#about .ar2{width:380px;height:380px;bottom:-140px;left:-100px;border-style:dashed}
.about-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:center}
@media(max-width:880px){.about-grid{grid-template-columns:1fr}}
.about-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:28px}
.about-h .badge{background:var(--ink);color:#fff;font-size:clamp(22px,2.8vw,34px);font-weight:700;letter-spacing:.1em;
  padding:0 1em;
  clip-path:polygon(.5em 0,100% 0,calc(100% - .5em) 100%,0 100%)}
.about-h .rest{font-size:clamp(22px,2.8vw,34px);font-weight:900}
.about-big{font-size:clamp(25px,3.4vw,44px);font-weight:900;line-height:1.55;margin-bottom:22px;text-shadow:0 4px 24px rgba(0,90,80,.18)}
.about-body{font-size:clamp(15px,1.8vw,19px);font-weight:500;color:rgba(255,255,255,.96)}
.venn{position:relative;width:min(440px,86vw);margin:0 auto;aspect-ratio:1}
.venn .c{position:absolute;width:56%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  text-align:center;font-weight:900;font-size:clamp(14px,1.75vw,17px);line-height:1.65;padding:8%;color:#fff;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.65);
  opacity:0;transform:scale(.7);transition:opacity .6s ease,transform .8s var(--spring)}
.venn.shown .c{opacity:1;transform:scale(1)}
.venn .c1{top:-2%;left:22%;align-items:flex-start;padding-top:16%}
.venn .c2{bottom:1%;left:-4%;transition-delay:.12s}
.venn .c3{bottom:1%;right:-4%;transition-delay:.24s}
.venn .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:37%;aspect-ratio:1;border-radius:50%;
  background:#fff;color:var(--teal-dk);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-weight:900;font-size:clamp(17px,2.2vw,21px);z-index:2;box-shadow:0 18px 44px rgba(0,80,70,.3);
  transition:transform .8s var(--spring) .4s}
.venn.shown .core{transform:translate(-50%,-50%) scale(1)}
.venn .core small{font-size:11.5px;font-weight:700;color:var(--ink2);margin-top:2px;letter-spacing:.06em}

/* ===== できること ===== */
#service{background:#fff}
.svc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:center;padding:var(--sp-9) 0;border-top:1.5px solid var(--rule)}
.svc:first-child{border-top:none; padding-top:0;}
.svc:nth-child(even) .svc-text{order:2}
@media(max-width:840px){.svc{grid-template-columns:1fr;gap:32px;padding:54px 0}.svc:nth-child(even) .svc-text{order:0}}
.svc .n{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.svc .n .num{font-family:"Archivo";font-size:16px;font-weight:700;letter-spacing:.2em;color:var(--teal-dk)}
.svc .n .slash{width:30px;height:3px;background:var(--teal);transform:skewX(-30deg)}
.svc h3{font-size:clamp(22px,2.8vw,32px);font-weight:900;margin-bottom:14px}
.svc p{font-size:clamp(14px,1.6vw,17px);color:var(--ink2)}
.svc .ph{position:relative;aspect-ratio:16/9;min-height:220px;width:100%;border-radius:var(--r-l);overflow:hidden;background:
  repeating-linear-gradient(-45deg,transparent 0 14px,rgba(10,42,46,.04) 14px 15px),var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.svc .ph p{font-size:11.5px;color:var(--mute);letter-spacing:.05em;text-align:center;padding:0 18px;line-height:1.8}
.svc .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;z-index:1;display:block}
.svc .ph .ico{width:32px;height:32px;border:1.5px solid var(--rule);border-radius:50%;position:relative}
.svc .ph .ico::before{content:"";position:absolute;inset:9px;border-radius:50%;border:1.5px solid var(--rule)}

/* ===== CTA band ===== */
.band{position:relative;background:var(--grad);color:#fff;padding:var(--sp-9) 0;overflow:hidden}
.band .skewpanel{position:absolute;top:-10%;bottom:-10%;left:-12%;width:50%;background:rgba(255,255,255,.07);transform:skewX(-18deg)}
.band .skewpanel.s2{left:auto;right:-30%;width:34%;background:rgba(255,255,255,.05)}
.band .in{position:relative;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.band h2{font-size:clamp(22px,3.2vw,36px);font-weight:900}
.band .btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.band .btn{font-size:clamp(16px,2vw,21px);padding:20px 46px}

/* ===== ご支援の流れ ===== */
#flow{background:var(--paper)}
#flow .eyecatch{font-size:19px;font-weight:700;color:var(--teal-dk);margin-bottom:14px;display:flex;align-items:center;gap:12px}
#flow .eyecatch::before{content:"";width:30px;height:3px;background:var(--teal);transform:skewX(-30deg)}
#flow .sec-h h2{font-size:clamp(21px,2.7vw,34px)}
.flow-wrap{position:relative}
.flow-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
@media(max-width:920px){.flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.flow-grid{grid-template-columns:1fr}}
.fstep{position:relative;background:#fff;border:1.5px solid var(--rule);border-radius:var(--r-l);padding:var(--sp-4) var(--sp-3);display:flex;flex-direction:column}
@media(min-width:921px){
  .fstep h3{min-height:3.2em}
  .fstep .desc{min-height:5.7em}
}
/* stepper: 各カードの真上に番号ドット、ドット同士を進行ラインで接続 */
.flow-stepper{position:relative;display:none;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--sp-2)}
@media(min-width:921px){.flow-stepper{display:grid}}
.flow-stepper .line{position:absolute;top:50%;left:12.5%;right:12.5%;height:2px;background:var(--rule);transform:translateY(-50%);overflow:hidden;border-radius:2px}
.flow-stepper .line b{display:block;height:100%;width:0;background:var(--grad);transition:width 1.6s var(--ease) .2s}
.flow-wrap.shown .flow-stepper .line b{width:100%}
.flow-stepper span{position:relative;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin:0 auto;border-radius:50%;background:#fff;border:2px solid var(--teal);
  color:var(--teal-dk);font-family:"Archivo";font-weight:700;font-size:14px;
  opacity:0;transform:scale(.5);transition:opacity .4s ease,transform .6s var(--spring)}
.flow-wrap.shown .flow-stepper span{opacity:1;transform:scale(1)}
.flow-wrap.shown .flow-stepper span:nth-child(2){transition-delay:.15s}
.flow-wrap.shown .flow-stepper span:nth-child(3){transition-delay:.5s}
.flow-wrap.shown .flow-stepper span:nth-child(4){transition-delay:.85s}
.flow-wrap.shown .flow-stepper span:nth-child(5){transition-delay:1.2s}
@media(min-width:561px) and (max-width:920px){
  .fstep h3{min-height:3.2em}
  .fstep .desc{min-height:5.7em}
}
.fstep .lbl{display:inline-flex;align-self:flex-start;font-family:"Archivo";font-size:12px;font-weight:700;letter-spacing:.2em;
  color:#fff;background:var(--teal);padding:5px 14px;margin-bottom:16px;transform:skewX(-8deg)}
.fstep .lbl span{display:inline-block;transform:skewX(8deg)}
.fstep h3{font-size:19px;font-weight:900;line-height:1.6;margin-bottom:10px}
.fstep .desc{font-size:14.5px;color:var(--ink2);margin-bottom:16px}
.fstep ul{list-style:none;display:grid;gap:var(--sp-1);border-top:1.5px solid var(--rule);padding-top:var(--sp-2)}
.fstep ul li{position:relative;padding-left:20px;font-size:14.5px;font-weight:700;line-height:1.7}
.fstep ul li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:7px;
  border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);transform:rotate(-45deg)}
.flow-note{margin-top:36px;font-size:13.5px;color:var(--note)}

/* ===== LRMの強み（ダーク＝守りの重厚感） ===== */
#strength{position:relative;background:var(--teal-deep);color:#fff;overflow:hidden}
#strength::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,190,200,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,190,200,.1) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(70% 70% at 50% 30%,#000,transparent 85%)}
#strength .glow{position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(120px);
  background:rgba(0,190,200,.22);top:-240px;right:-160px}
#strength .sec-h h2{color:#fff;position:relative}
#strength .sec-h h2::after{content:"";display:block;width:60px;height:4px;background:var(--grad);margin:22px auto 0;transform:skewX(-30deg)}
.st-copy{position:relative;margin:0 auto 8px;text-align:center;font-size:clamp(14.5px,1.7vw,17px);color:rgba(255,255,255,.9)}
/*.logos{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--sp-1);max-width:1120px;margin:0 auto}
@media(max-width:920px){.logos{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.logos{grid-template-columns:repeat(2,1fr)}}
.logos .lg{height:59px;background:#fff;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;
  font-family:"Archivo";font-size:11px;letter-spacing:.1em;color:#8FA6A8;box-shadow:0 4px 14px rgba(0,0,0,.18)}*/
.logos{position:relative;max-width:1120px;margin:0 auto}
.logos img{width:100%;height:auto;display:block;border-radius:var(--r-s)}
.logos .logo-pc{display:block}
.logos .logo-sp{display:none}
@media(max-width:768px){.logos .logo-pc{display:none}.logos .logo-sp{display:block}}

/* ===== 料金 ===== */
#price{background:var(--paper)}
#price .sec-h{margin-bottom:18px}
.price-sub{text-align:center;margin-bottom:56px}
.price-sub .v{font-size:clamp(22px,2.8vw,32px);font-weight:900;color:var(--ink)}
.price-sub .v::after{content:"";display:block;width:64px;height:4px;background:var(--grad);margin:16px auto 0;transform:skewX(-30deg)}
.price-sub p{margin-top:14px;font-size:14.5px;font-weight:500;letter-spacing:.08em;color:var(--ink2)}
.price-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);max-width:880px;margin:0 auto}
.pcard{background:#fff;border:1.5px solid var(--rule);border-radius:var(--r-l);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column}
@media(max-width:560px){.pcard{padding:var(--sp-4) var(--sp-3)}}
.pcard.main{position:relative;overflow:hidden;border-color:transparent;box-shadow:var(--shadow-l)}
.pcard.main::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:var(--grad)}
.pcard .lbl{display:inline-flex;align-self:flex-start;font-size:15px;font-weight:700;color:#fff;background:var(--teal);
  padding:7px 20px;border-radius:4px;margin-bottom:28px;transform:skewX(-8deg)}
.pcard .lbl span{display:inline-block;transform:skewX(8deg)}
.inc{list-style:none;display:grid;gap:0}
@media(min-width:761px){.inc{grid-template-columns:1fr 1fr;column-gap:var(--sp-6)}}
.inc li{display:flex;gap:12px;align-items:flex-start;font-size:15px;font-weight:700;line-height:1.75;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.inc li:last-child{border-bottom:none}
.inc li svg{width:19px;height:19px;flex:none;margin-top:5px}
.pcard.spot{background:#fff;border:1.5px solid var(--rule)}
.pcard.spot .lbl{background:var(--ink2)}
.pcard.spot .body{font-size:15.5px;font-weight:700;line-height:2;color:var(--ink)}
.pcard.spot .notes{margin-top:auto;font-size:13px;color:var(--note);font-weight:400;line-height:2.1;}



/* ===== 会社概要 ===== */
#company .grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:80px;align-items:start}
@media(max-width:900px){#company .grid{grid-template-columns:1fr;gap:36px}}
#company .eyebrow{font-weight:900;font-size:15px;letter-spacing:.24em;color:var(--teal-dk);text-transform:uppercase;font-family:"Archivo"}
#company h2{font-size:clamp(30px,4vw,46px);font-weight:900;margin-top:8px}
#company h2::after{content:"";display:block;width:56px;height:4px;background:var(--grad);margin-top:20px;transform:skewX(-30deg)}
#company .sticky-side{position:sticky;top:110px}
#company table{width:100%;border-collapse:collapse}
#company th,#company td{padding:22px 14px;font-size:15px;line-height:1.85;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule)}
#company th{width:150px;font-weight:700;white-space:nowrap;color:var(--ink)}
#company td{color:var(--ink2)}
#company td ul{list-style:none;display:grid;gap:4px}
#company td .grp{font-weight:700;display:block;margin-top:14px;color:var(--ink)}
#company td .grp:first-child{margin-top:0}
#company td a{color:var(--teal-dk);}
@media(max-width:560px){
  #company th,#company td{display:block;width:100%}
  #company th{padding:16px 8px 2px;border-bottom:none;color:var(--teal-dk);font-size:13px}
  #company td{padding:2px 8px 16px}
}

/* ===== ssl note ===== */
.sslBox{border-top:1px solid var(--rule);padding:var(--sp-2);display: flex;justify-content: center;gap: 0.5em;align-items: center;}
.sslBox .logo{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap}
.sslBox a img{width:150px;height:58px;object-fit:contain;display:block}
.sslBox p.txt{font-size:12.5px;color:var(--ink2);max-width:42em;line-height:1.9;margin:0}
@media(max-width:560px){.sslBox .logo{justify-content:flex-start}}

/* cv zone */
#cv{position:relative;background:var(--grad);overflow:hidden}
#cv .fh{position:relative;text-align:center;color:#fff;margin-bottom:42px;}
#cv .fh h2{font-size:clamp(26px, 3.6vw, 46px);font-weight:900;}
#cv .cv-btns{position:relative;display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
#cv .cv-big{font-size:clamp(17px,2.3vw,23px);padding:var(--sp-3) var(--sp-8)}
@media(max-width:560px){#cv .cv-big{width:100%}}

/* ===== footer ===== */
footer{background:var(--teal);color:#fff;padding:28px 0}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.foot .name{font-weight:900;font-size:21px;letter-spacing:.08em}
.foot .cr{font-size:12px;color:rgba(255,255,255,.92)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin-top:var(--sp-2);list-style:none}
.foot-links a{display:inline-flex;align-items:center;gap:5px;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-size:12.5px;font-weight:500}
.foot-links a svg{width:11px;height:11px;flex:none}
.foot-links a:hover{opacity:.75}
@media(max-width:560px){.foot{flex-direction:column;align-items:flex-start}}

/* ===== sticky mobile cta ===== */
#sticky{position:fixed;left:0;right:0;bottom:0;z-index:850;display:none;gap:1px;background:var(--rule);
  box-shadow:0 -8px 30px rgba(10,42,46,.18);transform:translateY(110%);transition:transform .4s var(--ease)}
#sticky.show{transform:none}
#sticky a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:16px 8px;font-size:14px;font-weight:900;text-decoration:none}
#sticky .s-doc{background:var(--orange);color:#fff}
#sticky .s-doc .chip{font-size:11px;padding:0 7px}
#sticky .s-contact{background:var(--teal);color:#fff}
@media(max-width:760px){#sticky{display:flex}footer{padding-bottom:calc(28px + 64px)}}

@media(max-width:760px){:root{--sec-y:64px;--gutter:22px}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}