/* ══════════════════════════════════════════════════════════════
   LEGACRAFT v6 PARTIAL — top-page only
   Ported from the v6 redesign (redesign/v6-brushup) for exactly three
   sections: #works (white band + phone carousel), #flow (rail + nodes),
   #about (polaroid). Everything is scoped under those section ids so the
   rest of the v5 top page is untouched. Loaded after v5-motion.css.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* v6 tokens used below that v5-pop.css does not define (never redefine --sh/--r/--bd/--mu etc.) */
  --yellow-l:#FFF3C4;
  --blue-ink:#1C5FD6;
  --r-md:16px; --r-lg:24px; --r-pill:999px;
  --bd-1:2px solid var(--ink);
  --sh-1:3px 3px 0 var(--ink);
  --sh-2:5px 5px 0 var(--ink);
  --sh-3:7px 7px 0 var(--ink);
  --sh-card-up:8px 8px 0 var(--ink);
  --sh-press:2px 2px 0 var(--ink);
  --fs-h3:clamp(19px, .45vw + 17.2px, 23px);
  --d-1:120ms;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --gutter:20px;   /* = .wrap side padding in v5-pop.css (v6 used 16px with its own wrap) */
  --s7:32px;
  --measure:38em;
}

/* ── #works (white proof band; v6 7.11) ─────────────────────── */
#works .works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (min-width:721px) and (max-width:999px){#works .works{grid-template-columns:repeat(2,minmax(0,1fr))}}
#works .work{display:flex;flex-direction:column;background:var(--white);border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  overflow:hidden;text-decoration:none;color:var(--ink);
  transition:transform var(--d-2) var(--ease-pop),box-shadow var(--d-2) var(--ease-pop)}
#works .work .mock{position:relative;overflow:hidden;border:0;border-bottom:var(--bd);border-radius:0;box-shadow:none}
#works .mock-bar i{width:10px;height:10px}
#works .work .mock-img{transition:transform 600ms var(--ease-out)}
#works .work-b{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
#works .work-tag{display:inline-block;align-self:flex-start;margin-bottom:8px;font:800 12px/1.4 var(--ff);border:var(--bd-1);border-radius:var(--r-pill);
  padding:2px 10px;background:var(--yellow-l)}
#works .work h3{font-size:var(--fs-h3);font-weight:900;line-height:1.35}
#works .work p{margin-top:6px;font:500 14px/1.7 var(--ff);color:var(--mu)}
@supports (word-break:auto-phrase){#works .work p{word-break:auto-phrase}}
@media (min-width:1000px) and (max-width:1279px){#works .work h3{min-height:2.7em}}
#works .work-go{margin-top:auto;padding-top:12px;font:800 14px/1.4 var(--ff);color:var(--blue-ink);transition:transform var(--d-2) var(--ease-pop)}
@media (hover:hover) and (pointer:fine){
  #works .work:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-card-up)}
  #works .work:hover .mock-img{transform:scale(1.04)}
  #works .work:hover .work-go{transform:translateX(4px)}
}
#works .work:focus-visible{transform:translate(-3px,-3px);box-shadow:var(--sh-card-up);outline-offset:10px}
#works .work:focus-visible .mock-img{transform:scale(1.04)}
#works .work:focus-visible .work-go{transform:translateX(4px)}
#works .work:active{transform:translate(3px,3px);box-shadow:var(--sh-press);transition-duration:var(--d-1)}
#works .works-prog{display:none}
@media (max-width:720px){
  #works .works{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding:17px var(--gutter) 16px;margin-top:-13px;gap:24px;
    scroll-padding-inline:calc(var(--gutter) + 48px);overscroll-behavior-x:contain;scrollbar-width:none}
  #works .works::-webkit-scrollbar{display:none}
  #works .work{scroll-snap-align:start;scroll-margin-inline:-48px}
  /* progress bar: shown only once the JS that moves it has run (.is-live) */
  #works .works-prog.is-live{display:block;width:min(60%,220px);height:10px;margin:4px auto 0;border:var(--bd-1);border-radius:var(--r-pill);
    background:var(--white);overflow:hidden}
  #works .works-prog i{display:block;height:100%;background:var(--yellow);transform-origin:0 50%;transform:scaleX(.19)}
}

