:root{--yellow:#e8b90d;--pale:#f8e7aa;--ink:#090909}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;background:#fff}main{overflow:hidden}h1,h2,p{margin:0}.hero{height:670px;background:#fff;position:relative}.site-header{height:145px;display:flex;align-items:flex-start;justify-content:space-between;padding:38px 5.5%}.logo{width:130px;height:auto}.header-link{font-size:11px;color:#999;border-bottom:1px solid #aaa}.hero-inner{position:relative;margin-left:12.8%;margin-top:22px;max-width:760px}.eyebrow{font-size:11px;color:#a6a6a6;margin-bottom:18px;letter-spacing:.02em}.eyebrow span{color:#b99100}.hero h1{position:relative;z-index:2;font-size:58px;line-height:1.43;font-weight:800;letter-spacing:.025em;white-space:nowrap}.hero h1 span{display:inline-block}.hero-arrow{position:absolute;left:0;top:-4px;width:810px;height:245px;z-index:1;pointer-events:none}.hero-copy{position:relative;z-index:2;font-size:14px;line-height:1.75;color:#696969;margin-top:31px}.hero-button{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:white;background:var(--yellow);height:39px;min-width:263px;border-radius:22px;margin-top:63px;font-size:12px;font-weight:700}.media-strip{height:224px;background:#e7e5df;overflow:hidden;border-bottom:17px solid var(--yellow);position:relative}.media-strip img{width:100%;height:100%;object-fit:cover;display:block}.media-strip.first img{object-position:center 48%}.media-strip.second{height:270px;border-top:15px solid var(--yellow);border-bottom:17px solid var(--yellow)}.media-strip.third{height:290px;border-top:17px solid var(--yellow);border-bottom:35px solid var(--yellow)}.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;height:100%;background:var(--yellow)}.quad img{width:100%;height:100%;object-fit:cover}.feature{position:relative;overflow:hidden}.feature-inner{position:relative;max-width:1000px;margin:auto;height:100%;display:grid;grid-template-columns:40% 60%;align-items:center}.feature-01{height:443px;background:linear-gradient(105deg,#e8b90d 2%,#f8e8af 100%)}.feature-02{height:444px;background:linear-gradient(100deg,#fff1c8 0%,#e9bd1b 100%)}.feature-03{height:539px;background:linear-gradient(105deg,#e9bb16 0%,#f8e6a5 100%)}.feature-04{height:404px;background:linear-gradient(100deg,#fff1c9 0%,#edc438 100%)}.feature-label,.feature-body{position:relative;z-index:2}.feature-label{padding-left:12.8%}.feature-label .feature-num{display:block;font-size:82px;font-weight:800;letter-spacing:-.07em;line-height:1;color:white}.feature-label small{display:block;font-size:9px;color:#fff;letter-spacing:.02em;margin:3px 0 13px}.feature-label b{display:block;font-size:59px;line-height:1.2;letter-spacing:-.035em}.feature-body{padding-left:0;padding-right:7%}.feature-body h2{font-size:31px;line-height:1.65;font-weight:800;margin-bottom:24px}.feature-body p{font-size:13px;line-height:1.7;margin-bottom:19px}.feature-01 .feature-body{padding-left:0;padding-right:17%}.feature-02 .feature-inner,.feature-04 .feature-inner{grid-template-columns:60% 40%}.feature-02 .feature-body{padding-left:34%;padding-right:6%}.feature-02 .feature-label{padding-left:1%}.feature-04 .feature-body{padding-left:30%;padding-right:0}.feature-04 .feature-label{padding-left:0}.shape{position:absolute;pointer-events:none}.shape-bars{right:4%;top:24%;width:170px;height:190px}.shape-bars i{position:absolute;width:55px;height:160px;transform:skew(-14deg)}.shape-bars i:first-child{background:#fff;left:16px;top:64px}.shape-bars i:last-child{background:var(--yellow);left:95px;top:0}.shape-ring{left:-43px;top:26px;width:204px;height:204px;border:43px solid #fff;border-radius:50%}.shape-ring:after{content:"";position:absolute;background:#fff;width:22px;height:55px;top:-46px;left:53px}.shape-dots{left:4%;bottom:32px;width:135px;height:98px;background-image:radial-gradient(#e5af00 2.5px,transparent 3px);background-size:22px 22px}.shape-circle{right:-37px;top:24px;width:225px;height:225px;background:#fff;border-radius:50%}.shape-circle:after{content:"";position:absolute;width:43px;height:43px;border-radius:50%;background:var(--yellow);left:-20px;top:110px}.shape-corner{left:0;bottom:0;width:280px;height:250px;background:var(--yellow);clip-path:polygon(0 0,0 21%,76% 100%,100% 100%)}.feature-04:after{content:"";position:absolute;left:0;bottom:0;width:255px;height:220px;background:#f5f5f5;clip-path:polygon(0 0,0 100%,100% 100%);z-index:1}.services{margin-top:24px}.services>div{margin-bottom:17px}.services strong{display:block;border-bottom:1px solid #777;font-size:11px;letter-spacing:.07em;padding-bottom:3px}.services p{font-size:11px;line-height:1.5;margin:4px 0 0;white-space:nowrap}.contact{min-height:680px;background:#fff}.contact-inner{max-width:745px;margin:auto;padding:90px 0 80px}.contact-heading small{display:block;font-size:10px;letter-spacing:.04em;margin-bottom:18px}.contact-heading h2{font-size:29px;line-height:1.7;margin-bottom:22px}.contact-heading p{font-size:13px;line-height:1.85}.contact-form{margin-top:38px}.contact-form>label{display:block;font-size:12px;font-weight:700;margin-bottom:21px}.contact-form label span{display:inline-block;background:#111;color:#fff;font-size:9px;padding:2px 7px;border-radius:10px;margin-right:7px}.contact-form input:not([type=checkbox]),.contact-form textarea{display:block;width:100%;border:0;border-bottom:1px solid #999;border-radius:0;background:transparent;padding:8px 5px;font:inherit;outline:0}.contact-form textarea{resize:vertical}.privacy{display:flex;justify-content:center;align-items:center;gap:6px;margin:12px 0}.privacy label{font-size:11px;color:#666}.contact-form button{display:block;margin:17px auto 0;background:#000;color:#fff;border:0;border-radius:30px;padding:10px 55px;font-weight:700;font-size:12px;cursor:default}footer{height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}footer img{width:122px}footer small{font-size:10px;color:#aaa}@media(max-width:700px){.hero{height:auto;min-height:560px}.site-header{height:115px;padding:26px 6%}.logo{width:105px}.hero-inner{margin:25px 7% 80px}.hero h1{font-size:clamp(27px,7.2vw,48px);white-space:normal}.hero-arrow{top:60px;left:0;width:115%;height:170px}.hero-copy{font-size:12px;margin-top:25px}.hero-button{margin-top:38px}.media-strip{height:135px}.media-strip.second{height:140px}.media-strip.third{height:155px}.feature-01,.feature-02,.feature-03,.feature-04{height:auto;min-height:370px}.feature-inner,.feature-02 .feature-inner,.feature-04 .feature-inner{display:flex;flex-direction:column;align-items:flex-start;padding:52px 8%;gap:24px}.feature-02 .feature-inner,.feature-04 .feature-inner{flex-direction:column-reverse}.feature-label,.feature-02 .feature-label,.feature-04 .feature-label{padding:0}.feature-label .feature-num{font-size:60px}.feature-label b{font-size:37px}.feature-body,.feature-01 .feature-body,.feature-02 .feature-body,.feature-04 .feature-body{padding:0}.feature-body h2{font-size:28px}.feature-body p{font-size:12px}.shape-bars{right:0;top:40px;transform:scale(.6)}.shape-ring{opacity:.5}.shape-dots{opacity:.4}.shape-circle{transform:scale(.55);transform-origin:top right}.shape-corner{transform:rotate(-45deg) scale(.6)}.services p{white-space:normal}.contact-inner{padding:65px 7%}.contact-heading h2{font-size:24px}}

/* Confirmed visual revision: section 02 only changes to white. */
.feature-02{background:#fff}
.feature-02 .feature-label .feature-num{color:#b6b6b6}
.feature-02 .feature-label small{color:#b3a78b}
.feature-02 .shape-ring{border-color:#f6e7b3}
.feature-02 .shape-ring:after{background:#fff}
.hero-arrow-mobile{display:none}

/* Responsive layout. Desktop design and all section text stay unchanged. */
@media (max-width:700px){
  .hero{min-height:0;height:auto}
  .site-header{height:96px;padding:22px 6%}
  .logo{width:105px}
  .header-link{font-size:10px}
  .hero-inner{margin:27px 7% 0;max-width:none;padding-bottom:66px}
  .eyebrow{font-size:10px;margin-bottom:17px}
  .hero h1{font-size:clamp(23px,6.8vw,44px);line-height:1.5;letter-spacing:-.025em;white-space:nowrap}
  .hero h1 span{white-space:nowrap}
  .hero-arrow{display:none}
  .hero-arrow-mobile{display:block;position:absolute;z-index:1;pointer-events:none;left:-1px;top:calc(17px + 1.5em);width:100%;height:auto;aspect-ratio:360/130}
  .hero-copy{font-size:12px;line-height:1.9;margin-top:33px}
  .hero-button{min-width:0;padding:0 22px;margin-top:35px;font-size:11px;height:42px}
  .media-strip{height:128px;border-bottom-width:10px}
  .media-strip.second{height:144px;border-top-width:10px;border-bottom-width:10px}
  .media-strip.third{height:153px;border-top-width:10px;border-bottom-width:14px}
  .quad{gap:5px}
  .feature-01,.feature-02,.feature-03,.feature-04{height:auto;min-height:0}
  .feature-inner,.feature-02 .feature-inner,.feature-04 .feature-inner{display:flex;flex-direction:column;align-items:stretch;gap:29px;padding:57px 7% 60px}
  .feature-label,.feature-02 .feature-label,.feature-04 .feature-label{padding:0;order:0}
  .feature-body,.feature-01 .feature-body,.feature-02 .feature-body,.feature-04 .feature-body{padding:0;order:1}
  .feature-label .feature-num{font-size:63px;line-height:.95}
  .feature-label small{font-size:9px;margin:6px 0 10px}
  .feature-label b{font-size:clamp(37px,10vw,52px);line-height:1.11;letter-spacing:-.035em}
  .feature-body h2{font-size:clamp(23px,6.4vw,31px);line-height:1.55;margin-bottom:21px}
  .feature-body p{font-size:12px;line-height:1.85;margin-bottom:17px}
  .feature-body p:last-child{margin-bottom:0}
  .shape-bars{right:-8px;top:25px;transform:scale(.52);transform-origin:top right;opacity:.9}
  .shape-ring{left:auto;right:-76px;top:32px;transform:scale(.7);opacity:.55}
  .shape-dots{left:auto;right:6%;bottom:28px;transform:scale(.65);transform-origin:bottom right;opacity:.55}
  .shape-circle{right:-75px;top:27px;transform:scale(.55);transform-origin:top right;opacity:.7}
  .shape-corner{transform:none;clip-path:polygon(0 0,0 30%,70% 100%,100% 100%);width:150px;height:135px;opacity:.6}
  .feature-04:after{width:125px;height:120px;opacity:.7}
  .services{margin-top:10px}
  .services>div{margin-bottom:19px}
  .services strong{font-size:11px;line-height:1.5}
  .services p{font-size:11px;line-height:1.7;white-space:normal;overflow-wrap:anywhere}
  .contact{min-height:0}
  .contact-inner{padding:68px 7% 70px}
  .contact-heading h2{font-size:clamp(23px,6vw,30px);line-height:1.55}
  .contact-heading p{font-size:12px;line-height:1.9}
  .contact-form{margin-top:35px}
  .contact-form>label{margin-bottom:25px}
  .contact-form input:not([type=checkbox]),.contact-form textarea{min-height:42px}
  .contact-form textarea{min-height:110px}
  .privacy{margin:20px 0 10px}
  .contact-form button{width:min(100%,300px);padding:13px 10px}
  footer{height:145px}
}
@media (max-width:360px){
  .hero-inner{margin-left:6%;margin-right:6%}
  .hero h1{font-size:clamp(22px,6.7vw,24px)}
  .hero-arrow-mobile{top:calc(17px + 1.5em)}
  .feature-label b{font-size:36px}
  .feature-body h2{font-size:23px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:700px){
  .feature-04 .feature-label .feature-num{color:#a8a8a8}
  .feature-04 .feature-label small{color:#a28e59}
}

/* WordPress dynamic media/video integration: no changes to design positions. */
.media-strip video{display:block;width:100%;height:100%;object-fit:cover}
.media-strip .quad{height:100%}
.contact-form .hl-honeypot{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.contact-form input:focus-visible,.contact-form textarea:focus-visible,.contact-form button:focus-visible,.hero-button:focus-visible{outline:2px solid #bd9200;outline-offset:3px}
.contact-form button{cursor:pointer}
.contact-form .privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.contact .hl-alert{margin:20px 0 0}
@media(prefers-reduced-motion:reduce){.media-strip video{animation:none}}

/* v2.0.6: Lightning theme h2 decorations must not bleed into the approved partner design.
   Scoped to /partner/ only; the original headline typography/layout is unchanged. */
body.hl-partner-page .feature .feature-body h2,
body.hl-partner-page .contact .contact-heading h2 {
  border:0!important; border-top:0!important; border-bottom:0!important;
  box-shadow:none!important; background:transparent!important; background-image:none!important;
  padding:0!important; text-decoration:none!important;
}
body.hl-partner-page .feature .feature-body h2::before,
body.hl-partner-page .feature .feature-body h2::after,
body.hl-partner-page .contact .contact-heading h2::before,
body.hl-partner-page .contact .contact-heading h2::after {
  content:none!important; display:none!important; border:0!important;
  box-shadow:none!important; background:none!important;
}


/* v2.0.7 — approved LP_honolab_営業用234: background color correction ONLY.
   01/03: gray to off-white, 02/04: off-white to gray.
   Photo separators and the four-photo gap: gray, not yellow.
   The yellow arrow, CTA and geometric accents are deliberately unchanged.
   Scoped to the Partner LP; other pages remain untouched. */
body.hl-partner-page .feature-01,
body.hl-partner-page .feature-03 {
  background:linear-gradient(100deg,#dcdddd 0%,#f7f7f7 100%);
}
body.hl-partner-page .feature-02,
body.hl-partner-page .feature-04 {
  background:linear-gradient(100deg,#f8f8f8 0%,#dcdddd 100%);
}
body.hl-partner-page .feature-02 .feature-label .feature-num,
body.hl-partner-page .feature-04 .feature-label .feature-num,
body.hl-partner-page .feature-02 .feature-label small,
body.hl-partner-page .feature-04 .feature-label small {
  color:#fff;
}
body.hl-partner-page .feature-02 .shape-ring {
  border-color:#fff;
}
body.hl-partner-page .media-strip {
  border-bottom-color:#dcdddd;
}
body.hl-partner-page .media-strip.second,
body.hl-partner-page .media-strip.third {
  border-top-color:#dcdddd;
  border-bottom-color:#dcdddd;
}
body.hl-partner-page .media-strip .quad {
  background:#dcdddd;
}


/* v2.0.8 — Final approved LP_honolab_営業用888.png.
   Only sections 02 and 04: soft-gray outer section + inset off-white panel.
   Sections 01/03, copy, geometry, media, form, and mobile layout stay unchanged. */
body.hl-partner-page .feature-02,
body.hl-partner-page .feature-04 {
  background:#dcdddd;
}
body.hl-partner-page .feature-02::before,
body.hl-partner-page .feature-04::before {
  content:"";
  position:absolute;
  left:0;
  top:8%;
  bottom:10%;
  width:88.3%;
  background:#f8f9f9;
  pointer-events:none;
}
body.hl-partner-page .feature-02 .feature-label .feature-num,
body.hl-partner-page .feature-04 .feature-label .feature-num {
  color:#aaa;
}
body.hl-partner-page .feature-02 .feature-label small,
body.hl-partner-page .feature-04 .feature-label small {
  color:#a7a7a7;
}
body.hl-partner-page .feature-04::after { background:#ededed; }
@media(max-width:700px) {
  body.hl-partner-page .feature-02::before,
  body.hl-partner-page .feature-04::before {
    top:16px; bottom:16px; width:93%;
  }
}


/* v2.0.9 — approved hero-only adjustments.
   1) Align Home link with the right edge of the full-width header.
   2) Use a restrained black CTA, smaller than the enlarged visual mockup.
   All other partner page styling remains unchanged. */
body.hl-partner-page .hero > .site-header {
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
body.hl-partner-page .hero > .site-header > .header-link {
  position:absolute!important;
  top:38px!important;
  right:5.5%!important;
  left:auto!important;
  margin:0!important;
  float:none!important;
}
body.hl-partner-page .hero .hero-button {
  min-width:0!important;
  width:auto!important;
  height:42px!important;
  padding:0 26px!important;
  background:#111!important;
  color:#fff!important;
  border:0!important;
  border-radius:24px!important;
  font-size:12px!important;
  font-weight:700!important;
  text-decoration:none!important;
  box-shadow:none!important;
  gap:14px;
}
body.hl-partner-page .hero .hero-button::after {
  content:"→";
  display:inline-block;
  font-size:16px;
  font-weight:400;
  line-height:1;
}
@media(max-width:700px){
  body.hl-partner-page .hero > .site-header > .header-link {
    top:26px!important;
    right:6%!important;
  }
  body.hl-partner-page .hero .hero-button {
    height:42px!important;
    padding:0 20px!important;
    font-size:11px!important;
    gap:10px;
  }
}

/* v2.1.0: four individually managed portfolio images, no automatic repeats. */
body.hl-partner-page .media-strip.third .quad.hl-partner-four-photos { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; height:100%; width:100%; }
body.hl-partner-page .media-strip.third .quad.hl-partner-four-photos > img { display:block; width:100%; height:100%; min-width:0; object-fit:cover; }
body.hl-partner-page .media-strip.third .quad.hl-partner-four-photos > .hl-partner-photo-empty { min-width:0; background:#e8e8e8; }
@media(max-width:700px) { body.hl-partner-page .media-strip.third .quad.hl-partner-four-photos { gap:5px; } }


/* v2.1.1 — More breathing room above/below the hero and each content section.
   Partner LP only. No changes to typography, backgrounds, graphics, media, or form logic. */
@media (min-width:701px) {
  body.hl-partner-page .hero { height:755px; }
  body.hl-partner-page .hero .hero-inner { margin-top:52px; }
  body.hl-partner-page .feature-01 { height:525px; }
  body.hl-partner-page .feature-02 { height:525px; }
  body.hl-partner-page .feature-03 { height:625px; }
  body.hl-partner-page .feature-04 { height:485px; }
  body.hl-partner-page .contact .contact-inner { padding-top:125px; padding-bottom:115px; }
}
@media (max-width:700px) {
  body.hl-partner-page .hero { height:auto; }
  body.hl-partner-page .hero .hero-inner { margin-top:43px; padding-bottom:94px; }
  body.hl-partner-page .feature .feature-inner { padding-top:78px; padding-bottom:82px; }
  body.hl-partner-page .contact .contact-inner { padding-top:90px; padding-bottom:95px; }
}


/* v2.1.10 — Smartphone hero only: tighten the headline/arrow relationship,
   and make the consultation CTA easier to notice and tap. Desktop untouched. */
@media (max-width:700px) {
  body.hl-partner-page .hero .hero-arrow-mobile {
    top:11px;
  }
  body.hl-partner-page .hero .hero-button {
    width:min(100%,300px)!important;
    min-width:0!important;
    height:54px!important;
    padding:0 24px!important;
    font-size:13px!important;
    gap:12px;
  }
  body.hl-partner-page .hero .hero-button::after {
    font-size:18px;
  }
}

/* v2.1.16 — Partner TOP: stronger headline and more informative lead.
   Restrict changes to desktop; mobile retains its established responsive rules. */
@media (min-width: 701px) {
  body.hl-partner-page .hero { height: 810px; }
  body.hl-partner-page .hero .hero-inner {
    max-width: 1000px;
    margin-top: 45px;
  }
  body.hl-partner-page .hero h1 {
    font-size: clamp(62px, 5.15vw, 76px);
    line-height: 1.34;
    letter-spacing: -.018em;
    font-weight: 900;
  }
  body.hl-partner-page .hero .hero-arrow {
    width: 950px;
    height: 291px;
    top: 4px;
    left: 0;
  }
  body.hl-partner-page .hero .hero-copy {
    font-size: 16px;
    line-height: 1.9;
    margin-top: 38px;
    max-width: 720px;
  }
  body.hl-partner-page .hero .hero-button { margin-top: 42px; }
}
@media (min-width: 701px) and (max-width: 1050px) {
  body.hl-partner-page .hero h1 { font-size: clamp(44px, 5.3vw, 62px); }
  body.hl-partner-page .hero .hero-arrow {
    width: 780px;
    height: 239px;
    top: -2px;
  }
  body.hl-partner-page .hero .hero-copy { font-size: 15px; }
}

/* v2.1.19 — Portfolio-style hover zoom for the four photos directly below 03.
   Keep the image within its original tile; don't alter image URLs or the 4-column grid. */
body.hl-partner-page .media-strip.third .quad.hl-partner-four-photos > .hl-partner-photo-tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
body.hl-partner-page .media-strip.third .quad.hl-partner-four-photos > .hl-partner-photo-tile > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.75,.3,1);
  will-change: transform;
}
@media (hover:hover) and (pointer:fine) {
  body.hl-partner-page .media-strip.third .quad.hl-partner-four-photos > .hl-partner-photo-tile:hover > img {
    transform: scale(1.25);
  }
}
@media (prefers-reduced-motion:reduce) {
  body.hl-partner-page .media-strip.third .quad.hl-partner-four-photos > .hl-partner-photo-tile > img {
    transition: none;
  }
}

/* v2.1.20 — Section 02's large decorative ring in hono lab brand yellow.
   The small rectangular detail belongs to the same motif. */
body.hl-partner-page .feature-02 .shape-ring {
  border-color: #e8b90d;
}
body.hl-partner-page .feature-02 .shape-ring::after {
  background: #e8b90d;
}
