/* Interview LP v4 — 2026-09-15 事業者向けの表現と3コースの比較 */
:root{
  --paper:#FBF6E7;--white:#FFFFFF;--ink:#2B2419;--yellow:#F2C94C;--deep:#7A5A0E;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  --serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --body:18px;--small:16px;--note:14px;--h1:64px;--h2:40px;--h3:22px;
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:96px;
  --r1:4px;--r2:12px;--pill:999px;--max:1160px;
  --course-name:56px;--course-price:48px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--s3);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--body)/1.9 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.25em}
a:hover{text-decoration-thickness:2px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--deep);outline-offset:4px}
button,a,summary{-webkit-tap-highlight-color:transparent}
p,h1,h2,h3,figure,dl,dd{margin:0}
h1,h2{font-family:var(--serif);font-weight:600;line-height:1.5;letter-spacing:-.045em}
h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3);line-height:1.6;font-weight:600}
p,dd,li{word-break:auto-phrase;overflow-wrap:anywhere}
.shell{width:min(calc(100% - 80px),var(--max));margin-inline:auto}
.eyebrow{font-size:var(--note);font-weight:600;letter-spacing:.08em;line-height:1.8}
.note{font-size:var(--note);line-height:1.8}
.skip-link{position:fixed;top:var(--s2);left:var(--s2);padding:var(--s2);background:var(--ink);color:var(--paper);z-index:10;transform:translateY(-200%);opacity:0;pointer-events:none}
.skip-link:focus{transform:translateY(0);opacity:1;pointer-events:auto}
.header{border-bottom:1px solid var(--ink)}
.header-inner{display:flex;align-items:center;gap:var(--s3);min-height:96px}
.brand{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0}
.brand img{width:152px;height:auto}
.header-note{font-size:var(--note);margin-right:auto}
.header nav{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.nav-link{font-size:var(--note);padding-block:var(--s2);text-decoration:none}
.nav-link:hover{text-decoration:underline}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:56px;padding:var(--s2) var(--s3);border:1px solid var(--ink);border-radius:var(--r1);background:var(--yellow);font-size:var(--small);font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.button:hover{background:var(--ink);color:var(--paper)}
.button-small{min-height:44px;padding:var(--s1) var(--s2);gap:var(--s3);background:transparent;font-size:var(--note)}
.button-dark{background:var(--ink);color:var(--paper)}
.button-dark:hover{background:var(--paper);color:var(--ink)}
.button-dark:focus-visible{outline-color:var(--ink)}
.hero{display:grid;grid-template-columns:1fr 1.1fr;column-gap:var(--s4);padding-top:var(--s5)}
.hero-copy{padding-bottom:var(--s4)}
.hero .eyebrow{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.short-rule{display:block;width:32px;height:2px;background:var(--ink)}
.hero h1{line-height:1.4;font-size:clamp(40px,4.3vw,var(--h1));letter-spacing:-.06em}
.hero h1 span{display:inline-block;white-space:nowrap}
.highlight{background:linear-gradient(transparent 77%,var(--yellow) 77%,var(--yellow) 94%,transparent 94%)}
.hero-intro{margin-top:var(--s3)}
.hero-action{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);margin-top:var(--s3)}
.hero-art{align-self:center;min-width:0;transform:translateY(var(--s2))}
.art-mat{background:var(--yellow);padding:var(--s2) 0 var(--s4) var(--s2)}
.art-mat img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center;border:1px solid var(--ink)}
.hero-art figcaption{display:flex;justify-content:space-between;gap:var(--s2);font-size:var(--note);line-height:1.6;margin-top:var(--s2)}
.hero-art figcaption span:last-child{flex-shrink:0}
.hero-footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--ink);margin-top:var(--s4)}
.hero-footer p{font-size:var(--note)}
.hero-footer p span{margin-inline:var(--s1)}
.hero-footer a{display:flex;align-items:baseline;gap:var(--s2);font-size:var(--small);text-decoration:none;padding-block:var(--s1)}
.hero-footer a:hover{text-decoration:underline}
.hero-footer a>span{font-size:var(--note)}
.film-section{background:var(--white);padding-block:var(--s6)}
.section-opening{display:grid;grid-template-columns:1fr 2fr;gap:var(--s4);margin-bottom:var(--s4)}
.section-opening>.eyebrow{padding-top:var(--s2)}
.opening-copy{margin-top:var(--s3)}
.film-strip{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--ink)}
.scene{padding:var(--s3);border-right:1px solid var(--ink)}
.scene:first-child{padding-left:0}.scene:last-child{border-right:0;padding-right:0}
.scene-top{display:flex;justify-content:space-between;align-items:center;font-size:var(--note);margin-bottom:var(--s4)}
.scene-top span:first-child{border:1px solid var(--ink);border-radius:var(--pill);padding:0 var(--s2)}
.scene-top span:last-child{font-family:var(--serif);font-size:var(--h3)}
.scene h3{margin-bottom:var(--s2)}
.deliverables{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s3);align-items:center;padding-top:var(--s4)}
.deliverable-title h3{font-size:var(--body)}
.format{display:flex;gap:var(--s2);align-items:center}
.format p{font-size:var(--small);line-height:1.8}
.format strong,.format p>span{display:block}.format p>span{font-size:var(--note)}
.screen{display:flex;align-items:center;justify-content:center;border:1px solid var(--ink);flex-shrink:0;background:var(--paper)}
.screen.landscape{width:64px;height:40px;border-radius:var(--r1)}
.screen.portrait{width:32px;height:48px;border-radius:var(--r1);margin-inline:var(--s2)}
.screen>span{width:8px;height:8px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg)}
.maker-section{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--s6);padding-block:var(--s6);align-items:center}
.maker-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 40%}
.maker-photo figcaption{font-size:var(--note);margin-top:var(--s2)}
.maker-copy h2{margin:var(--s2) 0 var(--s3)}
.maker-copy>p:not(.eyebrow){margin-bottom:var(--s2)}
.signature{display:flex;align-items:center;gap:var(--s2);padding-top:var(--s3);margin-top:var(--s3);border-top:1px solid var(--ink)}
.signature img{width:64px;height:80px;object-fit:cover;object-position:center 20%;border-radius:var(--r1)}
.signature p{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;font-size:var(--note)}
.signature strong{font-size:var(--body)}
.price-section{padding-block:var(--s6);background:var(--white)}
.price-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4)}
.price-heading h2{margin-top:var(--s2)}.price-heading>p{font-size:var(--small)}
.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--ink)}
.course{padding:var(--s3);background:var(--paper);min-width:0}
.course+.course{border-left:1px solid var(--ink)}
.course-featured{background:var(--yellow)}
.course-title{display:flex;flex-direction:column;gap:var(--s2)}
.course-kanji{font-family:var(--serif);font-size:var(--course-name);line-height:1.2}
.course-purpose{font-size:var(--small);margin-top:var(--s2)}
.course-features{list-style:none;padding:0;margin:var(--s3) 0 0;border-top:1px solid var(--ink);font-size:var(--small)}
.course-features li{padding-top:var(--s2)}
.course-consult{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:var(--s3)}
.course-consult p{font-size:var(--small)}
.amount{display:flex;gap:var(--s1);align-items:baseline;margin-top:var(--s3);line-height:1.2}
.amount-number{font-family:var(--sans);font-size:var(--course-price);font-weight:500;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.amount>span:last-child{font-size:var(--body)}.tax{font-size:var(--note);display:block;margin-top:var(--s1)}
.plan-details{padding:var(--s4);background:var(--paper);border:1px solid var(--ink);margin-top:var(--s3)}
.plan-details h3{margin-bottom:var(--s3)}
.plan-details dl>div{display:grid;grid-template-columns:64px 1fr;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--ink)}
.plan-details dl>div:first-child{padding-top:0}
.plan-details dt{font-size:var(--note);padding-top:4px;font-weight:600}
.plan-total{margin-top:var(--s3);font-size:var(--small)}.plan-total strong{font-size:var(--body)}
.conditions{display:grid;grid-template-columns:1fr 3fr;gap:var(--s4);padding-top:var(--s4)}
.conditions>p{font-size:var(--note);font-weight:600}
.conditions ul{margin:0;padding-left:1em;font-size:var(--note)}
.conditions li{margin-bottom:var(--s1)}
.steps-section{padding-block:var(--s6)}
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.steps li{counter-increment:step;border-top:1px solid var(--ink);padding-top:var(--s3)}
.steps li::before{content:"0" counter(step);font-family:var(--serif);font-size:var(--h3);display:block;margin-bottom:var(--s2)}
.steps h3{margin-bottom:var(--s2)}
.questions-section{display:grid;grid-template-columns:1fr 2fr;gap:var(--s4);padding-bottom:var(--s5)}
.questions-section h2{margin-top:var(--s2)}
.questions{border-top:1px solid var(--ink)}
details{border-bottom:1px solid var(--ink)}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-block:var(--s3);font-size:var(--body);font-weight:500;line-height:1.7}
summary::-webkit-details-marker{display:none}
summary>span{font-size:var(--h3);flex-shrink:0}details[open] summary>span{transform:rotate(45deg)}
summary:hover{color:var(--deep)}
details>div{padding-bottom:var(--s3)}
details p{font-size:var(--small)}
.regional{display:grid;grid-template-columns:1fr 2fr;gap:var(--s4);border-top:1px solid var(--ink);padding-block:var(--s4);margin-bottom:var(--s5)}
.regional h3,.regional p{font-size:var(--note)}
.contact{background:var(--yellow);border-top:1px solid var(--ink);padding-block:var(--s6)}
.contact-inner{display:grid;grid-template-columns:1.2fr 1fr;column-gap:var(--s5)}
.contact .eyebrow{grid-column:1/-1;margin-bottom:var(--s3)}
.contact h2{font-size:var(--h1);line-height:1.4;grid-row:2/5}
.contact-inner>p:not(.eyebrow){margin-bottom:var(--s3)}
.contact .button{justify-self:start;margin-bottom:var(--s2)}
.contact-address{font-size:var(--small)}.contact-address span{display:block;font-size:var(--note)}
.contact .note{grid-column:2}
.footer{display:flex;align-items:center;gap:var(--s4);padding-block:var(--s4)}
.footer p,.footer small{font-size:var(--note)}.footer small{margin-left:auto}
@media(max-width:1000px){
  .price-heading{align-items:flex-start;flex-direction:column;gap:var(--s2)}
  .header-note{display:none}.hero{column-gap:var(--s3)}
  .hero h1{font-size:40px}.hero-art{transform:none}.hero-art figcaption{flex-direction:column;gap:var(--s1)}
  .maker-section{gap:var(--s4)}.scene{padding-inline:var(--s2)}
  .deliverables{grid-template-columns:1fr 1fr}.deliverable-title{grid-column:1/-1}
  .course-grid{grid-template-columns:1fr}.course{padding:var(--s3);display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s3)}
  .course+.course{border-left:0;border-top:1px solid var(--ink)}
  .course-title{grid-column:1;grid-row:1}.course-purpose{grid-column:1;grid-row:2}
  .course .amount{grid-column:1;grid-row:3}.course-features{grid-column:2;grid-row:1/4;margin:0;border-top:0}
  .course-features li:first-child{padding-top:0}
  .hero-footer{align-items:flex-start;flex-direction:column;gap:var(--s1)}
  .plan-details{padding:var(--s3)}
  .plan-details dl>div{grid-template-columns:1fr;gap:var(--s1)}
  .contact h2{font-size:48px}
}
@media(max-width:700px){
  :root{--h1:40px;--h2:30px;--h3:22px}
  .shell{width:calc(100% - 48px)}
  .header-inner{min-height:80px;gap:var(--s2)}.brand img{width:120px}.header nav{gap:var(--s2)}.nav-link{display:none}
  .hero{grid-template-columns:1fr;padding-top:var(--s4)}
  .hero h1{font-size:40px}.hero .eyebrow{font-size:var(--note);gap:var(--s1);letter-spacing:0}.short-rule{width:24px}
  .hero-copy{padding-bottom:var(--s4)}.hero-intro{font-size:var(--small)}
  .hero-action{align-items:stretch}.hero-action .button{gap:var(--s2)}.hero-action .note{font-size:var(--note)}
  .art-mat{padding:var(--s1) 0 var(--s3) var(--s1);margin-right:calc(-1 * var(--s3))}
  .art-mat img{height:auto;aspect-ratio:3/2;object-position:center}
  .hero-art figcaption{flex-direction:row;gap:var(--s1)}.hero-art figcaption span:first-child{font-size:var(--note)}
  .hero-footer{margin-top:var(--s3);padding:var(--s3) 0}.hero-footer a{flex-wrap:wrap;column-gap:var(--s1);row-gap:0}.hero-footer p{font-size:var(--note)}.hero-footer p span{margin-inline:0}
  .film-section,.price-section,.steps-section{padding-block:var(--s5)}
  .section-opening{grid-template-columns:1fr;gap:var(--s2);margin-bottom:var(--s3)}.section-opening>.eyebrow{padding:0}
  .opening-copy{margin-top:var(--s2)}.opening-copy br{display:none}
  .film-strip{grid-template-columns:1fr}.scene,.scene:first-child,.scene:last-child{padding:var(--s3) 0;border-right:0}.scene+.scene{border-top:1px solid var(--ink)}
  .scene-top{margin-bottom:var(--s2)}.scene h3{margin-bottom:var(--s1)}
  .deliverables{grid-template-columns:1fr;gap:var(--s3);padding-top:var(--s3)}.deliverable-title{grid-column:auto}
  .maker-section{grid-template-columns:1fr;padding-block:var(--s5);gap:var(--s4)}
  .maker-photo{max-width:100%;width:100%}.maker-photo img{aspect-ratio:1/1;object-position:center 35%}
  .maker-copy h2{margin-top:var(--s2)}.signature{margin-top:var(--s3)}
  .price-heading{align-items:flex-start;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3)}
  .course{display:block}.course-title{flex-direction:row;align-items:center;gap:var(--s2)}
  .course-title>span:last-child{font-size:var(--body)}
  .course-features{margin-top:var(--s3);border-top:1px solid var(--ink)}.course-features li:first-child{padding-top:var(--s2)}
  .course-consult{flex-direction:column;align-items:stretch}.course-consult .button{gap:var(--s2)}
  .plan-details dl>div{grid-template-columns:40px 1fr;gap:var(--s2)}.plan-details dd{font-size:var(--small)}.plan-details dt{padding-top:0}
  .conditions{grid-template-columns:1fr;gap:var(--s2)}
  .steps{grid-template-columns:1fr;gap:var(--s3)}.steps li{padding-top:var(--s2)}.steps li::before{float:left;margin:0 var(--s2) 0 0}.steps h3{margin-bottom:var(--s2)}.steps p{clear:both}
  .questions-section{grid-template-columns:1fr;gap:var(--s3)}.questions-section h2{margin-top:var(--s2)}
  summary{font-size:var(--small);padding-block:var(--s2)}
  .regional{grid-template-columns:1fr;gap:var(--s2);margin-bottom:var(--s4)}
  .contact{padding-block:var(--s5)}.contact-inner{display:block}.contact .eyebrow{margin-bottom:var(--s2)}.contact h2{font-size:40px;margin-bottom:var(--s3)}.contact .button{width:100%}.contact .note{margin-bottom:0!important}
  .footer{flex-wrap:wrap;gap:var(--s2);padding-block:var(--s3)}.footer p{width:100%}.footer small{margin-left:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}