/* ── #flow (rail + fill + nodes; v6 7.13) ───────────────────── */
#flow .steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
#flow .steps::before{content:"";position:absolute;z-index:0;left:10%;right:10%;top:16px;height:12px;border:var(--bd-1);border-radius:6px;background:var(--white)}
#flow .steps::after{content:"";position:absolute;z-index:0;left:10%;right:10%;top:16px;height:12px;border:var(--bd-1);border-radius:6px;
  background:var(--yellow);transform-origin:0 50%}
#flow .st{position:relative;z-index:1;margin-top:60px;background:var(--white);border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:20px 16px;text-align:left}
/* v5 had "▶"/"▼" arrows between the cards (with an infinite nudge); the rail layout has none */
#flow .st::after{content:none;animation:none}
#flow .st .sn{position:absolute;left:calc(50% - 22px);top:-60px;width:44px;height:44px;margin:0;border:var(--bd);border-radius:50%;background:var(--yellow);
  color:var(--ink);display:grid;place-items:center;font:900 20px/1 var(--ff)}
#flow .st-ill{display:block;width:100%;height:112px;object-fit:contain;margin:0 0 10px}
#flow .st h3{font-size:var(--fs-h3);font-weight:900;line-height:1.35}
@media (min-width:1000px){#flow .st h3{min-height:2.7em}}
#flow .st p{margin-top:6px;font:500 14px/1.75 var(--ff);color:var(--ink-2);text-align:left}
@supports (word-break:auto-phrase){#flow .st p{word-break:auto-phrase}}
#flow .free-tag{position:absolute;top:-12px;right:10px;z-index:2;background:var(--red);color:var(--ink);border:var(--bd-1);border-radius:var(--r-pill);
  font:900 12px/1.4 var(--ff);padding:2px 10px}
@media (max-width:999px){
  #flow .steps{grid-template-columns:1fr;gap:14px;padding-left:56px}
  #flow .steps::before,#flow .steps::after{left:16px;right:auto;top:22px;bottom:22px;width:12px;height:auto}
  #flow .steps::after{transform-origin:50% 0}
  #flow .st{margin-top:0;display:grid;grid-template-columns:minmax(0,1fr) 72px;column-gap:12px;padding:16px;border-width:2px;box-shadow:var(--sh-1)}
  #flow .st .sn{left:-56px;top:14px}
  #flow .st-ill{grid-column:2;grid-row:1/span 2;width:72px;height:72px;margin:0}
  #flow .st h3{grid-column:1;grid-row:1}
  #flow .st p{grid-column:1;grid-row:2}
  #flow .free-tag{left:12px;right:auto}
}

/* ── #about (polaroid; v6 7.15) ─────────────────────────────── */
#about .about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s7);align-items:center;background:var(--white);
  border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:clamp(20px,3vw,32px)}
#about .about figure{position:relative;margin:0;background:var(--white);border:var(--bd);border-radius:var(--r-sm);padding:10px 10px 28px;
  box-shadow:var(--sh-2);rotate:-2deg}
#about .about figure::before{content:"";position:absolute;left:calc(50% - 36px);top:-11px;width:72px;height:20px;background:rgba(255,210,63,.85);
  border:1.5px solid rgba(27,27,47,.3);rotate:4deg;z-index:1}
/* the file is 960x720 (4:3) but the markup says 960x640: reserve the real ratio before the lazy image arrives (CLS) */
#about .about img{border:var(--bd-1);border-radius:6px;aspect-ratio:auto 4 / 3}
#about .about h3{font-size:var(--fs-h3);font-weight:900;line-height:1.45;margin-bottom:10px}
#about .about p{font:500 15px/1.9 var(--ff);color:var(--ink-2);max-width:var(--measure)}
#about .about p + p{margin-top:10px}
@media (max-width:999px){
  #about .about{grid-template-columns:1fr}
  #about .about figure{width:86%;margin-inline:auto}
}

/* ── Motion additions (v6 M28 rail fill · M30 polaroid settle) ──
   Keyed on the v5 reveal classes (.rv gets .in from the inline IntersectionObserver). */
