/* お問い合わせ。主役は「集まってくる相談の語」と「開く封筒」。
   動きを止めたとき（スクリプトなし）は、最後の状態（ふたが開き、手紙が封筒の上に出ている）で表示する。 */
.ct{background:var(--paper)}
.ct .vs-nowrap{white-space:nowrap}
.ct-kicker{font:700 12px/1.4 var(--display);letter-spacing:.22em;color:var(--pink)}
.ct-en{font:800 clamp(30px,7vw,88px)/1 var(--display);letter-spacing:-.03em;color:transparent;background:linear-gradient(110deg,var(--pink2),var(--orange) 45%,var(--ink) 150%);-webkit-background-clip:text;background-clip:text;padding-bottom:.06em}
.ct-title{margin-top:14px;font:900 clamp(24px,3vw,36px)/1.4 var(--jp)}

/* 1 冒頭：集まってくる相談の語 */
.ct-hero{position:relative;overflow:clip;padding:calc(var(--hh) + 72px) 6% var(--s-section);background:var(--grain),radial-gradient(45% 45% at 100% 10%,rgba(240,88,126,.2),transparent 70%),radial-gradient(40% 40% at 0% 100%,rgba(62,214,220,.24),transparent 70%),var(--paper)}
.ct-hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-block);max-width:1240px;margin:0 auto}
.ct-hero__name{display:inline-block;margin-top:20px;padding-bottom:8px;border-bottom:3px solid var(--pink2);font:800 clamp(16px,1.6vw,20px)/1.5 var(--jp);letter-spacing:.06em}
.ct-hero__catch{margin-top:24px;font:900 clamp(24px,7.4vw,64px)/1.22 var(--jp);letter-spacing:-.03em}
.ct-hero__lead{max-width:36em;margin-top:var(--s-title-text);font-size:16px;line-height:1.95}
.ct-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin-top:var(--s-text-action)}
.ct-tel{display:grid;gap:2px}
.ct-tel__label{font:800 12px/1.4 var(--jp);letter-spacing:.12em;color:var(--pink)}
.ct-tel a{font:800 clamp(26px,3vw,34px)/1.2 var(--display);letter-spacing:-.02em;border-bottom:3px solid var(--lemon);justify-self:start}
.ct-tel small{font-size:12px;color:var(--muted)}
.ct-topics{position:relative;display:grid;gap:clamp(6px,1vw,12px);align-content:center;padding:clamp(24px,4vw,48px) 0}
.ct-topic{font:900 clamp(22px,6.2vw,46px)/1.3 var(--jp);letter-spacing:-.02em}
.ct-topic:nth-child(even){justify-self:end}
.ct-topic span{display:inline-block;padding:0 .2em;background:linear-gradient(transparent 62%,var(--hl,rgba(245,207,107,.8)) 62%);animation:ct-drift var(--t,6s) ease-in-out infinite alternate}
.ct-topic--2{--hl:rgba(62,214,220,.6);--t:7s}
.ct-topic--3{--hl:rgba(240,88,126,.4);--t:5.4s}
.ct-topic--4{--t:6.6s}
.ct-topic--5{--hl:rgba(62,214,220,.6);--t:7.4s}
.ct-topic--6{--hl:rgba(247,137,74,.5);--t:5.8s}
.ct-topic--7{--hl:rgba(240,88,126,.4);--t:6.2s}
@keyframes ct-drift{from{translate:-10px 0}to{translate:10px 0}}
.ct-photo{z-index:3}
/* 写真は語の行の空いている側（1行目と7行目は左寄せなので右側）に置く */
.ct-photo--mailbox{--d:clamp(64px,15vw,112px);right:0;top:calc(clamp(64px,15vw,112px) * -.55)}
.ct-photo--phone{--d:clamp(56px,13vw,96px);right:6%;bottom:calc(clamp(56px,13vw,96px) * -.5)}
@media(min-width:1024px){
  .ct-hero{min-height:min(100svh,980px);display:flex;align-items:center}
  .ct-hero__inner{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;column-gap:clamp(40px,5vw,88px);width:100%}
  .ct-hero__catch{font-size:clamp(44px,4.4vw,72px)}
  .ct-topic{font-size:clamp(26px,2.6vw,42px)}
}

