/* ref2の実測が基準。色のリテラルはこの :root に集約する。
   区切りの小数丸めにより、JSONの高さと次の上端に1px差がある場合は上端を優先。 */
:root {
  --page: #ffffff;
  --surface: #ffffff;
  --ink: #333333;
  --muted: #686868;
  --accent: #ff7900;
  --accent-ink: #ff7500;
  --accent-on: #ffffff;
  --band: #f7d72f;
  --band-soft: #fff7cc;
  --pale: #fffce9;
  --comparison-bg: #fffced;
  --mark: #f7d72f;
  --cta-start: #00b8b1;
  --cta-end: #00ccc5;
  --cta-on: #ffffff;
  --cta-shadow: rgb(0 110 103 / 55%);
  --danger: #df0000;
  --rule: #dddddd;
  --table-heading: #999999;
  --table-other: #f6f4f4;
  --input: #f6f9fa;
  --input-border: #c6d4e7;
  --input-ink: #333333;
  --link: #006d75;
  --shadow: rgb(0 0 0 / 16%);
  --device: #302b2a;
  --device-base: #777171;
  --ray: #ffd12e;
  --hero-dot: rgb(255 202 90 / 44%);
  --bubble-base: #f5f3da;
  --bubble: rgb(255 255 255 / 48%);
  --network-line: rgb(255 255 255 / 26%);
  --focus: #006d75;
  --clear: transparent;
}
* { box-sizing: border-box; }
html { margin: 0; padding: 0; scroll-padding-top: 20px; }
body { margin: 0; color: var(--ink); background: var(--page); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.6; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
input, button { font: inherit; }
button:disabled { cursor: not-allowed; }
section, header, footer, .section-nav { position: relative; display: flow-root; }
main { display: flow-root; }
em { color: var(--accent-ink); font-style: normal; }
.container { position: relative; width: min(1050px, calc(100% - 48px)); height: 100%; margin-inline: auto; }
.narrow { width: min(1000px, calc(100% - 48px)); }
.sp-only { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.decoration { position: absolute; pointer-events: none; object-fit: contain; }
.wordmark { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; gap: 0; font-size: 22px; line-height: 1; font-weight: 800; letter-spacing: -.06em; }
.wordmark-name { color: var(--accent-ink); }
.wordmark-service { color: var(--ink); font-size: .78em; letter-spacing: -.075em; }
.brand { display: inline-flex; text-decoration: none; }
.cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 24px; width: min(550px, 100%); height: 104px; padding: 8px 24px; margin-inline: auto; border-radius: 60px; color: var(--cta-on); background: linear-gradient(100deg, var(--cta-start), var(--cta-end)); box-shadow: 0 4px 3px var(--cta-shadow); font-size: 36px; line-height: 1.4; letter-spacing: .1em; text-decoration: none; white-space: nowrap; }
.cta::before { position: absolute; inset: 6px; border: 2px solid var(--cta-on); border-radius: inherit; content: ""; pointer-events: none; }
.arrow { flex: 0 0 32px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cta-on); }
.arrow::after { content: ""; margin-left: 3px; border-block: 8px solid var(--clear); border-left: 12px solid var(--cta-end); }
.cta-note { text-align: center; color: var(--muted); font-size: 20px; line-height: 30px; }
.header { height: 80px; background: var(--surface); box-shadow: 0 2px 5px var(--shadow); z-index: 2; }
.header-inner { width: min(1152px, calc(100% - 48px)); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header .brand { width: 320px; }
.cta-header { width: 320px; height: 58px; margin: 0; font-size: 18px; gap: 16px; }
.cta-header::before { inset: 4px; }
.cta-header .arrow { flex-basis: 20px; width: 20px; height: 20px; }
.cta-header .arrow::after { border-block-width: 5px; border-left-width: 7px; }
/* 写真は手元の見本サイト。背景の放射線・ドットは配色変更できる幾何学模様。 */
.hero { height: 912px; background: var(--pale); isolation: isolate; overflow: clip; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: repeating-conic-gradient(from 3deg at 50% 51%, var(--ray) 0deg .3deg, var(--clear) .3deg 8deg); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 51%, var(--pale) 0 17%, var(--clear) 57%), radial-gradient(circle, var(--hero-dot) 0 7px, var(--clear) 8px) 0 0 / 28px 28px; mask-image: linear-gradient(135deg, var(--ink), var(--clear) 31% 67%, var(--ink)); }
.hero-inner { position: relative; width: min(1050px, 100%); height: 100%; margin-inline: auto; }
.hero-checks { position: absolute; top: 62px; left: 260px; font-size: 22px; line-height: 33px; font-weight: 400; }
.hero-checks b { color: var(--accent-ink); }
.hero h1 { position: absolute; top: 143px; left: 260px; font-size: 40px; line-height: 64px; font-weight: 900; letter-spacing: -.04em; }
.highlight { background: linear-gradient(var(--clear) 74%, var(--mark) 74% 96%, var(--clear) 96%); }
.hero-zero { position: absolute; top: 74px; left: 575px; width: 220px; height: 380px; color: var(--accent-ink); }
.zero-glyph { position: absolute; top: 3.5px; left: -20px; display: block; width: 295px; font-family: Arial, sans-serif; font-weight: 900; font-size: 520px; line-height: 380px; letter-spacing: 0; transform: scaleX(.91); transform-origin: left center; }
.yen { position: absolute; top: -8px; left: -6px; z-index: 1; font-family: Arial, sans-serif; font-size: 98px; line-height: 1; -webkit-text-stroke: 9px var(--surface); paint-order: stroke fill; }
.zero-note { position: absolute; top: 108px; left: 85px; font-size: 55px; line-height: 1.25; font-weight: 400; writing-mode: vertical-rl; transform: rotate(17deg); }
.hero-cost { position: absolute; z-index: 1; top: 345px; left: 260px; color: var(--accent); font-size: 98px; line-height: 1.25; font-weight: 900; letter-spacing: -.07em; -webkit-text-stroke: 3px var(--surface); paint-order: stroke fill; }
.hero-gallery { position: absolute; inset: 0; pointer-events: none; }
.hero-image { position: absolute; width: 210px; height: 123px; border: 5px solid var(--surface); border-radius: 3px; object-fit: cover; box-shadow: 0 2px 7px var(--shadow); }
.hero-image:nth-child(-n+3) { left: 0; }
.hero-image:nth-child(n+4) { right: 0; }
.hero-image:nth-child(1), .hero-image:nth-child(4) { top: 72px; }
.hero-image:nth-child(2), .hero-image:nth-child(5) { top: 208px; }
.hero-image:nth-child(3), .hero-image:nth-child(6) { top: 343px; }
.hero-package { position: absolute; top: 480px; left: 100px; width: 850px; height: 189px; border: 3px solid var(--accent); border-radius: 12px; background: var(--surface); }
.package-services { position: absolute; top: 18px; left: 50px; width: 370px; font-size: 21px; line-height: 37px; }
.package-services small { font-size: .76em; }
.package-services span { padding: 1px 3px; color: var(--accent-on); background: var(--accent); white-space: nowrap; }
.all-in { position: absolute; left: 396px; top: 37px; height: 116px; writing-mode: vertical-rl; text-orientation: upright; font-size: 22px; line-height: 26px; }
.package-price { position: absolute; top: 17px; right: 35px; width: 347px; height: 150px; }
.price-caption { position: relative; text-align: center; padding-top: 4px; font-size: 28px; line-height: 40px; }
.price-caption > span { position: absolute; top: -21px; left: 45px; font-size: 31px; letter-spacing: -.05em; color: var(--cta-start); }
.monthly { color: var(--accent-ink); font-size: 34px; line-height: 89px; white-space: nowrap; }
.monthly strong { font-size: 86px; font-family: Arial, sans-serif; font-weight: 800; letter-spacing: -2px; }
.survey { font-size: 10px; line-height: 15px; font-weight: 700; }
.package-price .survey { display: block; text-align: right; font-size: 8px; white-space: nowrap; }
.hero-cta { position: absolute; top: 704px; width: 100%; }
.hero-cta .cta-note { margin-bottom: 12px; }
.section-nav { height: 222px; background: var(--band); }
.nav-inner { width: min(850px, calc(100% - 32px)); margin: 45px auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 30px; }
.nav-inner a { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 28px; border: 2px solid var(--accent); border-radius: 30px; background: var(--surface); color: var(--accent-ink); text-decoration: none; }
.nav-inner a span { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; line-height: 1; background: var(--accent); color: var(--accent-on); }
.section-heading { display: flex; flex-direction: column; align-items: center; gap: 24px; font-size: 33px; line-height: 49px; text-align: center; font-weight: 800; }
.section-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-on); }
.section-icon i { display: block; position: relative; width: 22px; height: 23px; border: 2px solid currentColor; border-radius: 2px; }
.section-icon i::before { position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: currentColor; content: ""; }
.section-icon i::after { position: absolute; top: 9px; left: 4px; width: 10px; height: 7px; border-block: 2px solid currentColor; content: ""; }
.bubbles { background-color: var(--bubble-base); background-image: radial-gradient(circle at 10% 15%, var(--bubble) 0 140px, var(--clear) 141px), radial-gradient(circle at 80% 66%, var(--bubble) 0 100px, var(--clear) 101px), radial-gradient(circle at 52% 3%, var(--bubble) 0 106px, var(--clear) 107px); background-size: 700px 580px, 610px 490px, 450px 400px; }
.works { height: 1195px; }
.works .section-heading { position: absolute; top: 78px; width: 100%; }
.works-left { top: 0; left: 0; width: 230px; height: 230px; }
.works-right { top: 30px; right: 0; width: 230px; height: 230px; }
.works-copy { position: absolute; top: 238px; width: 100%; text-align: center; font-size: 18px; line-height: 32px; }
.works-grid { position: absolute; top: 368px; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 146px; gap: 11px 12px; }
.device { position: relative; width: 100%; height: 146px; }
.laptop { position: absolute; top: 0; left: 9%; width: 82%; height: 96%; border: 6px solid var(--device); border-bottom-width: 9px; border-radius: 6px 6px 2px 2px; background: var(--surface); }
.laptop > img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.laptop::after { content: ""; position: absolute; bottom: -10px; left: -12%; width: 124%; height: 5px; border-radius: 0 0 70% 70%; background: var(--device-base); }
.phone { position: absolute; right: 0; bottom: 0; width: 22%; height: 81%; border: 3px solid var(--device); border-radius: 9px; overflow: hidden; background: var(--surface); }
.phone > img { width: 100%; height: 100%; object-fit: cover; object-position: 25% top; }
.industry-panel { position: absolute; top: 717px; left: -49px; width: calc(100% + 98px); height: 288px; padding: 32px; border: 2px solid var(--mark); border-radius: 12px; background: var(--band-soft); }
.industry-panel h3 { text-align: center; font-size: 28px; line-height: 46px; }
.industry-panel ul { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 20px; font-size: 18px; line-height: 30px; font-weight: 400; }
.industry-panel li::before { content: "■"; color: var(--accent); margin-right: 8px; font-size: 13px; }
.industry-panel > p { margin-top: 12px; font-size: 13px; }
.brand-bridge { position: absolute; bottom: 23px; width: 100%; text-align: center; color: var(--accent-ink); font-size: 28px; line-height: 43px; white-space: nowrap; }
.brand-bridge .wordmark { font-size: 30px; }
.action { height: 597px; color: var(--accent-on); background: var(--accent); }
.action-ribbon { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 480px; height: 64px; padding: 6px; border: 5px solid var(--mark); box-shadow: inset 0 0 0 2px var(--accent); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 29px; }
.action h2 { position: absolute; top: 137px; width: 100%; text-align: center; font-size: 38px; line-height: 68px; text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 10px; text-decoration-thickness: 5px; }
.action-offer { position: absolute; top: 262px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; width: 758px; height: 99px; color: var(--ink); }
.action-price { position: relative; width: 488px; height: 99px; border: 4px solid var(--surface); border-radius: 5px; background: var(--band-soft); text-align: center; font-size: 25px; line-height: 92px; font-weight: 400; white-space: nowrap; }
.action-price > small { position: absolute; top: -23px; left: 17%; width: 66%; height: 37px; border-radius: 30px; color: var(--accent-ink); background: var(--surface); font-size: 18px; line-height: 37px; font-weight: 800; }
.action-price strong { font-size: 50px; line-height: 1; font-family: Arial, sans-serif; font-weight: 800; }
.action-options { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.action-options p { display: flex; align-items: center; justify-content: center; flex: 1; border: 4px solid var(--surface); border-radius: 4px; background: var(--band-soft); font-size: 20px; line-height: 1.3; font-weight: 400; }
.action-options b { font-size: 24px; }
.action-offer > .survey { position: absolute; top: 108px; left: 0; color: var(--accent-on); }
.action-cta { position: absolute; top: 430px; width: 100%; }
.action-cta .cta-note { color: var(--accent-on); font-size: 18px; line-height: 28px; }
.network { background-color: var(--band); background-image: radial-gradient(circle, var(--network-line) 0 5px, var(--clear) 6px), repeating-linear-gradient(30deg, var(--clear) 0 100px, var(--network-line) 101px 102px, var(--clear) 103px 210px), repeating-linear-gradient(150deg, var(--clear) 0 100px, var(--network-line) 101px 102px, var(--clear) 103px 210px); background-size: 180px 154px, 420px 365px, 420px 365px; }
.features { height: 2071px; }
.features > .container > .section-heading { position: absolute; top: 85px; width: 100%; }
.point-list { position: absolute; top: 269px; width: 100%; display: grid; gap: 40px; }
.point { position: relative; height: 300px; border-radius: 24px; background: var(--surface); overflow: hidden; }
.point-number { position: absolute; left: 0; top: 0; width: 80px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--accent-on); background: var(--accent); }
.point-number small { font-size: 14px; line-height: 20px; }
.point-number b { font-family: Arial, sans-serif; font-size: 50px; line-height: 55px; }
.point h3 { position: absolute; top: 46px; left: 120px; width: 510px; font-size: 27px; line-height: 43px; }
.point > p { position: absolute; top: 148px; left: 120px; width: 510px; font-size: 16px; line-height: 27px; }
.point-image { position: absolute; top: 37px; right: 70px; width: 310px; height: 225px; background: var(--band-soft); }
.point-image img { width: 100%; height: 100%; object-fit: contain; }
.point-2 h3, .point-4 h3 { top: 56px; }
.point-2 > p, .point-4 > p { top: 160px; }
.included { position: absolute; top: 1649px; width: 100%; }
.included h3 { text-align: center; font-size: 30px; line-height: 49px; }
.included ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; margin-top: 20px; }
.included li { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 68px; padding: 6px; border: 2px solid var(--accent); border-radius: 5px; background: var(--surface); text-align: center; font-size: 17px; line-height: 23px; }
.included small { font-size: 12px; line-height: 15px; font-weight: 400; }
.comparison { height: 1328px; background: var(--comparison-bg); }
.comparison-art { top: 0; left: 0; width: 270px; height: 270px; }
.comparison .section-heading, .flow .section-heading { position: absolute; top: 100px; width: 100%; gap: 22px; font-size: 36px; line-height: 48px; }
.section-lead { position: absolute; top: 268px; width: 100%; text-align: center; font-size: 18px; line-height: 30px; }
.comparison-scroll { position: absolute; top: 357px; width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; font-size: 21px; text-align: center; }
.label-col { width: 18%; }
.our-col { width: 31.6%; }
thead th { height: 83px; padding: 8px; background: var(--table-heading); color: var(--accent-on); border-right: 3px solid var(--comparison-bg); font-size: 20px; }
thead .ours { border: 3px solid var(--accent); border-bottom: 0; background: var(--accent); }
thead .wordmark { font-size: 20px; }
thead .wordmark-name, thead .wordmark-service { color: var(--accent-on); }
thead small { font-size: 13px; }
tbody th, tbody td { height: 83px; padding: 10px; border-right: 3px solid var(--comparison-bg); border-bottom: 3px solid var(--comparison-bg); line-height: 1.3; }
tbody th { background: var(--band); font-size: 19px; }
tbody td { background: var(--table-other); }
tbody .ours { border-inline: 3px solid var(--accent); background: var(--surface); color: var(--accent-ink); font-size: 24px; }
tbody tr:nth-child(-n+3) .ours { background: var(--band-soft); }
tbody tr:last-child .ours { border-bottom: 3px solid var(--accent); }
tbody strong { font-size: 46px; font-family: Arial, sans-serif; }
.comparison-note { position: absolute; top: 1032px; width: 100%; text-align: center; color: var(--muted); font-size: 12px; }
.comparison-close { position: absolute; top: 1090px; width: 100%; text-align: center; font-size: 29px; line-height: 46px; }
.plans { height: 961px; }
.plans .section-heading { position: absolute; top: 82px; width: 100%; gap: 22px; font-size: 33px; line-height: 48px; }
.plan-grid { position: absolute; top: 360px; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.plan { height: 531px; overflow: hidden; border-radius: 14px; background: var(--surface); }
.plan-head { height: 146px; padding: 18px 10px 10px; text-align: center; color: var(--accent-on); background: var(--accent); }
.plan-head h3 { font-size: 22px; line-height: 36px; }
.plan-head > p { font-size: 14px; line-height: 22px; }
.plan-price { margin-top: 8px; font-size: 20px; line-height: 52px; }
.plan-price strong { font-family: Arial, sans-serif; font-size: 42px; }
.plan-price .pending-price { font-family: inherit; font-size: 34px; }
.plan-body { position: relative; height: 385px; padding: 23px 22px; font-size: 16px; line-height: 30px; }
.plan-body h4 { font-size: 16px; }
.plan-body h4:not(:first-child) { margin-top: 16px; }
.plan-body ul { padding-left: 21px; font-size: 14px; line-height: 23px; }
.plan-body li { padding: 5px 0; border-bottom: 1px dotted var(--table-heading); }
.cta-plan { position: absolute; left: 22px; right: 22px; bottom: 26px; width: auto; height: 58px; font-size: 17px; gap: 12px; letter-spacing: .04em; padding: 6px 12px; }
.cta-plan::before { inset: 4px; }
.cta-plan .arrow { flex-basis: 18px; width: 18px; height: 18px; }
.cta-plan .arrow::after { border-block-width: 4px; border-left-width: 6px; }
.flow { height: 880px; background: var(--band-soft); }
.flow-art { top: 0; right: 0; width: 270px; height: 290px; }
.flow-grid { position: absolute; top: 390px; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.flow-grid li { position: relative; height: 390px; padding: 205px 16px 20px; border: 4px solid var(--mark); border-radius: 8px; background: var(--surface); }
.step-number { position: absolute; left: 28px; top: -32px; width: 64px; height: 64px; border-radius: 50%; background: var(--mark); text-align: center; font-family: "Arial Narrow", Arial, sans-serif; font-weight: 400; font-size: 32px; line-height: 64px; }
.step-image { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); width: 88px; height: 64px; object-fit: contain; }
.flow-grid h3 { position: absolute; top: 132px; left: 12px; right: 12px; min-height: 50px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20px; line-height: 25px; }
.flow-grid p { font-size: 16px; line-height: 24px; }
.faq { min-height: 990px; padding: 100px 0; }
.faq .section-heading { font-size: 36px; line-height: 48px; gap: 22px; }
.faq-list { display: grid; gap: 20px; margin-top: 60px; }
.faq-item { background: var(--surface); border-radius: 8px; }
.faq-item summary { position: relative; display: flex; align-items: center; gap: 24px; min-height: 84px; padding: 12px 74px 12px 28px; cursor: pointer; font-size: 23px; line-height: 32px; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.q-number { flex: 0 0 54px; font-family: "Arial Narrow", Arial, sans-serif; font-size: 46px; line-height: 55px; font-weight: 400; color: var(--accent-ink); }
.faq-item summary i { position: absolute; right: 28px; border-inline: 15px solid var(--clear); border-top: 15px solid var(--mark); }
.faq-item[open] summary i { transform: rotate(180deg); }
.faq-answer { padding: 0 40px 24px 106px; font-size: 16px; line-height: 28px; font-weight: 400; }
.contact { height: 546px; padding: 100px 0; background: var(--surface); }
.contact-card { position: relative; width: min(1000px, calc(100% - 48px)); height: 346px; margin-inline: auto; background: var(--surface); box-shadow: 0 4px 15px var(--shadow); }
.contact .section-heading { position: absolute; top: 50px; width: 100%; gap: 22px; font-size: 36px; line-height: 54px; color: var(--accent-ink); }
.contact-copy { position: absolute; top: 187px; width: 100%; text-align: center; font-size: 14px; line-height: 24px; font-weight: 400; }
.contact-copy a { color: var(--link); }
.contact-form { position: absolute; top: 220px; left: 10%; right: 10%; }
.contact-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contact-fields label { display: flex; gap: 8px; align-items: center; min-width: 0; font-size: 12px; white-space: nowrap; }
.contact-fields input { width: 100%; min-width: 0; height: 32px; padding: 4px 8px; border: 1px solid var(--input-border); border-radius: 6px; color: var(--input-ink); background: var(--input); font-size: 14px; font-weight: 400; }
.contact-fields input::placeholder { color: var(--muted); opacity: 1; }
.form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 11px; font-weight: 400; }
.privacy { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.privacy input { margin: 0; }
.privacy a { color: var(--link); text-decoration: underline; }
.form-bottom > div { display: flex; align-items: center; gap: 10px; }
.form-bottom button { padding: 5px 20px; border: 0; border-radius: 20px; color: var(--cta-on); background: var(--cta-start); font-size: 14px; }
.form-bottom button:disabled { opacity: .65; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-result { position: absolute; top: 220px; left: 10%; right: 10%; text-align: center; }
.contact-result-message { font-size: 15px; line-height: 24px; }
.contact-result-actions { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.contact-result-actions a { display: block; padding: 7px 16px; border-radius: 24px; background: var(--cta-start); color: var(--cta-on); font-size: 13px; text-decoration: none; }
[hidden] { display: none !important; }
.form-bottom small { font-size: 10px; color: var(--muted); }
.footer { height: 172px; background: var(--surface); box-shadow: 0 -3px 12px var(--shadow); }
.footer-inner { width: min(1152px, calc(100% - 48px)); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 50px; }
.operator { flex: 0 0 405px; min-height: 100px; padding-right: 30px; border-right: 2px solid var(--rule); }
.operator h2 { font-size: 24px; line-height: 40px; }
.operator p { font-size: 14px; line-height: 26px; }
.footer-service { display: flex; align-items: center; gap: 20px; }
.footer-service .wordmark { font-size: 22px; }
.footer-service > p { font-size: 12px; line-height: 23px; }
@media (min-width: 768px) and (max-width: 1199px) {
  .hero-inner { transform: scale(.85); transform-origin: top center; width: 1050px; left: calc((100% - 1050px) / 2); margin: 0; }
  .point h3, .point > p { width: 48%; left: 105px; }
  .point-image { right: 30px; width: 28%; }
  .industry-panel { left: 0; width: 100%; }
  .footer-inner { gap: 24px; }
  .operator { flex-basis: 38%; }
  .footer-service { flex-direction: column; align-items: start; gap: 12px; }
}
@media (max-width: 767px) {
  body { font-size: 14px; }
  .container { width: calc(100% - 32px); }
  .narrow { width: calc(100% - 36px); }
  .sp-only { display: initial; }
  .pc-only { display: none; }
  .wordmark { font-size: 13px; }
  .header { height: 44px; }
  .header-inner { width: calc(100% - 36px); gap: 10px; }
  .header .brand { width: 140px; flex: 0 1 140px; }
  .header .wordmark { font-size: 10px; }
  .cta-header { flex: 0 0 175px; width: 175px; height: 34px; padding: 4px 8px; font-size: 10px; letter-spacing: 0; gap: 3px; }
  .cta-header::before { inset: 3px; border-width: 2px; }
  .cta-header .arrow { flex-basis: 10px; width: 10px; height: 10px; }
  .cta-header .arrow::after { margin-left: 1px; border-block-width: 3px; border-left-width: 4px; }
  .hero { height: 621px; }
  .hero::before { background: repeating-conic-gradient(from 3deg at 50% 42%, var(--ray) 0deg .4deg, var(--clear) .4deg 8deg); }
  .hero::after { background: radial-gradient(ellipse at 50% 45%, var(--pale) 0 26%, var(--clear) 72%); mask-image: none; }
  .hero-inner { width: 390px; max-width: 100%; }
  .hero-checks { top: 57px; left: 34px; font-size: 13px; line-height: 24px; letter-spacing: -.05em; }
  .hero h1 { top: 112px; left: 36px; font-size: 24px; line-height: 37px; letter-spacing: -.04em; }
  .hero-zero { top: 26px; left: 204px; width: 156px; height: 270px; }
  .zero-glyph { top: 2.5px; left: -14px; width: 208px; font-size: 369.5px; line-height: 270px; transform: scaleX(.908); }
  .yen { top: -3px; left: -2px; font-size: 70px; -webkit-text-stroke-width: 7px; }
  .zero-note { top: 77px; left: 62px; font-size: 39px; }
  .hero-cost { top: 234px; left: 34px; font-size: 62px; line-height: 78px; letter-spacing: -.07em; -webkit-text-stroke-width: 2px; }
  .hero-gallery { display: none; }
  .hero-package { top: 330px; left: 20px; width: calc(100% - 40px); height: 152px; border-width: 2px; border-radius: 10px; }
  .package-services { top: 10px; left: 25px; width: calc(100% - 50px); font-size: 14px; line-height: 23px; }
  .package-services small { font-size: .76em; }
.package-services span { padding: 1px 2px; }
  .all-in { top: 66px; left: 26px; width: calc(100% - 52px); height: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; writing-mode: horizontal-tb; font-size: 14px; line-height: 20px; }
  .all-in::before, .all-in::after { content: ""; flex: 1; border-top: 1px solid var(--muted); }
  .package-price { top: 90px; left: 29px; right: auto; width: calc(100% - 58px); height: 54px; display: flex; align-items: start; gap: 8px; }
  .price-caption { flex: 1; padding-top: 11px; font-size: 19px; line-height: 26px; white-space: nowrap; letter-spacing: -.07em; }
  .price-caption > span { top: -9px; left: 0; font-size: 24px; }
  .monthly { font-size: 17px; line-height: 48px; }
  .monthly strong { font-size: 42px; letter-spacing: -1px; }
  .package-price .survey { position: absolute; left: 0; top: 34px; font-size: 5.4px; line-height: 12px; letter-spacing: -.02em; }
  .hero-cta { top: 501px; left: 20px; width: calc(100% - 40px); }
  .cta { width: 100%; height: 60px; padding: 5px 15px; gap: 16px; font-size: 20px; line-height: 28px; letter-spacing: .08em; }
  .cta::before { inset: 4px; }
  .arrow { flex-basis: 20px; width: 20px; height: 20px; }
  .arrow::after { border-block-width: 5px; border-left-width: 7px; }
  .cta-note { font-size: 13px; line-height: 25px; letter-spacing: -.03em; }
  .hero-cta .cta-note { margin-bottom: 5px; }
  /* 小型のヘッダーボタンは共通CTAのスマホ寸法を適用しない。 */
  .header .cta-header { width: 175px; height: 34px; padding: 4px 8px; font-size: 10px; line-height: 16px; letter-spacing: 0; gap: 3px; }
  .section-nav { height: 229px; }
  .nav-inner { width: calc(100% - 32px); margin: 30px auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .nav-inner a { height: 47px; padding: 0 14px; font-size: 15px; }
  .section-heading { gap: 24px; font-size: 24px; line-height: 35px; }
  .section-icon { flex-basis: 40px; width: 40px; height: 40px; }
  .section-icon i { width: 17px; height: 18px; border-width: 1.5px; }
  .section-icon i::after { top: 8px; left: 3px; width: 8px; height: 5px; border-width: 1px; }
  .section-icon i::before { top: 3px; height: 1px; }
  .bubbles { background-size: 500px 680px, 610px 490px, 450px 400px; }
  .works { height: 1340px; }
  .works-left, .works-right { display: none; }
  .works .section-heading { top: 50px; }
  .works .section-heading > span:last-child { height: 86px; font-size: 32px; line-height: 48px; padding-top: 0; }
  .works-copy { top: 215px; font-size: 15px; line-height: 25px; }
  .works-copy em { display: inline-block; }
  .works-grid { top: 410px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 101px; gap: 5.5px 5px; }
  .device { height: 101px; }
  .laptop { border-width: 4px; border-bottom-width: 6px; border-radius: 5px 5px 2px 2px; }
  .laptop::after { bottom: -7px; height: 3px; }
  .phone { border-width: 2px; border-radius: 6px; }
  .industry-panel { top: 856px; left: 4px; width: calc(100% - 8px); height: 389px; padding: 18px 20px; }
  .industry-panel h3 { font-size: 18px; line-height: 30px; text-wrap: balance; }
  .industry-panel ul { gap: 6px 12px; margin-top: 12px; font-size: 13px; line-height: 20px; }
  .industry-panel li::before { font-size: 10px; margin-right: 5px; }
  .industry-panel > p { margin-top: 10px; font-size: 10px; line-height: 15px; }
  .brand-bridge { bottom: 16px; font-size: 16px; line-height: 26px; }
  .brand-bridge .wordmark { font-size: 18px; }
  .action { height: 483px; }
  .action-ribbon { top: 34px; width: 310px; height: 48px; padding: 4px; border-width: 3px; font-size: 20px; line-height: 28px; }
  .action h2 { top: 89px; font-size: clamp(21px, 5.9vw, 23px); line-height: 43px; text-underline-offset: 5px; text-decoration-thickness: 4px; letter-spacing: -.04em; }
  .action-offer { top: 218px; width: 328px; height: 90px; display: block; }
  .action-price { width: 100%; height: 54px; font-size: 16px; line-height: 50px; }
  .action-price > small { top: -20px; left: 12%; width: 76%; height: 28px; font-size: 13px; line-height: 28px; }
  .action-price strong { font-size: 30px; }
  .action-options { flex-direction: row; gap: 5px; height: 30px; margin-top: 5px; }
  .action-options p { border-width: 3px; font-size: 12px; white-space: nowrap; }
  .action-options b { font-size: 15px; }
  .action-offer > .survey { top: 91px; left: auto; right: 0; font-size: 6px; line-height: 11px; }
  .action-cta { top: 358px; }
  .action-cta .cta-note { font-size: 13px; line-height: 24px; margin-bottom: 4px; }
  .action-cta .cta { height: 60px; }
  [data-section="action-2"] { height: 484px; }
  .network { background-size: 180px 154px, 420px 365px, 420px 365px; }
  .features { height: 2897px; }
  .features > .container > .section-heading { top: 66px; gap: 16px; font-size: 23px; line-height: 35px; letter-spacing: -.04em; }
  .point-list { top: 191px; gap: 21px; }
  .point { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: max-content max-content minmax(0, 1fr); gap: 14px 12px; height: 529px; padding: 24px; border-radius: 13px; }
  .point-2 { height: 498px; }
  .point-3 { height: 482px; }
  .point-4 { height: 476px; }
  .point-number { position: static; align-self: start; width: 52px; height: 88px; border-radius: 10px; }
  .point-number small { font-size: 10px; line-height: 18px; }
  .point-number b { font-size: 34px; line-height: 36px; }
  .point h3 { position: static; align-self: center; width: auto; font-size: 18.72px; line-height: 28px; letter-spacing: -.045em; }
  .point > p { position: static; grid-column: 1 / -1; width: auto; font-size: 14px; line-height: 23px; }
  .point-image { position: static; grid-column: 1 / -1; align-self: end; min-height: 0; width: 100%; height: 100%; max-height: 210px; }
  .included { top: 2284px; }
  .included h3 { font-size: clamp(21px, 5.9vw, 23px); line-height: 34.5px; }
  .included ul { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 23px; gap: 13px 12px; }
  .included li { height: 66px; font-size: 14px; line-height: 20px; padding: 5px; }
  .included li:nth-child(9) { order: -4; }
  .included li:nth-child(10) { order: -3; }
  .included li:nth-child(11) { order: -2; }
  .included li:nth-child(12) { order: -1; }
  .included small { font-size: 10px; line-height: 14px; }
  .comparison { height: 895px; }
  .comparison-art, .flow-art { display: none; }
  .comparison .section-heading, .flow .section-heading { top: 52px; gap: 9px; font-size: 25px; line-height: 35px; }
  .section-lead { top: 169px; font-size: 16px; line-height: 25px; }
  .comparison-scroll { top: 234px; }
  table { width: 600px; font-size: 14px; }
  .label-col { width: 96px; }
  .our-col { width: 170px; }
  thead th { height: 52px; padding: 4px; font-size: 14px; }
  thead small { font-size: 10px; }
  thead .wordmark { font-size: 11px; }
  tbody th, tbody td { height: 53px; padding: 6px; }
  tbody th { font-size: 12px; }
  tbody .ours { font-size: 16px; }
  tbody strong { font-size: 30px; }
  .comparison-note { top: 668px; font-size: 10px; line-height: 17px; }
  .comparison-close { top: 795px; font-size: 16px; line-height: 26px; }
  .plans { height: 1901px; }
  .plans .section-heading { top: 66px; gap: 16px; font-size: 24px; line-height: 41px; }
  .plan-grid { top: 277px; grid-template-columns: minmax(0, 1fr); gap: 19px; }
  .plan { height: 529px; }
  .plan:last-child { height: 502px; }
  .plan-head { height: 150px; padding-top: 18px; }
  .plan-head h3 { font-size: 24px; line-height: 40px; }
  .plan-price { line-height: 54px; }
  .plan-body { height: 379px; padding: 22px; }
  .plan:last-child .plan-body { height: 352px; }
  .plan-body h4:not(:first-child) { margin-top: 16px; }
  .plan-body ul { padding-left: 20px; font-size: 15px; line-height: 24px; }
  .cta-plan { width: auto; height: 58px; font-size: 17px; letter-spacing: .04em; }
  .cta-plan .arrow { flex-basis: 18px; width: 18px; height: 18px; }
  .flow { height: 1450px; }
  .flow-grid { top: 269px; grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .flow-grid li { height: 201px; border-width: 3px; padding: 70px 16px 20px; }
  .flow-grid li:nth-child(3), .flow-grid li:nth-child(5) { height: 222px; }
  .step-number { top: -21px; left: calc(50% - 21px); width: 42px; height: 42px; font-size: 22px; line-height: 42px; }
  .step-image { top: auto; bottom: 22px; width: 67px; height: 48px; }
  .flow-grid h3 { top: 30px; left: 15px; right: 15px; min-height: 30px; font-size: 18.72px; line-height: 26px; letter-spacing: -.04em; }
  .flow-grid p { text-align: center; font-size: 14px; line-height: 22px; }
  .faq { min-height: 694px; padding: 52px 0 51px; }
  .faq .section-heading { gap: 9px; font-size: 25px; line-height: 35px; }
  .faq-list { gap: 8px; margin-top: 42px; }
  .faq-item { border-radius: 6px; }
  .faq-item summary { gap: 14px; min-height: 71px; padding: 10px 42px 10px 18px; font-size: 16px; line-height: 23px; }
  .faq-item:nth-child(2) summary { min-height: 94px; }
  .faq-item:nth-child(4) summary, .faq-item:nth-child(5) summary { min-height: 59px; }
  .q-number { flex-basis: 38px; font-size: 32px; line-height: 40px; }
  .faq-item summary i { right: 17px; border-inline-width: 8px; border-top-width: 8px; }
  .faq-answer { padding: 0 18px 22px; font-size: 14px; line-height: 24px; }
  .contact { height: 420px; padding: 52px 0; }
  .contact-card { width: calc(100% - 36px); height: 316px; }
  .contact .section-heading { top: 31px; gap: 9px; font-size: 25px; line-height: 35px; }
  .contact-copy { top: 122px; padding-inline: 12px; font-size: 12px; line-height: 19px; }
  .contact-form { top: 170px; left: 18px; right: 18px; }
  .contact-result { top: 170px; left: 18px; right: 18px; }
  .contact-result-message { font-size: 13px; line-height: 20px; }
  .contact-result-actions { display: grid; gap: 6px; margin-top: 8px; }
  .contact-result-actions a { padding: 5px 10px; font-size: 12px; line-height: 20px; }
  .contact-fields { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .contact-fields label { font-size: 11px; }
  .contact-fields input { height: 25px; font-size: 12px; }
  .contact-fields label { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px; }
  .form-bottom { display: block; margin-top: 5px; font-size: 9px; line-height: 16px; }
  .privacy { flex-wrap: nowrap; gap: 2px; }
  .privacy input { width: 11px; height: 11px; }
  .form-bottom > div { justify-content: center; gap: 6px; margin-top: 4px; }
  .form-bottom button { padding: 2px 15px; font-size: 11px; line-height: 20px; }
  .form-bottom small { font-size: 8px; }
  .footer { height: 398px; }
  .footer-inner { width: calc(100% - 36px); display: flex; flex-direction: column; gap: 24px; padding-top: 52px; }
  .footer-service { order: -1; display: flex; flex-direction: column; gap: 18px; text-align: center; }
  .footer-service .wordmark { font-size: 19px; }
  .footer-service > p { font-size: 13px; line-height: 24px; font-weight: 400; }
  .operator { flex: 0 0 auto; width: 100%; min-height: 0; padding: 18px 0 0; border-right: 0; border-top: 1px solid var(--rule); text-align: center; }
  .operator h2 { font-size: 18px; line-height: 32px; }
  .operator p { font-size: 12px; line-height: 25px; font-weight: 400; }
}
@media (max-width: 374px) {
  .header-inner { width: calc(100% - 20px); gap: 6px; }
  .header .brand { flex-basis: 125px; }
  .header .wordmark { font-size: 9px; }
  .header .cta-header { flex-basis: 165px; width: 165px; }
  .hero-zero { left: 52%; }
  .hero h1 { left: 24px; font-size: 22px; }
  .hero-checks { left: 24px; font-size: 11px; }
  .hero-cost { left: 24px; font-size: 57px; }
  .package-services { left: 14px; width: calc(100% - 28px); font-size: 12px; }
  .package-price { left: 15px; width: calc(100% - 30px); }
  .cta { font-size: 17px; gap: 12px; }
  .industry-panel { padding-inline: 20px; }
  .point h3 { font-size: 17px; }
  .action-offer { width: calc(100% - 20px); }
}