@media (prefers-reduced-motion:no-preference){
  @keyframes m-polar{from{opacity:0;translate:0 -14px;rotate:-7deg}}
  #flow .steps.rv::after{transition:scale 800ms var(--ease-out)}
  #flow .steps.rv:not(.in)::after{scale:0 1}
  @media (max-width:999px){#flow .steps.rv:not(.in)::after{scale:1 0}}
  #about .about.rv.in figure{animation:m-polar 600ms var(--ease-pop) backwards}
}

/* ── #problem .solve: v6 "lid + body" (lid on top of the illustration, one rounded block) ── */
#problem .solve{max-width:760px;margin:20px auto 0;background:var(--ink);color:#fff;border:var(--bd);border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--sh-3);padding:24px 24px 20px;text-align:center;font-size:calc(var(--fs-h3) * 1.15);font-weight:900;line-height:1.45}
#problem .solve .mk{background:linear-gradient(transparent 60%,var(--red) 60% 94%,transparent 94%);padding:0 2px}
@media (max-width:560px){
  #problem .solve{font-size:var(--fs-h3)}
  #problem .solve .mk{word-break:keep-all}
}
#problem .solve-ill{position:relative;max-width:760px;margin:0 auto;border:var(--bd);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-3)}
/* break at phrases (まるっと, 解決します stay whole), as v6 did via its shared .solve rule */
#problem .solve{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
@supports (word-break:auto-phrase){#problem .solve{word-break:auto-phrase}}
#problem .solve .mk{word-break:keep-all}

/* owner tweaks 2026-10-06 */
.hero-h .l.sm{font-size:.8em;line-height:1.3;margin-bottom:6px}
.sp-br{display:none}
@media (max-width:720px){
  .sp-br{display:inline}
  .final .lead,.line-box h3,.line-box p{word-break:keep-all;overflow-wrap:anywhere}
}

/* hero h1: "ホームページ" as a third display line (green, same lettering as 制作費0円 / 2,980) */
.hero-h .l.sm{margin-bottom:0}
.hero-h .hp{font-size:1.25em;color:var(--green-d);text-shadow:3px 3px 0 #fff}
@media (prefers-reduced-motion:no-preference){
  .hero-h .hp{display:inline-block;animation:m-pop .7s cubic-bezier(.34,1.56,.64,1) .35s backwards}
  .hero-h .l:nth-child(3){animation-delay:.32s}
  .hero-h .l:nth-child(4){animation-delay:.42s}
}

/* "プロが作る" as a tilted white speech bubble above the display lines */
.hero-h .l.sm{display:inline-block;position:relative;font-size:.6em;line-height:1.2;padding:8px 20px 9px;margin:0 0 14px 4px;
  background:#fff;color:var(--ink);border:var(--bd);border-radius:999px;box-shadow:var(--sh-s);rotate:-3deg;transform-origin:0 100%}
.hero-h .l.sm::after{content:"";position:absolute;left:26px;bottom:-11px;width:14px;height:14px;background:#fff;
  border-right:var(--bd);border-bottom:var(--bd);transform:skewX(8deg) rotate(45deg)}
/* phones: hero CTA + note centred */
@media (max-width:720px){
  .hero-cta{text-align:center}
  .hero-cta .btn{margin-inline:auto}
}

/* hero v3: two-line bubble, "完全オーダーメイド" over ホームページ, works special-offer LINE button */
.hero-h .l.sm{text-align:center;border-radius:18px;font-size:.5em;padding:10px 18px}
.hero-h .hp{line-height:1.05}
.hero-h .hp-sub{display:block;font-size:.5em;line-height:1.25;letter-spacing:.04em;text-shadow:2px 2px 0 #fff}
#works .cta-block .btn-col{align-items:center;text-align:center}
#works .cta-block .btn .sub{font-size:13px;line-height:1.35;margin-bottom:2px}
@media (max-width:720px){#works .cta-block .btn{display:flex;justify-content:center;align-items:center;gap:10px;width:100%}}
#works .cta-block .btn-col{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:720px){#works .cta-block .btn-col{font-size:17px}}
/* one-line bubble again; 完全オーダーメイド in ink */
.hero-h .l.sm{font-size:.6em;padding:8px 20px 9px;border-radius:999px}
.hero-h .hp-sub{color:var(--ink)}

/* ── #report: access analytics + monthly report (standard) ── */
#report{background:#fff}
#report .rp-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:8px}
#report .rp-card{position:relative;background:var(--sky);border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:26px 22px 22px}
#report .rp-card:nth-child(2){background:var(--paper-2)} #report .rp-card:nth-child(3){background:var(--pink)}
#report .rp-no{position:absolute;top:-16px;left:18px;background:var(--ink);color:#fff;border-radius:999px;padding:3px 12px;font:900 13px/1.3 var(--ff)}
#report .rp-card h3{font-size:var(--fs-h3);font-weight:900;line-height:1.35;margin-bottom:8px;word-break:keep-all;overflow-wrap:anywhere}
#report .rp-card p{font-size:var(--t3);color:var(--ink-2);line-height:1.8}
#report .rp-box{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px;align-items:center;margin-top:40px}
#report .rp-sheet{background:#fff;border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:20px;rotate:-1deg}
#report .rp-sheet-hd{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:var(--t3);border-bottom:2px dashed var(--ink);padding-bottom:10px;margin-bottom:14px}
#report .rp-tag{background:var(--yellow);border:var(--bd-1);border-radius:999px;padding:1px 10px;font-size:12px}
#report .rp-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#report .rp-stats > div{border:var(--bd-1);border-radius:var(--r-md);padding:10px 12px;background:var(--paper)}
#report .rp-stats .k{display:block;font-size:12px;font-weight:800;color:var(--mu)}
#report .rp-stats .v{display:block;font:900 clamp(24px,2.4vw,30px)/1.2 var(--ff);color:var(--blue)}
#report .rp-stats .v small{font-size:.5em;margin-left:2px}
#report .rp-stats .d{display:block;font-size:12px;font-weight:800;color:var(--ink-2)}
#report .rp-stats .d.up{color:#17A34A}
#report .rp-bars{display:flex;align-items:flex-end;gap:8px;height:90px;margin:16px 4px 8px;border-bottom:2px solid var(--ink)}
#report .rp-bars i{flex:1;height:var(--h);background:var(--blue);border:2px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0}
#report .rp-bars i:last-child{background:var(--yellow)}
#report .rp-note{font-size:12px;color:var(--mu)}
#report .rp-list h3{font-size:var(--fs-h3);font-weight:900;margin-bottom:14px}
#report .rp-list .inc{grid-template-columns:1fr}
#report .rp-how{margin-top:16px;font-size:var(--t3);color:var(--ink-2);line-height:1.8;background:var(--line-l,#E8F9EE);border:var(--bd-1);border-radius:var(--r-md);padding:12px 14px}
@media (max-width:860px){
  #report .rp-why{grid-template-columns:1fr;gap:24px}
  #report .rp-box{grid-template-columns:1fr;gap:28px}
  #report .rp-sheet{rotate:0deg}
}

/* industry chips are links to a live example site */
.chips li{padding:0}
.chips li a{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;color:inherit;text-decoration:none;border-radius:999px;min-height:44px}
.chips li a::after{content:"↗";font-size:.85em;opacity:.55;margin-left:2px}
.chips li a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.chips li a:hover::after{opacity:1}}

/* ── 2026-10-09 owner tweaks: hero badges x3 on phones / lead emphasis / 2-row gallery / 20 works ── */
@media (max-width:720px){
  .hero-badges{flex-wrap:nowrap;gap:8px;margin-bottom:16px}
  .hero-badges .badge{flex:1 1 0;min-width:0;justify-content:center;padding:7px 4px;font-size:13px;white-space:nowrap;box-shadow:2px 2px 0 var(--ink)}
}
@media (max-width:360px){.hero-badges .badge{font-size:12px;padding:6px 2px}}
.hero-lead b.em{font-size:1.2em;font-weight:900;color:var(--ink);background:linear-gradient(transparent 58%,#fff 58%);padding:0 3px}
.gallery{padding:26px 0}
.marq{gap:12px;padding-right:12px;animation-duration:64s}
.marq.marq-2{margin-top:12px;margin-left:-130px;animation-direction:reverse}
.marq .mock{width:240px;border-width:2px;border-radius:12px;box-shadow:3px 3px 0 var(--ink)}
.marq .mock .mock-bar{padding:6px 10px}
@media (max-width:720px){.marq .mock{width:200px}.marq.marq-2{margin-left:-100px}}
@media (prefers-reduced-motion:reduce){.marq{padding-right:0}.marq.marq-2{margin-left:0}.marq .mock[aria-hidden="true"]{display:none}}
@media (min-width:1100px){#works .works{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.marq > a{flex:none;display:block;text-decoration:none;color:inherit;border-radius:12px}
.marq > a .mock{transition:transform .18s,box-shadow .18s}
@media (hover:hover) and (pointer:fine){.marq > a:hover .mock{transform:translate(-2px,-4px);box-shadow:6px 7px 0 var(--ink)}}
.marq > a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
#problem .solve-ill .solve-vid{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#dfe9f7}