/* 2 情報の共有について：開く封筒 */
.ct-share{position:relative;padding:var(--s-block) 6% var(--s-section);background:var(--grain),linear-gradient(180deg,var(--paper),var(--sky))}
.ct-envelope{--body:clamp(150px,20vw,230px);--flap:clamp(84px,11vw,132px);position:relative;max-width:900px;margin:0 auto;padding-top:24px;padding-bottom:calc(var(--body) - 40px)}
.ct-envelope__back{position:absolute;left:0;right:0;bottom:0;height:var(--body);border:2px solid var(--ink);border-radius:24px;background:var(--grain),var(--sky)}
.ct-letter{position:relative;z-index:1;margin:0 clamp(12px,5%,48px);padding:var(--s-box) clamp(22px,4vw,56px) calc(var(--s-box) + 48px);border:2px solid var(--ink);border-radius:20px;background:#fff;box-shadow:8px 8px 0 var(--lemon)}
.ct-letter__text{max-width:36em;margin-top:var(--s-title-text);font-size:16px;line-height:1.95}
.ct-letter__link{margin-top:var(--s-text-action)}
.ct-letter__link a{display:inline-block;padding-bottom:3px;border-bottom:2px solid currentColor;font:800 15px/1.6 var(--jp)}
@media(hover:hover){.ct-letter__link a:hover{color:var(--pink)}}
/* 封筒の前のポケット（V字）。輪郭は外側の影で描く */
/* 封筒の手前の面（2026-11-02 描き直し）。墨の線で縁取った色の面に、底の角から中央へ向かう折り目の線を細く。ふたは手前に置かない */
.ct-envelope__front{position:absolute;left:0;right:0;bottom:0;z-index:2;height:var(--body);border:2px solid var(--ink);border-radius:6px 6px 24px 24px;background:var(--grain),linear-gradient(120deg,var(--pink2),var(--orange) 55%,var(--lemon));box-shadow:8px 8px 0 var(--ink);pointer-events:none;overflow:hidden}
.ct-envelope__seam{position:absolute;inset:0;width:100%;height:100%}
.ct-envelope__seam path{fill:none;stroke:rgba(19,32,43,.45);stroke-width:2;stroke-linejoin:round}
/* 開いたふたは紙の後ろ（封筒の口の上に三角） */
.ct-envelope__flap{position:absolute;left:0;right:0;bottom:calc(var(--body) - 4px);z-index:0;height:var(--flap);pointer-events:none}
.ct-envelope__flap svg{display:block;width:100%;height:100%}
.ct-envelope__flap path{fill:var(--aqua);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}

/* 共通の integration.css（body.coletlab-experience main p）が段落の最大幅を外すため、幅を決めた段落は #main から指定し直す。 */
#main .ct-hero__lead,#main .ct-letter__text{max-width:36em}

/* 2026-11-02 見出しを3行にしたので、パソコンでは一回り大きくする（1行の長さが短くなり、左の列の6割ほどしか使っていなかった） */
@media(min-width:1024px){.ct-hero__catch{font-size:clamp(56px,5.4vw,84px)}}

/* 2026-11-02 ユーザー「プライバシーの封筒ですが、封筒に見えない」
   ・手前の面は、左右の折り返し（橙）と底の折り返し（ピンク）を墨の線で描き、封筒の裏の形にする。色のグラデーションの箱はやめる
   ・手前の面を後ろの面より低くし、口の上に封筒の内側（濃い水色）がのぞくようにする
   ・開いたふたを大きくし、紙の幅を少し狭めて、紙の左右からふたの斜めの辺が見えるようにする */
.ct-envelope{--body:clamp(170px,26vw,290px);--flap:clamp(96px,14vw,170px);padding-bottom:calc(var(--body) * .78 - 56px)}
.ct-envelope__back{border-radius:18px;background:var(--grain),linear-gradient(180deg,#9fd3dc,#cfe9ee 45%)}
.ct-letter{margin:0 clamp(28px,10%,96px)}
.ct-envelope__front{height:calc(var(--body) * .78);border-radius:0 0 18px 18px;background:var(--lemon);box-shadow:8px 8px 0 var(--ink)}
.ct-envelope__folds{position:absolute;inset:0;width:100%;height:100%}
.ct-fold{stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.ct-fold--l,.ct-fold--r{fill:var(--orange)}
.ct-fold--b{fill:var(--pink2)}
.ct-envelope__flap{bottom:calc(var(--body) - 2px)}