/* お手本：PRONI（https://www.proni.co.jp/）の文法を実測して写す。DESIGN-46 */
@font-face{font-family:"YuGothicM";src:local("Yu Gothic Medium"),local("YuGothic-Medium");font-weight:400 500}
@font-face{font-family:"YuGothicM";src:local("Yu Gothic Bold"),local("YuGothic-Bold");font-weight:600 700}
:root{
  --ink:#1a1a1a;--ink-70:rgba(26,26,26,.7);--gray:#f6f6f6;--line:#e6e6e6;--white:#fff;
  --brand:#1650b8;--brand-dk:#0f3f97;--label:#12a497;--o:#12a497;--o-t:#0b7d72;
  --err:#c62828;--muted:#6b7280;--dash:#9aa1ad;--field-line:#8a8a8a;
  --font:"Hiragino Sans","Hiragino Kaku Gothic ProN","YuGothicM","Yu Gothic","Meiryo",system-ui,sans-serif;
  --latin:"Helvetica Neue",Arial,"Hiragino Sans",sans-serif;
  /* 余白：左に広いレール（PRONI 1440px で 260px）、右は 64px */
  --pl:clamp(24px,18vw,260px);--pr:clamp(24px,4.5vw,64px);
  --sec-t:clamp(72px,8.5vw,120px);--sec-b:clamp(120px,16vw,240px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.05em;line-break:strict;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.ft :focus-visible,.arc :focus-visible,.zone :focus-visible{outline-color:#fff}
:root{--cw:1100px}
.c{padding-left:var(--pr);padding-right:var(--pr);max-width:calc(var(--cw) + var(--pr) * 2);margin:0 auto}
.nb{display:inline-block}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:40px}
.skip:focus{top:12px}

/* ヘッダー：灰色の丸いナビ */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;padding:16px max(var(--pr),calc((100vw - var(--cw)) / 2)) 0;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.hd>*{pointer-events:auto}
.logo{display:flex;align-items:center;gap:10px;height:58px;padding:0 22px;margin-left:-22px;border-radius:50px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.logo img{height:26px;width:auto}
.gnav{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px;border-radius:50px}
.gnav a{display:inline-flex;align-items:center;height:46px;padding:0 18px;border-radius:50px;background:var(--gray);font-size:12px;font-weight:600;letter-spacing:.04em;transition:background .3s,color .3s}
.gnav a:hover{background:var(--ink);color:#fff}
.gnav a.cta{background:var(--brand);color:#fff;padding:0 22px}
.gnav a.cta:hover{background:var(--brand-dk)}
@media (max-width:1100px){.gnav a:not(.cta){display:none}.gnav{background:none;padding:0;gap:8px}}

/* ページの先頭へ */
.pagetop{position:fixed;right:var(--pr);bottom:24px;z-index:45;width:56px;height:56px;border-radius:50%;background:var(--o);box-shadow:0 6px 20px rgba(0,0,0,.12);display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s,transform .4s}
.pagetop{visibility:hidden;transition:opacity .4s,transform .4s,visibility 0s .4s}
.pagetop.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.pagetop svg{width:20px;height:20px;color:#fff}
/* 左のレール：丸いボタンと縦の Scroll */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--pl);pointer-events:none;z-index:40}
.rail .dot{position:absolute;left:clamp(24px,5.8vw,84px);top:50%;margin-top:-32px;width:64px;height:64px;border-radius:50%;background:var(--o);display:grid;place-items:center;pointer-events:auto;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.rail .dot:hover{transform:scale(1.08)}
.rail .dot svg{width:22px;height:22px;color:#fff}
.rail .scroll{position:absolute;left:clamp(24px,5.8vw,84px);bottom:40px;writing-mode:vertical-rl;font-family:var(--latin);font-size:14px;letter-spacing:.05em;display:flex;align-items:center;gap:12px}
.rail .scroll::after{content:"";width:1px;height:56px;background:var(--ink)}
@media (max-width:1400px){.rail{display:none}}
@media (max-width:760px){:root{--pl:20px;--pr:20px}}

/* 丸いボタン（灰色＋主色の丸い矢印） */
.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding:0 14px 0 38px;border-radius:40px;background:#fff;box-shadow:inset 0 0 0 1px #d9d9d9;font-size:16px;font-weight:600;letter-spacing:.04em;transition:background .3s}
.pill:hover{box-shadow:inset 0 0 0 1px var(--o)}
.pill i{flex:none;width:46px;height:46px;border-radius:50%;background:var(--o);display:grid;place-items:center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pill:hover i{transform:translateX(4px)}
.pill i svg{width:16px;height:16px;color:#fff}
.a-r{transform:rotate(90deg)}
.a-d{transform:rotate(180deg)}
.pill.on-brand{background:#fff;box-shadow:none}
.pill.fill{background:var(--brand);color:#fff;box-shadow:none}.pill.fill:hover{background:var(--brand-dk);box-shadow:none}
@media (max-width:600px){.pill{width:100%;min-height:68px;padding-left:24px;font-size:15px}}

/* FV：左上に見出し、下を主色の弧 */
.fv{position:relative;padding-top:clamp(120px,11.5vw,165px);overflow:hidden}
.fv .arc{z-index:1}
.fv h1{font-size:clamp(34px,4.4vw,64px);font-weight:700;line-height:1.35;letter-spacing:.04em}
.fv h1 span{display:block}.fv h1 .em{color:var(--brand)}

.fv .sub{margin-top:clamp(18px,2vw,28px);font-size:clamp(18px,1.9vw,26px);font-weight:700;letter-spacing:.06em}
.fvnext .fvnext-h{font-size:clamp(22px,2.4vw,34px);font-weight:700;line-height:1.6;letter-spacing:.04em}
.fvnext .fvnext-b{margin-top:clamp(24px,2.6vw,36px);max-width:46em}
.fvnext .fvnext-b p+p{margin-top:1.2em}
@media (max-width:760px){.fvnext .fvnext-b br{display:none}}
.fv .scope{margin-top:20px;font-size:14px;font-weight:700;color:var(--o-t);letter-spacing:.08em}
.fv-mark{position:absolute;z-index:0;right:-14vw;top:clamp(40px,4vw,80px);width:max(92vw,900px);opacity:.09;pointer-events:none}
.fv-mark svg{width:100%;height:auto}
.fv .c{position:relative;z-index:1}
@media (max-width:760px){.fv-mark{width:170vw;right:-60vw;top:60px;opacity:.08}}
.arc{position:relative;margin-top:clamp(56px,6vw,88px);height:clamp(260px,22vw,320px)}
.arc::before{content:"";position:absolute;left:-30%;right:-30%;top:0;height:200%;border-radius:50% 50% 0 0/clamp(80px,12vw,180px) clamp(80px,12vw,180px) 0 0;background:var(--brand)}
.arc .in{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;padding:clamp(40px,5vw,72px) max(var(--pr),calc((100vw - var(--cw)) / 2)) 0}
.arc .in{z-index:2}
.arc .btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-start;width:100%}
.pill.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}.pill.ghost:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px #fff}
/* セクションの頭：2行の特大（2行目だけ主色）＋右に日本語の札 */
.sec{position:relative;padding:var(--sec-t) 0 var(--sec-b)}
.sec.gray{background:var(--gray)}
.big{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(48px,5.5vw,80px)}
.big h2{font-family:var(--latin);font-size:clamp(52px,6.7vw,96px);font-weight:600;line-height:.83;letter-spacing:-.025em}
.big h2 span{display:block}.big h2 span+span{color:var(--brand)}
.big h2.jp{font-family:var(--font);font-size:clamp(36px,4.2vw,64px);font-weight:700;line-height:1.3;letter-spacing:.04em}
.big .ja::before{content:"";display:inline-block;width:12px;height:12px;margin-right:10px;background:var(--brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M2 112 L50 22 L98 112%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%2714%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M2 112 L50 22 L98 112%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%2714%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(90deg)}
.big .ja{font-size:16px;font-weight:700;letter-spacing:.05em;white-space:nowrap;padding-bottom:6px}
.lede{font-size:clamp(24px,2.6vw,40px);font-weight:700;line-height:1.4;letter-spacing:.04em;margin-bottom:clamp(32px,4vw,56px)}
.txt{max-width:40em}
.txt+.txt{margin-top:1em}
@media (max-width:760px){.big{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:32px}.big .ja{padding:0}.big h2{font-size:60px}.big h2.jp{font-size:32px}.lede{font-size:19px;line-height:1.7}.lede br{display:none}}

/* 01 止まるところ：2列の行 */

/* 02 断言（止まるところの結論） */
.arrow{display:flex;flex-direction:column;align-items:center;color:var(--brand);margin:clamp(48px,5vw,72px) 0}
.arrow svg{width:44px;height:44px;margin-top:-22px}
.arrow svg:first-child{opacity:.25;margin-top:0}.arrow svg:nth-child(2){opacity:.55}
#stops .arrow{margin:0 0 clamp(40px,5vw,64px)}
/* Common Issues の代わり：主張の1文だけを大きく見せる */
.claim{position:relative;isolation:isolate;padding-block:clamp(8px,2vw,24px)}
.claim-mark{position:absolute;z-index:-1;right:0;top:50%;width:clamp(180px,30vw,420px);height:clamp(140px,23.4vw,328px);transform:translateY(-50%);color:var(--o);opacity:.16}
.claim h2{font-weight:700;letter-spacing:.04em}
.claim .l1{display:block;font-size:clamp(20px,2.4vw,34px);line-height:1.5;color:var(--ink-70)}
.claim .l2{display:block;margin-top:clamp(8px,1.2vw,16px);font-size:clamp(34px,6vw,84px);line-height:1.3;letter-spacing:.02em}
.claim .l2 .hl{color:var(--brand);background:linear-gradient(transparent 70%,rgba(18,164,151,.3) 70%,rgba(18,164,151,.3) 94%,transparent 94%)}
.claim-next{margin-top:clamp(40px,5vw,72px);display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.claim-next .cn-h{font-size:clamp(17px,1.6vw,22px);font-weight:700;letter-spacing:.06em}

/* 03 できること：左に文、右に丸い写真（PRONI のサービス紹介） */





.person .ph .clip{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}




/* 04 費用：灰色の板を2枚 */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.plan{background:#fff;border-radius:24px;padding:clamp(28px,3.4vw,48px)}
.sec.gray .plan{background:#fff}
.plan .tag{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--o-t);padding:4px 12px;border-radius:20px;margin-bottom:16px}
.plan h3{font-size:24px;font-weight:700}
.plan .fit{color:var(--ink-70);font-size:14px;margin-top:4px}
.plan .price{font-family:var(--latin);font-size:clamp(56px,5.6vw,80px);font-weight:600;line-height:1;letter-spacing:-.02em;margin:24px 0 24px}
.plan .price small{font-family:var(--font);font-size:.3em;font-weight:700;letter-spacing:.04em;margin-left:.15em}
.plan .price .per{display:block;font-family:var(--font);font-size:14px;font-weight:700;color:var(--ink-70);letter-spacing:.05em;margin-bottom:8px}
.plan.main{box-shadow:inset 0 0 0 2px var(--brand)}
.slots-cap{font-size:13px;font-weight:700;color:var(--ink-70);letter-spacing:.06em;margin-bottom:10px}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.slot{min-height:92px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;border-radius:14px;font-size:13px;line-height:1.5}
.slot b{font-size:16px;letter-spacing:.06em}
.slot.on{background:var(--brand);color:#fff}.slot.on span{color:rgba(255,255,255,.85)}
.slot.off{border:1.5px dashed var(--dash);color:var(--muted)}.slot.off span{font-weight:700;letter-spacing:.08em}
@media (max-width:600px){.slot{min-height:0;padding:10px;font-size:11px}.slot b{font-size:13px;letter-spacing:.02em}.plan .price{font-size:52px}}
@media (max-width:860px){.plan .tag[aria-hidden]{display:none}}
.plan .make{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-70)}
.plan dl{display:grid;grid-template-columns:auto 1fr;font-size:15px;border-top:1px solid var(--line)}
.plan dt,.plan dd{padding:14px 0;border-bottom:1px solid var(--line)}
.plan dt{color:var(--ink-70)}.plan dd{text-align:right;font-weight:700}

.fine{margin-top:28px;font-size:14px;color:var(--ink-70);max-width:60em}
.fine p+p{margin-top:.4em}
@media (max-width:860px){.plans{grid-template-columns:1fr}}

/* 05・09 行の一覧 */
.rows li{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(16px,4vw,64px);padding:32px 0;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows h3{font-size:20px;font-weight:700;line-height:1.6}
.rows p{color:var(--ink-70)}
@media (max-width:760px){.rows li{grid-template-columns:1fr;gap:8px}}

/* 06 進め方：無料の区画と有料の区画 */
.zone{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;border-radius:32px;padding:clamp(24px,3vw,40px)}
.zone.free{background:var(--brand);color:#fff}
.zone.paid{background:var(--o-t);color:#fff}
.zh .en{display:block;font-family:var(--latin);font-size:clamp(40px,4vw,56px);font-weight:600;line-height:1;letter-spacing:-.02em;color:rgba(255,255,255,.45)}
.zh b{display:block;font-size:24px;font-weight:700;margin-top:10px}
.zh .note{display:block;font-size:13px;line-height:1.7;margin-top:10px;color:rgba(255,255,255,.88)}
.steps{display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr;align-items:stretch;gap:12px}
.steps li:not(.sep){flex:1;background:#fff;border-radius:24px;padding:28px 24px 30px;color:var(--ink)}
.steps .sep{flex:none;display:flex;align-items:center;color:#fff}
.steps .sep svg{width:22px;height:22px}
.steps .n{display:block;font-family:var(--latin);font-size:44px;font-weight:600;line-height:1;color:var(--brand);letter-spacing:-.02em}
.zone.paid .steps .n{color:var(--o-t)}
.steps h3{font-size:19px;font-weight:700;margin:16px 0 8px;line-height:1.5}
.steps p{font-size:14px;color:var(--ink-70);line-height:1.8}
.zone+.zone{margin-top:16px}
@media (max-width:1100px){.zone{grid-template-columns:1fr}.zh{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}.zh b,.zh .note{margin-top:0}.zh .note br{display:none}}
@media (max-width:760px){.steps{display:flex;flex-direction:column}.steps .sep{justify-content:center}.steps .sep svg{transform:rotate(180deg)}}

/* 07 これまで：横に流れるカード（PRONI の会社カードの文法） */
#works{padding-bottom:calc(var(--sec-b) - 48px)}
.marquee{overflow:hidden;padding:16px 0 48px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;align-items:stretch;gap:24px;width:max-content;animation:marquee 70s linear infinite}
.marquee:hover .track,.marquee:focus-within .track,.marquee.paused .track{animation-play-state:paused}

.mq-btn{width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:0;background:var(--gray);color:var(--ink);cursor:pointer}
.mq-btn svg{width:16px;height:16px;fill:currentColor}

.mq-btn:hover{background:#ececec}
@keyframes marquee{to{transform:translateX(calc(-50% - 12px))}}
.wc{flex:none;width:360px;display:flex;flex-direction:column;background:var(--gray);border-radius:16px;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.wc:hover{transform:translateY(-6px)}
.wc figure{position:relative;aspect-ratio:16/10;overflow:hidden}
.wc figure .inds{position:absolute;left:12px;right:12px;bottom:12px}
.wc .ind.kind{background:var(--o-t);color:#fff}
.wc img{width:100%;height:100%;object-fit:cover}
.wb{padding:22px 24px 26px}
.works .inds,.wc .inds{display:flex;flex-wrap:wrap;gap:6px}
.wc .ind{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;padding:4px 12px;border-radius:20px;background:#fff}
.wc .ind.do{background:var(--brand);color:#fff}
.wc h3{font-size:18px;font-weight:700;line-height:1.6;margin:0 0 8px}
.wc p:not(.inds){font-size:14px;color:var(--ink-70);line-height:1.8}
.wc p.role{font-size:12px;line-height:1.6;color:var(--ink-70);margin:0 0 8px}
.wc p.role b{font-weight:700;color:var(--ink);margin-right:.25em}

@media (max-width:760px){.wc{width:290px}}
@media (prefers-reduced-motion:reduce){.track{animation:none}.marquee{overflow-x:auto;-webkit-mask:none;mask:none}.wc[aria-hidden]{display:none}}

/* 08 担当者 */
.person{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.person .ph{aspect-ratio:1;border-radius:50%;position:relative;--rw:clamp(10px,1.2vw,16px);margin:var(--rw)}
.person .ph img{width:100%;height:100%;object-fit:cover}

.person .nm{margin-top:28px;font-size:28px;font-weight:700;letter-spacing:.1em}
.person .kana{font-size:13px;color:var(--ink-70)}
.person .prof{margin-top:20px;font-size:14px;color:var(--ink-70)}
.person .did{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.person .did li{font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px;background:var(--gray)}
.sec.gray .person .did li{background:#fff}
.person .q{font-size:clamp(24px,2.6vw,40px);font-weight:700;line-height:1.4;letter-spacing:.04em;margin-bottom:clamp(32px,4vw,56px)}
.person .body h3{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:.04em;margin:0 0 8px}
.person .body h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--o);flex:none}
.person .body p{color:var(--ink-70)}
.person .body p+h3{margin-top:32px}
.person .body p+p{margin-top:1.2em}
@media (max-width:860px){.person{grid-template-columns:1fr}.person .ph{width:160px;--rw:8px;margin:8px auto}}

/* 10 FAQ */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;gap:20px;align-items:center;padding:28px 0;cursor:pointer;font-size:18px;font-weight:700;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq .q{flex:none;font-family:var(--latin);font-size:24px;font-weight:600;color:var(--brand);width:24px}
.faq summary span:nth-child(2){flex:1}
.faq .pm{flex:none;width:40px;height:40px;border-radius:50%;background:var(--o);position:relative}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:13px;right:13px;top:19px;height:2px;background:#fff;transition:transform .3s}
.faq .pm::after{transform:rotate(90deg)}.faq details[open] .pm::after{transform:rotate(0)}
.faq .a{padding:0 64px 28px 44px;color:var(--ink-70)}
@media (max-width:760px){.faq summary{font-size:16px;gap:14px}.faq .a{padding:0 0 24px 38px}}

/* 11 相談する */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(32px,6vw,96px);align-items:start}
.form{display:grid;gap:24px}
.f{display:grid;gap:10px}
.f label{font-size:14px;font-weight:700;display:flex;gap:10px;align-items:center}
.req,.opt{font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px}
.req{background:var(--brand);color:#fff}.opt{background:var(--gray);color:var(--ink-70)}
.sec.gray .opt{background:#fff}
.f input,.f select,.f textarea{width:100%;font-size:16px;padding:18px 20px;border:1px solid var(--field-line);border-radius:16px;background:var(--gray);line-height:1.6}
.sec.gray .f input,.sec.gray .f select,.sec.gray .f textarea{background:#fff}
.f textarea{min-height:180px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.f [aria-invalid=true]{border-color:var(--err)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.agree{font-size:13px;color:var(--ink-70)}.agree a{text-decoration:underline}
.form .pill{justify-self:start;border:0;cursor:pointer}
.msg{font-size:14px;min-height:1.5em}.msg.ng{color:var(--err)}.msg.ok{color:var(--brand)}
.before{background:var(--brand);color:#fff;border-radius:24px;padding:32px}
.before h3{font-size:16px;font-weight:700;margin-bottom:12px}
.before li{padding:12px 0;border-top:1px solid rgba(255,255,255,.3);font-size:15px;color:#fff}

@media (max-width:900px){.contact{grid-template-columns:1fr}.form .pill{justify-self:stretch}}

/* 12 会社概要 */
.co{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.co dl{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line)}
.co dt,.co dd{padding:20px 0;border-bottom:1px solid var(--line);font-size:15px}
.co dt{font-weight:700;padding-right:32px;white-space:nowrap}
.co dd{color:var(--ink-70)}.co dd a{text-decoration:underline;display:inline-block;padding:13px 0;margin:-13px 0}
.pp h3{font-size:18px;font-weight:700;margin-bottom:12px}
.pp p{font-size:14px;color:var(--ink-70)}.pp p+p{margin-top:1em}
@media (max-width:860px){.co{grid-template-columns:1fr}}

/* フッター：主色の地 */
.ft{background:var(--brand);color:#fff;padding:clamp(72px,8vw,120px) 0 40px}
.ft .top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.ft .msg2{font-size:clamp(22px,2.2vw,32px);font-weight:700;line-height:1.5}
.ft .pill{margin-top:32px;color:var(--ink)}
.ft nav{display:flex;flex-wrap:wrap;gap:0 28px;font-size:14px;font-weight:600;max-width:520px}
.ft nav a{padding:10px 0;min-width:44px;opacity:.85}.ft nav a:hover{opacity:1}
.ft .bot{margin-top:clamp(56px,6vw,96px);padding-top:24px;border-top:1px solid rgba(255,255,255,.3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;opacity:.85}
.ft .bot img{height:22px;width:auto;filter:brightness(0) invert(1)}


/* ===== 動き ===== */
/* a 幕 */
.intro{position:fixed;inset:0;z-index:200;background:#fff;display:none;place-items:center}
.js-intro .intro{display:grid}
.intro svg{width:min(44vw,360px);height:auto;overflow:visible}
.intro .d{stroke-dasharray:1;stroke-dashoffset:1}
.intro.go .d{animation:draw .9s cubic-bezier(.45,.05,.55,.95) forwards}
.intro.go .d1{animation-duration:1s;animation-timing-function:cubic-bezier(.5,0,.8,.6)}
.intro.go .d2{animation-delay:.95s;animation-duration:.8s;animation-timing-function:linear}
.intro.go .d3{animation-delay:1.7s;animation-duration:.35s;animation-timing-function:cubic-bezier(.2,.6,.3,1)}
.intro .st{opacity:0}
.intro.go .st{animation:st-in .2s linear 2.05s forwards}
@keyframes st-in{to{opacity:1}}
.intro.up{transform:translateY(-100%);transition:transform .8s cubic-bezier(.7,0,.2,1)}
@keyframes draw{to{stroke-dashoffset:0}}
/* b 見出しの2行目が下から */
.js .big h2 span+span{display:block;clip-path:inset(0 0 100% 0);transform:translateY(40%);transition:clip-path .9s cubic-bezier(.2,.7,.2,1) .15s,transform .9s cubic-bezier(.2,.7,.2,1) .15s}
.js .big.in h2 span+span{clip-path:inset(0 0 -10% 0);transform:none}
/* c △が上から順に灯る（繰り返し・ゆっくり） */
.js .arrow svg,.js .arrow svg:first-child,.js .arrow svg:nth-child(2){opacity:.12;transform:rotate(180deg)}
.js .arrow.in svg{animation:chevflow 2.8s ease-in-out infinite both}
.js .arrow.in svg:nth-child(2){animation-delay:.45s}
.js .arrow.in svg:nth-child(3){animation-delay:.9s}
@keyframes chevflow{0%,100%{opacity:.12}30%{opacity:1}60%{opacity:.12}}
@media (prefers-reduced-motion:reduce){.js .arrow.in svg{animation:none;opacity:1}}
/* d 進め方：△が落ちて有料が開く */
.js .zone.paid.rv{transform:translateY(24px) scale(.98);transition-delay:.35s}
.js .zone.paid.rv.in{transform:none}
/* e 写真の輪が円を描いて閉じる */
@property --ring{syntax:"<angle>";inherits:false;initial-value:0deg}
.ringed{position:relative}
.ringed::after{content:"";position:absolute;inset:calc(var(--rw,14px) * -1);border-radius:50%;background:conic-gradient(var(--o) var(--ring),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw,14px)),#000 calc(100% - var(--rw,14px)));mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw,14px)),#000 calc(100% - var(--rw,14px)));transition:--ring 1.4s cubic-bezier(.4,0,.2,1) .2s;pointer-events:none}
.ringed.in::after,html:not(.js) .ringed::after{--ring:360deg}
@media (prefers-reduced-motion:reduce){.intro{display:none!important}.ringed::after{--ring:360deg;transition:none}.js .big h2 span+span{clip-path:none;transform:none}.js .arrow svg{opacity:1!important}}
/* 現れ方・視差 */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none;transition:none}[data-px]{transform:none!important}}
@media print{html{-webkit-print-color-adjust:exact;print-color-adjust:exact}.js .rv{opacity:1!important;transform:none!important}.hd,.rail,.skip,.pagetop,.intro{display:none!important}.js .big h2 span+span{clip-path:none!important;transform:none!important}.ringed::after{--ring:360deg!important;transition:none!important}.marquee{-webkit-mask:none;mask:none}.track{animation:none!important;flex-wrap:wrap;width:auto}.wc[aria-hidden]{display:none}}
/* 文言の出どころ：URL に ?review があるときだけ色を付ける（claude-new＝Claude が書き直した／claude-fix＝原稿・本人の文を辞書に沿って最小限だけ直した／claude-kept＝Claude の文を残した） */
.review [data-src="claude-new"]{background:#fff3a3;box-shadow:0 0 0 3px #fff3a3;color:#1a1a1a}
.review [data-src="claude-fix"]{background:#d6ecff;box-shadow:0 0 0 3px #d6ecff;color:#1a1a1a}
.review [data-src="claude-kept"]{outline:2px dashed #e0a000;outline-offset:3px}

.works-grid{max-width:var(--cw);margin:0 auto;padding:8px var(--pr) 0;box-sizing:content-box}
.works-grid .track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;width:auto;animation:none;transform:none}
.works-grid .wc{width:auto}
.wc-tg{all:unset;display:block;cursor:default}
@media (max-width:760px){
 .works-grid .track{grid-template-columns:1fr;gap:12px}
 .works-grid .wc{border-radius:16px}
 .works-grid .wc:not(.open) figure{aspect-ratio:auto;overflow:visible}
 .works-grid .wc:not(.open) figure img{display:none}
 .works-grid .wc:not(.open) figure .inds{position:static;padding:16px 18px 0}
 .works-grid .wc:not(.open) .wb{padding-top:10px}
 .works-grid .wb{padding:16px 18px}
 .wc-tg{cursor:pointer;position:relative;padding-right:32px}
 .wc-tg::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
 .wc.open .wc-tg::after{transform:translateY(-30%) rotate(-135deg)}
 .works-grid .wc h3{margin:0;font-size:16px}
 .wc-body{display:none;margin-top:12px}
 .wc.open .wc-body{display:block}
 .wc-tg:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
}

/* サービス：決める・作る・まわす（1行ずつ）と4つの領域 */
.steps3{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.steps3 li{display:flex;gap:14px;align-items:flex-start}
.steps3 .sn{flex:none;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center}
.steps3 h3{font-size:18px;font-weight:700;margin:6px 0 4px}.steps3 p{font-size:14px;line-height:1.8;color:var(--ink-70)}
.areas{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.area{background:var(--gray);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column}
.area h3{font-size:18px;font-weight:700;color:var(--brand);letter-spacing:.04em;margin:0 0 12px}
.area ul{list-style:none;margin:0;padding:0}.area li{font-size:14px;line-height:1.7;padding:4px 0 4px 15px;position:relative}
.area li::before{content:"";position:absolute;left:0;top:.95em;width:5px;height:5px;border-radius:50%;background:var(--o)}
.area-note{font-size:12px;line-height:1.7;color:var(--ink-70);margin-top:12px}
.area .lnk{margin-top:auto;padding-top:16px}
/* 文字リンク：△の向きで行き先を分ける（右＝別ページ、下＝ページ内）。トンマナ「矢印の向き」 */
.lnk{display:inline-flex;align-items:center;min-height:44px;gap:8px;font-size:13px;font-weight:700;color:var(--brand);text-decoration:none;letter-spacing:.06em}
.lnk svg{width:12px;height:12px;flex:none}.lnk-down svg{transform:rotate(180deg)}.lnk-out svg{transform:rotate(90deg)}
.lnk:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.areas{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.steps3{grid-template-columns:1fr;gap:16px}}
@media (max-width:560px){.areas{grid-template-columns:1fr}}

/* FV：「任せる。」を大きく、緑の下線は「任せる」だけ（DESIGN-50） */
.fv h1 .em{font-size:1.45em;line-height:1.15;display:block}
.fv h1 .em .ul{display:inline;background:linear-gradient(transparent 72%,rgba(18,164,151,.3) 72%,rgba(18,164,151,.3) 94%,transparent 94%)}
/* サービス：リードの右に決める・作る・まわすを縦に並べる（DESIGN-50） */
#service .c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:64px}
#service .big,#service .areas{grid-column:1/-1}
#service .lede{grid-column:1;align-self:start}
#service .steps3{grid-column:2;grid-template-columns:1fr;gap:18px;margin-top:0}
@media (max-width:760px){#service .c{display:block}#service .steps3{margin-top:24px}}

/* 押したときの反応（点検 #5。スマホでは hover が出ないので :active で返す） */
.pill:active,.gnav a:active,.rail .dot:active,.pagetop:active{filter:brightness(.9)}
.lnk:active,.ft nav a:active,.co dd a:active{opacity:.6}
.faq summary:active,.wc-tg:active{background:rgba(26,26,26,.04)}
/* フォームの欄ごとのエラー（点検 #7） */
.ferr{margin-top:6px;font-size:13px;color:var(--err)}
.ferr:empty{display:none}

/* 相談するの節：予約ページへの入口（2026-10-13） */
.before .book{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.5)}
.before .book p{font-size:14px;color:rgba(255,255,255,.88);margin-bottom:16px}
.before .book .pill{width:100%;min-height:64px;padding-left:28px;color:var(--ink)}

/* フォームの Turnstile（人か機械かの確かめ。2026-10-13） */
.form .cf-turnstile{margin:8px 0 16px;min-height:65px}

/* 下層ページの型（2026-10-14。部品.md「下層ページの型」）
   頭：パンくず → 英字の大見出し（.big をそのまま使う）→ リード。本文：.rows と同じ2列（左に見出し、右に中身） */
.page-head{padding-top:calc(var(--sec-t) + 72px)}
.page-head .big{margin-bottom:clamp(32px,4vw,56px)}
.crumbs{display:flex;flex-wrap:wrap;gap:0 10px;font-size:12px;font-weight:600;color:var(--ink-70);margin-bottom:clamp(24px,3vw,40px)}
.crumbs a{color:var(--brand)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--dash)}
.page-lead{max-width:44em;color:var(--ink-70)}
.page-lead p+p{margin-top:1em}
.doc{margin-top:clamp(48px,6vw,88px)}
.doc>section{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(16px,4vw,64px);padding:40px 0;border-top:1px solid var(--line)}
.doc>section:last-of-type{border-bottom:1px solid var(--line)}
.doc h2{font-size:20px;font-weight:700;line-height:1.6;letter-spacing:.04em}
.doc .body{color:var(--ink-70);min-width:0}
.doc .body>*+*{margin-top:1em}
.doc h3{position:relative;padding-left:18px;font-size:16px;font-weight:700;color:var(--ink);margin-top:1.8em}
.doc h3:first-child{margin-top:0}
.doc h3::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--o)}
.doc ul li,.doc ol li{position:relative;padding-left:18px}
.doc ul li::before{content:"";position:absolute;left:2px;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--o)}
.doc ol{counter-reset:doc}
.doc ol li{counter-increment:doc;padding-left:2em}
.doc ol li::before{content:"（" counter(doc) "）";position:absolute;left:-.4em;color:var(--ink)}
.doc dl{display:grid;grid-template-columns:8em minmax(0,1fr);gap:8px 20px;padding:16px 20px;background:var(--gray);border-radius:12px}
.doc dt{font-weight:700;color:var(--ink);font-size:14px}
.doc dd{font-size:14px}
.doc a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;overflow-wrap:break-word}
.doc-date{margin-top:32px;font-size:14px;color:var(--ink-70);text-align:right}
@media (max-width:760px){.page-head{padding-top:calc(var(--sec-t) + 40px)}.doc>section{grid-template-columns:1fr;gap:12px;padding:32px 0}.doc dl{grid-template-columns:1fr;gap:2px}.doc dd+dt{margin-top:10px}}