/* CLEAN LABO — clean-kobe.com inspired visual theme
   Loaded after style.min.css. Content, routes and application logic are unchanged.
   Blue palette with orange CTAs, rounded headings, soft cards and big photos.
   Legacy --green-* names are retained for base-CSS compatibility; values are blue. */
/* Fonts are requested in the HTML head to avoid a CSS @import waterfall. */
.support-list li > div { min-width: 0; }
/* v2 widget: retain Google's own branding; compact mode is selected at narrow widths. */
.contact-captcha { margin: 22px 0 16px; min-width: 0; }
#recaptcha-widget { min-height: 78px; }
.captcha-status { margin-top: 8px; font-size: .8rem; color: var(--ink-700); overflow-wrap: anywhere; }
.captcha-status:empty { display: none; }
.captcha-status.error { color: #b3382a; }
.grecaptcha-badge { visibility: visible; }
.form-status, .recaptcha-note, .contact-form noscript, .policy a { overflow-wrap: anywhere; }

:root {
  --green-900: #102d50;
  --green-800: #165eaa;
  --green-700: #1d70be;
  --green-100: #e5f1fc;
  --green-50: #f0f7fd;
  --ink-900: #26394c;
  --ink-700: #495c6e;
  --ink-500: #62758a;
  --ink-300: #c4d4e5;
  --ink-200: #dce8f3;
  --ink-100: #f4f8fc;
  --radius: 10px;
  --container: 1200px;
  --fresh-green: #237ac4;
  --orange: #de4d15;
  --orange-dark: #ad3910;
  --yellow: #fff19e;
  --heading-font: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  --card-shadow: 0 8px 28px rgb(24 69 114 / 7%);
}
body { line-height: 1.95; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid #1683bc; outline-offset: 5px; }
.icon-arrow { flex: none; }
.btn { border-radius: 999px; min-height: 52px; gap: 12px; transition: background-color .2s, box-shadow .2s, transform .2s; }
.btn-primary { background: var(--orange); border-color: var(--orange); box-shadow: 0 5px 0 var(--orange-dark); }
.btn-primary:hover { background: #c84310; border-color: #c84310; box-shadow: 0 3px 0 var(--orange-dark); transform: translateY(2px); }
.btn-ghost, .btn-outline { background: white; border: 2px solid var(--green-700); color: var(--green-800); box-shadow: 0 4px 0 #d1e4f7; }
.btn-ghost:hover, .btn-outline:hover { background: var(--green-50); border-color: var(--green-800); }
.btn-dark { background: var(--green-800); border-color: var(--green-800); box-shadow: 0 5px 0 #0f447d; }
.btn-dark:hover { background: #104e91; }
.btn-line { background: #148a3c; border-color: #148a3c; box-shadow: 0 5px 0 #0d642a; }
.btn-line:hover { background: #107b33; }
.btn-sm { min-height: 44px; padding-inline: 24px; }

/* Fixed header retains the original 64 / 72px anchor offsets. */
.site-header { border-bottom: 0; box-shadow: 0 3px 18px rgb(24 64 108 / 7%); border-radius: 0 0 28px 28px; }
.header-inner { max-width: 1440px; gap: 12px; }
.brand { gap: 8px; flex-shrink: 0; }
/* Replace the external image files to update the logo; no text/CSS reconstruction needed. */
.brand-logo { display: block; width: 178px; height: 36px; object-fit: contain; object-position: left center; flex: none; }
.footer-brand .brand-logo { width: 210px; height: 42px; }
@media (min-width: 1200px) { .site-header .brand-logo { width: 200px; height: 40px; } }
.brand-mark { width: 23px; height: 29px; border-radius: 20px 3px 20px 3px; background: var(--fresh-green); transform: rotate(-14deg); position: relative; }
.brand-mark::after { content: ''; position: absolute; width: 2px; height: 19px; bottom: 3px; left: 11px; transform: rotate(28deg); background: #fff; }
.brand-name { color: #165eaa; letter-spacing: .025em; font-size: 1.18rem; }
.global-nav a { font-weight: 700; }
.nav-toggle { background: var(--green-50); border-radius: 50%; }
.nav-toggle span { background: var(--green-800); height: 2px; }

/* A generous photographic hero with the original image and exact same copy. */
.hero { background: linear-gradient(115deg, #f7fbff 0%, #edf6ff 46%, #e2f0fc 100%); border: 0; position: relative; }
.hero-grid { padding-block: 38px 36px; gap: 28px; position: relative; }
.hero-copy { min-width: 0; }
.hero-eyebrow { border: 1.5px solid var(--green-700); border-radius: 999px; background: #fff; padding: 10px 16px; color: var(--green-800); font-size: .76rem; text-align: center; line-height: 1.6; }
.hero-title { font-family: var(--heading-font); font-weight: 800; color: #165eaa; font-size: clamp(1.9rem, 7.7vw, 2.7rem); line-height: 1.48; letter-spacing: -.04em; margin-top: 20px; }
.hero-lead { margin-top: 16px; color: var(--ink-900); font-weight: 700; font-size: .95rem; }
.hero-lead .num { color: var(--orange); font-size: 3.2rem; }
.hero-lead .unit { color: var(--orange); font-size: 1.3rem; }
.hero-badges { margin-top: 18px; gap: 6px 16px; }
.hero-badges li { font-size: .82rem; font-weight: 700; padding-left: 23px; }
.hero-badges li::before { width: 15px; height: 15px; top: .42em; border-radius: 50%; background: var(--fresh-green); }
.hero-badges li::after { content: ''; position: absolute; left: 4px; top: .68em; width: 7px; height: 4px; border-left: 1.5px solid white; border-bottom: 1.5px solid white; transform: rotate(-45deg); }
.hero-cta { margin-top: 24px; gap: 14px; }
.hero-cta .btn { min-height: 55px; font-size: clamp(.72rem, 3.3vw, .91rem); padding-inline: 12px; white-space: nowrap; }
.hero-visual { padding-bottom: 8px; }
.hero-visual img { width: 100%; border-radius: 32px 32px 72px 32px; box-shadow: 9px 9px 0 #bddbf4; }
.hero-visual-caption { display: block; margin: -40px 16px 0; padding: 12px 18px; border: 0; background: white; border-radius: 12px; position: relative; box-shadow: var(--card-shadow); text-align: center; }
.hero-visual-caption .label, .hero-visual-caption .name { display: block; }
.hero-visual-caption .name { color: var(--green-800); }
.hero-stats { background: var(--fresh-green); border-radius: 36px 36px 0 0; padding-block: 10px; }
.stats-strip > div { text-align: center; padding: 18px 8px; }
.stats-strip dt { color: #fff; font-weight: 700; font-size: .7rem; line-height: 1.65; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.stats-strip dd { color: white; }
.stats-strip dd .num { color: var(--yellow); font-size: 3rem; letter-spacing: -.04em; }
.stats-strip dd small { color: #fff; }

/* Shared headings use the reference's round, friendly lettering. */
.section { padding-block: 72px; }
.section-head { text-align: center; }
.section-head .section-lead { margin-inline: auto; }
.section-label, .section-head.center .section-label { border: 0; padding: 0 20px; color: var(--green-800); position: relative; letter-spacing: .08em; font-size: .85rem; }
.section-label::before, .section-label::after { content: ''; position: absolute; width: 2px; height: 14px; background: var(--fresh-green); top: 50%; margin-top: -7px; }
.section-label::before { left: 3px; transform: rotate(-25deg); }
.section-label::after { right: 3px; transform: rotate(25deg); }
.section-title { font-family: var(--heading-font); font-weight: 800; color: var(--green-800); font-size: 1.75rem; line-height: 1.55; letter-spacing: -.025em; }
.section-lead { font-size: 1rem; }
.problems { background: #fff; }
.problem-list { gap: 16px; border: 0; }
.problem-list li { padding: 24px; background: var(--green-50); border: 1px solid #d8e7f5; border-radius: 16px; }
.problem-list svg, .support-list svg { width: 32px; height: 32px; stroke: var(--green-700); stroke-width: 1.7; }
.problems-answer { background: #fff8d5; border-radius: 18px; padding: 26px 22px; position: relative; font-family: var(--heading-font); font-weight: 800; }
.problems-answer::before { content: ''; position: absolute; top: -15px; left: calc(50% - 16px); border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid #fff8d5; }
.service, .cases, .flow { background: linear-gradient(145deg, #f0f7ff, #e8f3fc); }
.service-card, .work-card, .ownsite-card, .case-card, .evidence-card { border: 1px solid #dce8f3; border-radius: 22px; overflow: hidden; box-shadow: var(--card-shadow); }
.service-card { padding-top: 28px; position: relative; }
.service-num { display: grid; place-items: center; width: 48px; height: 48px; background: var(--fresh-green); color: white; border-radius: 50%; font-size: 1.3rem; font-weight: 700; }
.service-card:nth-child(2) .service-num { background: #ffe68b; color: #775615; }
.service-card:nth-child(3) .service-num { background: #e5f3ff; color: #267590; }
.service-card h3 { color: var(--green-800); font-family: var(--heading-font); font-weight: 800; margin-top: 14px; }
.service-visual figcaption { color: var(--ink-700); background: #fbfdff; }
.check-list { background: #f0f6fd; padding: 16px; border-radius: 12px; }
.check-list li::before { border-width: 2px; }
.message-photo img { border-radius: 36px 36px 90px 36px; box-shadow: 12px 12px 0 #d4e8fa; }
.message-photo { margin-right: 12px; }
.message-body .section-title { font-size: 1.6rem; }
.profile { border-top: 2px dashed #d9e7f5; }
.profile-name { color: var(--green-800); }
.proof { background: #f3f8fe; }
.proof-grid { gap: 14px; }
.proof-card { border: 2px solid #d0e4f8; border-radius: 20px; text-align: center; padding: 24px 14px; box-shadow: var(--card-shadow); }
.proof-cat { font-size: .85rem; color: var(--green-800); }
.proof-value { justify-content: center; gap: 5px; margin-top: 16px; }
.proof-value .num { font-size: 3.5rem; color: var(--green-700); letter-spacing: -.05em; }
.proof-value .unit { color: var(--green-800); }
.proof-desc { font-size: .82rem; text-align: left; }
.evidence-head, .media-head h3 { color: var(--green-800); }
.evidence-num .num { font-size: 2.8rem; color: var(--orange); }
.media-block { border: 0; border-radius: 28px; box-shadow: var(--card-shadow); }
.media-tags li { background: var(--green-50); border: 0; border-radius: 999px; }
.media-snaps img, .thumb-grid a { border-radius: 12px; overflow: hidden; }
.youtube-head h3, .ownsites-head h3 { color: var(--green-800); }
.youtube-block .btn { max-width: 100%; flex-wrap: wrap; }
.site-type { border-radius: 999px; background: var(--green-50); border: 0; padding: 4px 12px; }
.type-recruit { background: #ecf5ff; }
.type-corporate { background: #eef3f8; }
.work-body, .ownsite-body { padding: 24px; }
.work-body h3 { line-height: 1.7; }
/* Owned sites: use the same uncropped first-view presentation as portfolio cards. */
.ownsite-shot { padding: 10px; background: #edf4fb; border: 0; }
.ownsite-shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; object-position: center; border-radius: 0; }
/* Portfolio: preserve every pixel of the desktop first-view capture, without cropping. */
.work-shot { padding: 10px; background: #edf4fb; border: 0; }
.work-shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; object-position: center; border-radius: 0; }
.photo-band { position: relative; background: var(--green-900); }
.photo-band img { height: 300px; opacity: .78; }
.photo-band figcaption { color: white; background: var(--green-800); border: 0; text-align: center; padding: 24px var(--gutter); }
.photo-band figcaption span { color: white; font-family: var(--heading-font); font-weight: 800; }
.history-photos img, .cases-intro-photo img, .support-visual img { border-radius: 22px; }
.timeline li::before { border-radius: 50%; width: 12px; height: 12px; border: 2px solid var(--fresh-green); }
.timeline::before, .timeline li::after { background: #c6ddf4; }
.timeline .current h3 { color: var(--green-800); }
.cases-intro-text { border: 0; border-radius: 22px; }
.cases-intro-text h3 { color: var(--green-800); }
/* Named success stories: uncropped website captures and complete testimonials. */
.case-site-shot { display: block; padding: 10px; background: #edf4fb; }
.case-card .case-site-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; object-position: center; }
.case-body { min-width: 0; }
.case-site-url { margin-top: 14px; }
.case-subheading { margin-top: 28px; color: var(--green-800); font-size: 1rem; }
.case-results { margin-top: 12px; }
.case-testimonial { margin: 12px 0 0; padding: 20px; background: #fffaf0; border-radius: 14px; color: var(--ink-700); font-size: .95rem; line-height: 1.95; overflow-wrap: anywhere; }
.case-testimonial p + p { margin-top: 16px; }
.case-voice-title { font-weight: 700; color: var(--green-800); font-size: 1rem; line-height: 1.8; }
@media (max-width: 599px) {
  .case-card .case-detail { grid-template-columns: 1fr; gap: 4px; }
  .case-card .case-detail dd + dt { margin-top: 10px; }
  .case-testimonial { padding: 18px 16px; }
}
.industry-grid li { background: #eff6fd; border-radius: 18px; overflow: hidden; padding-bottom: 15px; }
.industry-grid span { border: 0; padding: 0 8px; text-align: center; color: var(--green-800); }
.support { background: #eff7ff; }
.support-list li { border-radius: 18px; border: 1px solid #d8e7f5; box-shadow: var(--card-shadow); }
.support-list h3 span { border-radius: 999px; }
.plan-card { border: 2px solid #d6e5f5; border-radius: 24px; box-shadow: var(--card-shadow); }
.plan-card.recommended { border: 3px solid var(--fresh-green); background: linear-gradient(#eaf5ff, #fff 34%); }
.plan-badge { background: var(--fresh-green); border-radius: 999px; padding: 7px 22px; font-size: .85rem; }
.plan-name { font-family: var(--heading-font); color: var(--green-800); font-weight: 800; }
.plan-price dd .num { font-size: 2.1rem; color: var(--orange); }
.option-card { border-radius: 20px; background: #f0f6fc; }
.flow-intro { border: 0; border-radius: 26px; overflow: hidden; box-shadow: var(--card-shadow); }
.flow-intro-text h3 { color: var(--green-800); }
.flow-steps li { border: 0; border-radius: 18px; box-shadow: var(--card-shadow); }
.flow-steps span { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fresh-green); color: white; font-size: .95rem; }
.flow-steps li:last-child { background: var(--green-800); color: white; }
.flow-steps li:last-child span { background: white; color: var(--green-800); }
.sitemap-card { border: 0; border-radius: 22px; }
.plans .sitemap-card { border: 1px solid var(--ink-200); }
.sitemap-card li { border-radius: 6px; }
.faq { background: #fffdf4; }
.faq-list { border: 0; gap: 14px; }
.faq-item { border: 1px solid #dae7f4; background: white; border-radius: 16px; box-shadow: 0 3px 12px rgb(24 65 110 / 3%); }
.faq-item summary { padding: 23px 44px 23px 20px; }
.faq-item summary::before { font-size: 1.25rem; line-height: 1.4; }
.faq-item summary::after { right: 20px; }
.faq-item[open] { border-color: var(--green-700); }
.faq-item[open] summary { color: var(--green-800); }
.faq-answer { padding: 0 20px 24px; }
.faq-answer p::before { color: var(--orange); }
.contact { background: linear-gradient(135deg, #eef7ff, #deedfb); color: var(--ink-900); border-top: 8px solid var(--fresh-green); }
.contact .section-title { color: var(--green-800); }
.contact-lead, .contact-small { color: var(--ink-700); }
.contact .section-label.light { color: var(--green-800); }
.contact-form { border-radius: 26px; box-shadow: 0 10px 35px rgb(24 68 112 / 9%); }
.form-title { color: var(--green-800); border-bottom: 2px dashed #d6e6f5; padding-bottom: 20px; }
.form-row input[type='text'], .form-row input[type='tel'], .form-row input[type='email'], .form-row textarea, .form-row select { background-color: #f6f9fd; border-color: #ccdaea; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { background-color: white; border-color: var(--green-700); box-shadow: 0 0 0 3px #e6f2fe; }
.form-row .is-invalid { border-color: #b3382a; }
.req, .opt { border-radius: 4px; }
.check-group label { border-radius: 8px; }
.site-footer { background: #102f52; color: #f1f7fd; }
.footer-company, .footer-bottom, .footer-nav a { color: #cedef0; }
.sticky-cta { background: #fffbe9; border-top: 1px solid #f2e7be; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.thanks, .nf, .policy { background: #f3f8fe; }
.thanks-mark { border-radius: 50%; background: #e1effd; }

@media (min-width: 768px) {
  .section { padding-block: 100px; }
  .section-title { font-size: 2.5rem; }
  .section-head { margin-bottom: 48px; }
  .section-lead { font-size: 1.06rem; }
  .problem-list { gap: 20px; }
  .problems-answer { font-size: 1.45rem; }
  .hero-grid { padding-block: 48px; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn { width: auto; min-width: 340px; font-size: .95rem; padding-inline: 24px; }
  .hero-stats { border-radius: 60px 60px 0 0; padding-block: 12px; }
  .stats-strip > div { padding: 20px 16px; }
  .stats-strip dt { font-size: .75rem; min-height: 3.3em; }
  .stats-strip dd .num { font-size: 3.6rem; }
  .proof-value .num { font-size: 4.3rem; }
  .proof-card { padding: 28px 20px; }
  .proof-desc { font-size: .9rem; }
  .photo-band img { height: 420px; }
  .photo-band figcaption span { font-size: 1.4rem; }
  .faq-item summary { padding: 26px 56px 26px 28px; }
  .faq-answer { padding: 0 28px 28px; }
  .contact-form { padding: 40px 36px; }
}
@media (min-width: 960px) {
  .header-inner { padding-inline: 24px; }
  .global-nav ul { gap: 0; }
  .global-nav a { font-size: .77rem; padding-inline: 9px; }
  .header-actions .btn-sm { padding-inline: 20px; font-size: .82rem; }
  .hero-grid { max-width: 1400px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 36px; padding: 48px 40px 52px; }
  .hero-title { font-size: clamp(2.15rem, 3.6vw, 3.25rem); line-height: 1.5; }
  .hero-eyebrow { font-size: .84rem; }
  .hero-lead { font-size: 1.05rem; }
  .hero-badges { display: grid; }
  .hero-badges li { font-size: .85rem; }
  .hero-visual img { border-radius: 44px 44px 110px 44px; }
  .hero-visual-caption { margin-inline: 40px; }
  .service-grid { gap: 28px; }
  .message-body .section-title { font-size: 2rem; }
  .message-grid { gap: 72px; }
  .support-grid, .contact-grid { gap: 56px; }
  .work-body { padding: 20px; }
}
@media (min-width: 1200px) {
  .brand-name { font-size: 1.35rem; }
  .global-nav a { font-size: .85rem; padding-inline: 12px; }
  .hero-cta .btn-ghost { min-width: 0; padding-inline: 36px; }
}
@media (max-width: 767px) {
  .hero-stats .container { padding-inline: 12px; }
  .hero-visual { max-width: 460px; width: 100%; margin: 0 auto; }
  .hero-visual-caption .name { font-size: .8rem; }
  .message-photo { max-width: 460px; }
  .plan-price > div { gap: 6px; }
  .plan-price dd .num { font-size: 1.8rem; }
  .section-head { margin-bottom: 32px; }
  .contact-copy .section-title { font-size: 1.65rem; }
  .contact-form { padding: 26px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn-primary:hover { transform: none; }
}