/* Hallmark · checked: 2026-11-03 · genre: small-business service, video portfolio (inferred)
 * floor: see REVIEW.md · fixed: 7a, 20, 34, 48, 54, 63, 3, F6, F15, 24b, 26b
 * posture: committed (full-blue hero, ココナラ cover colours) · nav: top bar + mobile menu · footer: two columns
 * dismissed 67 · 「SNS」 and the artist name 「SAKURA BEATZ.JP」 are literal acronym and proper noun, no CSS uppercase
 * answered 48 · the play icon's fill sits inside a data URI and cannot read a custom property
 * waive 38iii · one coloured line in the hero only · the yellow 「魅力が伝わる、」 is the same headline as the ココナラ cover and banner
 * built: the project · redesign: polish · v2.0.0 */
/* yuon制作室 v5 — 動画中心。色はココナラのカバー（青×黄）にそろえる */
:root{
  --blue:#1d4fbf;--blue-dk:#163f9c;--navy:#14213d;--ink:#1b2333;--sub:#4a5468;--line:#dde3ee;
  --pale:#eef3ff;--paper:#f7f6f2;--yellow:#ffd60a;--yellow-hi:#ffe352;--white:#fbfcff;
  --on-blue:#e8eeff;--on-blue-2:#dce6ff;--on-blue-3:#c9d6fb;--on-dark:#c9d2e4;--on-dark-2:#dfe5f2;--deep:#0f2f7a;--night:#0d1730;--field:#7a8599;--focus:#14213d;--font-logo:Jost;
  --header-bg:rgba(251,252,255,.96);--shade:rgba(8,20,60,.35);--shade-2:rgba(8,20,60,.4);--glass:rgba(10,20,50,.7);--glass-2:rgba(10,20,50,.78);
  --veil:rgba(255,255,255,.12);--rule-on-blue:rgba(255,255,255,.35);--line-on-blue:rgba(255,255,255,.7);--rule-on-dark:rgba(255,255,255,.2);
  --play-fade:linear-gradient(to bottom,rgba(8,16,40,.35),rgba(8,16,40,0) 30%);--bar-shadow:0 -4px 16px rgba(20,33,61,.14);--gap:40px;
  --font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;overflow-x:clip}
body{overflow-x:clip;margin:0;font-family:var(--font);font-size:16px;line-height:1.8;color:var(--ink);background:var(--white);-webkit-text-size-adjust:100%}
img,video{display:block;max-width:100%}
a{color:var(--blue)}
h1,h2,h3,h4{line-height:1.4;margin:0;word-break:auto-phrase;text-wrap:balance}
p{margin:0;text-wrap:pretty}
summary{text-wrap:pretty}
.wrap{width:min(1180px,100% - 48px);margin:0 auto}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--white);padding:8px 12px}
.preview-note{background:var(--navy);color:var(--white);font-size:14px;text-align:center;padding:8px 12px}
.nowrap{white-space:nowrap}

/* header */
.header{position:sticky;top:0;z-index:30;background:var(--header-bg);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;gap:24px;min-height:64px}
.brand{display:flex;align-items:baseline;gap:0;text-decoration:none;color:var(--blue);font:500 24px/1 var(--font-logo),var(--font);letter-spacing:.01em}
.brand span{font:700 16px/1 var(--font);margin-left:1px}
.brand-sub{font-size:14px;color:var(--sub);margin-left:12px;white-space:nowrap}
#nav{margin-left:auto;display:flex;align-items:center;gap:24px}
#nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:700}
#nav a:hover{color:var(--blue)}
.menu{display:none}

/* buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:999px;background:var(--yellow);color:var(--navy);font-weight:800;font-size:16px;text-decoration:none;border:2px solid var(--yellow)}
.button:hover{background:var(--yellow-hi)}
.button.line{background:transparent;color:var(--white);border-color:var(--line-on-blue)}
.button.line:hover{background:var(--veil)}
.button.blue{background:var(--blue);border-color:var(--blue);color:var(--white)}
.button.blue:hover{background:var(--blue-dk)}
.button:active,.play:active span,.others a:active,.mobile-cta a:active{transform:translateY(1px)}
.text-link:active,#nav a:active{opacity:.7}
.button:focus-visible,.play:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hero :focus-visible,.lp-hero :focus-visible,.dark :focus-visible,footer :focus-visible{outline-color:var(--yellow)}
.button.small{min-height:40px;padding:0 16px;font-size:14px}
.text-link{font-weight:700;text-decoration:none}
.text-link:hover{text-decoration:underline}

/* hero */
.hero{background:var(--blue);color:var(--white);padding:64px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--gap);align-items:center}
.kicker{font-size:17px;font-weight:700;color:var(--on-blue-2)}
.hero h1{font-size:clamp(36px,4.4vw,58px);font-weight:900;margin:16px 0 24px;letter-spacing:.01em}
.h1-pre{display:block;font-size:18px;font-weight:700;color:var(--on-blue-2);margin-bottom:12px;letter-spacing:0}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .lead{font-size:17px;color:var(--on-blue);max-width:30em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 0;margin:32px 0 0;padding:0;list-style:none;font-size:14px;color:var(--on-blue-2)}
.hero-facts li{padding:0 16px;border-left:1px solid var(--rule-on-blue)}
.hero-facts li:first-child{padding-left:0;border-left:0}
.hero-facts b{display:block;color:var(--white);font-size:18px}
.hero-visual{position:relative;padding-right:120px;padding-bottom:76px}
.hero video[autoplay]{cursor:pointer}
.reel{position:relative;border-radius:10px;overflow:hidden;background:var(--deep);box-shadow:0 18px 40px var(--shade);aspect-ratio:16/9}
.reel video{width:100%;height:100%;object-fit:cover}
.phone{position:absolute;right:0;bottom:-36px;width:168px;padding:8px;border-radius:26px;background:var(--night);box-shadow:0 18px 40px var(--shade-2)}
.phone video{border-radius:20px;aspect-ratio:9/16;width:100%;object-fit:cover}
.hero-caption{font-size:14px;color:var(--on-blue-3);margin-top:52px}

/* sections */
.section{padding:96px 0}
.section.paper{background:var(--paper)}
.section.pale{background:var(--pale)}
.section.dark{background:var(--navy);color:var(--white)}
.section-head{max-width:760px;margin-bottom:44px}
.eyebrow{font-size:15px;font-weight:700;color:var(--blue);margin-bottom:8px}
.dark .eyebrow{color:var(--yellow)}
.section-head h2{font-size:clamp(28px,3vw,40px);font-weight:800}
.section-head p{margin-top:16px;color:var(--sub)}
.dark .section-head p{color:var(--on-dark)}

