:root{--ink:#14212d;--red:#ed3e34;--yellow:#f9dc8f;--cream:#fffaf0;--green:#10b646;--blue:#18a9d5;--line:#dfe5e9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;color:var(--ink);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-height:1.75;background:#fff}img{max-width:100%}a{color:inherit}.site-header{height:83px;display:flex;align-items:center;padding:0 5.5%;gap:36px;position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 10px #17222c12}.header-logo{width:150px;margin-right:auto}.header-logo img{display:block}.site-header nav{display:flex;gap:30px}.site-header nav a{text-decoration:none;font-weight:700;font-size:14px}.mini-line{background:var(--green);color:#fff;text-decoration:none;font-weight:800;padding:11px 25px;border-radius:25px}.hero{height:810px;background:var(--yellow);position:relative;overflow:hidden}.hero-shape{position:absolute;border-radius:50%;background:#fff0bd}.hero-shape.one{width:570px;height:570px;left:-220px;top:-290px}.hero-shape.two{width:700px;height:700px;right:-260px;bottom:-320px}.hero-copy{position:absolute;left:8%;top:75px;z-index:2}.hero-logo{width:340px;display:block;margin-bottom:55px}.hero h1{font-size:43px;line-height:1.55;margin:0;font-weight:900;letter-spacing:.02em}.hero h1 strong{display:block;color:#dd3e34}.hero-rabbit{position:absolute;width:260px;height:535px;object-fit:contain;right:17%;top:110px;z-index:2}.hero-actions{position:absolute;z-index:3;left:8%;bottom:45px;width:660px;text-align:center}.hero-actions>p{font-size:15px}.badges{display:flex;gap:9px;justify-content:center;margin:15px 0}.badges span,.chips span{background:var(--ink);color:#fff;border-radius:10px;padding:9px 18px;font-weight:800;font-size:14px}.line-button{height:72px;border-radius:38px;background:var(--green);color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:20px;font-weight:900;font-size:22px;box-shadow:0 8px 14px #05782a2d}.line-button i{width:50px;height:50px;border-radius:50%;background:#fff;color:var(--green);font-style:normal;font-size:11px;display:flex;align-items:center;justify-content:center}.line-button b{margin-left:auto;margin-right:25px;font-size:34px}.hero-actions small{display:block;margin-top:10px;font-size:10px}.section{padding:90px max(6vw,calc((100% - 1100px)/2));text-align:center}.eyebrow{font-weight:800;color:var(--red);margin:0 0 12px}.section h2,.cta-band h2{font-size:46px;line-height:1.35;margin:0 0 28px;font-weight:900}.section h2 em{font-style:normal;color:var(--red)}.intro>p:not(.eyebrow){max-width:980px;margin:0 auto 30px}.chips{display:flex;justify-content:center;gap:12px;margin:35px 0}.wide{max-width:640px;margin:0 auto}.intro>small{display:block;margin-top:12px}.empathy{background:#f7f9fa}.pricing{background:var(--yellow);overflow:hidden}.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin:40px auto;max-width:1050px}.price-grid article{background:#fff;border-radius:22px;padding:35px;box-shadow:0 10px 0 #17222c12}.price-grid h3{background:var(--ink);color:#fff;border-radius:24px;padding:8px;margin:0}.amount{font-size:78px;color:var(--red);font-weight:900;line-height:1.25}.amount small{font-size:17px;display:inline-block;color:var(--ink);text-align:left}.free{max-width:920px;margin:auto;background:#fff;border:4px solid var(--red);border-radius:20px;display:flex;align-items:center;justify-content:space-around;padding:15px 25px}.free span{background:var(--ink);color:#fff;border-radius:22px;padding:8px 28px}.free b{font-size:27px}.free strong{font-size:66px;color:var(--red)}.free small{font-size:22px}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:45px;text-align:left}.card-grid article{border:1px solid #ead58c;background:#fffdf7;border-radius:18px;padding:30px;min-height:250px}.card-grid b{font-size:44px;color:var(--red)}.card-grid h3{font-size:23px}.comparison{background:#f8fafb}.table-wrap{overflow:auto;margin-top:40px}table{border-collapse:separate;border-spacing:0;width:100%;min-width:780px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 5px 20px #17222c12}th,td{padding:22px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}thead th{background:var(--ink);color:#fff;font-size:18px}thead th:nth-child(2){background:var(--red)}tbody td:nth-child(2){background:#fff5da;font-weight:800;color:var(--red)}.note{font-size:11px;text-align:right}.cta-band{padding:60px 20px;text-align:center;background:var(--yellow)}.cta-band h2{font-size:38px}.flow>p:not(.eyebrow){max-width:900px;margin:0 auto 35px}.flow ol{list-style:none;padding:0;max-width:900px;margin:auto;display:grid;gap:16px;text-align:left}.flow li{display:flex;align-items:center;background:var(--cream);border:1px solid #efd48b;border-radius:18px;padding:20px 28px}.flow li>b{flex:0 0 50px;height:50px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:24px;margin-right:25px}.flow h3,.flow p{margin:0}.faq{background:#f6f8f9}.faq-list{max-width:960px;margin:auto;text-align:left}.faq details{background:#fff;border:1px solid #d8e0e5;border-radius:14px;padding:0 24px;margin:12px 0}.faq summary{list-style:none;cursor:pointer;font-weight:800;padding:22px 0}.faq details p{margin:0;padding:0 0 22px;color:#5c6a76}.faq details:not([open]) p{display:none}.final img,footer>img{width:165px}.final{padding:65px 20px}.final h2{margin-top:15px}footer{text-align:center;background:#f5f7f8;padding:55px 20px 35px}footer nav{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;margin:25px 0}footer nav a{font-size:13px}.sp-only{display:none}
.legal{min-height:70vh;padding:70px max(6vw,calc((100% - 900px)/2))}.legal h1{font-size:36px;border-bottom:4px solid var(--yellow);padding-bottom:14px}.legal h2{font-size:20px;margin-top:32px}.legal table{min-width:0;box-shadow:none;border:1px solid var(--line)}.legal th{width:28%;background:#faf8f1}.contact-form{display:grid;gap:18px}.contact-form label{font-weight:700}.contact-form input,.contact-form textarea{width:100%;padding:14px;border:1px solid #bbc6cd;border-radius:8px;font:inherit}.contact-form button{border:0;cursor:pointer;max-width:420px;width:100%;margin:auto}
@media(max-width:900px){html{scroll-padding-top:0}.site-header{display:none}.hero{width:100%;height:643px}.hero-shape.one{width:250px;height:250px;left:-65px;top:-80px}.hero-shape.two{width:340px;height:332px;right:-137px;bottom:48px}.hero-copy{left:0;top:22px;width:100%;text-align:center}.hero-logo{display:none}.hero h1{font-size:clamp(20px,5.97vw,24px);line-height:31px}.hero h1 strong{margin-top:5px;color:#dd3e34}.hero-rabbit{width:407px;height:272px;object-fit:contain;left:50%;right:auto;transform:translateX(-50%);top:132px}.hero-actions{left:22px;bottom:14px;width:calc(100% - 44px)}.hero-actions>p{font-size:10px;margin:0 0 5px}.badges{gap:7px 8px;display:grid;grid-template-columns:1fr 1fr;margin:5px 0 12px}.badges span{font-size:11px;padding:7px 3px;height:35px}.badges span:last-child{grid-column:1/3;width:221px;justify-self:center}.line-button{height:50px;font-size:17px;gap:10px}.line-button i{width:38px;height:38px;margin-left:10px}.line-button b{margin-right:16px;font-size:28px}.hero-actions small{font-size:7px;line-height:10px;margin-top:7px}.section{padding:60px 20px}.section h2,.cta-band h2{font-size:29px}.intro .chips{display:grid}.chips span{font-size:12px}.price-grid{grid-template-columns:1fr;gap:20px}.price-grid article{padding:22px}.amount{font-size:52px}.free{flex-wrap:wrap;gap:5px}.free b{font-size:18px}.free strong{font-size:50px}.card-grid{grid-template-columns:1fr}.comparison{padding-left:12px;padding-right:12px}.flow li{align-items:flex-start;padding:18px}.flow li>b{flex-basis:42px;height:42px;margin-right:14px}.flow h3{font-size:17px}.flow p{font-size:13px}.faq details{padding:0 16px}.faq summary{font-size:14px}.cta-band{padding:48px 20px}.sp-only{display:block}.legal{padding:45px 20px}.legal h1{font-size:28px}footer nav{gap:12px 18px}}

.mobile-medal-copy{display:none}
@media(max-width:900px){
  .hero{width:min(100%,402px);margin:0 auto;background:#f9dc8f}
  .hero-shape{display:block}.hero-rabbit{display:none}
  .hero h1 strong{font-size:23px;letter-spacing:-.045em;white-space:nowrap}
  .hero-actions .line-button{width:100%;min-width:0;position:relative;padding:0 48px}
  .hero-actions .line-button i{position:absolute;left:6px;margin:0}
  .hero-actions .line-button b{position:absolute;right:14px;margin:0}
  .hero .badges{grid-template-columns:minmax(0,172px) minmax(0,177px);justify-content:center}
  .hero .badges span{min-width:0;width:auto;white-space:nowrap;overflow:hidden}
  .hero .badges span:last-child{width:221px}
}

/* Figma「実装」最終値：導入 / 最終CTA / フッター */
@media(min-width:901px){
  .intro{height:824px;min-height:824px;padding:0 max(6vw,calc((100% - 1100px)/2));display:flex;flex-direction:column;justify-content:center;background:#fdfaf0}
  .intro>.eyebrow{margin:0 0 18px;font-size:18px;line-height:1.5}
  .intro>h2{margin:0 0 42px;font-size:60px;line-height:1.35;letter-spacing:-.04em}
  .intro>p:not(.eyebrow){max-width:980px;margin:0 auto 42px;font-size:18px;line-height:2.1}
  .intro .chips{margin:0 0 42px;gap:14px}
  .intro .chips span{height:50px;padding:0 24px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:17px}
  .intro .line-button.wide{width:640px;max-width:640px;height:76px;font-size:28px;border-radius:40px}
  .intro>small{margin-top:16px;color:#68737f;font-size:13px;line-height:1.6}
  .final{height:430px;min-height:430px;padding:45px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#ffe39a}
  .final>img{width:200px;height:100px;object-fit:contain}
  .final h2{margin:8px 0 12px;font-size:42px;line-height:1.35;letter-spacing:-.03em}
  .final>p{margin:0 0 28px;font-size:18px}
  .final .line-button.wide{width:540px;max-width:540px;height:88px;border-radius:45px;font-size:26px}
  footer{height:508px;min-height:508px;padding:55px 20px 35px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#f7f9fb}
  footer>img{width:220px;height:112px;object-fit:contain}
  footer>p{margin:22px 0 0;font-size:18px}
  footer nav{margin:43px 0 35px;gap:30px}
  footer nav a{font-size:16px;color:#5a6874}
  footer>small{font-size:14px;color:#687580}
}

@media(max-width:900px){
  .intro .line-button.wide,.final .line-button.wide{width:100%;max-width:640px}
  .final>img,footer>img{width:165px;height:auto}
}

@media(min-width:901px){
  .final{padding:35px 20px}
  .final>img{height:70px;flex-shrink:0}
  .final h2,.final>p,.final .line-button{flex-shrink:0}
  .final .line-button.wide{height:88px}
  footer>img{height:90px}
}

.service-scope{position:relative;background:#eaf8ff;overflow:hidden}
.service-scope::before{content:"";position:absolute;z-index:0;inset:0;background:#fff3b8;clip-path:polygon(52.1% 0,100% 0,100% 100%,31.7% 100%)}
.service-scope>*{position:relative;z-index:1}
@media(max-width:900px){
  .service-scope{background:#eaf8ff}
  .service-scope::before{clip-path:polygon(62% 0,100% 0,100% 100%,30% 100%)}
  html{scroll-padding-top:60px}
  #top{scroll-margin-top:60px}
}

@media(min-width:901px){
  /* ②本文をFigmaどおり「内容、」までを1行目に収める。 */
  .flow li:nth-child(2){padding-right:28px}
}

/* Figma「実装」最終値：比較表 */
.comparison{position:relative;min-height:1364px;padding:40px 38px 28px;background:#fff;text-align:center;overflow:hidden}
.comparison::before{content:"";position:absolute;right:-115px;top:-115px;width:250px;height:250px;border-radius:50%;background:#fff8e1}
.comparison-logo{position:absolute;left:72px;top:42px;width:290px;height:135px;object-fit:contain}
.comparison>h2{margin:0;color:#111b27;font-size:64px;line-height:1.25;font-weight:900;letter-spacing:-.04em}
.comparison-lead{margin:8px 0 28px;color:#111b27;font-size:25px;font-weight:900;line-height:1.4}.comparison-lead em{color:#f21e22;font-style:normal}
.comparison .table-wrap{margin:0;overflow:visible}
.comparison table{width:100%;min-width:0;border:1px solid #d9e1e7;border-collapse:separate;border-spacing:0;border-radius:22px;background:#fff;box-shadow:none;overflow:hidden;table-layout:fixed}
.comparison th,.comparison td{padding:17px 14px;border-right:1px solid #d9e1e7;border-bottom:1px solid #d9e1e7;color:#111b27;text-align:center;font-size:17px;font-weight:700;line-height:1.45;vertical-align:middle}
.comparison tr:last-child th,.comparison tr:last-child td{border-bottom:0}.comparison tr>*:last-child{border-right:0}
.comparison thead th{height:94px;background:#fff;color:#111b27;font-size:28px;font-weight:900}.comparison thead th:first-child{width:17%}.comparison thead th:not(:first-child){width:20.75%}.comparison thead th:nth-child(2){background:#fff}.comparison thead img{display:block;width:190px;height:75px;object-fit:contain;margin:auto}.comparison thead small{display:block;font-size:14px}
.comparison tbody th{text-align:left;padding-left:42px;background:#fff;font-size:21px;font-weight:900}.comparison tbody th small{font-size:13px;margin-left:12px}
.comparison tbody td:nth-child(2){background:#fff;color:#f21e22;font-weight:800;border-left:6px solid #2fa9e8;border-right:6px solid #2fa9e8}.comparison tbody tr:last-child td:nth-child(2){border-bottom:6px solid #2fa9e8;border-radius:0 0 18px 18px}.comparison thead th:nth-child(2){border:6px solid #2fa9e8;border-bottom:1px solid #d9e1e7;border-radius:18px 18px 0 0}
.comparison .price-row{height:215px}.comparison .price-row td b,.comparison .price-row td strong{display:block}.comparison .price-row td b{color:#159cda;font-size:14px}.comparison .price-row td .part-label{margin-top:16px;color:#ff5b00}.comparison .price-row td strong{margin-top:8px;color:#111b27;font-size:25px}.comparison .price-row td:nth-child(2) strong{color:#f21e22;font-size:31px}
.comparison tbody td small{display:block;font-size:11px}.comparison tbody tr:not(.price-row){height:77px}.comparison tbody td:nth-child(2){color:#f21e22;font-size:18px}
.comparison-summary{position:relative;display:grid;grid-template-columns:150px 1fr;gap:20px;margin:28px 0 0;padding:25px 35px 22px;border:2px solid #f2ac00;border-radius:22px;text-align:left}.comparison-summary>img{align-self:end;width:125px;height:230px;object-fit:contain}.comparison-summary>div>p{margin:0 0 12px;font-size:20px;font-weight:900}.summary-prices{display:grid;grid-template-columns:290px 230px 210px 1fr;gap:14px;align-items:center}.summary-prices span{padding:6px 10px;border:2px solid #2fa9e8;border-radius:10px;color:#159cda;text-align:center;font-size:14px;font-weight:800}.summary-prices span:nth-of-type(2){border-color:#ff5b00;color:#ff5b00}.summary-prices strong{color:#159cda;font-size:24px}.summary-prices strong:last-child{color:#ff5b00}.comparison-summary ul{list-style:none;margin:16px 0 0;padding:0}.comparison-summary li{margin:8px 0;font-size:19px;font-weight:800}.comparison-summary li::before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:18px;border:2px solid #f2ac00;border-radius:50%;color:#f2ac00;font-size:13px}.comparison-summary em{color:#f21e22;font-style:normal}.comparison>.note{margin:24px 34px 0;color:#4f5d68;font-size:10px;line-height:2.4;text-align:left}

@media(max-width:900px){
  .comparison{min-height:0;padding:58px 12px 70px}
  .comparison-logo{position:static;width:160px;height:74px;margin:0 auto 18px}
  .comparison>h2{font-size:36px}.comparison-lead{font-size:17px;margin:7px 0 24px}
  .comparison .table-wrap{overflow-x:auto;padding:0 0 10px;-webkit-overflow-scrolling:touch}
  .comparison table{width:980px;min-width:980px}
  .comparison th,.comparison td{font-size:13px}.comparison thead th{font-size:20px}.comparison tbody th{padding-left:18px;font-size:16px}
  .comparison-summary{grid-template-columns:1fr;padding:24px 18px}.comparison-summary>img{display:none}.comparison-summary>div>p{font-size:17px}
  .summary-prices{grid-template-columns:1fr 1fr;gap:9px}.summary-prices span{font-size:12px}.summary-prices strong{font-size:17px;text-align:center}
  .comparison-summary li{display:flex;font-size:14px;line-height:1.6}.comparison-summary li::before{flex:0 0 20px;margin-top:1px;margin-right:10px}
  .comparison>.note{margin:20px 4px 0;font-size:9px;line-height:1.8}
}

/* Flow — Figma implementation node 270:180 */
.flow{position:relative;height:1265px;padding:0;background:#fff;text-align:center;overflow:hidden}
.flow>.eyebrow{position:absolute;left:50%;top:39px;width:600px;transform:translateX(-50%);margin:0;color:#68737f;font-size:18px;font-weight:700;line-height:1.5}
.flow>h2{position:absolute;left:50%;top:70px;width:1100px;transform:translateX(-50%);margin:0;color:#162635;font-size:58px;font-weight:900;line-height:1.22;letter-spacing:-.04em}
.flow>.flow-lead{position:absolute;left:50%;top:174px;width:840px;transform:translateX(-50%);margin:0;color:#68737f;font-size:18px;line-height:1.7;white-space:normal}
.flow ol{position:absolute;inset:0;display:block;max-width:none;margin:0;padding:0;text-align:left}
.flow li{position:absolute;left:50%;width:890px;transform:translateX(-50%);margin:0;padding:28px 28px 22px 110px;display:block;border:1px solid #f2e6be;border-radius:18px;background:#fefbf4;box-shadow:none}
.flow li:nth-child(1){top:277px;height:156px}.flow li:nth-child(2){top:453px;height:126px}.flow li:nth-child(3){top:598px;height:126px}.flow li:nth-child(4){top:744px;height:155px}.flow li:nth-child(5){top:920px;height:126px}.flow li:nth-child(6){top:1065px;height:126px}
.flow li>b{position:absolute;left:28px;top:28px;width:56px;height:56px;margin:0;display:grid;place-items:center;border-radius:50%;background:#e4634d;color:#fff;font-size:24px;font-weight:900;line-height:1}
.flow li div{display:block}.flow li h3{margin:0 0 8px;color:#162635;font-size:24px;font-weight:900;line-height:1.35}.flow li p{margin:0;color:#68737f;font-size:17px;line-height:1.6}

/* FAQ — Figma implementation nodes 270:214, 270:226 and 270:242 */
.faq{padding:120px 20px 120px;background:#fafbfc;text-align:center}
.faq>.eyebrow{display:block;margin:0 0 18px;color:#db4c3d;font-size:18px;font-weight:700;line-height:1.5}
.faq>h2{margin:0 0 48px;color:#121c28;font-size:58px;font-weight:900;line-height:1.3;letter-spacing:-.04em}
.faq-list{width:955px;max-width:100%;margin:0 auto;text-align:left}
.faq details{margin:0 0 14px;padding:0 26px;border:1px solid #d9e3eb;border-radius:16px;background:#fff;box-shadow:0 7px 24px rgba(0,0,0,.04);overflow:hidden}
.faq summary{position:relative;min-height:78px;padding:26px 0 22px;display:flex;align-items:center;list-style:none;cursor:pointer;color:#121c28;font-size:20px;font-weight:900;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}.faq summary::marker{content:""}
.faq summary::after{content:none}
.faq details p{margin:0;padding:0 0 25px;color:#4d5c66;font-size:17px;line-height:1.75}
.faq details:not([open]) p{display:none}

@media(max-width:900px){
  .flow{height:auto;padding:58px 20px 64px;overflow:visible}
  .flow>.eyebrow,.flow>h2,.flow>.flow-lead{position:static;left:auto;top:auto;width:auto;transform:none}
  .flow>.eyebrow{margin-bottom:9px;font-size:15px}
  .flow>h2{font-size:clamp(31px,9vw,40px);line-height:1.3}
  .flow>.flow-lead{margin:22px auto 0;max-width:560px;font-size:15px;line-height:1.8;white-space:normal}
  .flow ol{position:static;display:grid;gap:15px;margin:38px 0 0}
  .flow li,.flow li:nth-child(n){position:relative;left:auto;top:auto;width:100%;height:auto;min-height:130px;transform:none;padding:24px 20px 22px 82px;border-radius:15px}
  .flow li>b{left:18px;top:22px;width:48px;height:48px;font-size:21px}
  .flow li h3{font-size:19px;line-height:1.45}.flow li p{font-size:14px;line-height:1.7}
  .faq{padding:64px 16px 72px}
  .faq>.eyebrow{margin-bottom:10px;font-size:15px}
  .faq>h2{margin-bottom:34px;font-size:clamp(34px,10vw,44px);line-height:1.3}
  .faq-list{width:100%}
  .faq details{margin-bottom:11px;padding:0 18px;border-radius:13px}
  .faq summary{min-height:68px;padding:20px 0 18px;font-size:15px;line-height:1.55}
  .faq details p{padding-bottom:21px;font-size:14px;line-height:1.75}
}

/* Keep wide LINE CTA ornaments inside the button and center the label itself. */
.line-button.wide{position:relative;padding:0 76px;justify-content:center;gap:0}
.line-button.wide>i{position:absolute;left:11px;margin:0}
.line-button.wide>span{display:block;width:100%;text-align:center}
.line-button.wide>b{position:absolute;right:25px;margin:0}
@media(max-width:900px){
  .line-button.wide{padding:0 56px}
  .line-button.wide>i{left:6px;margin:0}
  .line-button.wide>b{right:16px;margin:0}
}
@media(max-width:370px){
  .hero h1{font-size:20px}.hero h1 strong{font-size:20px}
  .hero-actions{left:14px;width:calc(100% - 28px)}
  .badges span{font-size:10px}.hero-actions .line-button{font-size:15px}
}

.service-scope{display:grid;grid-template-columns:34% 1fr;gap:80px;text-align:left;background:linear-gradient(132deg,#eaf8ff 0 46%,#fff5bd 46% 100%);border-bottom:1px solid #efd48b}
.service-scope h2{font-size:18px;line-height:1.75;margin:0}
.service-scope>p{margin:0;font-weight:600}
@media(max-width:900px){.service-scope{grid-template-columns:1fr;gap:22px;background:linear-gradient(145deg,#eaf8ff 0 45%,#fff5bd 45% 100%)}}

@media(min-width:901px){
  .intro{min-height:824px;display:flex;flex-direction:column;justify-content:center}
  .empathy{min-height:594px;display:flex;flex-direction:column;justify-content:center}
  .pricing{min-height:810px}
  .pricing{padding-top:41px;padding-bottom:42px}
  .reasons{min-height:645px}
  .comparison{min-height:1364px;display:flex;flex-direction:column;justify-content:center}
  .service-scope{min-height:400px;align-items:center}
  .flow{min-height:1265px;display:flex;flex-direction:column;justify-content:center}
  .final{min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center}
  footer{min-height:508px;display:flex;flex-direction:column;justify-content:center;align-items:center}
}

.legal p,.legal li,.legal td{overflow-wrap:anywhere}
.legal li{margin:.45em 0}
.legal a{color:#d83d33;text-underline-offset:3px}
.legal-table{width:100%;table-layout:fixed;border-radius:12px}
.legal-table th,.legal-table td{text-align:left;vertical-align:top}
.legal-table tbody td:nth-child(2){background:#fff;color:var(--ink);font-weight:400}
.legal-date{text-align:right;margin-top:40px;color:#66737d;font-size:13px}
.legal-footer{min-height:260px}
.legal-footer>a{margin:12px 0}
.legal-footer small{display:block;margin-top:20px}
.contact-lead{font-size:18px}
.contact-card{margin:35px 0;padding:35px;background:#fff8d8;border:1px solid #efd48b;border-radius:18px;text-align:center}
.contact-card h2{margin-top:0}
.contact-card small{display:block;margin-top:18px}
.contact-note{margin-top:30px;padding:18px;background:#f4f6f7;border-radius:10px;font-size:13px}
@media(max-width:900px){.legal h1{font-size:24px;line-height:1.45}.legal-table th{width:32%;padding:14px 10px}.legal-table td{padding:14px 12px}.contact-card{padding:24px 16px}.contact-lead{font-size:16px}}

/* Figma「実装」最終値：ご利用の流れ / よくあるご質問 */
.pc-only{display:block}
.flow{height:1392px;padding:0;background:#fff;text-align:center;overflow:hidden}
.flow>h2{position:absolute;left:50%;top:105px;width:1000px;transform:translateX(-50%);margin:0;color:#121c28;font-size:58px;font-weight:900;line-height:1.3;letter-spacing:-.035em}
.flow>.flow-lead{position:absolute;left:50%;top:216px;width:1000px;transform:translateX(-50%);margin:0;color:#68737f;font-size:18px;line-height:1.7}
.flow ol{position:absolute;inset:0;display:block;max-width:none;margin:0;padding:0}
.flow li{position:absolute;left:50%;width:930px;transform:translateX(-50%);margin:0;padding:30px 30px 24px 114px;display:block;border:1px solid #f2e0ab;border-radius:18px;background:#fefbf4;text-align:left;box-shadow:none}
.flow li:nth-child(1){top:312px;height:164px}.flow li:nth-child(2){top:496px;height:162px}.flow li:nth-child(3){top:678px;height:152px}.flow li:nth-child(4){top:850px;height:132px}.flow li:nth-child(5){top:1002px;height:132px}.flow li:nth-child(6){top:1154px;height:194px}
.flow li>b{position:absolute;left:29px;top:29px;width:58px;height:58px;margin:0;display:grid;place-items:center;border-radius:50%;background:#e74b3d;color:#fff;font-size:25px;font-weight:900;line-height:1}
.flow li h3{margin:0 0 9px;color:#121c28;font-size:25px;font-weight:900;line-height:1.4;letter-spacing:-.025em}
.flow li p{margin:0;color:#68737f;font-size:17px;line-height:1.75}

.faq{padding:94px 20px 118px;background:#fafbfc;text-align:center}
.faq>.eyebrow{display:none}
.faq>h2{margin:0 0 55px;color:#db4c3d;font-size:58px;font-weight:900;line-height:1.3;letter-spacing:-.035em}
.faq-list{width:955px;max-width:100%;margin:0 auto;text-align:left}
.faq details{margin:0 0 14px;padding:0 26px;border:1px solid #d9e3eb;border-radius:16px;background:#fff;box-shadow:none;overflow:hidden}
.faq summary{min-height:78px;padding:25px 0 22px;display:flex;align-items:center;color:#121c28;font-size:20px;font-weight:900;line-height:1.45}
.faq details p{margin:0;padding:0 0 25px;color:#68737f;font-size:17px;line-height:1.75}

@media(max-width:900px){
  .pc-only{display:none}
  .flow{height:auto;padding:64px 20px 72px;overflow:visible}
  .flow>h2,.flow>.flow-lead{position:static;left:auto;top:auto;width:auto;transform:none}
  .flow>h2{font-size:clamp(34px,10.2vw,44px);line-height:1.3}
  .flow>.flow-lead{margin:22px auto 0;max-width:560px;font-size:15px;line-height:1.8}
  .flow ol{position:static;display:grid;gap:15px;margin:38px 0 0}
  .flow li,.flow li:nth-child(n){position:relative;left:auto;top:auto;width:100%;height:auto;min-height:130px;transform:none;padding:24px 19px 22px 82px;border-radius:15px}
  .flow li>b{left:18px;top:22px;width:48px;height:48px;font-size:21px}
  .flow li h3{font-size:19px;line-height:1.45}.flow li p{font-size:14px;line-height:1.75}
  .faq{padding:64px 16px 72px}
  .faq>h2{margin-bottom:34px;font-size:clamp(34px,10vw,44px);line-height:1.3}
  .faq details{margin-bottom:11px;padding:0 18px;border-radius:13px}
  .faq summary{min-height:68px;padding:20px 0 18px;font-size:15px;line-height:1.55}
  .faq details p{padding-bottom:21px;font-size:14px;line-height:1.75}
}

/* Intro section: sampled from the supplied desktop reference. */
.intro{background:#fdfaf0}

@media(max-width:900px){
  .intro .chips{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:min(100%,358px);margin-left:auto;margin-right:auto}
  .intro .chips span{display:flex;align-items:center;justify-content:center;min-width:0;padding:9px 5px;font-size:clamp(10px,2.9vw,12px);white-space:nowrap}
  .intro .chips span:last-child{grid-column:1/3;justify-self:center;width:min(221px,100%)}
}

/* Empathy section: one shared structure and copy at every viewport size. */
.empathy{padding:64px 20px;background:#fff;color:#141c27}
.empathy .eyebrow{margin-bottom:18px;color:#cb5645;font-size:clamp(16px,2.4vw,22px)}
.empathy h2{margin-bottom:32px;font-size:clamp(28px,5.1vw,44px);line-height:1.45}
.empathy-copy{max-width:1045px;margin:0 auto;text-align:left;font-size:clamp(15px,2.1vw,18px);line-height:2}
.empathy-copy p{margin:0 0 18px}
.empathy-copy p:last-child{margin-bottom:0}

@media(min-width:901px){
  .empathy{min-height:710px;padding:90px max(6vw,calc((100% - 1100px)/2));background:#fff;color:#141c27}
  .empathy .eyebrow{font-size:clamp(18px,1.61vw,28px);margin-bottom:20px;color:#cb5645}
  .empathy h2{font-size:clamp(46px,3.67vw,64px);line-height:1.48;margin-bottom:38px}
  .empathy-copy{font-size:clamp(16px,1.26vw,22px);line-height:2}
}

/* Desktop first view: colors and proportions sampled from the supplied PC reference. */
@media(min-width:901px){
  .hero{height:clamp(720px,57.92vw,810px);background:#f4dd99;color:#17212c}
  .hero-shape{background:#fdf1c3}
  .hero-copy{top:clamp(50px,5.43vw,75px)}
  .hero-logo{width:clamp(260px,24.59vw,340px);margin-bottom:clamp(35px,3.98vw,55px)}
  .hero h1,.hero-actions>p,.hero-actions small{color:#17212c}
  .hero h1{font-size:clamp(34px,3.11vw,43px)}
  .hero h1 strong{color:#cc4b3d}
  .hero-rabbit{width:clamp(210px,18.8vw,260px);height:clamp(435px,38.68vw,535px);right:clamp(45px,calc(39.42vw - 310px),235px);top:clamp(90px,7.95vw,110px)}
  .hero-actions{width:min(660px,56vw);bottom:clamp(30px,3.25vw,45px)}
  .hero .badges span{padding:9px clamp(10px,1.3vw,18px);font-size:clamp(11px,1.01vw,14px)}
  .hero .badges span{background:#17212c;color:#fff}
  .hero .line-button{background:#54b455;box-shadow:0 8px 14px #376f3838}
  .hero .line-button i{color:#54b455}
}

/*
 * Figma source of truth (1440px reference): Header 270:284 / Hero 270:262.
 * Do not substitute alternate editable frames 274:289 / 274:263.
 * Mobile source of truth: file LCGIQlx4DjWHynmILVS2UJ, frame 1:3 (402x643).
 */
.sp-label{display:none}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  width:100%;
  height:83px;
  padding:0;
  gap:0;
  background:#fff;
  box-shadow:none;
  border-bottom:1px solid #eff0f3;
}
.header-logo{
  position:absolute;
  left:calc(63 / 1440 * 100%);
  top:5px;
  width:156px;
  height:74px;
  margin:0;
  overflow:hidden;
}
.header-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.site-header nav{
  position:absolute;
  left:calc(828 / 1440 * 100%);
  top:30px;
  width:352px;
  height:22px;
  display:block;
}
.site-header nav a{
  position:absolute;
  top:0;
  font-size:15px;
  font-weight:500;
  line-height:22px;
  text-decoration:none;
  white-space:nowrap;
}
.site-header nav a:nth-child(1){left:0}
.site-header nav a:nth-child(2){left:58px}
.site-header nav a:nth-child(3){left:146px}
.site-header nav a:nth-child(4){left:262px}
.mini-line{
  position:absolute;
  left:calc(1211 / 1440 * 100%);
  top:13px;
  width:169px;
  height:55px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:28px;
  background:#56ba5a;
  color:#fff;
  font-size:17px;
  font-weight:700;
  line-height:24px;
  white-space:nowrap;
}
.hero{
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#fff0b8;
  color:#08121a;
}
.hero-low-price-badge{
  position:absolute;
  z-index:2;
  left:calc(750 / 1440 * 100%);
  top:calc(20 / 810 * 100%);
  width:calc(730 / 1440 * 100%);
  height:auto;
  aspect-ratio:3/2;
  max-width:none;
  object-fit:contain;
  pointer-events:none;
}
.hero-character{
  position:absolute;
  z-index:1;
  left:calc(860 / 1440 * 100%);
  top:calc(477 / 810 * 100%);
  width:calc(500 / 1440 * 100%);
  height:calc(333 / 810 * 100%);
  max-width:none;
  object-fit:cover;
  pointer-events:none;
}
.hero-logo{display:none}
.hero-copy{position:static;width:auto;text-align:left}
.hero h1{
  position:absolute;
  z-index:3;
  left:calc(75 / 1440 * 100%);
  top:calc(89 / 810 * 100%);
  margin:0;
  color:#08121a;
  font-size:calc(60 / 1440 * 100vw);
  font-weight:900;
  line-height:calc(64 / 1440 * 100vw);
  letter-spacing:0;
  white-space:nowrap;
}
.hero-lead{
  position:absolute;
  z-index:3;
  left:calc(75 / 1440 * 100%);
  top:calc(235 / 810 * 100%);
  margin:0;
  color:#ea392c;
  font-size:calc(50 / 1440 * 100vw);
  font-weight:900;
  line-height:1.45;
  white-space:nowrap;
}
.hero-description{
  position:absolute;
  z-index:3;
  left:calc(75 / 1440 * 100%);
  top:calc(326 / 810 * 100%);
  margin:0;
  color:#08121a;
  font-size:calc(24 / 1440 * 100vw);
  font-weight:400;
  line-height:1.5;
  white-space:nowrap;
}
.hero-actions{position:absolute;inset:0;width:auto;text-align:left;z-index:4}
.hero .badges{
  position:absolute;
  left:calc(75 / 1440 * 100%);
  top:calc(420 / 810 * 100%);
  width:calc(681 / 1440 * 100%);
  margin:0;
  display:grid;
  grid-template-columns:calc(314 / 681 * 100%) calc(352 / 681 * 100%);
  gap:calc(14 / 1440 * 100vw) calc(15 / 1440 * 100vw);
  justify-content:stretch;
}
.hero .badges>span{
  width:auto;
  height:calc(64 / 1440 * 100vw);
  min-height:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  border-radius:calc(14 / 1440 * 100vw);
  background:#17222c;
  color:#fff;
  font-size:calc(22.5 / 1440 * 100vw);
  font-weight:900;
  line-height:1.45;
  white-space:nowrap;
}
.hero .badges>span:nth-child(3){grid-column:1}
.hero .badges>span>span{
  width:auto;
  height:auto;
  padding:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:inherit;
}
.hero-line-button.line-button{
  position:absolute;
  left:calc(75 / 1440 * 100%);
  top:calc(596 / 810 * 100%);
  width:calc(719 / 1440 * 100%);
  height:calc(102 / 810 * 100%);
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  border-radius:calc(40 / 1440 * 100vw);
  background:#10b646;
  box-shadow:none;
  color:#fff;
  font-size:calc(40 / 1440 * 100vw);
  font-weight:900;
  line-height:1.45;
}
.hero-line-button.line-button i{
  flex:0 0 auto;
  width:calc(68 / 1440 * 100vw);
  height:calc(69 / 1440 * 100vw);
  margin-left:calc(25 / 1440 * 100vw);
  margin-right:calc(41 / 1440 * 100vw);
  border-radius:50%;
  background:#fff;
  color:#57b957;
  font-size:calc(24 / 1440 * 100vw);
  font-weight:700;
}
.hero-line-button.line-button b{
  position:absolute;
  right:calc(18 / 1440 * 100vw);
  margin:0;
  font-size:calc(30 / 1440 * 100vw);
  line-height:1;
}
.hero-actions>small{
  position:absolute;
  left:calc(82 / 1440 * 100%);
  top:calc(729 / 810 * 100%);
  margin:0;
  color:#08121a;
  font-size:calc(12 / 1440 * 100vw);
  font-weight:400;
  line-height:1.4;
  white-space:nowrap;
}

@media (min-width:901px) and (max-width:1240px){
  .site-header nav{left:auto;right:220px}
  .mini-line{left:auto;right:24px}
}

@media(max-width:900px){
  .pc-label{display:none}
  .sp-label{display:block;width:100%!important;text-align:center}
  .site-header{display:flex;height:60px}
  .header-logo{left:12px;top:4px;width:110px;height:52px}
  .site-header nav{display:none}
  .mini-line{left:auto;right:10px;top:8px;width:135px;height:44px;border-radius:22px;font-size:13px;line-height:1}
  .hero{
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:402/643;
    margin:0 auto;
    background:#f9dc8f;
  }
  .hero::before,.hero::after{content:"";position:absolute;z-index:0;background:#fff0bd;border-radius:50%;pointer-events:none}
  .hero::before{left:calc(-65 / 402 * 100%);top:calc(-80 / 643 * 100%);width:calc(250 / 402 * 100%);aspect-ratio:1}
  .hero::after{left:calc(199 / 402 * 100%);top:calc(263 / 643 * 100%);width:calc(340 / 402 * 100%);aspect-ratio:340/332}
  .hero-art,.hero-character{display:none}
  .hero-low-price-badge{
    display:block;
    position:absolute;
    z-index:2;
    left:0;
    top:calc(132 / 643 * 100%);
    width:100%;
    height:auto;
    aspect-ratio:3/2;
    max-width:none;
    object-fit:contain;
    pointer-events:none;
  }
  .hero-logo{display:none}
  .hero h1{
    left:calc(50 / 402 * 100%);
    right:auto;
    top:calc(22 / 643 * 100%);
    width:calc(301 / 402 * 100%);
    font-size:min(24px,calc(24 / 402 * 100vw));
    line-height:1.25;
    text-align:center;
    white-space:normal;
  }
  .hero-lead{
    left:calc(30 / 402 * 100%);
    right:auto;
    top:calc(93 / 643 * 100%);
    width:calc(342 / 402 * 100%);
    font-size:min(24px,calc(24 / 402 * 100vw));
    line-height:calc(29 / 24);
    text-align:center;
    white-space:nowrap;
  }
  .hero-description{
    left:calc(45 / 402 * 100%);
    right:auto;
    top:calc(422 / 643 * 100%);
    width:calc(312 / 402 * 100%);
    font-size:min(10px,calc(10 / 402 * 100vw));
    line-height:1.2;
    text-align:center;
    white-space:nowrap;
  }
  .hero .badges{
    left:calc(22.5 / 402 * 100%);
    top:calc(453 / 643 * 100%);
    width:calc(357 / 402 * 100%);
    grid-template-columns:calc(172 / 357 * 100%) calc(177 / 357 * 100%);
    gap:calc(8 / 402 * 100vw);
  }
  .hero .badges>span{
    height:min(35px,calc(35 / 402 * 100vw));
    padding:0;
    border-radius:min(9.5px,calc(9.5 / 402 * 100vw));
    font-size:min(12px,calc(12 / 402 * 100vw));
    overflow:hidden;
  }
  .hero .badges>span:nth-child(3){
    grid-column:1/3;
    width:calc(221 / 357 * 100%);
    justify-self:center;
    text-align:center;
  }
  .hero-line-button.line-button{
    left:calc(22.5 / 402 * 100%);
    top:calc(543 / 643 * 100%);
    width:calc(357 / 402 * 100%);
    height:calc(49.5 / 643 * 100%);
    border-radius:999px;
    justify-content:center;
    font-size:min(17px,calc(17 / 402 * 100vw));
  }
  .hero-line-button.line-button span{transform:translateX(min(14px,calc(14 / 402 * 100vw)))}
  .hero-line-button.line-button i{
    position:absolute;
    left:calc(10 / 357 * 100%);
    width:calc(38 / 357 * 100%);
    height:calc(38 / 49.5 * 100%);
    margin:0;
    font-size:min(11px,calc(11 / 402 * 100vw));
  }
  .hero-line-button.line-button b{right:calc(20 / 357 * 100%);font-size:min(19px,calc(19 / 402 * 100vw))}
  .hero-actions>small{
    left:calc(80 / 402 * 100%);
    right:auto;
    top:calc(602 / 643 * 100%);
    width:calc(242 / 402 * 100%);
    font-size:min(7px,calc(7 / 402 * 100vw));
    line-height:calc(10 / 7);
    text-align:center;
    white-space:normal;
  }
}

/* Pricing — Figma frame 270:38. All copy remains live HTML text. */
.pricing{
  position:relative;
  width:100%;
  min-height:0!important;
  height:auto;
  aspect-ratio:16/9;
  padding:0!important;
  overflow:hidden;
  background:#fffaf0;
}
.pricing::before,.pricing::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.pricing::before{left:calc(-110 / 1440 * 100%);top:calc(615 / 810 * 100%);width:calc(307 / 1440 * 100%);aspect-ratio:1;background:#e7f7fc}
.pricing::after{left:calc(1210 / 1440 * 100%);top:calc(-108 / 810 * 100%);width:calc(300 / 1440 * 100%);aspect-ratio:1;background:#ffe7a8}
.pricing-panel{
  position:absolute;
  z-index:1;
  left:calc(63 / 1440 * 100%);
  top:calc(41 / 810 * 100%);
  width:calc(1314 / 1440 * 100%);
  height:calc(727 / 810 * 100%);
  overflow:hidden;
  border-radius:calc(32 / 1440 * 100vw);
  background:#fff;
  box-shadow:2px 4px 8px rgba(0,0,0,.25);
}
.pricing-logo{position:absolute;left:calc(86 / 1314 * 100%);top:calc(15 / 727 * 100%);width:calc(320 / 1314 * 100%);height:calc(132 / 727 * 100%);object-fit:contain}
.pricing-heading{position:absolute;left:calc(462 / 1314 * 100%);top:calc(36 / 727 * 100%);width:calc(410 / 1314 * 100%);text-align:center}
.pricing .pricing-heading h2{margin:0;color:#121c28;font-size:calc(40 / 1440 * 100vw);font-weight:900;line-height:1.45;letter-spacing:-.05em}
.pricing-heading p{margin:0;color:#141c21;font-size:calc(16 / 1440 * 100vw);line-height:1.5;white-space:nowrap}
.pricing-heading::after{content:"";display:block;margin-top:calc(10 / 1440 * 100vw);height:calc(9 / 1440 * 100vw);background:repeating-linear-gradient(to right,#ff8b62 0,#ff8b62 6px,transparent 6px,transparent 12px);background-size:100% 1px;background-repeat:repeat-y}
.pricing .price-grid{position:absolute;inset:0;display:block;margin:0;max-width:none}
.pricing .price-card{
  position:absolute;
  top:calc(179 / 727 * 100%);
  width:calc(545 / 1314 * 100%);
  height:calc(340 / 727 * 100%);
  padding:0;
  overflow:hidden;
  border:calc(20 / 1440 * 100vw) solid #fffaf0;
  outline:calc(2 / 1440 * 100vw) solid #efb430;
  outline-offset:calc(-2 / 1440 * 100vw);
  border-radius:calc(20 / 1440 * 100vw);
  background:#fff;
  box-shadow:none;
  text-align:center;
}
.pricing .price-card.employee{left:calc(67 / 1314 * 100%)}
.pricing .price-card.part-time{left:calc(702 / 1314 * 100%)}
.pricing .price-card h3{position:absolute;left:calc(29 / 505 * 100%);top:calc(38 / 300 * 100%);width:calc(440 / 505 * 100%);height:calc(46 / 300 * 100%);margin:0;padding:0;display:flex;align-items:center;justify-content:center;border:2px solid #25a9df;border-radius:999px;background:#fff;color:#1da6de;font-size:calc(22 / 1440 * 100vw);font-weight:900;line-height:1.2;white-space:nowrap}
.pricing .price-card.part-time h3{border-color:#efb430;color:#ff9a64}
.pricing .amount{position:absolute;left:0;right:0;top:calc(102 / 300 * 100%);height:calc(118 / 300 * 100%);margin:0;color:#121c28;line-height:1}
.pricing .amount strong{font-size:calc(86 / 1440 * 100vw);font-weight:900;letter-spacing:-.035em}
.pricing .amount .tax{position:absolute;left:calc(393 / 505 * 100%);top:calc(31 / 118 * 100%);font-size:calc(16 / 1440 * 100vw);font-weight:400;white-space:nowrap}
.pricing .amount .yen{position:absolute;left:calc(410 / 505 * 100%);top:calc(62 / 118 * 100%);font-size:calc(24 / 1440 * 100vw);font-weight:900}
.pricing .price-service{position:absolute;left:calc(48 / 505 * 100%);bottom:0;width:calc(401 / 505 * 100%);height:calc(53 / 300 * 100%);margin:0;padding-top:calc(15 / 1440 * 100vw);border-top:1px solid #d1dee3;color:#0d141a;font-size:calc(16 / 1440 * 100vw);line-height:1.4;white-space:nowrap}
.pricing .free{position:absolute;left:calc(103 / 1314 * 100%);top:calc(570 / 727 * 100%);width:calc(968 / 1314 * 100%);max-width:none;height:calc(114 / 727 * 100%);margin:0;padding:0;display:block;overflow:hidden;border:2px solid #25a9df;border-radius:calc(20 / 1440 * 100vw);background:#fff}
.pricing .free-type{position:absolute;left:calc(40 / 968 * 100%);top:calc(29 / 114 * 100%);width:calc(264 / 968 * 100%);height:calc(50 / 114 * 100%);padding:0;display:flex;align-items:center;justify-content:center;border:2px solid #25a9df;border-radius:999px;background:#fff;color:#121c28;font-size:calc(24 / 1440 * 100vw);font-weight:900}
.pricing .free h3{position:absolute;left:calc(353 / 968 * 100%);top:calc(23 / 114 * 100%);margin:0;color:#121c28;font-size:calc(48 / 1440 * 100vw);font-weight:900;line-height:1.35;white-space:nowrap}
.pricing .free-price{position:absolute;inset:0;margin:0;color:#121c28}
.pricing .free-price strong{position:absolute;left:calc(722 / 968 * 100%);top:0;color:#121c28;font-size:calc(92 / 1440 * 100vw);font-weight:900;line-height:1}
.pricing .free-price .tax{position:absolute;left:calc(807 / 968 * 100%);top:calc(23 / 114 * 100%);padding:0;border-radius:0;background:transparent;color:#121c28;font-size:calc(16 / 1440 * 100vw);font-weight:900;white-space:nowrap}
.pricing .free-price .yen{position:absolute;left:calc(828 / 968 * 100%);top:calc(51 / 114 * 100%);padding:0;border-radius:0;background:transparent;color:#121c28;font-size:calc(28 / 1440 * 100vw);font-weight:900}
.pricing-rabbit{position:absolute;z-index:2;left:calc(1085 / 1314 * 100%);top:calc(482 / 727 * 100%);width:calc(203 / 1314 * 100%);height:calc(220 / 727 * 100%);object-fit:contain}
.pricing-note{position:absolute;left:calc(682 / 1314 * 100%);top:calc(701 / 727 * 100%);margin:0;color:#141a1f;font-size:calc(12 / 1440 * 100vw);line-height:1.4;white-space:nowrap}

/* Final price alignment refinements */
@media(min-width:901px){
  .pricing .amount strong{position:relative;left:calc(-24 / 1440 * 100vw)}
  .pricing .free-price strong{top:calc(8 / 114 * 100%)}
}

@media(max-width:900px){
  .pricing{aspect-ratio:auto;min-height:0!important;padding:26px 20px 72px!important;background:#fffaf0;text-align:center}
  .pricing::before{left:-125px;top:auto;bottom:-105px;width:260px;background:#e7f7fc}
  .pricing::after{left:auto;right:-90px;top:-105px;width:230px;background:#ffe7a8}
  .pricing-panel{position:relative;left:auto;top:auto;width:100%;height:auto;overflow:visible;border-radius:0;background:transparent;box-shadow:none}
  .pricing-logo{position:relative;left:auto;top:auto;width:min(82%,340px);height:auto;margin:0 auto 12px;display:block}
  .pricing-heading{position:relative;left:auto;top:auto;width:100%;margin:0 0 28px}
  .pricing .pricing-heading h2{font-size:34px;line-height:1.35;letter-spacing:-.03em}
  .pricing-heading p{font-size:15px;white-space:normal}
  .pricing-heading::after{display:none}
  .pricing .price-grid{position:relative;inset:auto;display:grid;grid-template-columns:1fr;gap:22px;width:100%;margin:0}
  .pricing .price-card{position:relative;left:auto!important;top:auto;width:100%;height:330px;padding:0;border:4px solid #25a9df;outline:0;border-radius:15px;background:#fff}
  .pricing .price-card.part-time{border-color:#efb430}
  .pricing .price-card h3{left:0;top:0;width:100%;height:58px;border:0;border-radius:0;background:#25a9df;color:#fff;font-size:clamp(19px,5.5vw,25px)}
  .pricing .price-card.part-time h3{background:#f2b936;color:#fff}
  .pricing .amount{top:78px;height:145px;display:block}
  .pricing .amount strong{position:absolute;left:50%;top:35px;transform:translateX(-50%);font-size:clamp(50px,14.5vw,68px);white-space:nowrap}
  .pricing .amount .tax{left:auto;right:.5%;top:45px;font-size:clamp(11px,3.25vw,14px);font-weight:400}
  .pricing .amount .yen{left:auto;right:7%;top:75px;font-size:27px}
  .pricing .price-service{left:9%;bottom:28px;width:82%;height:56px;padding-top:18px;font-size:15px;white-space:normal}
  .pricing .free{position:relative;left:auto;top:auto;width:100%;height:220px;margin:30px 0 0;border:4px solid #25a9df;border-radius:15px}
  .pricing .free h3{left:0;top:18px;width:100%;font-size:32px;text-align:center}
  .pricing .free-type{left:11%;top:88px;width:53%;height:47px;font-size:20px;color:#1da6de}
  .pricing .free-price strong{left:auto;right:20%;top:78px;color:#25a9df;font-size:78px}
  .pricing .free-price .tax{left:auto;right:6%;top:88px;font-size:14px}
  .pricing .free-price .yen{left:auto;right:9%;top:123px;font-size:27px}
  .pricing-rabbit{left:-6px;top:auto;bottom:0;width:82px;height:150px}
  .pricing-note{position:relative;left:auto;top:auto;width:100%;min-height:150px;margin:54px 0 0;padding:23px 8px 0 92px;font-size:13px;line-height:1.8;white-space:normal}
}

/* Smartphone pricing — proportional reproduction of the supplied SP artwork. */
@media(max-width:900px){
  .pricing{padding:clamp(16px,4.35vw,24px) clamp(22px,6.93vw,34px) 0!important}
  .pricing-logo{width:68%;max-width:290px;margin:0 auto clamp(8px,2.4vw,13px)}
  .pricing-heading{margin-bottom:clamp(22px,6.4vw,30px)}
  .pricing .pricing-heading h2{font-size:clamp(28px,8vw,36px);line-height:1.25}
  .pricing-heading p{font-size:clamp(13px,3.73vw,16px);line-height:1.5}
  .pricing .price-grid{gap:clamp(18px,4.8vw,24px)}
  .pricing .price-card{height:clamp(148px,40.62vw,183px);border-width:2px;border-radius:clamp(12px,3.2vw,16px)}
  .pricing .price-card h3{height:clamp(28px,7.38vw,34px);font-size:clamp(15px,4.27vw,19px);border-radius:clamp(10px,3.2vw,16px) clamp(10px,3.2vw,16px) 0 0}
  .pricing .amount{top:clamp(39px,10.67vw,48px);height:clamp(67px,18.4vw,83px)}
  .pricing .amount strong{top:clamp(7px,2.13vw,10px);font-size:clamp(49px,14.13vw,64px);line-height:1}
  .pricing .amount .tax{right:2.5%;top:clamp(17px,4.8vw,22px);font-size:clamp(10px,2.67vw,12px)}
  .pricing .amount .yen{right:5%;top:clamp(35px,9.6vw,43px);font-size:clamp(18px,5.07vw,23px)}
  .pricing .price-service{left:9%;bottom:clamp(11px,2.93vw,13px);width:82%;height:clamp(28px,7.47vw,34px);padding-top:clamp(7px,1.87vw,9px);font-size:clamp(10px,2.93vw,13px);line-height:1.35}
  .pricing .free{height:clamp(88px,24.27vw,109px);margin-top:clamp(20px,5.6vw,26px);border-width:2px;border-radius:clamp(12px,3.2vw,16px)}
  .pricing .free h3{top:clamp(7px,1.87vw,9px);font-size:clamp(21px,5.87vw,26px);line-height:1.25}
  .pricing .free-type{left:11%;top:clamp(43px,11.73vw,53px);width:53%;height:clamp(24px,6.4vw,29px);border-width:2px;font-size:clamp(13px,3.73vw,17px)}
  .pricing .free-price strong{right:20%;top:clamp(35px,9.6vw,43px);font-size:clamp(43px,12vw,54px);line-height:1}
  .pricing .free-price .tax{right:6%;top:clamp(43px,11.47vw,52px);font-size:clamp(9px,2.67vw,12px)}
  .pricing .free-price .yen{right:9%;top:clamp(58px,15.73vw,71px);font-size:clamp(18px,5.07vw,23px)}
  .pricing-note{min-height:clamp(170px,46vw,200px);margin-top:clamp(24px,6.4vw,29px);padding:clamp(25px,6.93vw,31px) 4px 0 clamp(88px,24vw,108px);font-size:clamp(10px,2.93vw,13px);line-height:1.75}
  .pricing-rabbit{left:clamp(-4px,-.8vw,-2px);bottom:0;width:clamp(64px,18vw,78px);height:clamp(180px,55vw,230px)}
}

@media(max-width:450px){
  .pricing{padding:4.35vw 6.93vw 0!important}
  .pricing-logo{margin-bottom:2.4vw}
  .pricing-heading{margin-bottom:6.4vw}
  .pricing .pricing-heading h2{font-size:8vw}
  .pricing-heading p{font-size:3.73vw}
  .pricing .price-grid{gap:4.8vw}
  .pricing .price-card{height:40.62vw;border-radius:3.2vw}
  .pricing .price-card h3{height:7.38vw;font-size:4.27vw;border-radius:3.2vw 3.2vw 0 0}
  .pricing .amount{top:10.67vw;height:18.4vw}
  .pricing .amount strong{top:2.13vw;font-size:14.13vw}
  .pricing .amount .tax{top:4.8vw;font-size:2.67vw}
  .pricing .amount .yen{top:9.6vw;font-size:5.07vw}
  .pricing .price-service{bottom:2.93vw;height:7.47vw;padding-top:1.87vw;font-size:2.93vw}
  .pricing .free{height:24.27vw;margin-top:5.6vw;border-radius:3.2vw}
  .pricing .free h3{top:1.87vw;font-size:5.87vw}
  .pricing .free-type{top:11.73vw;height:6.4vw;font-size:3.73vw}
  .pricing .free-price strong{top:9.6vw;font-size:12vw}
  .pricing .free-price .tax{top:11.47vw;font-size:2.67vw}
  .pricing .free-price .yen{top:15.73vw;font-size:5.07vw}
  .pricing-note{min-height:43vw;margin-top:6.4vw;padding:6.93vw 4px 0 24vw;font-size:2.93vw}
  .pricing-rabbit{left:-.8vw;width:18vw;height:55vw}
}

/* Reasons — Figma implementation node 270:76 */
.reasons{position:relative;height:645px;padding:0;background:#fff;overflow:hidden;text-align:center}
.reasons>.eyebrow{position:absolute;left:50%;top:81px;width:600px;transform:translateX(-50%);margin:0;color:#db4c3d;font-size:18px;font-weight:700;line-height:1.5}
.reasons>h2{position:absolute;left:50%;top:120px;width:1000px;transform:translateX(-50%);margin:0;color:#121c28;font-size:58px;font-weight:900;line-height:1.35;letter-spacing:-.035em}
.reasons .card-grid{position:absolute;left:9.5139%;right:9.5139%;top:248px;height:291px;display:grid;grid-template-columns:372fr 27fr 372fr 23fr 372fr;gap:0;margin:0;text-align:left}
.reasons .card-grid article:nth-child(1){grid-column:1}
.reasons .card-grid article:nth-child(2){grid-column:3}
.reasons .card-grid article:nth-child(3){grid-column:5}
.reasons .card-grid article{min-height:0;height:291px;padding:29px;border:1px solid #d9e3eb;border-radius:20px;background:#fff;box-shadow:0 12px 60px rgba(0,0,0,.09);overflow:hidden}
.reasons .card-grid b{display:block;margin:0;color:#50a4da;font-size:46px;font-weight:900;line-height:1.2}
.reasons .card-grid h3{margin:27px 0 13px;color:#121c28;font-size:24px;font-weight:900;line-height:1.3;white-space:nowrap}
.reasons .card-grid article:last-child h3{font-size:23px}
.reasons .card-grid p{margin:0;color:#4d5c66;font-size:17px;font-weight:400;line-height:1.7}

@media(max-width:900px){
  .reasons{height:auto;padding:58px 20px 64px;overflow:visible}
  .reasons>.eyebrow,.reasons>h2{position:static;left:auto;top:auto;width:auto;transform:none}
  .reasons>.eyebrow{font-size:16px;line-height:1.5;margin-bottom:10px}
  .reasons>h2{font-size:clamp(30px,8.5vw,38px);line-height:1.35;letter-spacing:-.035em}
  .reasons .card-grid{position:static;display:grid;grid-template-columns:1fr;width:100%;height:auto;margin:38px 0 0;gap:18px}
  .reasons .card-grid article:nth-child(n){grid-column:auto}
  .reasons .card-grid article{height:250px;min-height:250px;padding:26px 24px;border-radius:18px}
  .reasons .card-grid b{font-size:42px}
  .reasons .card-grid h3,.reasons .card-grid article:last-child h3{margin:22px 0 12px;font-size:clamp(20px,5.8vw,24px);white-space:normal}
  .reasons .card-grid p{font-size:15px;line-height:1.75}
}

/* Contact — Dattto brand tone */
.contact-body{background:#fff9e9;color:#121c28}
.contact-page{width:min(calc(100% - 48px),1060px);margin:0 auto;padding:76px 0 110px}
.contact-heading{margin:0 0 54px;padding:18px 30px 24px;text-align:center}
.contact-heading .contact-kicker{margin:0 0 10px;color:#e94735;font-size:17px;font-weight:900;line-height:1.3;letter-spacing:.22em}
.contact-heading h1{margin:0;color:#121c28;font-size:50px;font-weight:900;line-height:1.25;letter-spacing:.02em}
.contact-heading span{display:block;margin-top:13px;font-size:16px;font-weight:700;letter-spacing:.08em}
.contact-intro{margin:0 0 34px;padding:30px 34px;border:2px solid #ead79d;border-radius:18px;background:#fff;font-size:17px;line-height:2;letter-spacing:.03em}
.contact-intro strong{color:#e94735;white-space:nowrap}
.contact-privacy-notice{margin:0 0 28px;padding:24px 30px;border:1px solid #d9e3eb;border-radius:16px;background:#fff;color:#4d5c66;font-size:14px;line-height:1.8}
.contact-privacy-notice h2{margin:0 0 8px;color:#121c28;font-size:18px;line-height:1.4}
.contact-privacy-notice p{margin:5px 0}
.contact-privacy-notice a,.comparison-source a{color:#176fa6;text-decoration:underline;text-underline-offset:3px}
.contact-page .contact-form{display:grid;gap:24px;padding:42px;border:0;border-radius:24px;background:#fff;box-shadow:0 16px 45px rgba(18,28,40,.08)}
.contact-page .hubspot-form-shell{display:block;min-height:720px;overflow:hidden}
.contact-page .hubspot-form-shell .hs-form-frame{width:100%;min-height:680px}
.contact-page .hubspot-form-shell iframe{display:block;width:100%!important;max-width:100%;border:0}
.contact-page .hubspot-form-shell noscript{display:block;padding:24px;text-align:center;color:#66737d}
.contact-page .contact-form>label{display:grid;gap:9px;font-size:17px;font-weight:800;line-height:1.5}
.contact-page .contact-form input:not([type="radio"]),
.contact-page .contact-form textarea{width:100%;border:2px solid #d7dde1;border-radius:12px;background:#f8fafb;color:#121c28;font:inherit;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.contact-page .contact-form input:not([type="radio"]){height:72px;padding:0 20px}
.contact-page .contact-form textarea{min-height:340px;padding:18px 20px;resize:vertical}
.contact-page .contact-form input::placeholder,
.contact-page .contact-form textarea::placeholder{color:#9ca6ad;opacity:1}
.contact-page .contact-form input:focus,
.contact-page .contact-form textarea:focus{border-color:#e94735;background:#fff;box-shadow:0 0 0 4px rgba(233,71,53,.12)}
.contact-status{margin:10px 0 0;padding:0;border:0}
.contact-status legend{width:100%;padding:0 0 10px;border-bottom:2px solid #121c28;font-size:17px;font-weight:800;line-height:1.5}
.contact-radio-list{display:grid;grid-template-columns:repeat(3,max-content);justify-content:start;gap:18px 44px;margin-top:18px}
.contact-radio-list label{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;line-height:1.5;cursor:pointer}
.contact-radio-list input{appearance:none;width:27px;height:27px;margin:0;flex:0 0 27px;border:2px solid #121c28;border-radius:7px;background:#fff;cursor:pointer}
.contact-radio-list input:checked{border-color:#08b94f;background:#08b94f;box-shadow:inset 0 0 0 5px #fff}
.contact-radio-list input:focus-visible{outline:3px solid rgba(8,185,79,.25);outline-offset:2px}
.contact-page .contact-form button{width:min(100%,660px);height:96px;margin:54px auto 0;border:3px solid #121c28;border-radius:18px;background:#08bd50;color:#fff;font:inherit;font-size:24px;font-weight:900;letter-spacing:.03em;box-shadow:7px 7px 0 #121c28;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.contact-page .contact-form button:hover{background:#06a944;box-shadow:3px 3px 0 #121c28;transform:translate(4px,4px)}
.contact-page .contact-form button:focus-visible{outline:4px solid rgba(8,185,79,.3);outline-offset:5px}
.contact-form-note{margin:8px 0 0;text-align:center;color:#66737d;font-size:13px;line-height:1.7}
.contact-body .legal-footer{height:auto;min-height:300px;padding:55px 20px 35px}

@media(max-width:900px){
  .contact-page{width:min(calc(100% - 32px),720px);padding:50px 0 76px}
  .contact-heading{margin-bottom:48px;padding:14px 24px 20px}
  .contact-heading h1{font-size:clamp(38px,7vw,48px)}
  .contact-heading .contact-kicker{font-size:15px}
  .contact-heading span{font-size:14px}
  .contact-intro{margin-bottom:30px;padding:26px;font-size:16px;line-height:1.9}
  .contact-page .contact-form{gap:21px;padding:32px}
  .contact-page .contact-form>label,.contact-status legend{font-size:16px}
  .contact-page .contact-form input:not([type="radio"]){height:62px}
  .contact-page .contact-form textarea{min-height:290px}
  .contact-radio-list{grid-template-columns:repeat(2,1fr);gap:14px 24px}
  .contact-page .contact-form button{height:82px;margin-top:42px;font-size:22px}
}

@media(max-width:520px){
  .contact-page{width:calc(100% - 24px);padding:38px 0 62px}
  .contact-heading{margin-bottom:42px;padding:12px 14px 16px}
  .contact-heading h1{font-size:clamp(30px,9.5vw,40px);letter-spacing:0}
  .contact-heading .contact-kicker{margin-bottom:7px;font-size:12px}
  .contact-heading span{margin-top:9px;font-size:12px}
  .contact-intro{margin-bottom:24px;padding:20px 18px;font-size:14px;line-height:1.85}
  .contact-intro strong{white-space:normal}
  .contact-page .contact-form{gap:18px;padding:22px 16px;border-radius:18px}
  .contact-page .contact-form>label,.contact-status legend{font-size:15px}
  .contact-page .contact-form input:not([type="radio"]){height:56px;padding:0 14px}
  .contact-page .contact-form textarea{min-height:250px;padding:14px}
  .contact-radio-list{gap:12px 8px}
  .contact-radio-list label{gap:7px;font-size:13px}
  .contact-radio-list input{width:24px;height:24px;flex-basis:24px}
  .contact-page .contact-form button{height:68px;margin-top:30px;border-radius:13px;font-size:17px;box-shadow:5px 5px 0 #121c28}
  .contact-form-note{font-size:11px}
}

@media(max-width:350px){
  .contact-radio-list{grid-template-columns:1fr}
}

/* Published comparison methodology and sources. */
.comparison-source{width:min(100%,1060px);margin:22px auto 0;color:#5e6871;font-size:12px;line-height:1.8;text-align:left}

@media(max-width:900px){
  .comparison-source{margin-top:18px;font-size:10px;line-height:1.75}
  .contact-privacy-notice{margin-bottom:22px;padding:20px 18px;font-size:13px}
  .contact-privacy-notice h2{font-size:16px}
}