:root{--bg:#f4f4f5;--paper:#fff;--ink:#101114;--ink2:#1b1c20;--muted:#6f7278;--line:#d8d9dc;--soft:#ececef;--red:#b31422;--red2:#8f0c17;--max:1180px;--shadow:0 24px 70px rgba(19,20,24,.10);--r:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}.container{width:min(calc(100% - 32px),var(--max));margin-inline:auto}
header{position:sticky;top:0;z-index:100;background:rgba(244,244,245,.86);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid rgba(200,201,204,.72)}.nav{min-height:72px;display:flex;align-items:center;gap:16px}.brand{font-weight:950;letter-spacing:.08em;font-size:1.03rem;margin-right:auto}.navlinks{display:none;align-items:center;gap:28px;font-size:.88rem;font-weight:800}.navlinks a{position:relative}.navlinks a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--red);transition:.22s}.navlinks a:hover:after{right:0}.header-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:850;font-size:.9rem;transition:.22s}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.08)}.header-cta,.btn.primary{background:var(--red);border-color:var(--red);color:#fff}.header-cta:hover,.btn.primary:hover{background:var(--red2)}.btn.dark{background:#111214;color:#fff;border-color:#111214}.menu-btn{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:13px;background:#fff}.mobile{display:none;background:#fff;border-top:1px solid var(--line)}.mobile.open{display:block}.mobile a{display:block;padding:15px 20px;border-bottom:1px solid var(--line);font-weight:800}
.eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--red);font-size:.73rem;font-weight:950;letter-spacing:.18em;text-transform:uppercase}.eyebrow:before{content:"";width:24px;height:2px;background:var(--red)}h1,h2,h3{line-height:1.16;letter-spacing:-.035em;margin:0}h1{font-size:clamp(2.35rem,9.4vw,5.5rem);font-weight:900}h2{font-size:clamp(1.85rem,6.2vw,3.3rem);font-weight:900}h3{font-size:1.15rem;font-weight:900}.lead{font-size:clamp(1rem,3.7vw,1.28rem);color:#404247;max-width:760px}.small{font-size:.83rem;color:var(--muted)}.muted{color:var(--muted)}
.hero{padding:52px 0 68px;overflow:hidden}.hero-grid{display:grid;gap:34px}.hero-copy{padding-top:10px}.hero h1 .accent{color:var(--red)}.hero .lead{margin:22px 0 0}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.microproof{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.microproof div{min-width:120px}.microproof strong{display:block;font-size:1.3rem;line-height:1.1}.microproof span{font-size:.72rem;color:var(--muted)}.hero-visual{position:relative}.hero-visual img{width:100%;border-radius:32px;box-shadow:var(--shadow)}.hero-badge{position:absolute;right:-4px;bottom:22px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:0 14px 35px rgba(0,0,0,.13)}.hero-badge b{display:block;font-size:1.25rem}.hero-badge span{font-size:.7rem;color:var(--muted)}
.pagehero{padding:64px 0 34px}.pagehero .lead{margin-top:18px}.section{padding:72px 0}.tight{padding-top:22px}.section-head{max-width:800px;margin-bottom:30px}.section-head p:last-child{margin-bottom:0}.grid{display:grid;gap:18px}.cards3{grid-template-columns:1fr}.two{display:grid;gap:28px}.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset}.card p:last-child{margin-bottom:0}.card-media{padding:0;overflow:hidden}.card-media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}.card-media .card-body{padding:24px}.featured{border-color:#deb2b7;box-shadow:0 18px 54px rgba(179,20,34,.09)}.tag{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;background:#ebebed;font-size:.71rem;font-weight:900;letter-spacing:.04em}.tag.red{background:#fff0f1;color:var(--red)}.price{font-size:1.85rem;font-weight:950;line-height:1.1;margin:14px 0}.price small{font-size:.78rem;color:var(--muted);font-weight:800}.list{list-style:none;margin:0;padding:0;display:grid;gap:11px}.list li{position:relative;padding-left:24px}.list li:before{content:"";position:absolute;left:0;top:.8em;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px #f8e5e7}.feature-num{font-size:3.2rem;font-weight:950;line-height:1;color:#d9dade;letter-spacing:-.07em;margin-bottom:20px}
.approach-grid{display:grid;gap:18px}.approach-card{position:relative;overflow:hidden;min-height:230px}.approach-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-55px;bottom:-65px;background:radial-gradient(circle,#f0b9be 0,#f8e9ea 46%,transparent 68%)}
.visual-section{display:grid;gap:28px}.visual-section img{border-radius:28px;border:1px solid #292a2e;box-shadow:var(--shadow)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat{position:relative;overflow:hidden;background:#111214;color:#fff;border-radius:22px;padding:20px;min-height:152px;display:flex;flex-direction:column;justify-content:flex-end}.stat:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.03),transparent 55%)}.stat strong{font-size:clamp(1.9rem,7.5vw,3rem);line-height:1}.stat span{font-size:.77rem;color:#b8bac0;margin-top:8px}.stat small{color:#fff;font-weight:800;margin-top:5px}.case-grid{display:grid;gap:18px}.case-card{display:grid;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden}.case-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.case-content{padding:22px}.metric{font-size:1.55rem;font-weight:950;margin:9px 0}.process{counter-reset:s;display:grid;gap:12px}.process .card{position:relative;padding-left:76px}.process .card:before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:24px;top:23px;color:var(--red);font-weight:950;font-size:1.1rem}
.notice{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}.notice-item{padding:17px 20px;border-bottom:1px solid var(--line);display:grid;gap:3px}.notice-item:last-child{border-bottom:0}.notice time{font-size:.78rem;color:var(--muted)}.band{position:relative;overflow:hidden;background:#111214;color:#fff;border-radius:30px;padding:34px}.band:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-120px;background:radial-gradient(circle,rgba(179,20,34,.55),rgba(179,20,34,.1) 46%,transparent 70%)}.band>*{position:relative;z-index:1}.band p{color:#c7c8cc}.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:20px}table{width:100%;min-width:720px;border-collapse:collapse;background:#fff}th,td{padding:15px 17px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}th{background:#ececee;font-size:.82rem}.note{background:#fff4f5;border:1px solid #f0c6ca;border-left:4px solid var(--red);padding:15px 17px;border-radius:14px}.form{display:grid;gap:15px}.field{display:grid;gap:7px}.field label{font-size:.88rem;font-weight:850}.field input,.field select,.field textarea{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#b31422;box-shadow:0 0 0 3px rgba(179,20,34,.10)}.field textarea{min-height:170px;resize:vertical}
.footer{margin-top:66px;padding:42px 0 100px;border-top:1px solid var(--line)}.footer-grid{display:grid;gap:22px}.footer-links{display:flex;flex-wrap:wrap;gap:14px;font-size:.86rem}.sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;background:var(--red);color:#fff;text-align:center;font-weight:900;border-radius:999px;padding:14px 18px;box-shadow:0 12px 34px rgba(0,0,0,.22)}
@media(min-width:760px){.container{width:min(calc(100% - 60px),var(--max))}.hero{padding:88px 0 90px}.hero-grid{grid-template-columns:1.02fr .98fr;align-items:center}.cards3{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:1fr 1fr;align-items:start}.visual-section{grid-template-columns:.9fr 1.1fr;align-items:center}.approach-grid{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:repeat(5,1fr)}.case-grid{grid-template-columns:repeat(2,1fr)}.notice-item{grid-template-columns:130px 1fr;align-items:center}.footer-grid{grid-template-columns:1fr 1fr;align-items:end}.footer-links{justify-content:flex-end}}
@media(min-width:980px){.navlinks{display:flex}.menu-btn{display:none}.sticky{display:none}.hero-badge{right:-18px}.case-grid{grid-template-columns:repeat(5,1fr)}.case-card img{aspect-ratio:1.35/1}.case-content{padding:18px}.case-content p{font-size:.85rem}.case-content .metric{font-size:1.2rem}}

.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);padding-top:18px}.breadcrumb a:hover{color:var(--red)}
.page-links{display:grid;gap:14px}.link-card{display:block;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;transition:.22s}.link-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#c9cace}.link-card h3{margin-bottom:8px}.link-card .arrow{color:var(--red);font-weight:900}
.service-overview{display:grid;gap:18px}.service-overview .card{display:flex;flex-direction:column}.service-overview .card .btn{margin-top:auto;align-self:flex-start}
.detail-hero{display:grid;gap:28px;align-items:center}.detail-hero img{border-radius:28px;box-shadow:var(--shadow)}.detail-copy .price{margin:18px 0 10px}.detail-grid{display:grid;gap:18px}.detail-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}.detail-card h3{margin-bottom:10px}.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.kpi{background:#111214;color:#fff;border-radius:20px;padding:20px}.kpi strong{display:block;font-size:1.9rem;line-height:1.1}.kpi span{font-size:.77rem;color:#b9bbc0}.quote{font-size:clamp(1.25rem,4vw,2rem);font-weight:900;line-height:1.45;letter-spacing:-.02em}
.case-detail{display:grid;gap:26px}.case-detail img{border-radius:28px;box-shadow:var(--shadow)}.case-summary{display:grid;gap:12px}.case-summary .card{padding:20px}.related{display:grid;gap:14px}.related .link-card{min-height:150px}.news-list{display:grid;gap:12px}.news-row{display:grid;gap:6px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}.news-row time{font-size:.8rem;color:var(--muted)}
@media(min-width:760px){.service-overview{grid-template-columns:repeat(3,1fr)}.detail-hero{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:repeat(3,1fr)}.kpi-grid{grid-template-columns:repeat(4,1fr)}.case-detail{grid-template-columns:1fr 1fr;align-items:start}.related{grid-template-columns:repeat(3,1fr)}.news-row{grid-template-columns:140px 1fr;align-items:center}}


/* Japanese line-break refinement */
:where(h1,h2,h3,.quote,.metric,.link-card h3,.band h2,.price){
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: balance;
}
:where(p,li,td,th,.lead,.small,.hero-badge span,.news-row,.notice-item){
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
}
.hero-copy,.detail-copy,.section-head,.visual-section>div,.card-body,.case-content,.link-card{min-width:0}
.hero-line{display:block}
.note strong{display:block;margin-bottom:4px}.note span{display:block}

/* Avoid awkward one-character and mid-phrase wraps on desktop */
@media (min-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1.28fr) minmax(360px,.72fr);gap:54px}
  .hero h1{font-size:clamp(2.9rem,3.45vw,3.15rem);line-height:1.13;letter-spacing:-.045em;max-width:none}
  .hero-line{white-space:nowrap}
  .hero .lead{max-width:700px}
  .visual-section{grid-template-columns:1fr 1fr;gap:54px}
  .visual-section h2{font-size:clamp(2rem,2.75vw,2.55rem);line-height:1.2;max-width:13em}
  .section-head h2{font-size:clamp(2rem,2.9vw,2.7rem);line-height:1.2}
  .band h2{font-size:clamp(2rem,2.7vw,2.55rem);line-height:1.2;max-width:24em}
  .pagehero h1{font-size:clamp(2.85rem,4.5vw,4.25rem);line-height:1.12}
}