/* works */
.group-title{font-size:17px;font-weight:800;margin:0 0 20px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.works+.group-title{margin-top:72px}
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px var(--gap)}
.player{position:relative;border-radius:10px;overflow:hidden;background:var(--night);aspect-ratio:16/9}
.tall .player{aspect-ratio:9/16;max-width:300px}
.player video{width:100%;height:100%;object-fit:cover;background:var(--night)}
.play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:12px;border:0;background:transparent;cursor:pointer;font:700 14px var(--font);color:var(--white)}
.play > span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 14px 4px 4px;border-radius:999px;background:var(--glass-2);font-variant-numeric:tabular-nums;transition:background .15s}
.play .say{max-width:0;margin-left:-8px;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .2s,margin .2s,opacity .2s}
.play:hover .say,.play:focus-visible .say{max-width:6em;margin-left:0;opacity:1}
.play:hover > span,.play:focus-visible > span{background:var(--blue)}
.play > span::before{content:"";width:30px;height:30px;border-radius:50%;background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M12 9.5v11l9-5.5z' fill='%2314213d'/%3E%3C/svg%3E") center/100% no-repeat}
.play > span::before{transition:transform .15s}
.play:hover > span::before,.play:focus-visible > span::before{transform:scale(1.1)}
.player.playing .play{display:none}
.work-body{margin-top:16px}
.work-type{font-size:14px;color:var(--sub);font-weight:700}
.work-type span{color:var(--blue);margin-right:1em}
.work h4{margin:0;font-size:19px;font-weight:800;margin:4px 0 8px}
.work p.desc{font-size:15px;color:var(--sub)}
.work .made{font-size:14px;color:var(--sub);margin-top:8px}
.work .text-link{display:inline-block;margin-top:8px;font-size:15px}
.works.vertical{grid-template-columns:300px 300px minmax(0,1fr)}
.work-ask,.work-note{align-self:start;padding:28px;border-radius:10px;background:var(--pale)}
.work-note{background:var(--paper)}
.work-ask{aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.ask-title{font-size:19px;font-weight:800;margin-bottom:8px}
.work-ask p:not(.ask-title),.work-note p:not(.ask-title){font-size:15px;color:var(--sub);margin-bottom:16px}
.works-note{margin-top:40px;font-size:14px;color:var(--sub)}

/* uses */
.uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:56px;border-top:2px solid var(--navy)}
.uses.small{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px;border-top:1px solid var(--line)}
.use{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;padding:28px 0 32px;color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.use+.use::before{content:"";position:absolute;left:-28px;top:28px;bottom:32px;border-left:1px solid var(--line)}
.uses.small .use+.use::before{left:-20px}
.uses.small .use{padding:24px 0}
.uses.small h3{font-size:18px}
.uses-more summary{display:inline-flex;align-items:center;min-height:44px;margin-top:24px;padding:0 20px;border:1px solid var(--navy);border-radius:999px;font-weight:700;cursor:pointer;list-style:none}
.uses-more summary::-webkit-details-marker{display:none}
.uses-more summary::after{content:"＋";margin-left:8px}
.uses-more[open] summary::after{content:"−"}
.uses-more[open] summary{margin-bottom:8px}
.use img{border-radius:8px;aspect-ratio:16/9;object-fit:cover;width:100%}
.use h3{font-size:21px;font-weight:800;margin-top:8px}
.use p{font-size:15px;color:var(--sub)}
.use .text-link{color:var(--blue)}
.use:hover h3{color:var(--blue)}

/* why (lined rows, not boxes) */
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.point h3{font-size:20px;font-weight:800;padding-top:16px;border-top:3px solid var(--yellow)}
.point p{margin-top:8px;color:var(--on-dark);font-size:15px}

/* price */
.price-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--gap);align-items:start}
.price-main{position:relative;background:var(--white);border:2px solid var(--blue);border-radius:10px;padding:32px}
.price-main .price-note{position:absolute;top:16px;right:20px;font-size:14px;color:var(--sub)}
.price-main .other-price{margin-top:12px;padding:10px 14px;border-radius:8px;background:var(--pale);font-size:15px;font-weight:700}
.price-main .other-price b{font-size:18px}
.price-main .tag{display:inline-block;margin-bottom:12px;background:var(--yellow);color:var(--navy);font-weight:800;font-size:14px;padding:4px 12px;border-radius:999px}
.price-main h3{font-size:20px}
.big-price{font-variant-numeric:tabular-nums;font-size:52px;font-weight:900;color:var(--blue);line-height:1.2;margin:8px 0 4px}
.big-price small{font-size:20px;margin-left:4px}
.price-main .cond-note{font-size:14px;color:var(--sub);margin-top:8px}
.price-main .cond{font-size:15px;color:var(--ink);font-weight:700}
.price-main ul{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);list-style:none;font-size:15px}
.price-main li{padding-left:1.3em;position:relative}
.price-main li::before{content:"";position:absolute;left:0;top:.72em;width:.6em;height:.3em;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.options{width:100%;border-collapse:collapse;font-size:15px;background:var(--white)}
.options caption{text-align:left;font-weight:800;font-size:18px;margin-bottom:8px}
.options th,.options td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.options td{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-weight:700}
.options small{display:block;font-weight:400;color:var(--sub);font-size:14px}
.price-notes{margin-top:16px;font-size:14px;color:var(--sub)}
.price-notes p+p{margin-top:8px}

/* flow */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;counter-reset:f}
.flow li{padding:16px 16px 0 0;border-top:2px solid var(--navy);counter-increment:f}
.flow li+li{padding-left:16px;border-left:1px solid var(--line)}
.flow h3{font-size:18px;font-weight:800}
.flow h3::before{content:counter(f) ". ";color:var(--blue)}
.flow p{font-size:15px;color:var(--sub);margin-top:8px}
.flow-note{margin-top:28px;font-size:15px}

