
:root,:root[data-tone="offwhite"]{
  --bg0:#f6f4ef;
  --bg0-rgb:246,244,239;
  --bg:#f6f4ef; --bg2:#f6f4ef;
  --card:#ffffff;
  --card2:#edf2f9;
  --menu-bg:#ffffff;
  --tx:#0b1526;
  --mu:#46536a;
  --ln:rgba(11,30,60,.12); --ln2:rgba(11,30,60,.24);
  --acc:#1257b8;
  --acc2:#0a4596;
  --acc-rgb:18,87,184;
  --lbl:#00717a;
  --teal-rgb:0,124,130;
  --grad:linear-gradient(100deg,#0d55b8 0%,#0a6aa8 55%,#00737b 100%);
  --ink:#ffffff;
  --shade-rgb:11,30,60;
  --ph-a:rgba(11,30,60,.05); --ph-b:rgba(11,30,60,.02); --ph-bg:#ebe8e1;
  --amb-tx:#8a5300; --amb-bg:rgba(214,140,20,.12); --amb-ln:rgba(176,108,0,.45); --amb-mark:rgba(240,180,80,.32);
  --hero-dots:#1452b5 #115fb2 #0e6cad #0b78a7 #0884a0 #058e99 #6d9fe0;
  --hero-map:34,70,136; --hero-map-alpha:.66;
  --hero-trail:18,87,184; --hero-trail-alpha:.14;
  --hero-blend:source-over;
  --hero-sheen:rgba(118,196,236,.9);
  --ba-blue:13,85,184; --ba-mid:10,106,168; --ba-teal:0,124,130;
  --ba-white:11,21,38;
  --ba-sky:30,96,182; --ba-ice:0,98,160;
  --ba-muted:70,83,106; --ba-neu:24,44,80; --ba-mapb:58,96,156;
  --ba-amb:206,120,0; --ba-amb-hi:170,88,0; --ba-amb-hi2:196,110,10; --ba-amb-hi3:200,116,14; --ba-amb-tx:150,78,0; --ba-amb-dk:236,180,120;
  --ba-face:255,255,255; --ba-face2:255,255,255; --ba-face3:255,255,255; --ba-face4:255,255,255; --ba-face5:232,246,246;
  --ba-shadow:rgba(246,244,239,.95);
  --ba-blend:source-over; --ba-glow:.6;
}
:root[data-tone="white"]{
  --bg0:#ffffff; --bg0-rgb:255,255,255; --bg:#ffffff; --bg2:#ffffff;
  --card:#f4f7fb;
  --card2:#e8eff8;
  --menu-bg:#ffffff;
  --tx:#0a1424; --mu:#4a576d;
  --ln:rgba(15,40,80,.11); --ln2:rgba(15,40,80,.22);
  --acc:#0f56c0; --acc2:#0a4499; --acc-rgb:15,86,192;
  --lbl:#00717a;
  --ph-a:rgba(15,40,80,.05); --ph-b:rgba(15,40,80,.02); --ph-bg:#edf1f6;
  --ba-shadow:rgba(255,255,255,.95);
  --ba-face5:236,247,248;
}

html{background:var(--bg0);color:var(--tx);-webkit-font-smoothing:auto}
body,main>section,main>section:nth-child(odd),main>section.doc-contact,.site-footer{background-color:var(--bg0)}
main>section.glow-bg{background-image:none}
::selection{background:rgba(var(--acc-rgb),.18)}

.btn.primary:hover{box-shadow:0 0 0 4px rgba(var(--teal-rgb),.18)}
.anchor-btns .btn{background:rgba(var(--shade-rgb),.025)}
.sx .svc4-card .btn:hover{box-shadow:0 0 0 4px rgba(var(--teal-rgb),.18)}
.sec:has(.ck-in:checked) .offer-cta .btn.primary{box-shadow:0 0 0 6px rgba(var(--teal-rgb),.16),0 16px 40px rgba(var(--acc-rgb),.18)}


.site-header{background:rgba(var(--bg0-rgb),.84);border-bottom-color:var(--ln)}
.gnav .sub{background:var(--menu-bg);box-shadow:0 16px 48px rgba(var(--shade-rgb),.14)}
.gnav .sub a:hover,.gnav .sub a[aria-current]{background:rgba(var(--acc-rgb),.07)}

main>section.phead{background:var(--bg0)}

.svc4-card,.sx .svc4>li,.member,.q-cols,.point-box,.ib,.offer2,.steps li,.rel-grid article,.post-side,.doc article,.form,.dc-box,.cc-pack{box-shadow:0 1px 2px rgba(var(--shade-rgb),.04)}
.ck-btn:has(.ck-in:checked){border-color:rgba(var(--teal-rgb),.6)}
.ck:has(input:checked){border-color:rgba(var(--teal-rgb),.6)}
.steps li:not(:last-child)::before{background:linear-gradient(90deg,rgba(var(--teal-rgb),0),rgba(var(--teal-rgb),.8))}
@media (max-width:860px){
  .steps li:not(:last-child)::before{background:linear-gradient(180deg,rgba(var(--teal-rgb),.8),rgba(var(--teal-rgb),.15))}
  .steps li{box-shadow:none}
}


.ph small{opacity:1}

.ph-i{background:var(--amb-mark)}
.form input[type="text"],.form input[type="tel"],.form input[type="email"],.form textarea{background:var(--bg0)}
:root[data-tone="white"] .form input[type="text"],:root[data-tone="white"] .form input[type="tel"],:root[data-tone="white"] .form input[type="email"],:root[data-tone="white"] .form textarea{background:#fff}
.form input:focus,.form textarea:focus{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.2)}
.form input[type="checkbox"]{accent-color:#007c82}
.sample-badge{background:var(--amb-bg);border-color:var(--amb-ln);color:var(--amb-tx)}
.req{color:var(--amb-tx)}
.form-note{background:var(--amb-bg);border-color:var(--amb-ln);color:var(--amb-tx)}
.cc-news .pc-date .ph-i{color:var(--amb-tx)}

#hero{--h-bg0:var(--bg0);--h-bg1:var(--bg0);--h-tx:var(--tx);--h-mu:var(--mu);--h-ln:var(--ln);--h-ln2:rgba(var(--shade-rgb),.3);--h-teal:#00717a;background:var(--bg0)}
#hero .btn:hover{border-color:rgba(var(--teal-rgb),.75)}
#hero .btn.primary{background:var(--tx);color:#fff;border-color:var(--tx)}
#hero .btn.primary:hover{background:#1d2e4c;border-color:#1d2e4c;color:#fff}
#hero .hero-glow{background:radial-gradient(circle,rgba(var(--acc-rgb),.055) 0%,rgba(var(--teal-rgb),.028) 38%,transparent 66%)}

.phead.anim-bg::after{background:
    linear-gradient(90deg,rgba(var(--bg0-rgb),.93) 0%,rgba(var(--bg0-rgb),.87) 50%,rgba(var(--bg0-rgb),.55) 62%,rgba(var(--bg0-rgb),.08) 69%,rgba(var(--bg0-rgb),0) 74%),
    linear-gradient(180deg,rgba(var(--bg0-rgb),.6) 0%,rgba(var(--bg0-rgb),0) 16%,rgba(var(--bg0-rgb),0) 80%,var(--bg0) 100%)}
.phead.anim-bg h1,.phead.anim-bg .catch,.phead.anim-bg .lead{text-shadow:0 1px 18px rgba(var(--bg0-rgb),.95),0 0 2px rgba(var(--bg0-rgb),.7)}
@media (max-width:760px){
  .phead.anim-bg::after{background:linear-gradient(180deg,rgba(var(--bg0-rgb),.93) 0%,rgba(var(--bg0-rgb),.87) 38%,rgba(var(--bg0-rgb),.66) 62%,rgba(var(--bg0-rgb),.7) 88%,var(--bg0) 100%)}
}

.cc-hd-btn{border-color:rgba(var(--teal-rgb),.5);background:rgba(var(--teal-rgb),.05)}
.cc-hd-btn:hover{border-color:var(--lbl);background:rgba(var(--teal-rgb),.11)}
@media (max-width:1100px){
  .cc-menu-care{border-color:rgba(var(--teal-rgb),.45);background:radial-gradient(90% 120% at 100% 0%,rgba(var(--acc-rgb),.07),transparent 70%),var(--card);box-shadow:0 1px 2px rgba(var(--shade-rgb),.05)}
}
.cc-band{background:var(--bg0)}
.cc-band-tag{border-color:rgba(var(--teal-rgb),.5)}
.cc-pack{background:radial-gradient(70% 90% at 100% 0%,rgba(var(--acc-rgb),.06) 0%,rgba(var(--acc-rgb),0) 70%),var(--card)}
.cc-new{border-color:rgba(var(--teal-rgb),.55)}
@media (max-width:760px){
  .cc-sbar{background:rgba(var(--bg0-rgb),.96);box-shadow:0 -6px 24px rgba(var(--shade-rgb),.08)}
  .cc-sbar-x:hover{background:rgba(var(--shade-rgb),.06)}
}
.cc-ph{background:radial-gradient(80% 90% at 80% 10%,rgba(var(--acc-rgb),.12) 0%,rgba(var(--acc-rgb),0) 65%),var(--ph-bg)}

@media (min-width:961px),(max-width:760px){
  #philosophy .anchor-btns .btn{background:none}
  #philosophy .anchor-btns .btn:hover{background:rgba(var(--shade-rgb),.03)}
}

.care .sec:has(.ck-in:checked) .answer .btn.primary{box-shadow:0 0 0 6px rgba(var(--teal-rgb),.16),0 16px 40px rgba(var(--acc-rgb),.18)}
.care .bars i{background:rgba(var(--acc-rgb),.24)}
.care .plan.rec{border-color:rgba(var(--teal-rgb),.6);box-shadow:0 0 0 1px rgba(var(--teal-rgb),.3),0 24px 60px -30px rgba(var(--acc-rgb),.35)}
.care .form ::placeholder{color:rgba(70,83,106,.8)}
.care .form input[type="text"],.care .form input[type="tel"],.care .form input[type="email"],.care .form textarea,.care .form select{background-color:var(--bg0)}
:root[data-tone="white"] .care .form input[type="text"],:root[data-tone="white"] .care .form input[type="tel"],:root[data-tone="white"] .care .form input[type="email"],:root[data-tone="white"] .care .form textarea,:root[data-tone="white"] .care .form select{background-color:#fff}
.care .form input:focus,.care .form textarea:focus,.care .form select:focus{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.2)}
.care .form input[type="radio"],.care .form input[type="checkbox"]{accent-color:#007c82}
@media (max-width:600px){
  .care .sticky-cta{background:rgba(var(--bg0-rgb),.96);box-shadow:0 -6px 24px rgba(var(--shade-rgb),.08)}
}

.tone-sw{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--ln2);border-radius:999px;background:var(--menu-bg);box-shadow:0 8px 28px rgba(var(--shade-rgb),.14);font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--mu)}
.tone-sw>span{padding:0 6px 0 10px;font-weight:600;white-space:nowrap}
.tone-sw button{min-height:32px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--tx);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.tone-sw button:hover{background:rgba(var(--shade-rgb),.06)}
.tone-sw button[aria-pressed="true"]{background:var(--tx);color:var(--bg0)}
.tone-sw button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:760px){
  .tone-sw{right:10px;bottom:calc(84px + env(safe-area-inset-bottom))}
  .menu-open .tone-sw{display:none}
}
@media print{ .tone-sw{display:none} }

.ph.is-illust,.bgph.is-illust{background-color:transparent!important;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.pc-thumb:has(.is-illust){border-radius:0}
.is-illust.il-ai{background-image:url(../img/illust/ai.svg)}
.is-illust.il-event{background-image:url(../img/illust/event.svg)}
.is-illust.il-eye-care{background-image:url(../img/illust/eye-care.svg)}
