@charset "UTF-8";
/* ===========================================================
   OLIOA — Street View page : Google Material theme
   (Google-inspired look; OLIOA identity retained in header/footer)
   =========================================================== */
:root{
  --g-blue:#1a73e8; --g-blue-d:#1765cc; --g-brand-blue:#4285F4;
  --g-red:#ea4335; --g-yellow:#fbbc04; --g-green:#34a853;
  --g-ink:#202124; --g-grey:#5f6368; --g-grey2:#3c4043;
  --g-line:#dadce0; --g-surface:#ffffff; --g-surface2:#f8f9fa; --g-surface3:#f1f3f4;
  --g-sans:'Roboto','Noto Sans JP',-apple-system,BlinkMacSystemFont,sans-serif;
  --g-pad:clamp(20px,5vw,80px);
  --g-shadow1:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
  --g-shadow2:0 1px 3px 0 rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--g-sans);color:var(--g-ink);background:var(--g-surface);
  font-size:16px;line-height:1.75;letter-spacing:.01em;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--g-blue);text-decoration:none}
::selection{background:rgba(26,115,232,.18)}

/* ---------- header ---------- */
.gsite{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--g-line);display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--g-pad);min-height:64px}
.gsite .logo{width:104px}
.gsite .logo img{width:100%;filter:brightness(0);opacity:.88}
.gsite nav{display:none;gap:32px;align-items:center}
.gsite nav a{color:var(--g-grey2);font-size:14px;font-weight:500;letter-spacing:.01em}
.gsite nav a:hover{color:var(--g-blue)}
@media(min-width:900px){.gsite nav{display:flex}}
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--g-blue);color:#fff;font-family:var(--g-sans);font-size:14px;font-weight:500;
  border:none;border-radius:100px;padding:10px 24px;cursor:pointer;transition:box-shadow .2s,background .2s;letter-spacing:.02em}