/* faq */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--gap)}
.faq-ask{display:inline-block;margin-top:12px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:700;padding:16px 32px 16px 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:22px;color:var(--blue)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 16px;color:var(--sub);font-size:15px}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--gap)}
.contact-side h3{font-size:18px;margin-bottom:8px}
.contact-side ul{padding-left:1.2em;margin:0;color:var(--on-dark-2);font-size:15px}
.coconala{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule-on-dark)}
.coconala p{color:var(--on-dark);font-size:15px;margin:8px 0 16px}
.form{background:var(--white);color:var(--ink);border-radius:10px;padding:28px;display:grid;gap:16px}
.form label{display:grid;gap:8px;font-weight:700;font-size:15px}
.form input,.form textarea,.form select{font:inherit;font-weight:400;padding:12px;border:1px solid var(--field);border-radius:6px;width:100%}
.form .consent{display:flex;gap:8px;align-items:flex-start;font-weight:400}
.form .consent input{width:auto;margin-top:8px}
.form-status{background:var(--pale);border-radius:6px;padding:8px 12px;font-size:14px}
.form .button{width:100%}
.form .button[disabled]{background:var(--line);border-color:var(--line);color:var(--sub);cursor:not-allowed}

/* landing pages */
.lp-hero{background:var(--blue);color:var(--white);padding:56px 0 64px}
.lp-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lp-hero.vertical .hero-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.lp-hero .player{box-shadow:0 18px 40px var(--shade)}
.lp-hero.vertical .player{aspect-ratio:9/16;max-width:320px;margin-left:auto}
.lp-hero.vertical .lp-caption{max-width:320px;margin-left:auto}
.lp-hero h1{font-size:clamp(30px,3.4vw,46px);font-weight:900;margin:0 0 20px}
.lp-hero .lead{color:var(--on-blue)}
.breadcrumb{font-size:14px;color:var(--on-blue-3);margin-bottom:16px}
.breadcrumb a{color:var(--white)}
.scenes{margin:0;padding:0;list-style:none;border-top:2px solid var(--navy)}
.scenes li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--gap);padding:16px 0;border-bottom:1px solid var(--line)}
.seek{border:0;background:none;padding:0;font:inherit;cursor:pointer;text-align:left}
.seek time{text-decoration:underline;text-underline-offset:4px}
.seek:hover time{color:var(--navy)}
.seek-hint{font-size:14px}
.scenes time{font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums}
.scenes b{display:block;font-size:17px}
.scenes span{color:var(--sub);font-size:15px}
.checks{margin:0;padding:0;list-style:none;border-top:2px solid var(--navy)}
.checks li{padding:20px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:17px}
.checks li span{display:block;margin-top:4px;font-weight:400;font-size:15px;color:var(--sub)}
.lp-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px}
.lp-cta p{font-size:15px;color:var(--sub)}
.others-title{font-size:20px;font-weight:800;margin-bottom:16px}
.others{display:flex;flex-wrap:wrap;gap:12px}
.others a{padding:8px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:700;color:var(--ink);background:var(--white)}
.others a:hover{border-color:var(--blue);color:var(--blue)}

