:root { --navy:#102642; --navy-2:#173b5c; --mint:#48a88f; --mint-pale:#e6fff5; --mist:#f1f7f6; --line:#dce8e7; --text-soft:#5b7486; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#fbfcfc; }
body { margin:0; min-width:320px; color:var(--navy); background:#fbfcfc; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.container { width:min(1240px,calc(100% - 40px)); margin:0 auto; }
.section-pad { padding:112px 0; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(220,232,231,.9); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); }
.header-inner { height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand,.footer-brand { display:flex; align-items:center; gap:10px; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; overflow:hidden; border-radius:13px; background:var(--mint-pale); border:1px solid #c9eee1; }
.brand-mark img { width:34px; height:34px; object-fit:contain; }
.brand-text { display:flex; flex-direction:column; line-height:1; }
.brand-text strong { font-size:19px; letter-spacing:-.06em; }
.brand-text small { margin-top:5px; color:#5d778c; font-size:8px; font-weight:800; letter-spacing:.14em; }
.desktop-nav { display:flex; align-items:center; gap:34px; margin-left:auto; }
.desktop-nav a { color:#48647b; font-size:14px; font-weight:700; transition:color .18s ease; }
.desktop-nav a:hover { color:var(--navy); }
.header-cta,.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; font-size:14px; font-weight:800; transition:transform .18s ease,background .18s ease,border-color .18s ease; }
.header-cta { margin-left:16px; padding:13px 20px; color:#fff; background:var(--navy); }
.header-cta:hover,.button-primary:hover { background:var(--navy-2); transform:translateY(-1px); }
.mobile-menu { display:none; position:relative; }
.mobile-menu summary { list-style:none; display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:#fff; cursor:pointer; font-size:19px; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.mobile-menu nav { position:absolute; top:52px; right:0; display:flex; width:210px; flex-direction:column; padding:8px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 14px 30px rgba(16,38,66,.12); }
.mobile-menu nav a { padding:13px 0; border-bottom:1px solid #edf2f2; font-size:14px; font-weight:700; }
.mobile-menu nav a:last-child { border:0; }
.hero { position:relative; isolation:isolate; overflow:hidden; padding:95px 0 80px; }
.hero-grid { position:absolute; inset:0; z-index:-2; background-image:linear-gradient(rgba(71,120,117,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(71,120,117,.065) 1px,transparent 1px); background-position:center; background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 90%); }
.hero-orb { position:absolute; z-index:-1; border-radius:50%; filter:blur(58px); }
.hero-orb-left { top:18%; left:6%; width:260px; height:260px; background:#d7fff0; }
.hero-orb-right { top:17%; right:7%; width:220px; height:220px; background:#ffe8ef; }
.hero-layout { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:54px; }
.kicker { display:inline-flex; align-items:center; gap:8px; margin:0 0 27px; padding:9px 14px; border:1px solid #cfe8df; border-radius:999px; background:rgba(255,255,255,.78); color:#457468; font-size:10px; font-weight:800; letter-spacing:.14em; box-shadow:0 3px 8px rgba(16,38,66,.06); }
.kicker span,.service-tag span { width:6px; height:6px; border-radius:50%; background:#50c8a5; }
.company-label { margin:0 0 15px; color:#50738a; font-size:14px; font-weight:800; letter-spacing:.08em; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:0; font-size:clamp(39px,4.1vw,72px); line-height:1.03; letter-spacing:-.075em; }
h1 span,h1 em { display:block; white-space:nowrap; font-style:normal; }
h1 em { color:#3c9e88; }
.lead { max-width:485px; margin:27px 0 0; color:#567084; font-size:16px; line-height:2; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { padding:14px 24px; }
.button-primary { color:#fff; background:var(--navy); box-shadow:0 12px 28px rgba(16,38,66,.18); }
.button-secondary { border:1px solid #cbdde0; background:#fff; color:#244866; }
.button-secondary:hover { border-color:#8bbfae; background:#f3fffb; }
.hero-visual { position:relative; }
.hero-photo-frame { position:relative; overflow:hidden; padding:12px; border:1px solid rgba(255,255,255,.8); border-radius:38px; background:#e9f4f2; box-shadow:0 26px 70px rgba(16,38,66,.16); }
.hero-photo-frame > img { width:100%; aspect-ratio:1.45/1; border-radius:30px; object-fit:cover; }
.photo-caption { position:absolute; left:42px; bottom:42px; padding:15px 20px; border:1px solid rgba(255,255,255,.65); border-radius:16px; color:#fff; background:rgba(16,38,66,.9); box-shadow:0 10px 20px rgba(16,38,66,.16); }
.photo-caption small { display:block; color:#9de9d4; font-size:9px; font-weight:800; letter-spacing:.16em; }
.photo-caption strong { display:block; margin-top:5px; font-size:17px; letter-spacing:-.04em; }
.service-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; margin-top:78px; border:1px solid #dbe8e7; background:#dbe8e7; }
.service-strip div { min-height:106px; padding:22px 30px; background:#fbfcfc; }
.service-strip small { display:block; color:#69a695; font-size:10px; font-weight:800; letter-spacing:.14em; }
.service-strip strong { display:block; margin-top:10px; font-size:16px; letter-spacing:-.03em; }
.service-strip span { display:block; margin-top:5px; color:#658093; font-size:12px; }
.services { background:var(--mist); }
.section-heading { display:grid; grid-template-columns:.9fr 1.1fr; align-items:end; gap:40px; }
.eyebrow { margin:0; color:#3c9e88; font-size:11px; font-weight:800; letter-spacing:.15em; }
.eyebrow-light { color:#9de9d4; }
h2 { margin:14px 0 0; font-size:clamp(33px,4vw,57px); line-height:1.05; letter-spacing:-.065em; }
.section-heading > p { max-width:530px; margin:0; color:var(--text-soft); font-size:15px; line-height:2; }
.service-cards { display:grid; grid-template-columns:1.32fr .68fr; gap:20px; margin-top:50px; }
.concierge-card,.transform-card { overflow:hidden; border-radius:28px; }
.concierge-card { position:relative; padding:40px; color:#fff; background:var(--navy); box-shadow:0 18px 45px rgba(16,38,66,.16); }
.concierge-card:after { content:""; position:absolute; right:-70px; bottom:-70px; width:290px; height:290px; border-radius:50%; background:#245073; opacity:.4; filter:blur(30px); }
.service-tag { position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; margin-bottom:32px; padding:7px 11px; border:1px solid rgba(157,233,212,.3); border-radius:999px; background:rgba(255,255,255,.1); color:#a6f5de; font-size:10px; font-weight:800; letter-spacing:.14em; }
.concierge-card h3,.transform-card h3 { position:relative; z-index:1; margin-bottom:0; font-size:clamp(32px,4.3vw,54px); line-height:.98; letter-spacing:-.065em; }
.concierge-card > p:not(.service-tag),.transform-card > p:not(.support-label) { position:relative; z-index:1; max-width:500px; margin:25px 0 0; color:#d3e0e8; font-size:15px; line-height:1.9; }
.price-tags { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.price-tags span { padding:9px 12px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(255,255,255,.1); color:#e8fffa; font-size:11px; font-weight:700; }
.concierge-card img { position:relative; z-index:1; width:100%; margin-top:38px; border-radius:20px; box-shadow:0 22px 35px rgba(0,0,0,.25); }
.transform-card { padding:36px; border:1px solid #d7e4e4; background:#fff; }
.spark { display:grid; width:44px; height:44px; place-items:center; border-radius:15px; background:#fff0f4; color:#d36a89; font-size:21px; }
.support-label { margin:28px 0 0; color:#d36a89; font-size:10px; font-weight:800; letter-spacing:.16em; }
.transform-card h3 { margin-top:12px; color:var(--navy); font-size:32px; }
.transform-card > p:not(.support-label) { margin-top:20px; color:#628094; font-size:14px; }
.transform-card img { width:100%; margin-top:26px; border-radius:16px; background:#f3f5f8; }
.features { position:relative; overflow:hidden; color:#fff; background:var(--navy); }
.features:before { content:""; position:absolute; inset:0; opacity:.28; background-image:radial-gradient(#77d5ba 1px,transparent 1px); background-size:20px 20px; }
.features .container { position:relative; }
.features-intro { max-width:740px; }
.features-intro > p:last-child { max-width:600px; margin:24px 0 0; color:#cbdce5; font-size:15px; line-height:2; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.feature-grid article { position:relative; min-height:260px; padding:26px; border:1px solid rgba(255,255,255,.12); border-radius:22px; background:rgba(255,255,255,.07); }
.feature-number { color:#9de9d4; font-size:12px; font-weight:800; letter-spacing:.1em; }
.feature-icon { position:absolute; top:25px; right:26px; display:grid; width:40px; height:40px; place-items:center; border-radius:15px; background:rgba(157,233,212,.1); color:#a6f5de; font-size:19px; }
.feature-grid h3 { margin:72px 0 0; font-size:18px; letter-spacing:-.03em; }
.feature-grid p { margin:12px 0 0; color:#cbdce5; font-size:14px; line-height:1.9; }
.scene-layout { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; }
.scene-copy > p:not(.eyebrow) { max-width:530px; margin:25px 0 0; color:var(--text-soft); font-size:15px; line-height:2; }
.scene-copy ul { display:grid; gap:15px; margin:28px 0 0; padding:0; list-style:none; }
.scene-copy li { display:flex; gap:12px; align-items:flex-start; color:#284b65; font-size:14px; font-weight:700; line-height:1.7; }
.scene-copy li:before { content:"✓"; display:grid; flex:0 0 20px; width:20px; height:20px; place-items:center; margin-top:2px; border-radius:50%; background:#e5fff5; color:#2d9d82; font-size:12px; }
.scene-image { position:relative; }
.scene-image:before { content:""; position:absolute; top:-12px; left:-12px; width:95px; height:95px; border-top:1px solid #80dabe; border-left:1px solid #80dabe; border-radius:35px 0 0 0; }
.scene-image img { position:relative; width:100%; border-radius:28px; box-shadow:0 22px 50px rgba(16,38,66,.14); }
.company { background:#f4f8f8; }
.company-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:start; }
.company-copy > p:not(.eyebrow) { max-width:380px; margin:25px 0 0; color:var(--text-soft); font-size:15px; line-height:2; }
.logo-panel { display:inline-flex; align-items:center; gap:12px; margin-top:28px; padding:12px 15px; border:1px solid #d9ebe6; border-radius:16px; background:#fff; }
.logo-panel img { width:35px; height:35px; object-fit:contain; }
.logo-panel strong { font-size:12px; letter-spacing:-.03em; }
.company-table { overflow:hidden; margin:0; border:1px solid #dce8e7; border-radius:24px; background:#fff; box-shadow:0 3px 8px rgba(16,38,66,.02); }
.company-table div { display:grid; grid-template-columns:180px 1fr; gap:24px; padding:20px 30px; border-bottom:1px solid #e5eeed; }
.company-table div:last-child { border:0; }
.company-table dt { color:#71899a; font-size:12px; font-weight:800; letter-spacing:.06em; }
.company-table dd { margin:0; color:#183651; font-size:14px; font-weight:700; line-height:1.7; }
.contact { color:#fff; background:var(--navy); }
.contact-box { display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:end; padding:54px; border:1px solid rgba(255,255,255,.12); border-radius:30px; background:linear-gradient(135deg,#1b4267,var(--navy)); }
.contact h2 { max-width:610px; }
.contact > .contact-box {} 
.contact-box > div > p:not(.eyebrow) { max-width:580px; margin:24px 0 0; color:#c9dae5; font-size:15px; line-height:2; }
.mail-card { padding:28px; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:rgba(255,255,255,.07); }
.mail-icon { display:grid; width:44px; height:44px; place-items:center; border-radius:15px; background:rgba(157,233,212,.15); color:#a6f5de; font-size:21px; }
.mail-card small { display:block; margin-top:24px; color:#9de9d4; font-size:11px; font-weight:800; letter-spacing:.13em; }
.mail-card a { display:block; margin-top:9px; color:#fff; font-size:19px; font-weight:800; letter-spacing:-.03em; text-decoration:underline; text-decoration-color:rgba(157,233,212,.6); text-underline-offset:5px; overflow-wrap:anywhere; }
.mail-card p { margin:18px 0 0; color:#b9cbd6; font-size:12px; line-height:1.8; }
footer { padding:28px 0; color:#b8cad5; background:#0a1b30; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-brand img { width:31px; height:31px; padding:3px; border-radius:10px; background:var(--mint-pale); object-fit:contain; }
.footer-brand strong { color:#fff; font-size:14px; letter-spacing:-.04em; }
.footer-inner p { margin:0; font-size:12px; }
@media (max-width:900px) { .hero-layout,.section-heading,.service-cards,.scene-layout,.company-layout,.contact-box { grid-template-columns:1fr; } .hero-layout { gap:40px; } .hero-visual { max-width:700px; } .section-heading { gap:22px; } .section-heading > p { max-width:600px; } .service-cards { max-width:700px; } .scene-layout { gap:45px; } .scene-image { max-width:700px; } .company-layout { gap:40px; } .contact-box { gap:35px; } }
@media (max-width:680px) { .container { width:min(100% - 32px,1240px); } .section-pad { padding:72px 0; } .header-inner { height:68px; } .desktop-nav,.header-cta { display:none; } .mobile-menu { display:block; } .hero { padding:62px 0 54px; } .kicker { margin-bottom:21px; } .company-label { margin-bottom:12px; font-size:12px; } h1 { font-size:clamp(35px,10.6vw,48px); line-height:1.04; } .lead { margin-top:22px; font-size:14px; line-height:1.9; } .hero-actions { margin-top:27px; } .button { width:100%; padding:14px 18px; } .hero-photo-frame { padding:8px; border-radius:24px; } .hero-photo-frame > img { border-radius:18px; } .photo-caption { left:20px; bottom:20px; padding:12px 14px; border-radius:13px; } .photo-caption strong { font-size:13px; } .service-strip { grid-template-columns:1fr; margin-top:48px; } .service-strip div { min-height:auto; padding:17px 18px; } .section-heading { gap:18px; } h2 { font-size:36px; } .section-heading > p { font-size:14px; line-height:1.9; } .concierge-card,.transform-card { padding:27px; border-radius:22px; } .concierge-card h3 { font-size:41px; } .transform-card h3 { font-size:30px; } .feature-grid { grid-template-columns:1fr; margin-top:35px; } .feature-grid article { min-height:0; } .scene-copy > p:not(.eyebrow),.company-copy > p:not(.eyebrow) { font-size:14px; line-height:1.9; } .company-table { border-radius:18px; } .company-table div { grid-template-columns:1fr; gap:6px; padding:17px 20px; } .contact-box { padding:28px; border-radius:22px; } .contact h2 { font-size:34px; } .mail-card { padding:23px; } .footer-inner { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important; } }