:root{
--bg:#FFFFFF;
--bg-alt:#F6F2E9;
--card:#FFFFFF;
--ink:#22242E;
--ink-soft:#4A4A42;
--primary:#FFFFFF;
--primary-deep:#F3ECDD;
--primary-tint:#F0E7D4;
--accent:#D9A066;
--accent-soft:#E9C495;
--accent-deep:#C68C4E;
--accent-text:#8B5A2B;
--accent2:#6C82E8;
--on-dark:#F2F1EC;
--on-dark-soft:rgba(242,241,236,.72);
--line-green:#06C755;
--border:rgba(34,36,46,.10);
--max:1140px;
--radius:16px;
--radius-sm:8px;
--shadow:0 34px 64px -32px rgba(20,16,10,0.16);
--ease:cubic-bezier(.16,1,.3,1);
--fs-scale:1;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--accent-deep) transparent;scroll-padding-top:88px;}
html[data-fontsize="lg"]{--fs-scale:1.12;}
html[data-fontsize="xl"]{--fs-scale:1.24;}
section[id]{scroll-margin-top:88px;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--accent-deep);border-radius:10px;}
::selection{background:var(--accent-soft);color:var(--ink);}
body{
background-color:var(--bg);
background-image:
radial-gradient(ellipse 1000px 620px at 82% -8%, rgba(217,160,102,0.05), transparent 60%),
radial-gradient(ellipse 800px 500px at -5% 30%, rgba(108,130,232,0.06), transparent 55%);
color:var(--ink);
font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
font-weight:300;
line-height:1.95;
font-size:16px;
letter-spacing:.01em;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
position:relative;
word-break:keep-all;
overflow-wrap:break-word;
}
header,main,footer{zoom:var(--fs-scale);}
@media (prefers-reduced-motion: reduce){
*{animation:none !important;transition:none !important;}
html{scroll-behavior:auto;}
.tagline-track{flex-wrap:wrap;transform:none !important;width:auto;}
.tagline-band{overflow:visible;}
.area-marquee-track{flex-wrap:wrap;transform:none !important;width:auto;}
.area-marquee{overflow:visible;}
}
.skip-link{
position:fixed;top:-60px;left:16px;z-index:1000;background:var(--accent-deep);color:#1A1206;
padding:12px 22px;border-radius:8px;font-size:13.5px;font-weight:700;letter-spacing:.03em;
transition:top .3s var(--ease);
}
.skip-link:focus{top:16px;}
.a11y-toggle{
display:flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:100px;
padding:3px;background:rgba(255,255,255,.03);
}
.a11y-toggle button{
border:none;background:none;cursor:pointer;color:var(--ink-soft);font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
font-weight:600;border-radius:100px;padding:6px 11px;font-size:11px;letter-spacing:.02em;
transition:background .25s var(--ease), color .25s var(--ease);
}
.a11y-toggle button:hover{color:var(--ink);}
.a11y-toggle button.active{background:var(--accent);color:#1A1206;}
@media (max-width:900px){.a11y-toggle{display:none;}}
h1,h2,h3,h4{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho','YuMincho',serif;font-weight:700;color:var(--ink);line-height:1.5;letter-spacing:.01em;word-break:normal;overflow-wrap:break-word;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.eyebrow{
font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;
font-size:12.5px;
letter-spacing:.24em;
color:var(--accent-deep);
display:flex;align-items:center;gap:12px;margin-bottom:16px;font-weight:600;
}
.eyebrow .thread{width:30px;height:9px;flex:none;color:var(--accent);}
.eyebrow .thread circle{animation:pulseDot 2.4s ease-in-out infinite;transform-origin:center;}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.3;}}
.section{padding:120px 0;}
.section-head{max-width:640px;margin-bottom:64px;}
.section-head h2{font-size:clamp(27px,3.4vw,38px);}
.section-head p{color:var(--ink-soft);margin-top:16px;font-size:15.5px;font-weight:300;}
@media (min-width:700px){
#price .section-head{max-width:none;}
#price .section-head h2{white-space:nowrap;}
}
-space:nowrap;}
}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:16px 32px;border-radius:100px;font-weight:600;font-size:14.5px;
font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;letter-spacing:.06em;
cursor:pointer;border:none;transition:transform .45s var(--ease), box-shadow .35s var(--ease), background .35s ease, color .35s ease;
white-space:nowrap;will-change:transform;
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.btn-accent{background:linear-gradient(135deg,var(--accent-soft),var(--accent));color:#1A1206;box-shadow:0 14px 26px -12px rgba(217,160,102,.45);}
.btn-accent:hover{background:linear-gradient(135deg,var(--accent),var(--accent-deep));}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid rgba(242,241,236,.4);}
.btn-outline:hover{background:rgba(242,241,236,.08);}
.btn-line{background:var(--line-green);color:#fff;box-shadow:0 14px 26px -12px rgba(6,199,85,.4);}
.btn-line:hover{background:#05b34c;}

/* ===== chrome: cursor / progress / noise ===== */
.noise-overlay{
position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.045;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--accent-soft),var(--accent));z-index:300;transition:width .05s linear;}