/* footer */
footer{background:var(--night);color:var(--on-dark);padding:48px 0 40px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
footer .foot-lead{margin-top:12px}
footer .brand{color:var(--white)}
footer a{color:var(--white)}
footer p+p{margin-top:4px}
.sample-note{margin-top:28px;font-size:14px;color:var(--on-dark)}
.copyright{margin-top:28px;font-size:14px}
.mobile-cta{display:none}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media (max-width:1000px){
  .hero-grid,.lp-hero .hero-grid,.lp-hero.vertical .hero-grid,.price-grid,.contact-grid,.split{grid-template-columns:minmax(0,1fr)}
  .hero-visual{padding-right:96px}
  .phone{width:132px}
  .uses,.points{grid-template-columns:minmax(0,1fr)}
  .uses.small{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .works{grid-template-columns:repeat(2,minmax(0,1fr))}
  .works.vertical{grid-template-columns:repeat(2,minmax(0,1fr))}
  .use,.uses.small .use{padding:24px 0}
  .use+.use::before{display:none}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow li,.flow li+li{padding:16px 0;border-left:0;border-top:1px solid var(--line)}
  .flow li:first-child{border-top:2px solid var(--navy)}
  .lp-hero.vertical .player,.lp-hero.vertical .lp-caption{margin:0 auto}
  .lp-hero.vertical .lp-caption{margin-top:16px}
}
@media (max-width:760px){
  body{padding-bottom:72px}
  .wrap{width:calc(100% - 32px)}
  .header .wrap{min-height:58px;gap:12px}
  .brand-sub{display:none}
  .menu{display:inline-flex;align-items:center;margin-left:auto;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);font:700 14px var(--font);color:var(--ink)}
  #nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--white);border-bottom:1px solid var(--line);padding:8px 16px 16px}
  #nav.open{display:flex}
  #nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  #nav .button{margin-top:12px;border-bottom:0}
  .hero .hero-grid{gap:0}
  .hero-copy{display:contents}
  .hero-visual{order:1;margin-top:32px;padding-bottom:0}
  .hero-facts{order:2;margin-top:56px}
  .hero{padding:40px 0 56px}
  .hero h1{font-size:34px}
  .hero .lead{font-size:16px}
  .hero-actions .button{flex:1 1 100%}
  .hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));font-size:14px}
  .hero-facts li{padding:0 8px}
  .hero-facts b{font-size:15px}
  .hero-caption{padding-right:44px}
  .hero-visual{padding-right:72px}
  .phone{width:104px;bottom:-28px;padding:4px;border-radius:18px}
  .phone video{border-radius:14px}
  .hero-caption{margin-top:40px}
  .section{padding:64px 0}
  .section-head{margin-bottom:32px}
  .works{grid-template-columns:minmax(0,1fr);gap:44px}
  .works+.group-title{margin-top:56px}
  .works.vertical{grid-template-columns:minmax(0,1fr)}
  .work.tall:not(.work-note){width:280px;max-width:100%;margin:0 auto}
  .tall .player{max-width:280px}
  .price-main{padding:24px}
  .price-main .price-note{position:static;margin-bottom:8px}
  .big-price{font-size:44px}
  .options th,.options td{padding:8px 8px}
  .scenes li{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .mobile-cta{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1.3fr;gap:8px;z-index:40;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--white);box-shadow:var(--bar-shadow)}
  .mobile-cta a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-size:14px;font-weight:800;text-decoration:none;border:1px solid var(--field);color:var(--ink)}
  .mobile-cta a:last-child{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
}
.lp-caption{margin-top:16px}

/* 文書ページ（プライバシーポリシー・使用素材） */
.doc-wrap{max-width:760px;padding:56px 0 96px}
.doc h1{font-size:clamp(28px,3vw,36px);font-weight:800;margin:12px 0 24px}
.doc h2{font-size:19px;font-weight:800;margin:36px 0 8px;padding-top:20px;border-top:1px solid var(--line)}
.doc p,.doc li{font-size:15px}
.doc p+p{margin-top:8px}
.doc ul{padding-left:1.3em;margin:8px 0}
.breadcrumb-doc{font-size:14px;color:var(--sub)}
.draft{background:var(--pale);border-radius:6px;padding:12px 16px;margin-bottom:20px}
.dates{margin-top:32px;color:var(--sub)}

