html{scroll-behavior:smooth}
body{margin:0;background:#F3EEE4;color:#22201A;font-family:'Noto Sans JP',system-ui,sans-serif}
*{box-sizing:border-box}
section[id]{scroll-margin-top:78px}
input,textarea,button{font-family:inherit}
#submitBtn:disabled{opacity:.5;cursor:not-allowed}
.field-invalid{border-color:#C20E22!important}
.field-error{display:block;font-size:12px;font-weight:700;color:#C20E22;margin-top:2px}
.yt-facade{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.yt-facade-btn{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.yt-facade-btn img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt-facade-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;border:0;border-radius:12px;background:rgba(194,14,34,.95);box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none}
.yt-facade-play::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
@keyframes A_rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes A_pop{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.sc-rv{opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.sc-rv-up{transform:translateY(38px)}
.sc-rv-left{transform:translateX(-44px)}
.sc-rv-right{transform:translateX(44px)}
.sc-rv-scale{transform:scale(.92) translateY(22px)}
.sc-rv.sc-rv-in{opacity:1;transform:none}
@media (max-width:1024px){
  /* horizontal slide-in reveal has no side margin to spare once sections go single/2-column,
     and on real mobile browsers an overflowing pre-reveal element expands the layout viewport
     itself (not just a clippable overflow) — so drop the sideways slide and keep only the fade+rise */
  .sc-rv-left,.sc-rv-right{transform:translateY(24px)}
}
/* FAQ */
.faq-answer{overflow:hidden;max-height:0;opacity:0;transition:max-height .38s ease,opacity .3s ease}
.faq-item.open .faq-answer{max-height:320px;opacity:1}
.faq-icon{font-size:26px;color:#C20E22;line-height:1;transition:transform .3s ease}
.faq-item.open .faq-icon{transform:rotate(45deg)}
/* footer links */
.footer-link{color:rgba(243,238,228,.85);text-decoration:none;transition:color .2s ease}
.footer-link:hover{color:#fff;text-decoration:underline}
/* floating contact */
#floatContact{position:fixed;right:24px;bottom:24px;z-index:100;display:flex;align-items:center;gap:10px;height:58px;padding:0 26px;border-radius:100px;background:#06B6D4;color:#fff;text-decoration:none;font-size:16px;font-weight:800;box-shadow:0 14px 34px rgba(6,182,212,.5);transition:opacity .35s ease,transform .35s ease;opacity:0;transform:translateY(20px);pointer-events:none}
#floatContact.show{opacity:1;transform:translateY(0);pointer-events:auto}

/* back to top */
#backToTop{position:fixed;right:24px;bottom:94px;z-index:100;width:48px;height:48px;border-radius:50%;border:1px solid rgba(34,32,26,.16);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(34,32,26,.18);transition:opacity .35s ease,transform .35s ease;opacity:0;transform:translateY(20px);pointer-events:none}
#backToTop.show{opacity:1;transform:translateY(0);pointer-events:auto}
#backToTop:hover{transform:translateY(-3px)}

/* CTA emphasis: hover lift (header / red band / team / form) */
.cta-lift{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.cta-lift:hover{transform:translateY(-3px);filter:brightness(1.06)}

/* CTA emphasis: ring pulse (hero + floating) */
.cta-ring{position:relative}
.cta-ring::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:ringPing 2.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ringPing{
  0%{box-shadow:0 0 0 0 rgba(6,182,212,.5)}
  70%{box-shadow:0 0 0 16px rgba(6,182,212,0)}
  100%{box-shadow:0 0 0 0 rgba(6,182,212,0)}
}

/* ===== layout (extracted from inline styles to allow @media overrides in the mobile pass) ===== */
.nav-wrap{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 40px}
.nav-links{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:22px;row-gap:8px;flex-wrap:wrap;font-size:14.5px;font-weight:700;color:#3a382f;font-family:'Shippori Mincho',serif;margin:0 24px}
.hero-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.02fr .9fr;gap:52px;padding:76px 40px 64px;align-items:center}
.section-wrap{max-width:1280px;margin:0 auto;padding:90px 40px 20px}
.section-wrap--tight{max-width:1280px;margin:0 auto;padding:0 40px 64px}
.section-eyebrow{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.section-num{font:700 52px 'Space Mono',monospace;color:#C20E22;line-height:.9}
.section-label{font-family:'Shippori Mincho',serif;font-size:34px;font-weight:800;color:#22201A}
.section-title{margin:0;font-family:'Shippori Mincho',serif;font-size:40px;font-weight:800;line-height:1.45}
.subsection-title{margin:0;font-family:'Shippori Mincho',serif;font-size:26px;font-weight:800}
.subsection-title--accent{margin:0 0 22px;font-family:'Shippori Mincho',serif;font-size:22px;font-weight:800;color:#C20E22}
.subsection-title--md{margin:0;font-family:'Shippori Mincho',serif;font-size:20px;font-weight:800;color:#22201A}
.stat-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.geo-diagram-grid{display:grid;grid-template-columns:1fr 124px 1.1fr}
.contact-grid{display:grid;grid-template-columns:.92fr 1.08fr}

/* FAQ (cascades from the existing .faq-item hook instead of per-item inline styles) */
.faq-item button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 4px;background:none;border:0;cursor:pointer;text-align:left}
.faq-item .faq-q{margin:0;flex:1;font-family:'Shippori Mincho',serif;font-size:18.5px;font-weight:800;color:#22201A}
.faq-item .faq-answer p{margin:0;padding:0 4px 26px;font-size:15.5px;line-height:1.95;color:#3f3c33;font-weight:500}

/* contact form fields */
.form-field{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:800;color:#22201A}
.form-field-label{display:inline-flex;align-items:center;gap:8px}
.required-badge{font-size:10px;font-weight:800;color:#fff;background:#C20E22;border-radius:100px;padding:2px 8px}
.form-input{padding:14px 15px;border:2px solid rgba(34,32,26,.28);font-size:15px;color:#22201A;background:#fff}
/* Cloudflare Turnstile renders a fixed ~300px-wide iframe by default, which overflows
   narrow phones — constrain it (and its injected iframe) to the form's own width */
#turnstileWidget{max-width:100%}
#turnstileWidget iframe{max-width:100%!important}

@media (prefers-reduced-motion:reduce){
  .sc-rv,.sc-rv-up,.sc-rv-left,.sc-rv-right,.sc-rv-scale{opacity:1!important;transform:none!important;transition:none!important}
  .cta-lift,.cta-ring::before{animation:none!important;transition:none!important}
}

/* ===== brand lockup (header) ===== */
.brand-name{font-family:'Shippori Mincho',serif;font-size:20px;font-weight:800;color:#22201A;white-space:nowrap}
.brand-sub{font-size:13px;font-weight:700;color:#8a8576;letter-spacing:.03em;white-space:nowrap}

/* ===== header CTA + mobile nav toggle ===== */
.nav-actions{display:flex;align-items:center;gap:14px;flex:none}
.nav-cta{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:#fff;background:#06B6D4;padding:12px 22px;border-radius:3px;text-decoration:none;box-shadow:0 8px 20px rgba(6,182,212,.28);white-space:nowrap;flex:none}
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:none;cursor:pointer;flex:none;padding:0}
.nav-toggle .icon-close{display:none}
.nav-toggle.open .icon-burger{display:none}
.nav-toggle.open .icon-close{display:block}

/* ===== mid CTA band ===== */
.mid-cta-wrap{padding:54px 40px;align-items:center;gap:32px}
.mid-cta-text{min-width:320px}
.mid-cta-title{font-size:32px}
.process-title{font-size:32px}
.package-title{font-size:36px}
.contact-title{font-size:44px}

@media (max-width:1024px){
  .nav-toggle{display:flex}
  .nav-wrap{padding:12px 24px}
  .nav-brand{flex:1 1 auto;min-width:0}
  .nav-brand > div{min-width:0}
  .brand-name{overflow:hidden;text-overflow:ellipsis;display:block}
  .brand-sub{overflow:hidden;text-overflow:ellipsis;display:block}
  .nav-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:flex-start;gap:2px;margin:0;padding:12px 24px 20px;background:#F3EEE4;border-bottom:1px solid rgba(34,32,26,.14);box-shadow:0 12px 24px rgba(34,32,26,.12)}
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 0;width:100%}
}
@media (max-width:640px){
  .nav-wrap{padding:10px 12px}
  .brand-name{font-size:15px}
  .brand-sub{font-size:11px}
  .nav-cta{padding:9px 12px;font-size:13px;gap:6px}
  .nav-actions{gap:10px}
  .mid-cta-wrap{padding:36px 16px;flex-direction:column;align-items:flex-start;gap:22px}
  .mid-cta-text{min-width:0}
  .mid-cta-title{font-size:24px}
  .process-title{font-size:20px}
  .package-title{font-size:22px}
  .contact-title{font-size:28px}
}

/* ===== hero ===== */
.hero-eyebrow{margin-bottom:24px;color:#C20E22;font-family:'Noto Sans JP',sans-serif;line-height:1.3}
.hero-eyebrow-main{font-size:32px;font-weight:800;letter-spacing:.06em}
.hero-eyebrow-sub{font-size:15px;font-weight:700;letter-spacing:.08em}
.hero-title{margin:0;font-family:'Noto Sans JP',sans-serif;font-size:52px;line-height:1.42;font-weight:800;letter-spacing:.005em}
.hero-lede{margin:30px 0 0;font-size:18px;line-height:2;color:#3f3c33;max-width:490px;font-weight:500}
.hanko-badge{position:absolute;top:-30px;right:-24px;z-index:2;width:132px;height:132px;border:3px solid #C20E22;border-radius:50%;transform:rotate(-6deg);gap:4px}
.hanko-label{font-size:25px;font-weight:800;letter-spacing:.1em;margin-left:.1em}

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:36px;padding:56px 24px 48px}
  .hero-title{font-size:38px}
  .hanko-badge{width:92px;height:92px;top:-18px;right:-10px;gap:2px}
  .hanko-badge svg{width:58px;height:35px}
  .hanko-label{font-size:17px}
}
@media (max-width:640px){
  .hero-grid{padding:40px 16px 36px;gap:28px}
  .hero-eyebrow-main{font-size:24px}
  .hero-eyebrow-sub{font-size:12px}
  .hero-title{font-size:29px}
  .hero-lede{font-size:16px;line-height:1.9}
}

/* ===== faq / contact outer wrappers (extracted for @media overrides) ===== */
.faq-wrap{max-width:860px;margin:0 auto;padding:90px 40px 20px}
.contact-wrap{max-width:1280px;margin:0 auto;padding:96px 40px 40px}

@media (max-width:1024px){
  .section-wrap{padding:60px 24px 16px}
  .section-wrap--tight{padding:0 24px 44px}
  .section-title{font-size:30px}
  .section-label{font-size:26px}
  .section-num{font-size:40px}
  .faq-wrap{padding:60px 24px 16px}
  .contact-wrap{padding:60px 24px 32px}
  .grid-3{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-grid > *{min-width:0}
}
@media (max-width:640px){
  .section-wrap{padding:44px 16px 12px}
  .section-wrap--tight{padding:0 16px 32px}
  .section-title{font-size:24px}
  .section-label{font-size:20px}
  .section-num{font-size:32px}
  .faq-wrap{padding:44px 16px 12px}
  .contact-wrap{padding:40px 16px 28px}
  .grid-2{grid-template-columns:1fr}
}

/* ===== stat strip items ===== */
.stat-item{padding:26px 40px}
.stat-item--divider{border-right:1px solid rgba(34,32,26,.16)}

/* ===== hiring steps (grid-4) ===== */
.hiring-step{padding:0 26px;border-top:4px solid rgba(34,32,26,.2);padding-top:24px}
.hiring-step--active{border-top-color:#C20E22}
.hiring-steps .hiring-step:first-child{padding-left:0}
.hiring-steps .hiring-step:last-child{padding-right:0}

@media (max-width:1024px){
  .stat-item{padding:20px 24px}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:32px 26px}
  .hiring-step{padding:24px 24px 0}
  .hiring-steps .hiring-step:first-child,
  .hiring-steps .hiring-step:last-child{padding-left:24px;padding-right:24px}
}
@media (max-width:640px){
  .stat-grid{grid-template-columns:1fr}
  .stat-item--divider{border-right:0;border-bottom:1px solid rgba(34,32,26,.16)}
  .grid-4{grid-template-columns:1fr;gap:28px 0}
}

/* ===== GEO diagram ===== */
.diag-panel{padding:38px 34px}
.diag-arrow{flex-direction:column;align-items:center;padding:10px 0 14px}
.diag-main-flow,.diag-middle{display:contents}
.diag-label-mobile{display:none}
.diag-side-line,.diag-side-cap,.diag-side-text,.diag-connector-icon,.diag-legend,.diag-support-note{display:none}

.diag-client{background:#1D3557;gap:16px;padding:22px 26px}
.diag-icon-jp{width:46px;height:46px;font-size:14px;border:2.5px solid #fff}
.diag-client-title{font-family:'Shippori Mincho',serif;font-weight:800;font-size:19px}
.diag-client-sub{color:rgba(255,255,255,.75);font-weight:500;font-size:13.5px;margin-top:3px}

.diag-alobridge{background:#C20E22;padding:28px 28px}
.diag-icon-vn{width:40px;height:40px;font-size:13px;border:2px solid #fff}
.diag-alobridge-title{font-family:'Shippori Mincho',serif;font-weight:800;font-size:20px}
.diag-alobridge-sub{font-weight:700;color:rgba(255,255,255,.85);font-size:13.5px;margin-top:10px}
.diag-alobridge-para{margin:14px 0 0;line-height:1.85;color:rgba(255,255,255,.92);font-weight:500;font-size:13.5px}

.diag-contract-title{font-weight:800;color:#22201A;margin-top:6px;font-size:13.5px}
.diag-labor-title{font-weight:800;color:#22201A;font-size:12.5px}
.diag-labor-sub{color:#8a8576;font-weight:500;margin-top:3px;font-size:10.5px}
.diag-fs-135{font-size:13.5px}
.diag-fs-125{font-size:12.5px}
.diag-fs-11{font-size:11px}

.diag-employee{background:#bda679}
.diag-box-row{display:flex}
.diag-box-row--1{padding:22px 22px 20px}
.diag-box-row--2{padding:20px 22px 22px}
.diag-num{width:27px;height:27px;font-size:13px}
.diag-conn-row{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px}
.diag-emp-title-1{font-family:'Shippori Mincho',serif;font-weight:800;color:#22201A;font-size:17px}
.diag-emp-title-2{font-family:'Shippori Mincho',serif;font-weight:700;color:#5a5648;font-size:16px}
.diag-opt-badge{font-weight:800;color:#fff;background:#8a8576;border-radius:100px;padding:2px 10px;font-size:10.5px}
.diag-emp-note{color:#5a5648;font-weight:500;margin-top:4px;font-size:12.5px}
.diag-pill{background:#ECE5D7;border-radius:100px;padding:4px 11px;font-size:12px;font-weight:700}

@media (max-width:640px){
  .diag-panel{padding:16px}
  .diag-label-desktop{display:none}
  .diag-label-mobile{display:flex;align-items:center;gap:10px;margin-bottom:16px}

  /* desktop/tablet: geo-diagram-grid stays display:grid (base class) and diag-main-flow /
     diag-middle stay display:contents, so grid-row/grid-column on every descendant still
     targets the real grid untouched. Mobile only: everything switches to stacked flex,
     restacking client → 雇用代行契約 → alobridge → 労働契約 → employee. The indented
     .diag-middle wrapper (client and employee stay outside it, full width) is what the
     指示/役務 side rail is positioned against — it must span only client-to-employee's
     gap, not the whole flow, per the design spec. */
  .geo-diagram-grid{display:flex;flex-direction:column}
  .diag-main-flow{display:flex;flex-direction:column}
  .diag-middle{display:flex;flex-direction:column;position:relative;padding-left:52px}

  .diag-client{background:#1d2f52;border-radius:12px;padding:18px 16px;gap:12px}
  .diag-icon-jp{width:42px;height:42px;font-size:13px;border:1.5px solid rgba(255,255,255,.55)}
  .diag-client-title{font-family:'Shippori Mincho',serif;font-weight:700;font-size:18px;line-height:1.3}
  .diag-client-sub{font-size:12px;color:rgba(255,255,255,.78);font-weight:400}

  .diag-arrow--role{position:absolute;left:0;top:0;bottom:0;width:52px;flex-direction:column;padding:0}
  .diag-arrow-svg,.diag-role-text-desktop{display:none}
  .diag-side-line{display:block;position:absolute;top:8px;bottom:8px;left:25px;border-left:2px dashed #c30a2c}
  .diag-side-cap{display:block;position:absolute;left:20px;color:#c30a2c;font-size:12px;line-height:1}
  .diag-side-cap--top{top:2px}
  .diag-side-cap--bottom{bottom:2px}
  .diag-side-text{display:flex;flex-direction:column;position:absolute;top:50%;left:26px;transform:translate(-50%,-50%);writing-mode:vertical-rl;text-orientation:upright;background:#F3EEE4;padding:8px 1px;text-align:center}
  .diag-role-title-m{font-size:13px;font-weight:700;color:#c30a2c;letter-spacing:.05em}
  .diag-role-sub-m{display:block;font-size:10px;color:#8a8578;margin-right:2px}

  .diag-arrow--contract{order:2;flex-direction:row;align-items:center;gap:10px;padding:12px 4px 12px 22px}
  .diag-connector-icon{display:block;color:#c30a2c;font-size:19px;line-height:1}
  .diag-contract-title{margin-top:0;font-size:13px;color:#1d2f52}

  .diag-alobridge{order:3;background:#c30a2c;border-radius:12px;padding:18px 16px}
  .diag-icon-vn{width:40px;height:40px;font-size:13px;border:1.5px solid rgba(255,255,255,.55)}
  .diag-alobridge-title{font-family:'Shippori Mincho',serif;font-weight:700;font-size:19px}
  .diag-alobridge-sub{font-size:12px;font-weight:700;color:rgba(255,255,255,.9);margin-top:2px}
  .diag-alobridge-para{margin:12px 0 0;font-size:12.5px;color:rgba(255,255,255,.92);line-height:1.7}

  .diag-connector{order:4}
  .diag-conn-row{flex-direction:row;align-items:flex-start;padding:12px 4px 12px 22px;gap:10px}
  .diag-conn-row--2{display:none}
  .diag-connector-svg{display:none}
  .diag-labor-title{margin-top:0;font-size:13px;color:#1d2f52}
  .diag-labor-sub{font-size:11px;color:#8a8578;margin-top:1px}

  .diag-employee{order:2;background:#b1a488;border-radius:12px;overflow:hidden}
  .diag-box-row--1{padding:16px 16px 14px}
  .diag-box-row--2{padding:14px 16px 16px}
  .diag-num{width:22px;height:22px;font-size:12px}
  .diag-emp-title-1{font-family:'Shippori Mincho',serif;font-weight:700;font-size:16px;color:#3a3222}
  .diag-emp-title-2{font-family:'Shippori Mincho',serif;font-weight:700;font-size:16px;color:#5a5240}
  .diag-opt-badge{background:rgba(58,50,34,.22);color:#3a3222;font-size:10.5px;font-weight:700;padding:3px 9px}
  .diag-emp-note{font-size:12px;color:#5a5240;margin-top:7px}
  .diag-pill{background:#F3EEE4;color:#4a4231!important;border-radius:20px;font-size:11.5px;font-weight:500;padding:5px 10px}
  .diag-pill--pm{padding:5px 13px}
  .diag-support-note{display:inline;font-size:11px;color:#7a725f;margin-left:0}

  .diag-legend{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:20px;padding-top:16px;border-top:1px solid #ddd7c8}
}

/* ===== pricing table ===== */
.pricing-label{width:200px}
.pricing-content{border-left:1px solid rgba(34,32,26,.2)}

/* ===== 1-room package row ===== */
.package-photo{width:220px}

@media (max-width:640px){
  .pricing-table, .pricing-table tbody, .pricing-table tr, .pricing-table td{display:block;width:auto}
  .pricing-label{border-right:0}
  .pricing-content{border-left:0;border-top:1px solid rgba(34,32,26,.2)}
  .package-row{flex-direction:column}
  .package-photo{width:100%}
}