/* ===== Header ===== */
header{
position:fixed;top:0;left:0;right:0;z-index:100;
background:rgba(255,255,255,0.82);backdrop-filter:blur(12px);
border-bottom:1px solid transparent;transition:border-color .3s ease, box-shadow .3s ease;
}
header.scrolled{border-color:var(--border);box-shadow:0 4px 26px -18px rgba(20,16,10,.12);}
.nav-inner{max-width:var(--max);margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;font-weight:600;font-size:21px;color:var(--ink);display:flex;align-items:center;gap:10px;letter-spacing:0;}
.logo .mark{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;isolation:isolate;}
.logo .mark svg{display:block;}
.logo .blink{color:var(--accent);animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.logo small{font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:500;font-size:10.5px;color:var(--ink-soft);letter-spacing:.06em;display:block;}
nav ul{list-style:none;display:flex;gap:6px;}
nav a{font-size:14px;font-weight:500;color:var(--ink-soft);position:relative;padding:9px 14px;letter-spacing:.03em;border-radius:100px;transition:color .3s var(--ease);isolation:isolate;}
nav a::before{content:"";position:absolute;inset:0;border-radius:100px;background:rgba(242,241,236,.06);z-index:-1;opacity:0;transform:scale(.85);transition:opacity .3s var(--ease), transform .3s var(--ease);}
nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);}
nav a:hover{color:var(--ink);}
nav a:hover::before{opacity:1;transform:scale(1);}
nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav-cta{display:flex;align-items:center;gap:12px;}
.nav-cta .btn{padding:12px 24px;font-size:13px;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px;}
.menu-toggle span{width:24px;height:1.5px;background:var(--ink);}
@media (max-width:900px){
nav{display:none;}
.menu-toggle{display:flex;}
.logo small{display:none;}
.nav-cta .btn{padding:10px 18px;font-size:12.5px;}
}
@medi












a (max-width:400px){
.nav-inner{padding:14px 16px;}
.logo{font-size:17px;gap:7px;}
.nav-cta{gap:8px;}
}