@media (min-width:760px) and (max-width:979px){
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:34px}
  .hero h1{font-size:clamp(2.75rem,5.6vw,3.7rem);line-height:1.14}
  .visual-section h2{font-size:clamp(1.9rem,4.2vw,2.6rem);line-height:1.2}
}

@media (max-width:759px){
  h1{font-size:clamp(2.05rem,10vw,3rem);line-height:1.18}
  h2{font-size:clamp(1.65rem,7.2vw,2.25rem);line-height:1.22}
  .hero{padding-top:42px}
  .hero h1{font-size:clamp(2.2rem,11.2vw,3.25rem);line-height:1.12;letter-spacing:-.045em}
  .hero-line{white-space:normal}
  .hero-badge{position:static;margin-top:12px;width:max-content;max-width:100%}
  .pagehero h1{font-size:clamp(2.2rem,10vw,3.1rem)}
  .band h2{font-size:clamp(1.65rem,7.2vw,2.25rem)}
}

/* 2026-10 TOP copy refinement */
.brand,.brand:visited,.brand:hover{color:#111214!important}
.hero-proofline{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:.92rem;font-weight:800;color:#303136}
.hero-proofline span{display:inline-block;margin-right:8px;color:var(--muted);font-size:.76rem;font-weight:800;letter-spacing:.03em}
@media(max-width:759px){.hero-proofline span{display:block;margin:0 0 3px}.hero .lead{font-size:1rem;line-height:1.9}}

.sp-only{display:none}
@media(max-width:759px){.sp-only{display:block}}


/* Contextual background imagery — marketing-led, not decorative */
.hero-bg,
.service-bg,
.approach-bg,
.cases-bg,
.pagehero.about-bg,
.pagehero.service-page-bg,
.pagehero.cases-page-bg,
.pagehero.contact-page-bg{position:relative;isolation:isolate;overflow:hidden}
.hero-bg::before,
.service-bg::before,
.approach-bg::before,
.cases-bg::before,
.pagehero.about-bg::before,
.pagehero.service-page-bg::before,
.pagehero.cases-page-bg::before,
.pagehero.contact-page-bg::before{content:"";position:absolute;inset:0;z-index:-2;background-repeat:no-repeat;background-size:cover;background-position:center}
.hero-bg::after,
.service-bg::after,
.cases-bg::after,
.pagehero.about-bg::after,
.pagehero.service-page-bg::after,
.pagehero.cases-page-bg::after,
.pagehero.contact-page-bg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}

/* Hero: visualises YouTube → inquiry → revenue while keeping the copy dominant */
.hero-bg::before{background-image:url('assets/bg-hero-business.svg');background-position:center right}
.hero-bg::after{background:linear-gradient(90deg,rgba(244,244,245,.99) 0%,rgba(244,244,245,.96) 43%,rgba(244,244,245,.68) 63%,rgba(244,244,245,.18) 100%)}
.hero-bg{border-bottom:1px solid rgba(205,206,210,.75)}
.hero-bg .hero-visual{filter:drop-shadow(0 22px 44px rgba(17,18,20,.12))}

/* Services: process imagery communicates that Faceroll owns the operating flow */
.service-bg::before,.pagehero.service-page-bg::before{background-image:url('assets/bg-services.svg');background-position:center right}
.service-bg::after,.pagehero.service-page-bg::after{background:linear-gradient(90deg,rgba(244,244,245,.98) 0%,rgba(244,244,245,.93) 52%,rgba(244,244,245,.50) 100%)}
.service-bg .card{background:rgba(255,255,255,.95);backdrop-filter:blur(6px)}

/* Approach: darker business-performance band gives the key belief stronger recall */
.approach-bg{background:#17181b;color:#fff}
.approach-bg::before{content:"";position:absolute;inset:0;z-index:-2;background:url('assets/bg-approach.svg') center/cover no-repeat}
.approach-bg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(23,24,27,.96) 0%,rgba(23,24,27,.89) 51%,rgba(23,24,27,.34) 100%)}
.approach-bg .eyebrow{color:#ff7b86}.approach-bg .eyebrow:before{background:#ff7b86}
.approach-bg p{color:#d0d2d6}.approach-bg .btn.dark{background:#fff;color:#111214;border-color:#fff}
.approach-bg .visual-section img{border-color:rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.28)}

/* Results: montage signals breadth of industries without overpowering proof copy */
.cases-bg::before,.pagehero.cases-page-bg::before{background-image:url('assets/bg-cases.svg');background-position:center right}
.cases-bg::after,.pagehero.cases-page-bg::after{background:linear-gradient(90deg,rgba(244,244,245,.99) 0%,rgba(244,244,245,.95) 54%,rgba(244,244,245,.57) 100%)}
.cases-bg .link-card{background:rgba(255,255,255,.96);backdrop-filter:blur(5px)}

/* About uses the strategy/analysis visual language; contact uses a consultation scene */
.pagehero.about-bg::before{background-image:url('assets/bg-approach.svg');background-position:center right}
.pagehero.about-bg::after{background:linear-gradient(90deg,rgba(244,244,245,.99) 0%,rgba(244,244,245,.96) 55%,rgba(244,244,245,.78) 100%)}
.pagehero.contact-page-bg::before{background-image:url('assets/bg-contact.svg');background-position:center right}
.pagehero.contact-page-bg::after{background:linear-gradient(90deg,rgba(244,244,245,.99) 0%,rgba(244,244,245,.95) 56%,rgba(244,244,245,.58) 100%)}

/* Page heroes get enough visual height to feel intentional, not like a banner pasted on */
.pagehero.about-bg,.pagehero.service-page-bg,.pagehero.cases-page-bg,.pagehero.contact-page-bg{min-height:310px;display:flex;align-items:center;border-bottom:1px solid rgba(205,206,210,.72)}
.pagehero.about-bg .container,.pagehero.service-page-bg .container,.pagehero.cases-page-bg .container,.pagehero.contact-page-bg .container{position:relative;z-index:1}
.pagehero.about-bg h1,.pagehero.service-page-bg h1,.pagehero.cases-page-bg h1,.pagehero.contact-page-bg h1{max-width:11em}
.pagehero.about-bg .lead,.pagehero.service-page-bg .lead,.pagehero.cases-page-bg .lead,.pagehero.contact-page-bg .lead{max-width:670px}

@media(max-width:759px){
  .hero-bg::before{background-position:68% center;opacity:.52}
  .hero-bg::after{background:linear-gradient(180deg,rgba(244,244,245,.99) 0%,rgba(244,244,245,.95) 54%,rgba(244,244,245,.78) 100%)}
  .service-bg::before,.pagehero.service-page-bg::before,.cases-bg::before,.pagehero.cases-page-bg::before,.pagehero.contact-page-bg::before,.pagehero.about-bg::before{background-position:72% center;opacity:.46}
  .service-bg::after,.cases-bg::after,.pagehero.service-page-bg::after,.pagehero.cases-page-bg::after,.pagehero.contact-page-bg::after,.pagehero.about-bg::after{background:linear-gradient(180deg,rgba(244,244,245,.99) 0%,rgba(244,244,245,.94) 70%,rgba(244,244,245,.79) 100%)}
  .approach-bg::after{background:rgba(23,24,27,.88)}
  .pagehero.about-bg,.pagehero.service-page-bg,.pagehero.cases-page-bg,.pagehero.contact-page-bg{min-height:260px}
}