
: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;}
.icon-arrow.leftArw{transform: scale(-1, 1);}
.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%}

/* ===== 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}


/* ===== 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}


/* ===== form ===== */
#form{position:relative;background:var(--teal);overflow:hidden}
#form .ring{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.18)}
#form .fr1{width:480px;height:480px;top:-140px;left:-120px}
#form .fr2{width:340px;height:340px;bottom:-120px;right:-80px;border-style:dashed}
#form .fh{position:relative;text-align:center;color:#fff;margin-bottom:42px}
#form .fh h2{font-size:clamp(26px,3.6vw,46px);font-weight:900}
#form .fh p{margin-top:10px;font-size:14.5px;font-weight:500}
.form-card{position:relative;max-width:760px;margin:0 auto;background:#fff;border-radius:var(--r-l);padding:var(--sp-7);
  box-shadow:var(--shadow-l)}
.form-card p{ margin-bottom:1em;}
@media(max-width:600px){.form-card{padding:var(--sp-4) var(--sp-3)}}

.ftab{position:relative;font:inherit;font-size:clamp(15px,1.9vw,18px);font-weight:700;color:var(--mute);
  background:none;border:none;cursor:pointer;padding:16px 10px;transition:color .3s}
.ftab::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--grad);
  transform:scaleX(0);transition:transform .35s var(--ease)}
.ftab.active{color:var(--ink)}
.ftab.active::after{transform:scaleX(1)}
.fgroup{margin-bottom:var(--sp-3)}
.fgroup .flabel{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:10px}
.badge-req{font-size:12px;font-weight:700;color:#fff;background:var(--teal);border-radius:4px;padding:2px 9px}
.badge-opt{font-size:12px;font-weight:700;color:#4B5C74;background:#E3E9F2;border-radius:4px;padding:2px 9px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--rule);
  border-radius:var(--r-m);padding:16px 19px;transition:.25s}
input::placeholder,textarea::placeholder{color:#AFC4C5}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,190,200,.16)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2300969E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
select:invalid,select option[value=""]{color:#AFC4C5}
select option{color:var(--ink)}
textarea{min-height:170px;resize:vertical}
#msgGroup{display:none}
.form-card.mode-contact #msgGroup{display:block}
.consent{display:flex;gap:10px;align-items:center;margin:28px 0;font-size:14.5px;font-weight:500;flex-wrap:wrap}
.consent input{width:18px;height:18px;accent-color:var(--teal);flex:none}
.fsubmit .btn{width:100%;font-size:17px;letter-spacing:.06em;padding:21px;border-radius:var(--r-m)}
.fmsg{display:none;margin-top:18px;text-align:center;font-size:13.5px;font-weight:700;color:var(--teal-dk);
  background:var(--paper);border-radius:var(--r-m);padding:14px}
.fmsg.show{display:block}


/* ===== 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}}

/* ===== 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}}

@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}
}

/* form page additions */
body{background:var(--teal)}
.fp-header{position:static;padding:20px 0;background:transparent}
.fp-header .logo{color:#fff}
.fp-back{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;opacity:.9}
.fp-back:hover{opacity:1}
.fp-back svg{width:14px;height:14px}
#form{padding-top:var(--sp-4)}

.tCenter{text-align:center;}
.formBtn{text-align:center;margin-top:2em;}
.errmsg{
  color:var(--orange);
  background-color:rgba(245, 120, 33, 0.12);
  border-left:3px solid var(--orange);
  border-radius: 0 4px 4px 0;
  padding: 8px 16px;
  margin: 8px 0;
  font-size: 0.9rem;
  font-weight: 600;
}