/* ===== Hero ===== */
.hero{
padding:172px 0 104px;position:relative;overflow:hidden;
background:radial-gradient(ellipse 1200px 760px at 22% -12%, rgba(217,160,102,.16), transparent 60%), var(--primary-deep);
}
.hero-video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;
-webkit-mask-image:radial-gradient(ellipse 128% 112% at 50% 36%, black 60%, transparent 100%);
mask-image:radial-gradient(ellipse 128% 112% at 50% 36%, black 60%, transparent 100%);
opacity:.65;transition:transform .1s linear;
}
.hero-video-overlay{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.75) 68%, var(--primary-deep) 100%);
}
.hero-spotlight{
position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
background:radial-gradient(560px circle at var(--sx,50%) var(--sy,30%), rgba(217,160,102,.16), transparent 60%);
transition:opacity .6s var(--ease);
}
.hero-spotlight.on{opacity:1;}
.hero-aurora{position:absolute;inset:-10% -10% auto -10%;height:140%;pointer-events:none;z-index:0;will-change:transform;}
.hero-aurora span{position:absolute;border-radius:50%;filter:blur(60px);}
.hero-aurora span:nth-child(1){width:560px;height:560px;top:-170px;right:-140px;opacity:.28;background:radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 70%);animation:drift1 22s ease-in-out infinite alternate;}
.hero-aurora span:nth-child(2){width:380px;height:380px;top:60px;left:-150px;opacity:.16;background:radial-gradient(circle at 40% 40%, var(--accent2), transparent 70%);animation:drift2 26s ease-in-out infinite alternate;}
.hero-aurora span:nth-child(3){width:300px;height:300px;bottom:-130px;right:220px;opacity:.2;background:radial-gradient(circle at 50% 50%, #2E5A78, transparent 70%);animation:drift3 30s ease-in-out infinite alternate;}
@keyframes drift1{from{transform:translate(0,0) scale(1);}to{transform:translate(-40px,30px) scale(1.08);}}
@keyframes drift2{from{transform:translate(0,0);}to{transform:translate(30px,-20px);}}
@keyframes drift3{from{transform:translate(0,0);}to{transform:translate(-20px,-30px);}}

.hero-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px;align-items:center;position:relative;z-index:1;}
@media (max-width:900px){.hero-inner{grid-template-columns:minmax(0,1fr);}}
/* Safari WebKit defensive fix: some WebKit versions fail to stretch grid items
to fill their track when the item own auto-sizing is ambiguous, leaving
blank space beside text content on iPhone. Force explicit full-width + 0 min-width. */
.hero-inner>*,.bento-grid>*,.strength-row>*,.service-cards>*,.work-feature>*,
.price-grid>*,.about-wrap>*,.capability-grid>*,.flow-grid>*,.area-wrap>*{
width:100%;min-width:0;box-sizing:border-box;
}
.hero h1{color:#000;font-size:clamp(26px,3.6vw,44px);letter-spacing:.03em;margin-bottom:26px;font-weight:700;overflow:visible;text-shadow:none;white-space:nowrap;}
.hero h1 .line{display:block;overflow:visible;}
.hero h1 .line > span{display:block;animation:heroLine .95s var(--ease) both;}
.hero h1 .line:nth-child(1) > span{animation-delay:.05s;}
.hero h1 .line:nth-child(2) > span{animation-delay:.16s;}
.hero h1 .line:nth-child(3) > span{animation-delay:.27s;}
@keyframes heroLine{from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:translateY(0);}}
.hero h1 .accent-word{color:var(--accent-deep);position:relative;white-space:nowrap;}
.hero h1 .accent-word::after{content:"";position:absolute;left:2px;right:2px;bottom:2px;height:6px;background:linear-gradient(90deg,var(--accent-soft),var(--accent));opacity:.35;z-index:-1;}
.hero h1 .line > span.title-fill-line{
background-repeat:no-repeat;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.hero .eyebrow{animation:heroUp .7s var(--ease) both;}
.hero p.lead{font-size:16.5px;color:var(--i






nk-soft);max-width:480px;margin-bottom:36px;font-weight:300;animation:heroUp .9s .38s var(--ease) both;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px;animation:heroUp .9s .48s var(--ease) both;}
.trust-row{display:flex;gap:24px;flex-wrap:wrap;animation:heroUp .9s .58s var(--ease) both;}
.hero-showcase{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:520px;overflow:hidden;position:relative;border-radius:var(--radius);-webkit-mask-image:linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);mask-image:linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);}
.showcase-col{display:flex;flex-direction:column;gap:14px;animation:showcaseUp 24s linear infinite;}
.showcase-col-rev{animation-name:showcaseDown;animation-duration:20s;margin-top:-60px;}
.showcase-card{border-radius:14px;overflow:hidden;position:relative;height:150px;flex:none;background:linear-gradient(135deg,var(--primary-tint),var(--card));border:1px solid var(--border);display:flex;align-items:flex-end;padding:14px;}
.showcase-card span{background:rgba(10,11,16,.7);color:var(--on-dark);font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;letter-spacing:.02em;}
@keyframes showcaseUp{from{transform:translateY(0);}to{transform:translateY(-50%);}}
@keyframes showcaseDown{from{transform:translateY(-50%);}to{transform:translateY(0);}}
@media (max-width:900px){.hero-showcase{display:none;}}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}@media (max-width:900px){.demo-grid{grid-template-columns:repeat(2,1fr);}}@media (max-width:560px){.demo-grid{grid-template-columns:1fr;}}
.demo-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease),border-color .3s ease;}
.demo-card:hover{transform:translateY(-4px);border-color:rgba(217,160,102,.4);}
.demo-card-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--ink-soft);}
.demo-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;}
.demo-arrow{margin-left:auto;color:var(--ink-soft);flex:none;}
.demo-card-body{aspect-ratio:4/3;background:linear-gradient(135deg,var(--primary-tint),var(--card));display:flex;align-items:center;justify-content:center;color:var(--accent-deep);font-size:14px;font-weight:600;letter-spacing:.08em;}
.demo-card-label{padding:18px 20px;font-size:17px;font-weight:700;color:var(--ink);}#demo .wrap{max-width:1320px;}
@keyframes heroUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
.trust-row span{font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;font-weight:500;}
.trust-row span::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:var(--accent);flex:none;}

