/* 図解・あしらい・動き（2026-10-24 梅村「図解とあしらい、エフェクトが足りない」）。editorial.css の後に読む */

/* 四隅のトンボ（図のまわり） */
[data-diag]{position:relative}
.crop{position:absolute;width:18px;height:18px;border:0 solid var(--c-ink);pointer-events:none}
.crop:nth-of-type(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.crop:nth-of-type(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.crop:nth-of-type(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.crop:nth-of-type(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.section--ai .crop{border-color:rgba(255,255,255,.7)}

/* 線と丸の図（流れ・相談の流れ） */
.ldiag{margin-block:2rem 2.5rem;padding:2.5rem clamp(1rem,3vw,2.5rem) 2rem}
.ldiag__list{position:relative;display:grid;gap:2rem}
.ldiag__list::before{content:"";position:absolute;left:35px;top:36px;bottom:36px;width:1px;background:var(--c-ink);transform-origin:top;transform:scaleY(var(--draw,1));transition:transform 1.2s var(--ease) .2s}
.ldiag__item{position:relative;display:grid;grid-template-columns:72px 1fr;column-gap:1.25rem;align-items:start}
.ldiag__node{position:relative;z-index:1;grid-row:span 2;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:1px solid var(--c-ink);background:var(--c-paper);color:var(--c-ink);transition:transform .6s cubic-bezier(.3,1.6,.5,1),opacity .4s ease}
.ldiag__node svg{width:34px;height:34px}
.ldiag__node--num{font:800 1.75rem/1 var(--ff-head);color:var(--c-ai)}
.ldiag__item--goal .ldiag__node{background:var(--c-ai);border-color:var(--c-ai);color:#fff}
.ldiag__title{font:800 var(--fs-h3)/1.5 var(--ff-head);color:var(--c-ink);padding-top:.9rem;word-break:auto-phrase;text-wrap:balance}
.ldiag__item p{margin-top:.35rem;line-height:1.85;word-break:auto-phrase;text-wrap:pretty}
@media (min-width:768px){
  .ldiag__list{grid-template-columns:repeat(3,1fr);gap:2.5rem}
  .ldiag__list::before{left:calc(100% / 6);right:calc(100% / 6);top:36px;bottom:auto;width:auto;height:1px;transform-origin:left;transform:scaleX(var(--draw,1))}
  .ldiag__item{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ldiag__node{grid-row:auto;margin-bottom:.25rem}
  .ldiag__title{padding-top:.5rem}
}
.section--ai .ldiag__list::before{background:rgba(255,255,255,.75)}
.section--ai .ldiag__node{background:var(--c-ai);border-color:#fff;color:#fff}
.section--ai .ldiag__item--goal .ldiag__node{background:#fff;color:var(--c-ai)}
.section--ai .ldiag__title{color:#fff}
/* 見えたときに線が引かれ、丸が順に立ち上がる */
.js [data-diag] .ldiag__list{--draw:0}
.js [data-diag].in .ldiag__list{--draw:1}
.js [data-diag] .ldiag__node{opacity:0;transform:scale(.6)}
.js [data-diag].in .ldiag__node{opacity:1;transform:none}
.js [data-diag].in .ldiag__item:nth-child(2) .ldiag__node{transition-delay:.35s}
.js [data-diag].in .ldiag__item:nth-child(3) .ldiag__node{transition-delay:.7s}

/* 頼み方の図: 1本の線に3つ（左ほど自分で、右ほど任せる）。無料面談は下に1行 */
.wmap{margin:1rem 0 2.5rem;padding:2.5rem clamp(1rem,3vw,2.5rem) 2rem}
.wmap a{text-decoration:none;color:var(--c-ink)}
.wmap b{display:block;margin-top:.5rem;font:800 1.0625rem/1.5 var(--ff-head);word-break:auto-phrase;text-wrap:balance}
.wmap__axis{display:flex;justify-content:space-between;align-items:center;gap:1rem;font:600 .875rem/1 var(--ff-head);color:var(--c-sub);letter-spacing:.08em}
.wmap__axis::before{content:"";order:1;flex:1;height:1px;background:var(--c-hair)}
.wmap__axis span:last-child{order:2}
.wmap__axis span:last-child::after{content:"";display:inline-block;width:7px;height:7px;margin-left:.3rem;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg) translateY(-1px)}
.wmap__row{position:relative;display:grid;gap:1rem;margin-top:1.5rem}
.wmap__row li{position:relative;display:flex}
.wmap__row a{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:1.25rem 1.25rem 2.5rem;border:1px solid var(--c-hair);background:var(--c-paper);transition:border-color .2s,transform .3s var(--ease)}
.wmap__row a:hover{border-color:var(--c-ink);transform:translateY(-2px)}
.wmap__row a::after{content:"→";position:absolute;right:1rem;bottom:.75rem;color:var(--c-ai);transition:transform .3s var(--ease)}
.wmap__row a:hover::after{transform:translateX(4px)}
.wmap__dot{display:none}
.wmap__txt{display:block;margin-top:.6rem;font:400 1rem/1.8 var(--ff-body);color:var(--c-text);word-break:auto-phrase;text-wrap:pretty}
@media (min-width:768px){
  .wmap__row{grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.25rem}
  /* 3つを通る1本の線と、各カードの上の丸 */
  .wmap__row::before{content:"";position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:-1.1rem;height:1px;background:var(--c-ink);transform-origin:left;transform:scaleX(var(--draw,1));transition:transform 1s var(--ease) .2s}
  .wmap__dot{display:block;position:absolute;left:50%;top:-1.1rem;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;border:1px solid var(--c-ink);background:var(--c-paper)}
  .wmap__row li:nth-child(3) .wmap__dot{background:var(--c-ai);border-color:var(--c-ai)}
  .wmap__row li:nth-child(2) .wmap__dot{background:var(--c-mist)}
}
.wmap__consult{margin-top:.25rem;font:400 1rem/1.7 var(--ff-body);word-break:auto-phrase;text-wrap:pretty}
.wmap__consult a{color:var(--c-ai);text-decoration:underline;text-underline-offset:.2em}
.js .wmap[data-diag]{--draw:0}
.js .wmap[data-diag].in{--draw:1}

/* 区画の地に置く大きな一語（スクロールでゆっくり動く） */
[data-ghost]{position:relative;overflow:hidden}
[data-ghost]::after{content:attr(data-ghost);position:absolute;right:-.06em;top:.1em;z-index:0;font:800 clamp(6rem,4rem + 10vw,15rem)/1 var(--ff-head);color:var(--c-ink);opacity:.045;letter-spacing:-.04em;pointer-events:none;white-space:nowrap;transform:translateY(var(--gy,0))}
.section--ai[data-ghost]::after{color:#fff;opacity:.06}
[data-ghost] > .container{position:relative;z-index:1}

/* リンク: 下線が左から走る */
.text-link{text-decoration:none;position:relative}
.text-link::after{content:"";position:absolute;left:0;right:1.3em;bottom:.65em;height:1px;background:currentColor;transform-origin:left;transition:transform .4s var(--ease)}
.text-link:hover::after{transform:scaleX(0);transform-origin:right}
.text-link span[aria-hidden]{transition:transform .3s var(--ease)}
.text-link:hover span[aria-hidden]{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  .js [data-diag] .ldiag__list,.js .wmap[data-diag]{--draw:1}
  .js [data-diag] .ldiag__node{opacity:1;transform:none}
  [data-ghost]::after{transform:none}
}

/* ── ヘルスチェックの🟡を直す ── */
.wmap__row a{position:relative}
.req{background:transparent;color:var(--c-ai);border:1px solid var(--c-ai)}
.opt{color:var(--c-sub);border-color:var(--c-hair)}
.answer{word-break:auto-phrase;text-wrap:balance}
.results--works .result__fig-inline{font-size:1.35em;white-space:nowrap}
.figtile{font-size:1.0625rem}
.figtile strong{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.rail--plain li::after{background:#fff}
.rail--plain li[data-dot="fill"]::after{background:var(--c-ai)}
/* 事業内容: 本命の無料面談を見分けやすく、くり返す費用の行は控えめに */
#consul{border-left:3px solid var(--c-ai)}
.row--cost{color:var(--c-sub);font-size:1rem}
.row--cost .row__label{color:var(--c-sub)}
/* お問い合わせ: フォームを中央に */
.formbox{margin-inline:auto}
.page-head--narrow .container{max-width:calc(40em + var(--gutter) * 2)}
/* 下層ページの頭の大きな一語は上に寄せる */
.page-head[data-ghost]::after{top:auto;bottom:-.12em;font-size:clamp(5rem,3rem + 9vw,12rem)}
/* スマホは本文の行間を少し詰める */
@media (max-width:599px){body{line-height:1.8}.prose p,.qa__a{line-height:1.8}}

/* 受講した方の声 */
.voices{display:grid;gap:1.5rem}
.voice{display:grid;gap:1.25rem;padding:1.75rem;border:1px solid var(--c-hair);background:var(--c-paper)}
.voice__who{display:flex;align-items:center;gap:1rem}
.voice__who img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;background:var(--c-wall)}
.voice__who figcaption{font:600 1rem/1.6 var(--ff-head);color:var(--c-sub);word-break:auto-phrase}
.voice__head{font:800 var(--fs-h3)/1.55 var(--ff-head);color:var(--c-ai);word-break:auto-phrase;text-wrap:balance}
.voice__text{margin-top:1rem;padding-left:1.25rem;border-left:1px solid var(--c-hair);position:relative}
.voice__text::before{content:"“";position:absolute;left:-.1em;top:-.55em;font:800 3.5rem/1 var(--ff-head);color:var(--c-hair)}
.voice__text p{line-height:1.9;word-break:auto-phrase;text-wrap:pretty}
.voice__text p + p{margin-top:.6em}
@media (min-width:1024px){.voice{grid-template-columns:220px 1fr;gap:2.5rem;padding:2.25rem}.voice__who{flex-direction:column;align-items:flex-start}.voice__who img{width:140px;height:140px}}
.voices-mini{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--c-rule)}
.voices-mini__label{font:800 1.125rem/1.5 var(--ff-head);color:var(--c-ink)}
.voices-mini ul{display:grid;gap:1rem;margin-top:1rem}
.voices-mini li{display:flex;gap:1rem;align-items:center}
.voices-mini img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.voices-mini b{display:block;font:800 1.0625rem/1.55 var(--ff-head);color:var(--c-ai);word-break:auto-phrase;text-wrap:pretty}
.voices-mini span{display:block;margin-top:.2rem;font-size:var(--fs-small);color:var(--c-sub)}
@media (min-width:768px){.voices-mini ul{grid-template-columns:1fr 1fr;gap:1.5rem}}
.wmap__plan{margin-top:1.25rem;font:600 1rem/1.7 var(--ff-head);color:var(--c-ink)}
.ldiag__item{align-content:start}
.section--tight-top{padding-block:1rem calc(var(--section-y) / 2);border-top:0}

/* 公式LINEの中で自動で動くこと（線画のイラスト） */
.auto{margin-top:3rem;padding-top:2.5rem;border-top:1px solid rgba(255,255,255,.25)}
.auto__title{font:800 var(--fs-h3)/1.5 var(--ff-head);color:#fff}
.auto__grid{margin-top:1.75rem;display:grid;grid-template-columns:1fr 1fr;gap:1.75rem 1.25rem}
@media (min-width:768px){.auto__grid{grid-template-columns:repeat(3,1fr);gap:2.5rem 2rem;max-width:56rem;margin-inline:auto}}
.auto__item{text-align:center}
.auto__art{width:min(100%,132px);height:auto;margin:0 auto;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.auto__art .f{fill:#fff;stroke:#fff}
.auto__art .f2{fill:rgba(255,255,255,.22);stroke:none}
.auto__art .w{stroke:var(--c-ai);stroke-width:2}
.auto__art .f .w,.auto__art .w{fill:none}
.auto__art path.w[d*="l5 3"],.auto__art path.w[d*="l7 5"]{fill:var(--c-ai);stroke:none}
.auto__art .dotk{fill:var(--c-sky);stroke:none}
.auto__name{margin-top:.9rem;font:800 1.0625rem/1.5 var(--ff-head);color:#fff;word-break:auto-phrase;text-wrap:balance}
.section--ai .auto__txt{margin-top:.35rem;font-size:.9375rem;line-height:1.75;color:rgba(255,255,255,.85);word-break:auto-phrase;text-wrap:pretty}
/* 見えたときに、1つずつ浮かび上がる */
.js .auto[data-diag] .auto__item{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .7s var(--ease)}
.js .auto[data-diag].in .auto__item{opacity:1;transform:none}
.js .auto[data-diag].in .auto__item:nth-child(2){transition-delay:.08s}.js .auto[data-diag].in .auto__item:nth-child(3){transition-delay:.16s}.js .auto[data-diag].in .auto__item:nth-child(4){transition-delay:.24s}
.js .auto[data-diag].in .auto__item:nth-child(5){transition-delay:.32s}.js .auto[data-diag].in .auto__item:nth-child(6){transition-delay:.4s}.js .auto[data-diag].in .auto__item:nth-child(7){transition-delay:.48s}.js .auto[data-diag].in .auto__item:nth-child(8){transition-delay:.56s}.js .auto[data-diag].in .auto__item:nth-child(9){transition-delay:.64s}
@media (prefers-reduced-motion:reduce){.js .auto[data-diag] .auto__item{opacity:1;transform:none}}

/* ホームページ制作LP（/web/）へのバナー。LPの見た目に合わせる（空色の地・Dela Gothic One・波線・緑のボタン） */
.section--banner{padding-block:clamp(2.5rem,2rem + 2vw,4rem)}
.wbn{position:relative;display:grid;align-items:center;overflow:hidden;background:#BDE0F2;color:var(--c-ai);text-decoration:none;border-radius:2px}
.wbn__text{position:relative;z-index:1;padding:clamp(1.75rem,1.25rem + 2.5vw,3.25rem)}
.wbn__label{display:inline-block;background:var(--c-ai);color:#fff;font-size:var(--fs-small);font-weight:700;padding:.2em .8em}
.wbn__head{display:block;margin-top:1rem;font:400 clamp(1.6rem,1.1rem + 2.2vw,2.75rem)/1.4 "Dela Gothic One",var(--ff-body);font-feature-settings:"palt";color:var(--c-ai)}
.wbn__wave{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><path d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='%231CACE3' stroke-width='2.2'/></svg>");background-repeat:repeat-x;background-position:0 100%;background-size:24px 8px;padding-bottom:.25em}
.wbn__sub{display:block;margin-top:.9rem;font-size:1rem;line-height:1.8;color:var(--c-text)}
.wbn__btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;margin-top:1.25rem;padding:.5rem 2rem;border-radius:8px;background:#00843C;color:#fff;font-weight:700;box-shadow:0 4px 0 #006B31;transition:transform .1s,background-color .15s}
.wbn__btn::after{content:"→";transition:transform .3s var(--ease)}
.wbn:hover .wbn__btn{background:#006B31}
.wbn:hover .wbn__btn::after{transform:translateX(4px)}
.wbn:active .wbn__btn{transform:translateY(2px);box-shadow:0 2px 0 #006B31}
.wbn__art{display:block;width:100%;height:auto;margin-top:-1rem}
@media (min-width:900px){.wbn{grid-template-columns:1fr 1fr}.wbn__art{margin:0;align-self:end;transition:transform .6s var(--ease)}.wbn:hover .wbn__art{transform:scale(1.02)}}
.wbn:focus-visible{outline:3px solid var(--c-ai);outline-offset:4px;box-shadow:none}
.wbn__sub,.wbn__head{word-break:auto-phrase;text-wrap:pretty}

/* こんな公式LINEをつくってきました（流れる画面のロール） */
.lroll{margin:1.5rem calc(var(--gutter) * -1) 0;overflow:hidden;padding-block:.5rem 1rem}
.lroll__track{display:flex;gap:1.5rem;width:max-content;padding-left:var(--gutter);animation:lroll 60s linear infinite}
.lroll:hover .lroll__track,.lroll:focus-within .lroll__track,.lroll.is-paused .lroll__track{animation-play-state:paused}
@keyframes lroll{to{transform:translateX(-50%)}}
.lroll__item{flex:none;width:clamp(132px,36vw,170px);display:flex;flex-direction:column;align-items:center}
.lroll__phone{display:block;width:100%;aspect-ratio:2/3;border:6px solid var(--c-ink);border-radius:24px;overflow:hidden;background:#fff}
.lroll__phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.lroll__name{margin-top:.75rem;font:800 .9375rem/1.5 var(--ff-head);color:var(--c-ink);text-align:center;word-break:auto-phrase;text-wrap:balance}
@media (prefers-reduced-motion:reduce){.lroll{overflow-x:auto}.lroll__track{animation:none}.lroll__item[data-clone]{display:none}}
.voices-mini{margin-top:2.5rem}

/* 無料面談: ふだんの料金との比べ */
.pfree{display:inline-grid;grid-template-columns:auto auto;align-items:stretch;margin-top:1.5rem;border:1px solid var(--c-ink)}
.pfree p{display:grid;gap:.15rem;padding:.9rem 1.25rem;margin:0}
.pfree span{font-size:var(--fs-small);color:var(--c-sub);font-weight:700}
.pfree b{font:800 clamp(1.25rem,1rem + 1vw,1.75rem)/1.3 var(--ff-head);font-variant-numeric:tabular-nums}
.pfree__was b{color:var(--c-sub);text-decoration:line-through;text-decoration-thickness:1px}
.pfree__now{background:var(--c-ai)}
.pfree__now span{color:rgba(255,255,255,.85)}
.pfree__now b{color:#fff}
@media (max-width:479px){.pfree{grid-template-columns:1fr;display:grid}}