.gbtn:hover{background:var(--g-blue-d);box-shadow:var(--g-shadow1);color:#fff}
.gbtn.lg{padding:14px 34px;font-size:15px}
.gbtn-outline{background:#fff;color:var(--g-blue);border:1px solid var(--g-line)}
.gbtn-outline:hover{background:var(--g-surface2);border-color:#c6cacd;box-shadow:none}
.gsite .gbtn{padding:9px 22px}
.gburger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.gburger span{width:22px;height:2px;background:var(--g-grey2);border-radius:2px}
@media(min-width:900px){.gburger{display:none}}

/* ---------- chip ---------- */
.gchip{display:inline-flex;align-items:center;gap:8px;background:var(--g-surface3);color:var(--g-grey2);
  font-size:13px;font-weight:500;border-radius:100px;padding:7px 16px;letter-spacing:.02em}
.gchip .dot{width:8px;height:8px;border-radius:50%;background:var(--g-brand-blue)}
.gchip.blue{background:#e8f0fe;color:var(--g-blue)}

/* ---------- section ---------- */
.gsec{padding:clamp(56px,9vw,110px) var(--g-pad)}
.gsec.alt{background:var(--g-surface2)}
.gsec .wrap{max-width:1080px;margin:0 auto}
.ghead{text-align:center;max-width:720px;margin:0 auto clamp(40px,6vw,60px)}
.ghead .ey{color:var(--g-blue);font-size:14px;font-weight:500;letter-spacing:.04em;margin-bottom:12px}
.ghead h2{font-size:clamp(26px,4.4vw,40px);font-weight:400;line-height:1.25;letter-spacing:-.01em;color:var(--g-ink)}
.ghead p{color:var(--g-grey);font-size:16px;margin-top:16px}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- hero ---------- */
.ghero{background:linear-gradient(180deg,#fff 0%,var(--g-surface2) 100%);padding:clamp(48px,7vw,84px) var(--g-pad) clamp(56px,8vw,96px)}
.ghero .wrap{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:900px){.ghero .wrap{grid-template-columns:1fr 1fr;gap:60px}}
.ghero .lead .gchip{margin-bottom:22px}
.ghero h1{font-size:clamp(34px,6vw,54px);font-weight:400;line-height:1.15;letter-spacing:-.015em;color:var(--g-ink)}
.ghero h1 b{font-weight:500;color:var(--g-blue)}
.ghero .sub{color:var(--g-grey);font-size:clamp(15px,2vw,18px);line-height:1.8;margin:22px 0 32px;max-width:46ch}
.ghero .cta-row{display:flex;flex-wrap:wrap;gap:14px}
.ghero .visual{border-radius:16px;overflow:hidden;box-shadow:var(--g-shadow2);background:#fff;aspect-ratio:4/3}
.ghero .visual iframe{width:100%;height:100%;border:0;display:block}

/* ---------- material card ---------- */
.gcard{background:#fff;border:1px solid var(--g-line);border-radius:12px;padding:32px 28px;transition:box-shadow .25s,transform .25s}
.gcard:hover{box-shadow:var(--g-shadow2)}

/* ---------- why (text) ---------- */
.gwhy .wrap{max-width:820px}
.gwhy p{color:var(--g-grey2);font-size:16.5px;line-height:1.95;margin-bottom:20px}
.gwhy p b{color:var(--g-ink);font-weight:500}
.gwhy .flag{border-left:4px solid var(--g-blue);background:var(--g-surface2);padding:20px 24px;border-radius:0 8px 8px 0;color:var(--g-grey2);font-size:15px;margin-top:8px}

/* ---------- vs comparison ---------- */
.gvs .cols{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:760px){.gvs .cols{grid-template-columns:1fr 1fr}}
.gvs .col{border-radius:12px;padding:32px 30px;border:1px solid var(--g-line);background:#fff}
.gvs .col.good{border:2px solid var(--g-blue);box-shadow:var(--g-shadow1)}
.gvs .col .t{font-size:13px;font-weight:500;letter-spacing:.03em;color:var(--g-grey);margin-bottom:6px}
.gvs .col.good .t{color:var(--g-blue)}
.gvs .col h3{font-size:19px;font-weight:500;color:var(--g-ink);margin-bottom:22px}
.gvs .col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.gvs .col li{position:relative;padding-left:32px;color:var(--g-grey2);font-size:14.5px;line-height:1.7}
.gvs .col li .ic{position:absolute;left:0;top:2px;font-family:'Material Symbols Outlined';font-size:20px;line-height:1}
.gvs .col.bad li .ic{color:#9aa0a6}
.gvs .col.good li .ic{color:var(--g-green)}

/* ---------- strengths ---------- */
.gstrengths .grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:820px){.gstrengths .grid{grid-template-columns:repeat(3,1fr)}}
.gstrengths .gcard .ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Material Symbols Outlined';font-size:26px;margin-bottom:18px}
.gstrengths .gcard:nth-child(1) .ic{background:#e8f0fe;color:var(--g-blue)}
.gstrengths .gcard:nth-child(2) .ic{background:#fce8e6;color:var(--g-red)}
.gstrengths .gcard:nth-child(3) .ic{background:#e6f4ea;color:var(--g-green)}
.gstrengths .gcard h3{font-size:19px;font-weight:500;color:var(--g-ink);margin-bottom:12px}
.gstrengths .gcard p{color:var(--g-grey);font-size:14.5px;line-height:1.85}
.gstrengths .gcard p b{color:var(--g-blue);font-weight:500}

/* ---------- street view gallery ---------- */
.gsv .grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:720px){.gsv .grid{grid-template-columns:1fr 1fr}}
.gsv .item{background:#fff;border:1px solid var(--g-line);border-radius:12px;overflow:hidden;transition:box-shadow .25s}
.gsv .item:hover{box-shadow:var(--g-shadow2)}
.gsv .item .fr{aspect-ratio:16/10;background:var(--g-surface2)}
.gsv .item iframe{width:100%;height:100%;border:0;display:block}
.gsv .item .lb{display:flex;align-items:center;gap:8px;padding:14px 18px;font-size:13px;font-weight:500;color:var(--g-grey2)}
.gsv .item .lb .ic{font-family:'Material Symbols Outlined';font-size:18px;color:var(--g-blue)}
.gsv .note{text-align:center;color:var(--g-grey);font-size:14px;margin-top:30px}

/* ---------- benefits ---------- */
.gben .grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:820px){.gben .grid{grid-template-columns:repeat(3,1fr)}}
.gben .gcard .ic{font-family:'Material Symbols Outlined';font-size:34px;color:var(--g-blue);margin-bottom:14px;display:block}
.gben .gcard h3{font-size:18px;font-weight:500;color:var(--g-ink);margin-bottom:10px}
.gben .gcard p{color:var(--g-grey);font-size:14.5px;line-height:1.85}

/* ---------- plans ---------- */
.gplans .grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch}
@media(min-width:820px){.gplans .grid{grid-template-columns:repeat(3,1fr)}}
.gplans .plan{background:#fff;border:1px solid var(--g-line);border-radius:14px;padding:34px 28px;display:flex;flex-direction:column;position:relative}
.gplans .plan.mid{border:2px solid var(--g-blue);box-shadow:var(--g-shadow2)}
.gplans .plan .rec{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--g-blue);color:#fff;font-size:12px;font-weight:500;padding:5px 16px;border-radius:100px}
.gplans .plan .nm{font-size:15px;font-weight:500;color:var(--g-grey2);letter-spacing:.02em}
.gplans .plan .pr{font-size:34px;font-weight:400;color:var(--g-ink);margin:12px 0 2px}
.gplans .plan .pr small{font-size:14px;color:var(--g-grey);font-weight:400}
.gplans .plan .pts{display:inline-block;background:var(--g-surface3);color:var(--g-grey2);font-size:13px;font-weight:500;border-radius:6px;padding:5px 12px;margin:14px 0}
.gplans .plan .ds{color:var(--g-grey);font-size:14px;line-height:1.8;flex:1}
.gplans .plan .gbtn,.gplans .plan .gbtn-outline{margin-top:24px;width:100%}
.gplans .note{color:var(--g-grey);font-size:13px;line-height:1.85;margin-top:26px;max-width:900px}

/* ---------- flow ---------- */
.gflow .steps{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.gflow .step{display:grid;grid-template-columns:auto 1fr;gap:24px;padding-bottom:36px;position:relative}
.gflow .step:not(:last-child)::before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:var(--g-line)}
.gflow .step .n{width:48px;height:48px;border-radius:50%;background:#e8f0fe;color:var(--g-blue);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:17px;position:relative;z-index:1}
.gflow .step h3{font-size:17px;font-weight:500;color:var(--g-ink);margin:10px 0 8px;display:flex;align-items:center;gap:10px}
.gflow .step h3 .free{background:#e6f4ea;color:var(--g-green);font-size:12px;font-weight:500;padding:3px 10px;border-radius:100px}
.gflow .step p{color:var(--g-grey);font-size:14.5px;line-height:1.8}

/* ---------- faq ---------- */
.gfaq .wrap{max-width:820px}
.gfaq details{border:1px solid var(--g-line);border-radius:10px;margin-bottom:12px;background:#fff;overflow:hidden}
.gfaq details[open]{box-shadow:var(--g-shadow1)}
.gfaq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:500;font-size:15.5px;color:var(--g-ink);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.gfaq summary::-webkit-details-marker{display:none}
.gfaq summary .ic{font-family:'Material Symbols Outlined';color:var(--g-blue);transition:transform .25s;flex-shrink:0}
.gfaq details[open] summary .ic{transform:rotate(180deg)}
.gfaq .ans{padding:0 24px 22px;color:var(--g-grey);font-size:14.5px;line-height:1.85}

/* ---------- final cta ---------- */
.gcta{background:var(--g-blue);color:#fff;text-align:center;padding:clamp(60px,9vw,110px) var(--g-pad)}
.gcta h2{font-size:clamp(26px,4.4vw,40px);font-weight:400;line-height:1.2;margin-bottom:16px}
.gcta p{color:rgba(255,255,255,.85);font-size:16px;max-width:44ch;margin:0 auto 32px;line-height:1.8}
.gcta .gbtn{background:#fff;color:var(--g-blue)}
.gcta .gbtn:hover{background:#f1f3f4;color:var(--g-blue-d)}

/* ---------- footer ---------- */
.gfoot{background:var(--g-surface2);border-top:1px solid var(--g-line);padding:48px var(--g-pad) 36px}
.gfoot .wrap{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.gfoot .logo{width:96px}
.gfoot .logo img{filter:brightness(0);opacity:.5}
.gfoot .links{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center}
.gfoot .links a{color:var(--g-grey);font-size:13px;font-weight:500}
.gfoot .links a:hover{color:var(--g-blue)}
.gfoot .note{color:#9aa0a6;font-size:12px;line-height:1.7;max-width:640px}
.gfoot .copy{color:#9aa0a6;font-size:12px}

/* ---------- mobile menu ---------- */
#gmenu{position:fixed;inset:0;z-index:950;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .3s}
#gmenu.open{opacity:1;pointer-events:auto}
#gmenu a{color:var(--g-ink);font-size:22px;font-weight:500;padding:12px}
#gmenu .close{position:absolute;top:18px;right:22px;font-size:30px;color:var(--g-grey);cursor:pointer;background:none;border:none}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---------- tiers pyramid (badge history / hierarchy) ---------- */
.gtiers{max-width:720px;margin:46px auto 6px;display:flex;flex-direction:column;align-items:center;gap:12px}
.gtiers .tier{border-radius:12px;padding:18px 22px;text-align:center;transition:transform .25s}
.gtiers .tier:hover{transform:translateY(-2px)}
.gtiers .t1{width:58%;background:var(--g-blue);color:#fff;box-shadow:var(--g-shadow2)}
.gtiers .t2{width:80%;background:#e8f0fe;color:var(--g-blue-d)}
.gtiers .t3{width:100%;background:var(--g-surface3);color:var(--g-grey2)}
.gtiers .tier .h{font-weight:500;font-size:16px;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:8px}
.gtiers .tier .h .pin{font-size:11px;font-weight:500;background:#fff;color:var(--g-blue);border-radius:100px;padding:2px 9px;letter-spacing:.04em}
.gtiers .tier .s{font-size:12.5px;margin-top:4px;opacity:.92;line-height:1.6}
.gtiers .t3 .s{color:var(--g-grey)}
.gtiers .cap{font-size:12px;color:var(--g-grey);margin-top:12px;text-align:center}
@media(max-width:600px){.gtiers .t1{width:88%}.gtiers .t2{width:96%}.gtiers .t3{width:100%}}