.gradient-border{position:relative;border-radius:var(--radius);padding:1.5px;overflow:hidden;isolation:isolate;animation:heroUp 1s .7s var(--ease) both;}
.gradient-border::before{
content:"";position:absolute;inset:-60%;z-index:0;
background:conic-gradient(from 0deg, var(--accent-soft), var(--accent) 30%, var(--accent-deep) 55%, var(--accent) 80%, var(--accent-soft));
animation:spinBorder 7s linear infinite;
}
@keyframes spinBorder{to{transform:rotate(360deg);}}
.gradient-border .thread-panel,.gradient-border .price-card{position:relative;z-index:1;border:none;border-radius:calc(var(--radius) - 1.5px);}

.thread-panel{
background:rgba(26,29,40,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-radius:var(--radius);border:1px solid var(--border);
padding:38px 34px;box-shadow:var(--shadow);position:relative;
}
.thread-panel h3{font-size:19px;margin-bottom:22px;color:var(--ink);}
.thread-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px dashed var(--border);}
.thread-item:last-child{border-bottom:none;}
.thread-item .node{
width:36px;height:36px;border-radius:50%;

background:var(--primary-tint);color:var(--accent-deep);
display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;
font-weight:700;font-size:13px;flex:none;border:1px solid var(--border);
}
.thread-item p{font-size:15.5px;color:var(--ink-soft);font-weight:300;line-height:1.7;}
.thread-item strong{display:block;font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho','YuMincho',serif;font-weight:600;font-size:16.5px;color:var(--ink);margin-bottom:5px;}

.thread-divider{width:100%;height:64px;display:block;margin:-10px 0 -10px;opacity:.5;}

/* ===== Tagline marquee band ===== */
.tagline-band{background:var(--primary-deep);overflow:hidden;padding:18px 0;border-top:1px solid rgba(217,160,102,.15);border-bottom:1px solid rgba(217,160,102,.15);position:relative;z-index:1;}
.tagline-track{display:flex;align-items:center;gap:16px;width:max-content;white-space:nowrap;animation:marqueeScroll 32s linear infinite;}
.tagline-track span{font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:13.5px;letter-spacing:.1em;font-weight:600;color:var(--accent-text);}
.tagline-track span.dot{color:var(--accent-text);font-size:11px;}

/* ===== Bento stats strip ===== */
.bento-stats{padding:64px 0;position:relative;z-index:1;background:var(--bg-alt);}
.bento-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
@media (max-width:900px){.bento-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.bento-tile{background:var(--bg);border:none;border-radius:0;padding:36px 28px;}
.bento-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--primary-tint),var(--bg-alt));display:flex;align-items:center;justify-content:center;color:var(--accent-deep);margin-bottom:18px;}
.bento-num{font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:30px;font-weight:600;color:var(--accent-deep);margin-bottom:6px;letter-spacing:-.01em;}
.bento-label{font-size:12.5px;color:var(--ink-soft);font-weight:400;letter-spacing:.02em;}

