/* 連絡と取り下げ（v1。2026-11-12）。共通の部品は va.css、決まりは DESIGN.md。接頭辞は ct-。
   並び：題名の段（右に「ご本人・事務所の方へ」の札＝最初の画面で、取り下げの連絡方法が分かる）→ 取り下げ・訂正の順番と、メールのひな形
        → そのほかのご連絡（誤り・載っていないタレント／感想／絵の協力）→ 受けていないもの → いただいた情報の扱いと運営者。
   必須のページなので、演出は rise だけ。黄緑は使わない。広告は置かない。 */

/* 飛び先が、上に貼りつくヘッダーの下に隠れないように（--ct-hd は contact.js がヘッダーの高さを入れる） */
main section[id],.ct-win[id]{scroll-margin-top:calc(var(--ct-hd,60px) + 10px)}
main section[id]{scroll-margin-top:calc(var(--ct-hd,60px) - 2px)}

/* ============ 題名の段：左に題名とご用件の目次、右に「ご本人・事務所の方へ」の札 ============ */
.ct-ph-in{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.ct-ph-tx{min-width:0}
.ct-ph .lead .ct-nb{display:inline-block;background:linear-gradient(transparent 58%,rgba(238,90,54,.42) 58%,rgba(238,90,54,.42) 94%,transparent 94%)}
.ct-jump{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:22px}
.ct-jump .lab{font-family:var(--px);font-size:11px;color:var(--mute)}
.ct-jump ul{display:flex;flex-wrap:wrap;gap:7px}
.ct-jump a{display:block;font-family:var(--px);font-size:12.5px;line-height:1.5;color:var(--ink);background:var(--paper2);border:var(--bd);padding:1px 9px;text-decoration:none;white-space:nowrap}
.ct-jump a::after{content:" ↓";color:var(--coral)}
.ct-jump a:hover{background:var(--ink);color:var(--paper2)}
/* 取り下げの札：紙2の地・2pxの線・コーラルの影（このページで、いちばん大事な窓口）。貼り紙は、札の上の辺にまたがって貼る */
.ct-take{position:relative;background:var(--paper2);border:var(--bd);box-shadow:8px 8px 0 var(--coral);padding:0 20px 20px;margin-top:14px}
.ct-take-for{margin:-15px 0 0 -6px;line-height:1}
.ct-take h2{margin-top:16px;font-weight:900;font-size:clamp(22px,2.3vw,29px);line-height:1.4;letter-spacing:-.03em;color:var(--ink);font-feature-settings:"palt"}
.ct-take h2 span{display:inline-block}
.ct-addr{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:12px;padding:12px 0;border-top:var(--bd);border-bottom:var(--bd)}
.ct-addr a{font-weight:900;font-size:clamp(19px,2vw,25px);line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px;text-underline-offset:5px;overflow-wrap:anywhere}
.ct-addr a:hover{color:var(--coral-d)}
.ct-plan,.ct-soon{display:inline-block;flex:none;font-family:var(--px);font-weight:400;font-size:12px;line-height:1.5;color:#fff;background:var(--coral-d);padding:0 8px;white-space:nowrap}
.ct-take-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.ct-take-btns .va-btn{white-space:normal;text-align:center}
.ct-take-btns .va-btn.lg{flex:1 1 auto}
.ct-take-note{margin-top:16px;font-size:14.5px;font-weight:700;line-height:1.75;color:var(--ink)}
.ct-take-note b{font-weight:900;background:linear-gradient(transparent 60%,rgba(238,90,54,.4) 60%)}
.ct-take .va-note{margin-top:6px}
[data-copy].done{background:var(--ink);color:var(--paper2)}
@media (min-width:1000px){
  .ct-ph-in{grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:60px;align-items:start}
  .ct-take{margin-top:26px;padding:0 28px 26px}
}
@media (max-width:720px){
  .ct-ph .lead br{display:none}
  .ct-ph-in{gap:22px}
  .ct-jump{margin-top:16px}
}

/* ============ 1. 取り下げ・訂正：対応の順番（本当に順番があるので番号を付ける）と、メールのひな形（記入欄のある連絡票の形） ============ */
.ct-td{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.ct-steps{counter-reset:ct-s;border-top:var(--bd);border-bottom:var(--bd);align-self:start}
.ct-steps li{counter-increment:ct-s;display:grid;grid-template-columns:46px minmax(0,1fr);gap:2px 14px;padding:18px 0 17px}
.ct-steps li+li{border-top:1.5px dashed var(--ink)}
.ct-steps li::before{content:counter(ct-s);grid-row:1/3;font-family:var(--en);font-weight:800;font-size:34px;line-height:1.05;color:var(--coral)}
.ct-steps b{font-weight:900;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--ink)}
.ct-steps span{font-size:14.5px;line-height:1.8;color:var(--ink2)}
.ct-slip{background:var(--paper);border:var(--bd);box-shadow:var(--sh-l)}
.ct-slip-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;padding:9px 18px 8px;background:var(--ink);color:var(--paper2)}
.ct-slip-h b{font-weight:900;font-size:16px}
.ct-slip-h span{font-family:var(--px);font-size:11.5px;color:#c9c4b8}
.ct-slip dl{padding:6px 18px 0}
.ct-slip dl>div{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:12px;align-items:baseline;padding:9px 0 8px;border-bottom:1.5px dashed var(--line)}
.ct-slip dt{font-family:var(--px);font-size:12px;color:var(--mute)}
.ct-slip dd{font-weight:900;font-size:15.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.ct-slip-body{padding:6px 18px 4px}
.ct-slip-body li{display:flex;align-items:flex-end;flex-wrap:wrap;gap:4px 10px;padding:11px 0 9px;font-size:14.5px;font-weight:700;line-height:1.6;color:var(--ink)}
.ct-slip-body li i{flex:1 1 60px;min-width:40px;height:0;border-bottom:2px dotted var(--mute);transform:translateY(-5px)}
.ct-slip-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 18px 20px}
.ct-slip-btns .va-btn{white-space:normal;text-align:center}
.ct-slip-w>.va-note{margin-top:16px}
@media (min-width:960px){
  .ct-td{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:start}
  .ct-slip-h{padding:10px 24px 9px}
  .ct-slip dl,.ct-slip-body{padding-left:24px;padding-right:24px}
  .ct-slip-btns{padding:14px 24px 24px}
}

/* ============ 2. そのほかのご連絡：1枚の案内板を、縦の線で3つに区切る（白い箱を並べない） ============ */
.ct-wins{display:grid;grid-template-columns:minmax(0,1fr);border-top:var(--bd);border-bottom:var(--bd)}
.ct-win{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px 0 26px;min-width:0}
.ct-win+.ct-win{border-top:1.5px dashed var(--ink)}
.ct-win-k{display:flex;align-items:center;gap:8px}
.ct-win h3{font-weight:900;font-size:clamp(20px,2vw,25px);line-height:1.4;letter-spacing:-.03em;color:var(--ink);font-feature-settings:"palt"}
.ct-win h3 span{display:inline-block}
.ct-win>p{font-size:14.5px;line-height:1.8;color:var(--ink2)}
.ct-win>p.va-note{font-size:11px;line-height:1.7}
.ct-subj{width:100%;border-top:1.5px dashed var(--line)}
.ct-subj>div{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:0 12px;padding:8px 0 7px;border-bottom:1.5px dashed var(--line)}
.ct-subj dt{font-family:var(--px);font-size:12px;color:var(--mute)}
.ct-subj dd{font-weight:900;font-size:14.5px;color:var(--ink)}
.ct-win-btns{display:flex;flex-wrap:wrap;gap:10px 12px}
.ct-win-btns .va-btn{white-space:normal;text-align:left}
.ct-win p.ct-win-x{width:100%;padding:12px 14px;border:1.5px dashed var(--ink);font-size:14px;line-height:1.75}
.ct-win-x b{font-weight:900;color:var(--ink)}
.ct-win-links{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:auto}
.ct-win-links a{font-weight:900;font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap}
.ct-win-links a i{display:inline-block;font-style:normal;font-family:var(--px);font-weight:400;color:var(--coral);margin-left:5px;transition:transform .2s var(--ease)}
.ct-win-links a:hover{color:var(--coral-d)}
.ct-win-links a:hover i{transform:translateX(4px)}
@media (min-width:960px){
  .ct-wins{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .ct-win{padding:28px 30px 30px 0}
  .ct-win+.ct-win{border-top:0;border-left:1.5px dashed var(--ink);padding-left:30px}
  .ct-win:last-child{padding-right:0}
}

/* ============ 3. 受けていないもの：インクの地。斜線の印（「しない」）＋見出し＋一文。右にフクロウ ============ */
.ct-no-w{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.ct-nos{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid #4a4a4a;border-bottom:1px solid #4a4a4a}
.ct-nos li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:20px 0 19px}
.ct-nos li+li{border-top:1px dashed #4a4a4a}
/* 斜線の印：紙の札に、コーラルの斜線（色だけで伝えない。見出しの文で「受けていない」と言っている） */
.ct-x{grid-row:1/3;position:relative;width:44px;height:44px;border:2px solid var(--paper2);overflow:hidden}
.ct-x::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:6px;background:var(--coral);transform:translate(-50%,-50%) rotate(-45deg)}
.ct-nos h3{font-weight:900;font-size:clamp(18px,1.7vw,21px);line-height:1.45;color:var(--paper2);letter-spacing:-.02em}
.ct-nos h3 span{display:inline-block}
.ct-nos p{font-size:14.5px;line-height:1.8;color:#bdb8ab}
.ct-owl>div{display:flex;flex-direction:column;align-items:flex-start}
.ct-owl .va-say{font-size:14.5px;line-height:1.75;padding:12px 15px;margin-bottom:22px}
.ct-owl .va-say::before{left:44px;top:auto;bottom:-12px;border:0;border-right:var(--bd);border-bottom:var(--bd)}
.ct-owl .who{position:relative;width:100px;padding-bottom:14px;margin-left:8px}
.ct-owl .who img{display:block;width:100%;height:auto}
.ct-owl .who .va-plate{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%) rotate(3deg)}
@media (min-width:960px){
  .ct-no-w{grid-template-columns:minmax(0,1fr) 290px;gap:60px;align-items:end}
  .ct-nos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ct-nos li{grid-template-columns:minmax(0,1fr);gap:0;padding:26px 26px 26px 0;align-content:start}
  .ct-nos li+li{border-top:0;border-left:1px dashed #4a4a4a;padding-left:26px}
  .ct-x{grid-row:auto;margin-bottom:14px}
  .ct-nos p{margin-top:6px}
  .ct-owl .who{width:116px}
}

/* ============ 4. いただいた情報の扱い（項目：値。値の後ろに、プライバシーポリシーの章への札）と、あわせて読むページ ============ */
.ct-pv{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.ct-keep{border-top:var(--bd);border-bottom:var(--bd)}
.ct-keep>div{display:grid;grid-template-columns:9em minmax(0,1fr);gap:14px;align-items:baseline;padding:14px 0 13px}
.ct-keep>div+div{border-top:1.5px dashed var(--line)}
.ct-keep dt{font-family:var(--px);font-size:12px;line-height:1.6;color:var(--mute)}
.ct-keep dd{font-size:15px;line-height:1.8;color:var(--ink2)}
.ct-keep dd b{font-weight:900;color:var(--ink)}
.ct-ch{display:inline-flex;align-items:baseline;gap:7px;margin-left:8px;font-weight:900;font-size:13.5px;line-height:1.6;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;white-space:nowrap}
.ct-ch small{font-family:var(--px);font-weight:400;font-size:11px;line-height:1.5;color:var(--paper2);background:var(--ink);padding:0 6px;text-decoration:none;display:inline-block}
.ct-ch::after{content:"→";font-family:var(--px);font-weight:400;color:var(--coral);text-decoration:none;display:inline-block}
.ct-ch:hover{color:var(--coral-d)}
.ct-tbd{display:inline-block;font-family:var(--px);font-weight:400;font-size:12px;line-height:1.5;color:var(--mute);border:1.5px dashed var(--mute);padding:0 7px;white-space:nowrap;vertical-align:1px}
.ct-next{display:grid;gap:20px;align-content:start}
.ct-next-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 14px;padding:15px 18px 16px}
.ct-next-card small{grid-column:1;font-family:var(--en);font-weight:800;font-size:9.5px;letter-spacing:.07em;color:var(--mute)}
.ct-next-card b{grid-column:1;font-weight:900;font-size:19px;line-height:1.35;color:var(--ink);letter-spacing:-.02em}
.ct-next-card span{grid-column:1;font-size:13px;line-height:1.5;color:var(--ink2)}
.ct-next-card i{grid-column:2;grid-row:1/4;font-style:normal;font-family:var(--px);font-size:16px;color:var(--coral);transition:transform .2s var(--ease)}
.ct-next-card:hover i{transform:translateX(4px)}
@media (min-width:960px){.ct-pv{grid-template-columns:minmax(0,var(--readw)) minmax(280px,380px);gap:72px;align-items:start}}
@media (max-width:620px){
  .ct-keep>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .ct-ch{margin-left:0;display:flex;width:fit-content;margin-top:4px;white-space:normal}
}