/* v5c 종합 검사 반영(2026-11-03) */
body{word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
li,summary{text-wrap:pretty}
.group-title span{margin-left:1em;font-weight:700;color:var(--sub)}
.lp-hero.vertical .hero-grid{align-items:start}
.lp-price .tag{display:inline-block;margin:16px 0 12px;background:var(--yellow);color:var(--navy);font-weight:800;font-size:14px;padding:4px 12px;border-radius:999px}
.lp-price .cond{font-size:15px;color:var(--ink);font-weight:700}
.lp-price .cond-note{font-size:14px;margin-top:4px}
.lp-price .other-price{display:inline-block;margin-top:12px;padding:10px 14px;border-radius:8px;background:var(--white);font-size:15px;font-weight:700;color:var(--ink)}
.lp-price .other-price b{font-size:18px}
.lp-price .incl{margin-top:12px}
.others-all{display:inline-block;margin-top:16px}
.works.vertical .work-note{height:calc(300px * 16 / 9);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
body.video-on .mobile-cta{display:none}
.page-404{min-height:100vh;display:flex;flex-direction:column}
.page-404 main{flex:1}
@media (max-width:1199px){
  .price-main .price-note{position:static;margin-bottom:8px}
}
@media (max-width:1000px){
  .works.vertical .work-note{height:auto}
}
@media (max-width:760px){
  .hero-visual{margin-top:24px}
  .hero-facts{order:2;margin-top:48px}
  .hero .lead{order:3;margin-top:28px}
  .hero-actions{order:4}
  .hero .hero-actions .button:first-child{display:none}
  .lp-hero .hero-grid{gap:0}
  .lp-hero .hero-grid>div:first-child{display:contents}
  .lp-visual{order:1;margin:4px 0 24px}
  .lp-hero .lead{order:2}
  .lp-hero .hero-actions{display:none}
  .lp-caption{padding-right:0}
  .lp-hero.vertical .player,.lp-hero.vertical .lp-caption{max-width:min(320px,calc((100svh - 170px) * 9 / 16))}
  .group-title span{display:block;margin-left:0;font-size:15px}
  .works.vertical{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .work.tall:not(.work-note){width:auto;margin:0}
  .works.vertical .work-note{grid-column:1/-1}
  .works.vertical h4{font-size:16px}
  .works.vertical .work-type span{display:block;margin-right:0}
  .works.vertical .text-link{text-wrap:balance}
  .uses.small{grid-template-columns:minmax(0,1fr)}
  .uses.small .use{grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;row-gap:4px;padding:16px 0}
  .uses.small .use img{grid-row:1 / 3;align-self:start}
  .uses.small h3{margin-top:0;font-size:17px}
  .uses.small p{font-size:14px}
  .text-link{display:inline-flex;align-items:center;min-height:44px}
  .work .text-link{margin-top:0}
  footer a,.breadcrumb a{display:inline-block;padding:10px 0}
}
/* 2026-11-03 추가 피드백: 버튼 글자 대칭(전각 괄호의 빈 공간을 줄임), PC 첫 화면 영상 크게 */
.button,.mobile-cta a,.others a{font-feature-settings:"palt"}
@media (min-width:1001px){
  .hero .hero-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px}
  .hero-visual{padding-right:48px}
}

/* 공개용: 스팸 봇만 채우는 숨은 칸(사람에게는 안 보이고 읽히지도 않는다) */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 2026-11-04 줄바꿈·간격 전수 검사 */
.split .section-head h2{font-size:clamp(28px,2.6vw,36px)}
.flow p{text-wrap:pretty}
.scenes .seek{align-self:start}
.work-ask{padding:20px 24px}
.price-main .price-note{top:34px;right:32px}
@media (min-width:1001px){
  .lp-hero.vertical .hero-grid{align-items:center}
}
@media (min-width:1001px) and (max-width:1199px){
  .hero .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .work-ask{padding:16px 20px}
  .work-ask p:not(.ask-title){font-size:14px;margin-bottom:8px}
  .work-ask .ask-title{font-size:17px}
}
/* 761~1000px: 메뉴가 한 줄에 안 들어가므로 휴대폰처럼 「メニュー」 버튼으로 접는다 */
@media (min-width:761px) and (max-width:1000px){
  .brand-sub{display:none}
  .menu{display:inline-flex;align-items:center;margin-left:auto;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);font:700 14px var(--font);color:var(--ink)}
  #nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--white);border-bottom:1px solid var(--line);padding:8px 24px 16px}
  #nav.open{display:flex}
  #nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  #nav .button{margin-top:12px;border-bottom:0}
}
.others a{font-feature-settings:normal}
@media (max-width:760px){
  .split{gap:0}
  .hero-facts .fact-sep{display:none}
  .hero-facts .fact-2{display:block}
}
@media (max-width:380px){
  .hero-facts li{font-size:13px}
}