.tilt-card{position:relative;transition:transform .5s var(--ease);}
.tilt-card::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(217,160,102,.16), transparent 55%);
transition:opacity .4s ease;
}
.tilt-card:hover::after{opacity:1;}

.section-alt{background:var(--bg-alt);}

/* ===== Strengths ===== */
.strength-list{display:flex;flex-direction:column;gap:0;}
.strength-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:30px;padding:38px 0;border-bottom:1px solid var(--border);align-items:flex-start;}
.strength-row:first-child{padding-top:0;}
.strength-row:last-child{border-bottom:none;}
.strength-num{font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:36px;font-weight:600;-webkit-text-stroke:1.3px var(--accent-soft);color:transparent;}
.strength-row h3{font-size:19.5px;margin-bottom:11px;}
.strength-row p{color:var(--ink-soft);font-size:14.5px;max-width:640px;font-weight:300;}

/* ===== Services ===== */
.service-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;}
@media (max-width:840px){.service-cards{grid-template-columns:minmax(0,1fr);}}
.service-card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);padding:40px 34px;position:relative;overflow:hidden;transition:transform .5s var(--ease), box-shadow .35s ease;}
.service-card:hover{box-shadow:var(--shadow);}
.service-card.is-line::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--line-green);z-index:1;}
.service-card.is-web::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,

var(--accent-soft),var(--accent));z-index:1;}
.service-num{position:absolute;top:28px;right:34px;font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:44px;font-weight:700;color:transparent;-webkit-text-stroke:1.3px var(--border);letter-spacing:0;}
.service-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;padding:6px 14px;border-radius:100px;margin-bottom:20px;font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;}
.is-line .service-tag{background:rgba(6,199,85,.14);color:#067a3f;}
.is-web .service-tag{background:rgba(217,160,102,.16);color:var(--accent-text);}
.service-card h3{font-size:22px;margin-bottom:14px;}
.service-card > p{color:var(--ink-soft);font-size:14.5px;margin-bottom:24px;font-weight:300;}
.service-feat{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.service-feat li{font-size:14px;color:var(--ink);display:flex;gap:11px;align-items:flex-start;font-weight:300;}
.service-feat li::before{content:"◦";color:var(--accent-deep);font-weight:700;flex:none;margin-top:1px;}
.service-price{font-size:15.5px;font-weight:600;color:var(--accent-text);}
.set-note{
margin-top:28px;text-align:center;background:linear-gradient(135deg,rgba(217,160,102,.16),rgba(108,130,232,.14));
border:1px solid var(--border);border-radius:var(--radius);padding:26px;font-size:15.5px;font-weight:600;color:var(--ink);
}

/* ===== Works ===== */
.works-sub-title{font-size:19px;margin-bottom:14px;}
.works-sub-desc{color:var(--ink-soft);font-size:14px;font-weight:300;margin-bottom:26px;max-width:640px;}
.work-feature{
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
padding:36px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:36px;align-items:center;
}
@media (max-width:760px){.work-feature{grid-template-columns:minmax(0,1fr);}}
.work-visual{
aspect-ratio:4/3;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--primary-tint),var(--primary-deep));
display:flex;align-items:center;justify-content:center;color:rgba(242,241,236,.16);
font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:60px;font-weight:700;
}
.work-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.tag-pill{font-size:11.5px;font-weight:700;letter-spacing:.05em;padding:6px 15px;border-radius:100px;border:1px solid var(--border);color:var(--ink-soft);font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;}
.tag-pill.loud{background:var(--accent);color:#1A1206;border-color:transparent;}
.work-feature h4{font-size:18px;margin-bottom:12px;}
.work-feature p{font-size:14px;color:var(--ink-soft);font-weight:300;}
.work-note{margin-top:14px;font-size:12.5px;color:var(--ink-soft);font-style:italic;}
.capability-note{
background:var(--primary-tint);border:1px dashed var(--accent);border-radius:var(--radius-sm);
padding:15px 22px;font-size:13.5px;color:var(--accent-text);margin-bottom:30px;display:block;font-weight:500;
}
.capability-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;}
.capability-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:22px;text-align:center;font-size:14.5px;font-weight:600;color:var(--ink);transition:transform .4s var(--ease), border-color .3s ease;}
.capability-item:hover{transform:translateY(-3px);border-color:rgba(217,160,102,.4);}

