@charset "utf-8";

:root {
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #26332e;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fffefa; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
.eyebrow { margin-bottom: 14px; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.options-index { min-height: 100vh; padding: 72px 24px; background: #f7f6f0; }
.options-shell { max-width: 1000px; margin: auto; }
.options-shell > .eyebrow { color: #637a63; }
.options-shell h1 { margin-bottom: 12px; font-size: clamp(32px, 5vw, 48px); }
.options-intro { max-width: 630px; margin-bottom: 38px; color: #606963; line-height: 1.9; }
.options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.option-card { display: flex; min-height: 265px; flex-direction: column; padding: 25px; border: 1px solid #e1e4dc; border-radius: 17px; background: white; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.option-card:hover { transform: translateY(-4px); box-shadow: 0 14px 35px #26332e16; }
.option-number { margin-bottom: 35px; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.option-name { margin-bottom: 10px; font-size: 21px; font-weight: 800; }
.option-description { color: #66716b; font-size: 13px; line-height: 1.8; }
.option-link { margin-top: auto; padding-top: 22px; font-size: 12px; font-weight: 800; }
.option-link span { margin-left: 8px; }
.option-garden { border-top: 5px solid #5d8568; }
.option-garden .option-number { color: #5d8568; }
.option-pro { border-top: 5px solid #163b56; }
.option-pro .option-number { color: #163b56; }
.option-local { border-top: 5px solid #b7633f; }
.option-local .option-number { color: #b7633f; }
.back-link { display: inline-block; margin-top: 30px; color: #58665f; font-size: 13px; }

.preview-bar { display: flex; min-height: 35px; align-items: center; justify-content: center; gap: 9px; padding: 6px 16px; background: #f1e7cf; color: #604d31; font-size: 11px; font-weight: 700; }
.preview-bar span { font-weight: 400; }
.preview-bar a { margin-left: 12px; }
.design-header { position: relative; z-index: 1; display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 24px; padding: 12px max(5vw, 24px); background: #fff; }
.design-brand { display: flex; flex-shrink: 0; align-items: center; gap: 10px; text-decoration: none; }
.brand-symbol { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; font-size: 13px; font-weight: 900; }
.design-brand > span:last-child { display: grid; gap: 2px; }
.design-brand strong { font-size: 15px; letter-spacing: .04em; }
.design-brand small { font-size: 9px; }
.design-header nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); }
.design-header nav a { font-size: 11px; text-decoration: none; }
.header-button, .primary-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 20px; border-radius: 4px; font-size: 12px; font-weight: 800; text-decoration: none; transition: transform .2s, filter .2s; }
.header-button:hover, .primary-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.header-button span, .primary-button span { margin-left: 10px; }
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; align-items: center; gap: 35px; padding: 68px max(8vw, 35px); }
.hero-copy { max-width: 550px; }
.hero h1 { margin-bottom: 20px; font-size: clamp(36px, 4.4vw, 55px); line-height: 1.48; letter-spacing: .02em; }
.hero h1 em { font-style: normal; }
.hero-description { max-width: 480px; margin-bottom: 24px; font-size: 14px; line-height: 2; }
.fine-print { margin: 13px 0 0; font-size: 10px; }
.promise-row { display: grid; max-width: 1080px; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: auto; padding: 24px 24px; border-bottom: 1px solid #e7e7e0; }
.promise-row p { display: flex; align-items: center; gap: 12px; margin: 0; }
.promise-row p > b { display: grid; width: 39px; height: 39px; flex-shrink: 0; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; }
.promise-row p > span { display: grid; gap: 4px; }
.promise-row strong { font-size: 12px; }
.promise-row small { font-size: 10px; }
.content-section { padding: 82px max(7vw, 28px); }
.center-heading { max-width: 650px; margin: 0 auto 34px; text-align: center; }
.center-heading .eyebrow { color: #647a65; }
.center-heading h2, .pricing-band h2, .area-band h2, .contact-band h2 { margin-bottom: 12px; font-size: clamp(27px, 3vw, 38px); line-height: 1.5; }
.center-heading > p:last-child { color: #717a74; font-size: 12px; line-height: 1.9; }
.service-cards { display: grid; max-width: 1060px; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: auto; }
.service-tile { display: flex; min-height: 230px; flex-direction: column; padding: 23px; border: 1px solid #e9e7de; border-radius: 9px; background: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.service-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 25px #26332e12; }
.service-tile > span { margin-bottom: 20px; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.service-tile h3 { margin-bottom: 10px; font-size: 20px; }
.service-tile p { color: #66716a; font-size: 12px; line-height: 1.8; }
.service-tile b { margin-top: auto; font-size: 11px; }
.tile-bedbug { background: linear-gradient(160deg, #fff5ec, #fff 62%); }
.tile-stinkbug { background: linear-gradient(160deg, #f3f5e8, #fff 62%); }
.tile-wildlife { background: linear-gradient(160deg, #edf3ee, #fff 62%); }
.section-footnote { max-width: 1060px; margin: 20px auto 0; color: #727a74; font-size: 10px; line-height: 1.8; }
.pricing-band { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 40px; padding: 68px max(9vw, 32px); }
.pricing-band > div:first-child > p:last-child, .area-band > div:first-child > p:last-child { max-width: 510px; font-size: 13px; line-height: 1.9; }
.price-box { padding: 27px; border: 1px solid #e6e2d7; background: #fff; }
.price-box > small { font-size: 11px; }
.price-box > p { margin: 12px 0 5px; font-size: 12px; }
.price-box > p strong { font-size: 54px; letter-spacing: -.05em; }
.price-box > p span { margin-left: 8px; font-size: 12px; }
.price-box > span { color: #707870; font-size: 10px; }
.price-box hr { margin: 20px 0; border: 0; border-top: 1px solid #e9e7df; }
.price-box > b { font-size: 11px; line-height: 1.8; }
.support-section { padding: 68px max(7vw, 28px); }
.support-cards { display: grid; max-width: 1060px; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: auto; }
.support-cards article { padding: 21px; border: 1px solid #e8e5dc; background: #fff; }
.support-cards article > b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; font-size: 11px; }
.support-cards h3 { margin: 15px 0 8px; font-size: 15px; }
.support-cards p { margin: 0; color: #707870; font-size: 11px; line-height: 1.8; }
.steps-section { padding: 74px max(7vw, 28px); }
.steps-section ol { display: grid; max-width: 1080px; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: auto; padding: 0; list-style: none; }
.steps-section li { display: grid; align-content: start; gap: 10px; min-height: 145px; padding: 19px; border: 1px solid #e4e6df; background: #fff; }
.steps-section li > b { font-size: 12px; }
.steps-section li strong { font-size: 13px; }
.steps-section li span { color: #737b75; font-size: 11px; line-height: 1.8; }
.area-band { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 30px; padding: 68px max(9vw, 32px); }
.prefecture-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.prefecture-chips span { display: grid; width: 90px; height: 90px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 800; }
.contact-band { padding: 66px 24px; text-align: center; }
.contact-band > p:not(.eyebrow) { margin-bottom: 22px; font-size: 13px; line-height: 1.8; }
.contact-placeholder { display: inline-block; padding: 14px 23px; border: 1px dashed currentColor; font-size: 12px; font-weight: 700; }
.comparison-note { display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 25px; padding: 31px max(9vw, 32px); }
.comparison-note > span { font-size: 20px; font-weight: 800; }
.comparison-note p { margin: 0; font-size: 12px; line-height: 1.9; }
.updates-note { display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 25px; padding: 42px max(9vw, 32px); }
.updates-note .eyebrow { margin-bottom: 8px; }
.updates-note h2 { margin: 0; font-size: 21px; }
.updates-note > p { margin: 0; color: #707870; font-size: 12px; line-height: 1.9; }
.design-footer { display: flex; justify-content: space-between; gap: 15px; padding: 22px max(6vw, 25px); font-size: 10px; }
.design-footer > span:first-child { display: grid; gap: 6px; }
.design-footer small { color: #788078; font-size: 9px; }

.pattern-garden { --accent: #52775d; --accent-dark: #365a43; --pale: #f0f4e9; --ink: #354139; background: #fffdf8; color: var(--ink); }
.pattern-garden .design-brand small, .pattern-garden .fine-print { color: #737b72; }
.pattern-garden .brand-symbol, .pattern-garden .header-button, .pattern-garden .primary-button { background: var(--accent); color: white; }
.pattern-garden .brand-symbol { border-radius: 16px 16px 16px 5px; }
.pattern-garden .hero { background: radial-gradient(ellipse at 86% 54%, #e8eedb 0 26%, transparent 26.2%), #fff7ec; }
.pattern-garden .eyebrow { color: var(--accent); }
.pattern-garden .hero h1 em { color: var(--accent); }
.pattern-garden .garden-illustration { position: relative; width: min(100%, 440px); height: 315px; justify-self: end; }
.pattern-garden .sun { position: absolute; top: 4px; right: 45px; width: 75px; height: 75px; border-radius: 50%; background: #f1d7a8; }
.pattern-garden .illustrated-house { position: absolute; right: 58px; bottom: 32px; width: 225px; height: 185px; }
.pattern-garden .illustrated-roof { position: absolute; z-index: 1; inset: 0 0 auto; height: 110px; background: #688773; clip-path: polygon(50% 0, 100% 52%, 92% 61%, 50% 20%, 8% 61%, 0 52%); }
.pattern-garden .illustrated-wall { position: absolute; right: 16px; bottom: 0; left: 16px; height: 110px; background: #f4e9d8; }
.pattern-garden .illustrated-wall span { position: absolute; top: 20px; left: 26px; width: 47px; height: 43px; border: 5px solid #fffbf2; background: #c9dbce; }
.pattern-garden .illustrated-wall i { position: absolute; right: 27px; bottom: 0; width: 43px; height: 70px; border-radius: 20px 20px 0 0; background: #d99961; }
.pattern-garden .garden-ground { position: absolute; right: 4px; bottom: 30px; left: 8px; height: 15px; border-radius: 50%; background: #a7bd9e; }
.pattern-garden .garden-leaf { position: absolute; z-index: 2; right: 12px; bottom: 52px; width: 35px; height: 66px; border-radius: 90% 4% 90% 4%; background: #90ad92; transform: rotate(28deg); }
.pattern-garden .leaf-b { right: 24px; bottom: 108px; width: 28px; height: 52px; background: #b6c8a9; transform: rotate(67deg); }
.pattern-garden .illustration-note { position: absolute; right: 0; bottom: 0; padding: 12px 15px; border: 1px solid #e8eee6; border-radius: 8px; background: #fffefa; color: #58675c; font-size: 10px; box-shadow: 0 8px 24px #28463512; }
.pattern-garden .promise-row p > b { color: var(--accent); }
.pattern-garden .pricing-band { background: #f2f4ea; }
.pattern-garden .pricing-band .eyebrow { color: var(--accent); }
.pattern-garden .price-box { border-radius: 13px; box-shadow: 0 15px 35px #4053380e; }
.pattern-garden .steps-section { background: #fffdf8; }
.pattern-garden .support-section { background: #fbfaf5; }
.pattern-garden .support-cards article { border-radius: 8px; }
.pattern-garden .support-cards article > b { background: #edf3e8; color: #52775d; }
.pattern-garden .comparison-note { background: #f2f4ea; }
.pattern-garden .updates-note { background: #fffdf8; }
.pattern-garden .area-band { background: #f8f6ef; }
.pattern-garden .prefecture-chips span { border-color: #b9c9b9; background: #fff; color: var(--accent-dark); }
.pattern-garden .contact-band { background: #52775d; color: white; }
.pattern-garden .contact-band .eyebrow { color: #dce8d7; }
.pattern-garden .contact-placeholder { border-radius: 999px; }
.pattern-garden .design-footer { background: #f2f2eb; }

.pattern-pro { --accent: #173c59; --accent-dark: #0e2b43; --pale: #edf2f5; color: #243746; background: #fff; }
.pattern-pro .preview-bar { background: #e7edf1; color: #173c59; }
.pattern-pro .design-header { border-bottom: 1px solid #dfe5e9; }
.pattern-pro .design-brand small, .pattern-pro .fine-print { color: #71808a; }
.pattern-pro .brand-symbol, .pattern-pro .header-button, .pattern-pro .primary-button { background: var(--accent); color: white; }
.pattern-pro .brand-symbol { border-radius: 4px; }
.pattern-pro .hero { background: linear-gradient(112deg, #102d45 0%, #173c59 60%, #224f6a 100%); color: white; }
.pattern-pro .hero .eyebrow { color: #d6aa59; }
.pattern-pro .hero h1 em { color: #efc96f; }
.pattern-pro .hero-description { color: #d7e1e7; }
.pattern-pro .fine-print { color: #bfced7; }
.pattern-pro .primary-button { background: #dfb958; color: #183044; }
.pattern-pro .pro-visual { position: relative; min-height: 295px; padding: 36px; border: 1px solid #ffffff3d; background: linear-gradient(145deg, #ffffff12, #ffffff05); }
.pattern-pro .visual-kicker { color: #efc96f; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.pattern-pro .pro-visual > strong { display: block; margin: 26px 0 20px; font-size: clamp(26px, 3vw, 38px); line-height: 1.5; }
.pattern-pro .pro-visual > strong em { color: #efc96f; font-style: normal; }
.pattern-pro .visual-rule { width: 60px; height: 3px; background: #efc96f; }
.pattern-pro .pro-visual > p { margin: 17px 0 0; color: #d7e1e7; font-size: 12px; line-height: 2; }
.pattern-pro .visual-seal { position: absolute; right: 22px; bottom: 22px; display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid #efc96f; border-radius: 50%; color: #efc96f; font-size: 11px; font-weight: 800; text-align: center; transform: rotate(10deg); }
.pattern-pro .promise-row { border-color: #dce4e8; }
.pattern-pro .promise-row p > b { border-radius: 4px; color: var(--accent); }
.pattern-pro .center-heading .eyebrow, .pattern-pro .pricing-band .eyebrow, .pattern-pro .area-band .eyebrow, .pattern-pro .contact-band .eyebrow { color: #55748b; }
.pattern-pro .service-tile { border-radius: 3px; }
.pattern-pro .service-tile > span { color: #55748b; }
.pattern-pro .service-tile b { color: var(--accent); }
.pattern-pro .pricing-band { background: #edf2f5; }
.pattern-pro .price-box { border-top: 4px solid #173c59; }
.pattern-pro .steps-section { background: #f7f9fa; }
.pattern-pro .support-section { background: #fff; }
.pattern-pro .support-cards article { border-top: 3px solid #173c59; }
.pattern-pro .support-cards article > b { border-radius: 3px; background: #edf2f5; color: #173c59; }
.pattern-pro .comparison-note { background: #173c59; color: white; }
.pattern-pro .updates-note { background: #f7f9fa; }
.pattern-pro .steps-section li { border-top: 3px solid #173c59; }
.pattern-pro .steps-section li > b { color: #55748b; }
.pattern-pro .area-band { background: #edf2f5; }
.pattern-pro .prefecture-chips span { width: 78px; height: 78px; border-radius: 3px; background: white; color: #173c59; }
.pattern-pro .contact-band { background: #132f46; color: white; }
.pattern-pro .contact-band .eyebrow { color: #efc96f; }
.pattern-pro .contact-placeholder { border-color: #ffffff85; }
.pattern-pro .design-footer { border-top: 1px solid #dfe5e9; }

.pattern-local { --accent: #a95738; --accent-dark: #713e2e; --pale: #f7ede1; color: #47382f; background: #fffaf3; }
.pattern-local .preview-bar { background: #f1e1cf; color: #713e2e; }
.pattern-local .design-header { background: #fffaf3; }
.pattern-local .design-brand small, .pattern-local .fine-print { color: #847267; }
.pattern-local .brand-symbol, .pattern-local .header-button, .pattern-local .primary-button { background: var(--accent); color: white; }
.pattern-local .brand-symbol { border-radius: 50%; }
.pattern-local .hero { position: relative; grid-template-columns: 1fr .55fr; background: #f4e8d8; }
.pattern-local .hero-copy { grid-column: 1; }
.pattern-local .hero .eyebrow { color: var(--accent); }
.pattern-local .hero h1 em { color: var(--accent); }
.pattern-local .hero-description { color: #68574b; }
.pattern-local .local-stamp { position: absolute; top: 34px; right: 6vw; display: grid; width: 93px; height: 93px; align-content: center; border: 1px solid #a95738; border-radius: 50%; color: #a95738; font-size: 10px; text-align: center; transform: rotate(8deg); }
.pattern-local .local-stamp strong { font-size: 28px; line-height: 1; }
.pattern-local .local-aside { display: grid; gap: 17px; padding: 28px; border: 1px solid #d9c5ae; background: #fffaf3; box-shadow: 8px 8px 0 #e7d4be; }
.pattern-local .local-aside span { color: #a95738; font-size: 10px; font-weight: 800; }
.pattern-local .local-aside strong { font-size: 23px; line-height: 1.6; }
.pattern-local .local-aside small { color: #756459; font-size: 11px; line-height: 1.8; }
.pattern-local .promise-row { max-width: 1120px; border: 0; background: #fffaf3; }
.pattern-local .promise-row p > b { border: 0; border-radius: 0; background: #f4e8d8; color: var(--accent); }
.pattern-local .center-heading .eyebrow, .pattern-local .pricing-band .eyebrow, .pattern-local .area-band .eyebrow, .pattern-local .contact-band .eyebrow { color: var(--accent); }
.pattern-local .service-tile { border-radius: 0; box-shadow: 4px 4px 0 #f1e5d7; }
.pattern-local .service-tile > span { color: #a95738; }
.pattern-local .service-tile b { color: var(--accent); }
.pattern-local .tile-bedbug { background: #fff8f1; }
.pattern-local .tile-stinkbug { background: #faf4e9; }
.pattern-local .tile-wildlife { background: #f3f4ea; }
.pattern-local .pricing-band { background: #f7ede1; }
.pattern-local .price-box { border: 1px solid #d9c5ae; background: #fffaf3; }
.pattern-local .steps-section { background: #fffaf3; }
.pattern-local .support-section { background: #f7ede1; }
.pattern-local .support-cards article { border-color: #e4d7c8; box-shadow: 4px 4px 0 #f1e5d7; }
.pattern-local .support-cards article > b { border-radius: 0; background: #f4e8d8; color: #a95738; }
.pattern-local .comparison-note { background: #f1f0e5; }
.pattern-local .updates-note { background: #fffaf3; }
.pattern-local .steps-section li { border-color: #e4d7c8; background: #fff; }
.pattern-local .steps-section li > b { color: #a95738; }
.pattern-local .area-band { background: #f1f0e5; }
.pattern-local .prefecture-chips span { border-color: #c7b49f; border-radius: 4px 4px 50% 50%; background: #fffaf3; color: #713e2e; }
.pattern-local .contact-band { background: #a95738; color: white; }
.pattern-local .contact-band .eyebrow { color: #f7dfca; }
.pattern-local .contact-placeholder { border-radius: 4px; }
.pattern-local .design-footer { background: #f1e6d9; }

@media (max-width: 760px) {
  .options-grid { grid-template-columns: 1fr; }
  .option-card { min-height: 210px; }
  .design-header { flex-wrap: wrap; gap: 12px; }
  .design-header nav { order: 3; width: 100%; justify-content: space-between; gap: 9px; }
  .design-header nav a { font-size: 10px; }
  .header-button { min-height: 40px; padding: 0 13px; font-size: 10px; }
  .hero { grid-template-columns: 1fr; gap: 24px; padding: 48px 24px; }
  .pattern-garden .garden-illustration { justify-self: center; width: min(100%, 390px); }
  .pattern-pro .pro-visual { min-height: 260px; }
  .pattern-local .hero { grid-template-columns: 1fr; }
  .pattern-local .hero-copy { grid-column: auto; }
  .pattern-local .local-aside { max-width: 460px; }
  .pattern-local .local-stamp { top: 15px; right: 18px; width: 68px; height: 68px; }
  .pattern-local .local-stamp strong { font-size: 21px; }
  .promise-row { grid-template-columns: 1fr; gap: 16px; padding: 22px 24px; }
  .content-section { padding: 60px 22px; }
  .service-cards { grid-template-columns: 1fr; }
  .service-tile { min-height: 190px; }
  .support-section { padding: 55px 22px; }
  .support-cards { grid-template-columns: 1fr; }
  .pricing-band, .area-band { grid-template-columns: 1fr; gap: 25px; padding: 55px 24px; }
  .steps-section { padding: 55px 22px; }
  .steps-section ol { grid-template-columns: repeat(2, 1fr); }
  .comparison-note, .updates-note { grid-template-columns: 1fr; gap: 12px; padding: 32px 24px; }
  .prefecture-chips { justify-content: flex-start; }
  .prefecture-chips span { width: 72px; height: 72px; font-size: 11px; }
  .contact-band { padding: 52px 22px; }
  .design-footer { flex-direction: column; }
}

@media (max-width: 420px) {
  .preview-bar { justify-content: flex-start; font-size: 10px; }
  .design-header { padding-right: 17px; padding-left: 17px; }
  .design-header nav a { font-size: 9px; }
  .hero { padding-right: 19px; padding-left: 19px; }
  .hero h1 { font-size: 34px; }
  .steps-section ol { grid-template-columns: 1fr; }
  .pattern-garden .garden-illustration { transform: scale(.9); transform-origin: center top; margin-bottom: -25px; }
}

.eyebrow { font-size: 12px; }
.options-intro, .option-description, .back-link { font-size: 15px; }
.option-number { font-size: 13px; }
.option-name { font-size: 23px; }
.option-link { font-size: 14px; }
.preview-bar { font-size: 13px; }
.design-brand strong { font-size: 17px; }
.design-brand small { font-size: 11px; }
.design-header nav a { font-size: 13px; }
.header-button, .primary-button { font-size: 14px; }
.hero-description { font-size: 16px; }
.fine-print { font-size: 12px; }
.promise-row p > b { font-size: 12px; }
.promise-row strong { font-size: 14px; }
.promise-row small { font-size: 12px; }
.center-heading > p:last-child { font-size: 14px; }
.service-tile > span { font-size: 12px; }
.service-tile p { font-size: 14px; }
.service-tile b { font-size: 13px; }
.section-footnote { font-size: 12px; }
.price-box > small { font-size: 13px; }
.price-box > p { font-size: 14px; }
.price-box > p span, .price-box > span { font-size: 12px; }
.price-box > b { font-size: 13px; }
.support-cards h3 { font-size: 17px; }
.support-cards p { font-size: 13px; }
.steps-section li > b { font-size: 13px; }
.steps-section li strong { font-size: 15px; }
.steps-section li span { font-size: 13px; }
.prefecture-chips span { font-size: 14px; }
.contact-band > p:not(.eyebrow), .comparison-note p, .updates-note > p { font-size: 14px; }
.comparison-note > span { font-size: 22px; }
.updates-note h2 { font-size: 23px; }
.design-footer { font-size: 12px; }
.design-footer small { font-size: 11px; }
.pattern-pro .visual-kicker, .pattern-pro .visual-seal { font-size: 12px; }
.pattern-pro .pro-visual > p { font-size: 14px; }
.pattern-local .local-stamp, .pattern-local .local-aside span { font-size: 12px; }
.pattern-local .local-aside small { font-size: 13px; }

@media (max-width: 760px) {
  .design-header nav a { font-size: 12px; }
  .header-button { font-size: 12px; }
}

@media (max-width: 420px) {
  .preview-bar { font-size: 11px; }
  .design-header nav a { font-size: 12px; }
  .hero-description { font-size: 15px; }
}

.option-ai { border-top: 5px solid #8e58f5; background: linear-gradient(145deg, #fff, #f8f3ff); }
.option-ai .option-number { color: #8251df; }

.pattern-ai { --ai-ink: #f7f4ff; --ai-muted: #b7b4ca; --ai-purple: #a56cff; --ai-cyan: #62e7ea; color: var(--ai-ink); background: #101020; }
.ai-preview-bar { display: flex; min-height: 37px; align-items: center; justify-content: center; gap: 10px; padding: 6px 16px; background: linear-gradient(90deg, #5933b7, #253e9b, #168f9b); color: white; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.ai-preview-bar > span { color: #83f8eb; }
.ai-preview-bar b { padding: 3px 8px; border: 1px solid #ffffff70; border-radius: 999px; font-size: 9px; letter-spacing: .1em; }
.ai-preview-bar a { margin-left: 12px; color: white; font-size: 11px; letter-spacing: 0; }
.ai-header { position: relative; z-index: 3; display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 20px; padding: 12px max(5vw, 24px); border-bottom: 1px solid #ffffff17; background: #111121; }
.ai-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.ai-logo { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid #ffffff42; border-radius: 14px; background: linear-gradient(145deg, #ad6dff, #5268f5 54%, #34d1d6); color: white; font-size: 22px; font-weight: 900; box-shadow: 0 0 22px #8558ff55; }
.ai-logo span { color: #7dffe4; }
.ai-brand > span:last-child { display: grid; gap: 3px; }
.ai-brand strong { color: white; font-size: 16px; letter-spacing: .06em; }
.ai-brand small { color: #a6a4bb; font-size: 10px; }
.ai-header nav { display: flex; gap: clamp(13px, 2vw, 27px); }
.ai-header nav a { color: #d3d0e1; font-size: 12px; text-decoration: none; }
.ai-header nav a:hover, .ai-footer a:hover { color: var(--ai-cyan); }
.ai-header-cta { padding: 12px 17px; border: 1px solid #9a78ff; border-radius: 999px; background: linear-gradient(110deg, #a365ff, #5968f2); color: white; font-size: 12px; font-weight: 800; text-decoration: none; box-shadow: 0 0 22px #8e58f544; }
.ai-header-cta span { margin-left: 8px; }
.ai-hero { position: relative; display: grid; min-height: 625px; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; padding: 80px max(9vw, 35px) 90px; overflow: hidden; background: radial-gradient(ellipse at 82% 45%, #50328a47, transparent 34%), radial-gradient(ellipse at 8% 93%, #0c8b9b2b, transparent 34%), linear-gradient(135deg, #111121, #17152d 58%, #13182b); }
.ai-hero::before, .ai-hero::after { position: absolute; width: 350px; height: 350px; border: 1px solid #a477ff2b; border-radius: 50%; content: ""; pointer-events: none; }
.ai-hero::before { top: -260px; left: 40%; box-shadow: 0 0 0 35px #a477ff0c, 0 0 0 72px #a477ff09; }
.ai-hero::after { right: -210px; bottom: -240px; width: 480px; height: 480px; border-color: #52e4e326; box-shadow: 0 0 0 40px #52e4e30b, 0 0 0 80px #52e4e308; }
.ai-hero-copy { position: relative; z-index: 1; max-width: 570px; }
.ai-eyebrow { margin: 0 0 19px; color: #bdb1df; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.ai-eyebrow > span { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--ai-cyan); box-shadow: 0 0 12px var(--ai-cyan); }
.ai-hero h1 { margin: 0 0 20px; color: #fff; font-size: clamp(46px, 6vw, 76px); line-height: 1.28; letter-spacing: -.025em; }
.ai-hero h1 em, .ai-section-heading h2 em, .ai-pricing h2 em, .ai-area h2 em, .ai-contact h2 em { background: linear-gradient(95deg, #c08aff 5%, #7a9dff 52%, #6df3e4 100%); background-clip: text; -webkit-text-fill-color: transparent; }
.ai-lead { max-width: 480px; margin: 0 0 25px; color: #c4c0d3; font-size: 16px; line-height: 2; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ai-primary, .ai-secondary { display: inline-flex; min-height: 51px; align-items: center; justify-content: center; padding: 0 23px; border-radius: 999px; font-size: 14px; font-weight: 800; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ai-primary { background: linear-gradient(105deg, #b36bff, #6573ff 58%, #38cbd7); color: white; box-shadow: 0 8px 30px #8765ff59; }
.ai-secondary { border: 1px solid #ffffff4d; color: #eeebf7; }
.ai-primary:hover, .ai-secondary:hover { transform: translateY(-3px); box-shadow: 0 10px 28px #7f67ff55; }
.ai-primary span, .ai-secondary span { margin-left: 12px; }
.ai-micro-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 20px; color: #a9a6bd; font-size: 11px; }
.ai-check { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #60e7cf22; color: #75f2dc; }
.ai-micro-proof i { width: 4px; height: 4px; border-radius: 50%; background: #78758b; }
.ai-visual { position: relative; display: grid; min-height: 390px; place-items: center; }
.ai-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.ai-orb-one { top: 8%; right: 12%; width: 245px; height: 245px; background: radial-gradient(circle at 30% 26%, #f5b2ff, #9d54ff 35%, #4f58d6 68%, #2aabc9); opacity: .8; box-shadow: 0 0 95px #8f53ff77, inset -24px -24px 55px #1615358c; }
.ai-orb-two { bottom: 1%; left: 12%; width: 125px; height: 125px; background: radial-gradient(circle at 32% 26%, #b2fff3, #46d4cf 44%, #5369de 82%); opacity: .72; box-shadow: 0 0 55px #50d9df66; }
.ai-ring { position: absolute; z-index: 1; width: 330px; height: 120px; border: 1px solid #d5c7ff77; border-radius: 50%; transform: rotate(-27deg); }
.ai-ring-two { width: 370px; height: 146px; border-color: #6cf4e45e; transform: rotate(36deg); }
.ai-glass-card { position: relative; z-index: 2; border: 1px solid #ffffff47; background: linear-gradient(135deg, #ffffff35, #ffffff0b); box-shadow: 0 25px 70px #08071875, inset 0 1px #ffffff42; backdrop-filter: blur(16px); }
.ai-main-card { display: grid; width: min(315px, 83%); gap: 11px; padding: 24px; border-radius: 22px; transform: rotate(-4deg); }
.ai-card-icon { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #ffffff4d; border-radius: 13px; background: linear-gradient(145deg, #c36bff, #536cf4); color: white; font-size: 20px; box-shadow: 0 0 20px #9962ff76; }
.ai-main-card > small { color: #cfbaff; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.ai-main-card > strong { color: white; font-size: 25px; line-height: 1.55; }
.ai-progress { height: 6px; overflow: hidden; border-radius: 99px; background: #ffffff2a; }
.ai-progress i { display: block; width: 76%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #bd74ff, #63e9dc); }
.ai-card-caption { color: #ddd9ed; font-size: 11px; }
.ai-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 11px 15px; border: 1px solid #ffffff49; border-radius: 999px; background: #ffffff20; color: white; font-size: 12px; font-weight: 800; box-shadow: 0 12px 35px #08071855; backdrop-filter: blur(14px); }
.ai-float-top { top: 14%; right: 0; }
.ai-float-top span { color: #81f8e6; }
.ai-float-bottom { bottom: 11%; left: 4%; }
.ai-float-bottom b { color: #c99aff; font-size: 19px; }
.ai-spark { position: absolute; z-index: 2; color: #bb9aff; text-shadow: 0 0 18px #b987ff; }
.spark-one { top: 13%; left: 13%; font-size: 26px; }
.spark-two { right: 10%; bottom: 14%; color: #80f5ec; font-size: 36px; }
.ai-scroll { position: absolute; bottom: 24px; left: 50%; display: flex; align-items: center; gap: 12px; color: #908ca6; font-size: 10px; font-weight: 800; letter-spacing: .16em; transform: translateX(-50%); }
.ai-scroll span { color: #7df5e5; font-size: 17px; }
.ai-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 27px max(9vw, 35px); border-top: 1px solid #ffffff12; border-bottom: 1px solid #ffffff12; background: #17172a; }
.ai-promise > div { display: flex; align-items: center; gap: 13px; }
.ai-promise > div > b { display: grid; width: 43px; height: 43px; flex-shrink: 0; place-items: center; border: 1px solid #9a80db88; border-radius: 14px; background: linear-gradient(145deg, #a55eff38, #42d9d438); color: #d7c6ff; font-size: 13px; }
.ai-promise span { display: grid; gap: 4px; }
.ai-promise strong { color: #f2effa; font-size: 13px; }
.ai-promise small { color: #aaa6bb; font-size: 11px; }
.ai-section { padding: 90px max(8vw, 30px); }
.ai-services { background: #111120; }
.ai-section-heading { max-width: 670px; margin: 0 auto 38px; text-align: center; }
.ai-section-heading .ai-eyebrow, .ai-pricing .ai-eyebrow, .ai-area .ai-eyebrow, .ai-contact .ai-eyebrow { color: #b6aad3; }
.ai-section-heading h2, .ai-pricing h2, .ai-area h2, .ai-contact h2 { margin: 0 0 15px; color: #fff; font-size: clamp(31px, 4vw, 48px); line-height: 1.45; }
.ai-section-heading > p:last-child { margin: 0; color: #bbb7ca; font-size: 15px; line-height: 1.9; }
.ai-service-grid { display: grid; max-width: 1100px; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: auto; }
.ai-service-card { position: relative; display: flex; min-height: 290px; flex-direction: column; padding: 24px; overflow: hidden; border: 1px solid #ffffff30; border-radius: 21px; background: linear-gradient(145deg, #ffffff16, #ffffff05); color: white; text-decoration: none; box-shadow: 0 18px 48px #05051066; backdrop-filter: blur(12px); transition: transform .22s, border-color .22s; }
.ai-service-card:hover { transform: translateY(-7px); border-color: #ffffff7a; }
.ai-service-card::after { position: absolute; top: -53px; right: -55px; width: 145px; height: 145px; border-radius: 50%; background: currentColor; content: ""; opacity: .14; filter: blur(2px); }
.ai-card-pink { color: #ffc0e4; }
.ai-card-lime { color: #d5f786; }
.ai-card-blue { color: #91dbff; }
.ai-card-index { position: relative; z-index: 1; color: #d0cadd; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.ai-service-emoji { display: grid; width: 55px; height: 55px; margin: 22px 0 16px; place-items: center; border: 1px solid currentColor; border-radius: 19px; background: #ffffff12; font-size: 29px; box-shadow: 0 0 28px #ffffff17; }
.ai-service-card h3 { margin: 0 0 9px; color: white; font-size: 21px; }
.ai-service-card p { margin: 0 0 20px; color: #c5c1d2; font-size: 13px; line-height: 1.9; }
.ai-service-card > b { display: flex; justify-content: space-between; margin-top: auto; color: currentColor; font-size: 12px; }
.ai-service-card > b span { font-size: 17px; }
.ai-footnote { max-width: 1100px; margin: 22px auto 0; color: #a6a2b5; font-size: 12px; line-height: 1.8; }
.ai-pricing { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 55px; padding: 82px max(10vw, 35px); background: radial-gradient(ellipse at 90% 50%, #63419b36, transparent 42%), #17172a; }
.ai-pricing > div:first-child > p:not(.ai-eyebrow) { max-width: 500px; color: #c4bfd2; font-size: 15px; line-height: 2; }
.ai-pricing ul { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; color: #e6e1f1; font-size: 13px; list-style: none; }
.ai-pricing li::before { margin-right: 10px; color: #80f3de; content: "✦"; }
.ai-price-card { position: relative; display: grid; justify-items: start; padding: 29px; border: 1px solid #ffffff45; border-radius: 22px; background: linear-gradient(145deg, #ffffff25, #ffffff0b); box-shadow: 0 20px 60px #08071679, inset 0 1px #ffffff50; backdrop-filter: blur(18px); }
.ai-price-tag { margin-bottom: 17px; padding: 6px 10px; border: 1px solid #b894ff88; border-radius: 999px; color: #ddc7ff; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.ai-price-card > p { margin: 0; color: #eeeaf6; font-size: 14px; }
.ai-price { color: #fff; font-size: 67px; font-weight: 900; letter-spacing: -.05em; text-shadow: 0 0 28px #bc83ff73; }
.ai-price span { margin-left: 4px; font-size: 22px; }
.ai-price-card > b { margin-top: -5px; color: #c8c0d9; font-size: 12px; }
.ai-price-card > small { margin-top: 12px; color: #bbb5ca; font-size: 12px; line-height: 1.8; }
.ai-price-card hr { width: 100%; margin: 21px 0; border: 0; border-top: 1px solid #ffffff33; }
.ai-price-card > strong { color: white; font-size: 13px; }
.ai-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.ai-tags span { padding: 6px 10px; border: 1px solid #ffffff35; border-radius: 999px; color: #e4dff0; font-size: 11px; }
.ai-support { padding: 77px max(8vw, 30px); background: #111120; }
.ai-support-grid { display: grid; max-width: 1100px; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: auto; }
.ai-support-grid article { padding: 22px; border: 1px solid #ffffff20; border-radius: 16px; background: #ffffff08; }
.ai-support-grid article > b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px; background: linear-gradient(140deg, #a866ff55, #54dfd955); color: #d5c4ff; font-size: 13px; }
.ai-support-grid h3 { margin: 15px 0 8px; color: white; font-size: 16px; }
.ai-support-grid p { margin: 0; color: #b9b5c8; font-size: 13px; line-height: 1.9; }
.ai-flow { padding: 78px max(8vw, 30px); background: #17172a; }
.ai-flow ol { display: grid; max-width: 1100px; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: auto; padding: 0; list-style: none; }
.ai-flow li { display: grid; align-content: start; gap: 11px; min-height: 155px; padding: 19px; border: 1px solid #ffffff25; border-radius: 15px; background: linear-gradient(145deg, #ffffff14, #ffffff05); }
.ai-flow li > b { color: #a893dc; font-size: 13px; }
.ai-flow li strong { color: white; font-size: 14px; }
.ai-flow li span { color: #b9b5c8; font-size: 12px; line-height: 1.8; }
.ai-area { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 35px; padding: 80px max(10vw, 35px); background: #111120; }
.ai-area > div:first-child > p:last-child { max-width: 500px; color: #c0bbcf; font-size: 14px; line-height: 2; }
.ai-region { position: relative; display: grid; width: min(100%, 340px); aspect-ratio: 1; justify-self: center; place-items: center; border: 1px solid #a77cff50; border-radius: 50%; background: radial-gradient(circle, #9e62ff24, #15152b 67%); box-shadow: 0 0 55px #8b5cff22, inset 0 0 55px #8b5cff1b; }
.ai-region-orbit { position: absolute; inset: 12%; border: 1px dashed #7deadd66; border-radius: 50%; }
.ai-region > b { color: white; font-size: 26px; line-height: 1.3; text-align: center; }
.ai-region > i { position: absolute; display: grid; min-width: 57px; height: 34px; place-items: center; border: 1px solid #ffffff50; border-radius: 999px; background: #ffffff20; color: #f2effa; font-size: 11px; font-style: normal; backdrop-filter: blur(10px); }
.ai-region > i:nth-of-type(1) { top: 16%; left: 44%; }
.ai-region > i:nth-of-type(2) { top: 46%; left: 2%; }
.ai-region > i:nth-of-type(3) { right: 1%; bottom: 38%; }
.ai-region > i:nth-of-type(4) { bottom: 12%; left: 43%; }
.ai-compare { display: flex; align-items: center; gap: 22px; padding: 32px max(10vw, 35px); border-top: 1px solid #ffffff19; border-bottom: 1px solid #ffffff19; background: linear-gradient(100deg, #262044, #192735); }
.ai-compare-icon { display: grid; width: 56px; height: 56px; flex-shrink: 0; place-items: center; border: 1px solid #bca0ff88; border-radius: 18px; background: linear-gradient(140deg, #b36bff55, #66e4dc30); color: #e4d1ff; font-size: 25px; font-weight: 900; }
.ai-compare h2 { margin: 0 0 7px; color: white; font-size: 21px; }
.ai-compare p { max-width: 850px; margin: 0; color: #c0bbcf; font-size: 13px; line-height: 1.9; }
.ai-updates { display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 25px; padding: 42px max(10vw, 35px); background: #17172a; }
.ai-updates h2 { margin: 0; color: white; font-size: 24px; }
.ai-updates > p { margin: 0; color: #c0bbcf; font-size: 13px; line-height: 1.9; }
.ai-contact { position: relative; overflow: hidden; padding: 73px 24px; background: radial-gradient(ellipse at 84% 10%, #50e8da55, transparent 35%), linear-gradient(115deg, #6c3db2, #3858a7 54%, #167b89); text-align: center; }
.ai-contact-orb { position: absolute; top: -175px; left: -85px; width: 340px; height: 340px; border: 1px solid #ffffff3d; border-radius: 50%; box-shadow: 0 0 0 30px #ffffff0c, 0 0 0 70px #ffffff09; }
.ai-contact .ai-eyebrow { position: relative; color: #edddff; }
.ai-contact h2 { position: relative; }
.ai-contact > p:not(.ai-eyebrow) { position: relative; color: #f0eafa; font-size: 15px; }
.ai-contact-placeholder { position: relative; display: inline-block; margin-top: 10px; padding: 15px 23px; border: 1px solid #ffffffaa; border-radius: 999px; background: #ffffff1b; color: white; font-size: 13px; font-weight: 800; backdrop-filter: blur(12px); }
.ai-contact > small { position: relative; display: block; margin-top: 14px; color: #e1dbf1; font-size: 12px; }
.ai-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; padding: 23px max(7vw, 25px); background: #0c0c18; color: #aaa6ba; font-size: 12px; }
.ai-footer a { color: #e9e5f4; text-decoration: none; }
.ai-footer small { width: 100%; color: #817d91; font-size: 11px; }

@media (max-width: 760px) {
  .ai-header { flex-wrap: wrap; gap: 11px; padding: 12px 20px; }
  .ai-header nav { order: 3; width: 100%; justify-content: space-between; gap: 8px; }
  .ai-header nav a { font-size: 11px; }
  .ai-header-cta { padding: 10px 13px; font-size: 11px; }
  .ai-hero { grid-template-columns: 1fr; gap: 10px; padding: 56px 25px 70px; }
  .ai-hero-copy { max-width: 600px; }
  .ai-hero h1 { font-size: clamp(44px, 11vw, 68px); }
  .ai-visual { min-height: 350px; }
  .ai-promise { grid-template-columns: 1fr; gap: 14px; padding: 22px 25px; }
  .ai-section { padding: 65px 22px; }
  .ai-service-grid, .ai-support-grid { grid-template-columns: 1fr; }
  .ai-service-card { min-height: 235px; }
  .ai-pricing, .ai-area { grid-template-columns: 1fr; gap: 29px; padding: 62px 24px; }
  .ai-price-card { width: 100%; }
  .ai-support, .ai-flow { padding: 62px 22px; }
  .ai-flow ol { grid-template-columns: 1fr 1fr; }
  .ai-region { width: min(100%, 300px); }
  .ai-updates { grid-template-columns: 1fr; gap: 12px; padding: 34px 24px; }
  .ai-contact { padding: 60px 20px; }
}

@media (max-width: 420px) {
  .ai-preview-bar { justify-content: flex-start; gap: 7px; padding-inline: 10px; font-size: 10px; letter-spacing: .07em; }
  .ai-preview-bar b { font-size: 8px; }
  .ai-preview-bar a { margin-left: auto; font-size: 10px; white-space: nowrap; }
  .ai-header { padding-inline: 15px; }
  .ai-header nav a { font-size: 10px; }
  .ai-brand strong { font-size: 14px; }
  .ai-brand small { font-size: 9px; }
  .ai-hero { padding-inline: 20px; }
  .ai-eyebrow { font-size: 10px; letter-spacing: .1em; }
  .ai-lead { font-size: 15px; }
  .ai-actions { align-items: stretch; flex-direction: column; }
  .ai-primary, .ai-secondary { min-height: 48px; }
  .ai-micro-proof { font-size: 10px; }
  .ai-visual { min-height: 300px; }
  .ai-orb-one { width: 195px; height: 195px; }
  .ai-ring { width: 275px; height: 95px; }
  .ai-ring-two { width: 290px; height: 110px; }
  .ai-main-card { padding: 20px; }
  .ai-float { padding: 9px 11px; font-size: 11px; }
  .ai-flow ol { grid-template-columns: 1fr; }
  .ai-compare { align-items: flex-start; gap: 13px; padding: 25px 19px; }
  .ai-compare-icon { width: 43px; height: 43px; border-radius: 14px; font-size: 20px; }
  .ai-compare h2 { font-size: 18px; }
  .ai-compare p, .ai-updates > p { font-size: 12px; }
}