/* ===== Area (nationwide) ===== */
.area-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center;}
@media (max-width:860px){.area-wrap{grid-template-columns:minmax(0,1fr);}}
.area-marquee{overflow:hidden;margin-top:24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.area-marquee-track{display:flex;gap:



11px;width:max-content;animation:marqueeScroll 22s linear infinite;}
.area-marquee:hover .area-marquee-track{animation-play-state:paused;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.area-marquee-track span{background:var(--card);border:1px solid var(--border);padding:10px 20px;border-radius:100px;font-size:13.5px;color:var(--ink);font-weight:400;white-space:nowrap;flex:none;}
.area-marquee-track span.main{background:var(--accent);color:#1A1206;border-color:transparent;font-weight:600;}
.area-visual{
background:var(--primary-deep);border-radius:var(--radius);padding:48px;color:var(--ink);position:relative;overflow:hidden;
min-height:270px;display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(217,160,102,.25);
}
.area-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%, rgba(217,160,102,.18), transparent 55%);}
.area-visual h3{color:var(--ink);font-size:24px;margin-bottom:14px;position:relative;}
.area-visual p{color:var(--ink-soft);font-size:14px;position:relative;font-weight:300;}

/* ===== Pricing ===== */
.price-note{color:var(--ink-soft);font-size:13px;margin-bottom:32px;font-weight:300;}
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start;}
@media (max-width:900px){.price-grid{grid-template-columns:minmax(0,1fr);}}
.price-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:34px 28px;display:flex;flex-direction:column;transition:transform .5s var(--ease), box-shadow .35s ease;}
.price-card:hover{box-shadow:var(--shadow);}
.price-card.featured{position:relative;}
.price-card.featured .badge{position:absolute;top:-14px;left:28px;background:var(--accent);color:#1A1206;font-size:11.5px;padding:6px 16px;border-radius:100px;font-weight:700;letter-spacing:.04em;z-index:2;}
.price-card h4{font-size:16.5px;margin-bottom:7px;}
.price-card .price-sub{font-size:12.5px;color:var(--ink-soft);margin-bottom:20px;font-weight:300;}
.price-card .price-num{font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:32px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.price-card .price-num{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;}
.price-card .price-num span{display:block;width:100%;font-size:12.5px;font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;color:var(--ink-soft);font-weight:300;word-break:keep-all;}
.price-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:24px 0 28px;flex:1;}
.price-list li{font-size:13.5px;color:var(--ink);display:flex;gap:9px;font-weight:300;}
.price-list li::before{content:"✓";color:var(--accent-deep);font-weight:700;}

/* ===== Price (luxury) ===== */
.price-card-lux{padding:0;overflow:hidden;display:block;box-shadow:0 40px 90px -32px rgba(20,16,10,.32);}
.price-card-lux .price-card-inner{display:grid;grid-template-columns:1.15fr 1fr;}
@media (max-width:760px){.price-card-lux .price-card-inner{grid-template-columns:minmax(0,1fr);}}
.price-card-lux .price-card-left{padding:48px 42px 42px;}
.price-card-lux .price-card-left h4{font-size:20px;margin-bottom:10px;}
.price-card-lux .price-card-left .price-sub{font-size:13.5px;margin-bottom:24px;}
.price-card-lux .price-card-right{background:linear-gradient(165deg,#22242E 0%,#14151c 100%);padding:48px 40px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;isolation:isolate;}
.price-card-lux .price-card-right::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 18%, rgba(217,160,102,.26), transparent 62%);pointer-events:none;z-index:0;}
.price-card-lux .price-label{font-size:12px;color:rgba(242,241,236,.62);letter-spacing:.08em;margin-bottom:14px;font-weight:300;position:relative;z-index:1;}
.price-card-lux .price-num-lux{display:flex;align-items:baseline;gap:5px;p
osition:relative;z-index:1;line-height:1;}
.price-card-lux .price-num-lux .yen{font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:30px;font-weight:600;color:var(--accent-soft);}
.price-card-lux .price-num-lux .amount{font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;font-size:clamp(52px,7vw,80px);font-weight:700;line-height:1;letter-spacing:-.01em;background:linear-gradient(120deg,#F7F1E4 0%,var(--accent-soft) 55%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.price-card-lux .price-per{font-size:13px;color:rgba(242,241,236,.68);margin:8px 0 30px;position:relative;z-index:1;font-weight:300;}
.price-card-lux .btn-lux{width:100%;position:relative;z-index:1;}
.price-card-lux .badge{box-shadow:0 8px 18px -8px rgba(217,160,102,.55);}

/* ===== Flow ===== */
.flow-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;}
@media (max-width:980px){.flow-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.flow-grid{grid-template-columns:minmax(0,1fr);}}
.flow-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:26px 22px;position:relative;transition:transform .5s var(--ease), box-shadow .35s ease;}
.flow-card:hover{box-shadow:var(--shadow);}
.flow-step{font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;color:var(--accent-deep);font-weight:600;font-size:13px;margin-bottom:13px;letter-spacing:.04em;}
.flow-card h4{font-size:14.5px;margin-bottom:9px;}
.flow-card p{font-size:12.5px;color:var(--ink-soft);font-weight:300;}

/* ===== About ===== */
.about-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px;align-items:center;}
@media (max-width:860px){.about-wrap{grid-template-columns:minmax(0,1fr);}}
.about-visual{
aspect-ratio:1/1;border-radius:var(--radius);background:linear-gradient(160deg,var(--primary-deep),#163a4f);
display:flex;align-items:center;justify-content:center;border:1px solid var(--border);position:relative;overflow:hidden;
}
.about-visual svg{width:62%;height:62%;}
.about-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:38px;}
.about-card h3{font-size:20.5px;margin-bottom:5px;}
.about-role{font-size:13px;color:var(--accent-deep);font-weight:600;margin-bottom:20px;letter-spacing:.03em;font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;}
.about-card p{color:var(--ink-soft);font-size:14.5px;margin-bottom:16px;font-weight:300;}
.about-note{font-size:12.5px;color:var(--ink-soft);font-style:italic;}

/* ===== Final CTA / Contact ===== */
.final-cta{background:var(--primary-deep);border-radius:var(--radius);padding:60px 50px;text-align:center;position:relative;overflow:hidden;color:var(--ink);border:1px solid rgba(217,160,102,.25);}
.final-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 15%, rgba(217,160,102,.16), transparent 50%),radial-gradient(circle at 85% 85%, rgba(217,160,102,.12), transparent 50%);}
.final-cta h2{color:var(--ink);font-size:clamp(25px,3.2vw,33px);margin-bottom:16px;position:relative;}
.final-cta p{color:var(--ink-soft);max-width:520px;margin:0 auto 32px;position:relative;font-size:15px;font-weight:300;}
.final-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;margin-bottom:16px;}
.contact-inline{display:flex;gap:26px;justify-content:center;margin-top:20px;flex-wrap:wrap;position:relative;}
.contact-inline span{color:var(--ink-soft);font-size:13px;display:flex;align-items:center;gap:8px;font-weight:300;}

/* ===== Footer ===== */
footer{padding:60px 0 34px;background:var(--primary-deep);}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;}
.footer-logo{font-family:'JetBrains Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;f
ont-weight:600;font-size:19px;color:var(--ink);margin-bottom:9px;letter-spacing:0;}
.footer-desc{font-size:13px;color:var(--ink-soft);max-width:320px;font-weight:300;}
.footer-cols{display:flex;gap:58px;flex-wrap:wrap;}
.footer-col h5{font-size:12px;letter-spacing:.1em;color:var(--accent-text);margin-bottom:15px;font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:600;}
.footer-col a,.footer-col span{display:block;font-size:13.5px;color:var(--ink-soft);margin-bottom:11px;font-weight:400;transition:color .25s ease;}
.footer-col a:hover{color:var(--accent-deep);}
.footer-bottom{margin-top:42px;padding-top:26px;border-top:1px solid rgba(217,160,102,.16);font-size:12px;color:var(--ink-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* Progressive enhancement: content is fully visible by default.
Only when JS confirms it is running (html.js-reveal) do we hide elements
to animate them in. This guarantees the page is never blank if JS is
disabled, restricted (e.g. iOS file preview), or fails to run. */
.reveal{opacity:1;transform:none;}
html.js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
html.js-reveal .reveal.in{opacity:1;transform:translateY(0);}

.back-to-top{
position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
background:var(--ink);color:var(--accent-soft);border:1px solid rgba(217,160,102,.3);
display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:90;
opacity:0;pointer-events:none;transform:translateY(14px);
transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s ease;
box-shadow:0 14px 30px -14px rgba(20,16,10,.25);
}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top:hover{background:var(--accent-deep);color:#1A1206;}

.mobile-nav{
position:fixed;inset:0;background:var(--bg);z-index:99;display:flex;flex-direction:column;
padding:100px 32px 40px;transform:translateX(100%);transition:transform .35s ease;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav ul{list-style:none;display:flex;flex-direction:column;gap:26px;margin-bottom:36px;}
.mobile-nav a{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho','YuMincho',serif;font-weight:600;font-size:21px;color:var(--ink);}
.mobile-nav .btn{width:100%;}

/* Narrow-phone tuning (iPhone SE / 14 / 15 Pro, Galaxy S23, Pixel 8, etc. — 320-480px):
comfortable 20px side margins, tighter card padding, and smaller card
heading/price sizes so nothing feels cramped or oversized on a small screen. */
@media (max-width:480px){
.wrap{padding:0 20px;}
.section{padding:84px 0;}
.price-card{padding:26px 22px;}
.price-card .price-num{font-size:26px;}
.service-card{padding:30px 24px;}
.service-card h3{font-size:19px;}
.work-feature{padding:24px 20px;}
.work-feature h4{font-size:16.5px;}
.thread-panel{padding:28px 22px;}
.thread-panel h3{font-size:17px;}
.final-cta{padding:44px 26px;}
.capability-item{padding:18px;}
.flow-card{padding:22px 18px;}
}

/* Safety net: some simplified HTML previewers (e.g. certain in-app "quick look"
style viewers) do not implement CSS Grid at all. Without this, grid child
elements can render shrunk to their own content width instead of stretching
to fill their column, leaving unexplained blank space beside them. If Grid
isn't supported, fall back to a plain full-width stacked layout instead. */
@supports not (display:grid){
.hero-inner,.bento-grid,.strength-row,.service-cards,.work-feature,
.price-grid,.about-wrap,.capability-grid,.flow-grid,.area-wrap{
display:block;
}
.hero-inner > *,.bento-grid > *,.strength-row > *,.service-cards > *,
.work-feature > *,.price-grid > *,.about-wrap > *,.capability-grid > *,
.flow-grid > *,.area-wrap > *{
width:100%;
max-width:100%;
box-sizing:border-box;
margin-bottom:20px;
}
}

/* ===== Legal pages (tokushoho / privacy) ===== */
.legal-content{max-width:820px;}
.legal-content h1{font-size:clamp(26px,3.2vw,34px);margin-bottom:32px;}
.legal-content h2{font-size:19px;margin:40px 0 14px;}
.legal-content p{color:var(--ink-soft);font-size:14.5px;font-weight:300;margin-bottom:14px;}
.legal-content a{color:var(--accent-deep);text-decoration:underline;}
.back-link{display:inline-block;margin-bottom:28px;font-size:13.5px;color:var(--accent-deep);font-weight:600;}
.legal-table{width:100%;border-collapse:collapse;margin-top:8px;}
.legal-table tr{border-bottom:1px solid var(--border);}
.legal-table th,.legal-table td{text-align:left;padding:16px 14px;font-size:13.5px;font-weight:300;vertical-align:top;}
.legal-table th{width:180px;flex:none;font-weight:600;color:var(--ink);font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;}
.legal-table td{color:var(--ink-soft);}
@media (max-width:700px){
.legal-table,.legal-table tbody,.legal-table tr,.legal-table th,.legal-table td{display:block;width:100%;}
.legal-table th{padding-bottom:4px;}
.legal-table td{padding-top:0;padding-bottom:20px;}