/* TELA-COYA LP 共通スタイル（index.html / privacy.html）
   色は6色だけ：クリーム・ネイビー・ティール・うすいティール・コーラル・イエロー
   角丸は10pxに統一。影・グラデーション・絵文字は使わない */
:root{
  --cream:#FBF7EF; --navy:#10293C; --teal:#0F7E9D; --teal-ink:#0B6B86;
  --lt:#CFE6EA; --coral:#E8735A; --yel:#F2B63C;
  --ink2:#4A5E6D; --line:rgba(16,41,60,.18); --field:#FFFCF7;
  --r:10px; --wrap:1120px; --hd:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--navy);
  font-family:"Noto Sans JP",sans-serif;font-size:1rem;font-weight:400;line-height:1.85;
  line-break:strict;word-break:auto-phrase;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-ink)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px}
.navy :focus-visible{outline-color:var(--yel)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.nb{display:inline-block}
.symdef{position:absolute}
.mt8{margin-top:8px}.mt20{margin-top:20px}
.sup-co{margin:2px 0 10px}
.faq-h{margin-bottom:32px}
.tel-hours{margin-left:4px;font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--navy);color:var(--cream);padding:10px 16px;border-radius:var(--r);z-index:60}
.skip:focus{top:8px}
.icon{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}

/* 上端の4色帯・幾何学タイルの帯 */
.topbar{height:6px;background:linear-gradient(90deg,var(--yel) 0 25%,var(--lt) 25% 50%,var(--coral) 50% 75%,var(--navy) 75% 100%)}
.strip{display:block;width:100%;height:clamp(44px,6vw,76px)}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--hd)}
.hd-logo{display:block;flex:none}
.hd-logo img{width:183px;height:52px}
.hd-nav{display:flex;gap:6px;margin-left:auto}
.hd-nav a{color:var(--navy);text-decoration:none;font-weight:500;padding:10px 12px;border-radius:var(--r);min-height:44px;display:inline-flex;align-items:center}
.hd-nav a:hover{background:var(--lt)}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:2px solid var(--navy);
  border-radius:var(--r);font:700 1rem/1.3 "Noto Sans JP",sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;
  background:var(--cream);color:var(--navy);transition:transform .2s ease,background-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn .icon{transition:transform .2s ease}
.btn:hover .icon{transform:translateX(3px)}
.btn-cta{background:var(--coral);border-color:var(--coral);color:var(--navy)}
.btn-cta:hover{background:var(--yel);border-color:var(--yel)}
.btn-sm{min-height:44px;padding:0 18px}

/* 見出し・本文 */
.eyebrow{font-weight:700;color:var(--teal-ink);letter-spacing:.04em}
.sec{padding:96px 0}
.sec h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900;line-height:1.4;letter-spacing:-.01em;text-wrap:balance}
.sec h2::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.5em;border-radius:50%;background:var(--coral);vertical-align:.04em}
.sec p{max-width:34em;text-wrap:pretty}
.sec .mut,.fld p,.of-d{text-wrap:balance}
.mut{color:var(--ink2)}
.note{font-size:.875rem;line-height:1.7;color:var(--ink2)}

/* ヒーロー */
.hero{padding:36px 0 56px}
.hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hero h1{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:900;line-height:1.32;letter-spacing:-.01em}
.hero h1 .nb{display:block}
.hero .lead{font-size:1.0625rem;max-width:30em;color:var(--ink2)}
.hero-art{position:relative}
.hero-art img{width:100%;border:1px solid var(--line);border-radius:var(--r)}
.hero-motif{position:absolute;left:-20px;bottom:-24px;width:112px;height:112px;border-radius:var(--r);overflow:hidden}

/* 募集条件の帯（幅の違う3区画） */
.offer-grid{display:grid;grid-template-columns:1.25fr 1.1fr 1.1fr;gap:0;max-width:none;padding:0}
.of{padding:28px clamp(20px,3vw,44px) 30px;display:flex;flex-direction:column;gap:2px}
.of-main{background:var(--yel)}
.of-2{background:var(--lt)}
.of-3{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.of-k{font-weight:700;font-size:.9375rem}
.of-v{font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1.25}
.of-v small{font-size:.5em;margin-left:.3em}
.of-d{font-size:.9375rem}
.status{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:8px;padding:4px 14px;border-radius:var(--r);
  background:var(--navy);color:var(--cream);font-weight:700;font-size:.9375rem;line-height:1.6}
.status[hidden]{display:none}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--yel)}
.status.is-closed::before{background:var(--coral)}

/* 4つの分野 */
.fields-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.fields-head{display:flex;flex-direction:column;gap:20px;max-width:760px;margin-bottom:24px}
.fields-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fld{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--field)}
.fld img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fld div{padding:14px 18px 18px}
.fld h3{font-size:1.125rem;font-weight:900;line-height:1.5}
.fld p{font-size:.9375rem;line-height:1.7;color:var(--ink2)}


/* TELA-COYAとは */
.about-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:56px;align-items:start}
.about-lead{margin:20px 0 16px;font-size:1.125rem;font-weight:500}
.facts div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:4px 16px;padding:14px 0;border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{font-weight:700;color:var(--teal-ink)}
.facts dd{margin:0}

/* 名前の意味 */
.name-head{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between;margin-bottom:40px}
.wordmark{width:min(420px,100%);height:auto}
.name-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:stretch}
.name-a{background:var(--yel);border-radius:var(--r);padding:32px clamp(20px,3vw,40px)}
.name-b{border:2px solid var(--navy);border-radius:var(--r);padding:28px clamp(20px,3vw,40px);background:var(--field)}
.name-k{font-weight:700;font-size:.9375rem}
.name-big{font-size:clamp(3rem,7vw,5rem);font-weight:900;line-height:1.2;margin:2px 0 12px}
.sec .name-a p,.sec .name-b p{max-width:none}
.name-a p+p{margin-top:10px}
.name-row{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:8px 20px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.name-word{font-size:2.5rem;font-weight:900;line-height:1;white-space:nowrap}
.name-word i{font-style:normal}
.lg-n{color:var(--navy)}.lg-t{color:var(--teal-ink)}.lg-c{color:var(--coral)}
.name-en{font-weight:700;line-height:1.5}
.name-note{margin-top:4px;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem;color:var(--ink2)}

/* 使い方の場面 */
.scenes{background:var(--lt)}
.scenes-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.scene-list li{margin-bottom:16px;padding:6px 0 6px 20px;border-left:5px solid var(--coral)}
.scene-list li:last-child{margin-bottom:0}
.sc-q{font-weight:900;font-size:1.125rem;line-height:1.6}
.sc-a{margin-top:4px;color:var(--ink2)}

/* 4分野の行 */
.frows>li{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:28px 0;border-top:1px solid var(--line)}
.frows>li:last-child{border-bottom:1px solid var(--line)}
.frow img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);border-radius:var(--r)}
.frow h3{font-size:1.375rem;font-weight:900;line-height:1.5;margin-bottom:6px}
.frow p{max-width:36em}
.themes{list-style:disc;padding-left:1.3em;margin-top:12px;font-size:.9375rem;color:var(--ink2)}
.themes li{line-height:1.75}
.fnote{margin-top:16px;max-width:none}

/* 校内研修の使い方 */
.tsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px}
.tsteps li{position:relative}
.tsteps li:not(:last-child)::before{content:"";position:absolute;left:72px;right:-16px;top:31px;height:2px;background:var(--navy)}
.tsteps .st-mark{position:relative;width:64px;height:64px;border-radius:var(--r);overflow:hidden}
.tsteps h3{font-size:1.125rem;font-weight:900;line-height:1.5;margin:14px 0 4px}
.tsteps p{font-size:.9375rem;color:var(--ink2);max-width:none}

/* 立場ごとの使い方 */
.roles-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.role-list div{display:grid;grid-template-columns:9em minmax(0,1fr);gap:4px 20px;padding:18px 0;border-top:1px solid var(--line)}
.role-list div:last-child{border-bottom:1px solid var(--line)}
.role-list dt{font-weight:900;color:var(--teal-ink)}
.role-list dd{margin:0}

/* 用語の解説 */
.gloss{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:32px}
.gloss div{padding:16px 0;border-top:1px solid var(--line)}
.gloss dt{font-weight:900;color:var(--teal-ink)}
.gloss dd{margin:4px 0 0;font-size:.9375rem;color:var(--ink2);line-height:1.75}

/* 動画の長さ */
.vids{background:var(--lt)}
.vids-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.vlist li{display:grid;grid-template-columns:9.5em 7.5em minmax(0,1fr);gap:8px 20px;align-items:center;padding:22px 0;border-top:2px solid var(--navy)}
.vlist li:last-child{border-bottom:2px solid var(--navy)}
.vk{justify-self:start;padding:2px 14px;border-radius:var(--r);font-weight:700;font-size:.9375rem;line-height:1.7}
.vk-a{background:var(--coral)}.vk-b{background:var(--teal-ink);color:var(--cream)}.vk-c{background:var(--yel)}
.vnum{font-size:2.6rem;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.vnum small{font-size:1rem;margin-left:2px}
.vlist p{font-size:1rem}

/* 画面の例 */
.screens-top{display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.stage{position:relative;max-width:940px;margin:0 auto 12px;padding-right:96px}
.pc{border:2px solid var(--navy);border-radius:var(--r);overflow:hidden;background:var(--cream)}
.pc-bar{display:flex;gap:7px;padding:10px 14px;border-bottom:2px solid var(--navy);background:var(--lt)}
.pc-bar i{width:11px;height:11px;border-radius:50%;background:var(--coral)}
.pc-bar i:nth-child(2){background:var(--yel)}.pc-bar i:nth-child(3){background:var(--teal)}
.pc img{width:100%}
.sp{position:absolute;right:0;bottom:-28px;width:min(28%,230px);border:6px solid var(--navy);border-radius:var(--r);overflow:hidden;background:var(--navy)}
.sp img{width:100%}
.sec .cap{max-width:940px;margin:0 auto 48px;text-align:left}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;max-width:940px;margin:0 auto}
.feat li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line)}
.feat .icon{width:28px;height:28px;color:var(--teal-ink);margin-top:2px}
.feat b{display:block;font-weight:700;line-height:1.6}
.feat span{font-size:.9375rem;color:var(--ink2);line-height:1.7}

/* 安心（濃色の面は1か所だけ） */
.navy{background:var(--navy);color:var(--cream)}
.navy a{color:var(--yel)}
.navy .mut,.navy .note{color:#C7D3DA}
.safe-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.safe-list{display:grid;grid-template-columns:1fr;gap:0}
.safe-list li:last-child{border-bottom:1px solid rgba(251,247,239,.28)}
.safe-list li{display:flex;gap:14px;padding:20px 0;border-top:1px solid rgba(251,247,239,.28)}
.safe-list .icon{width:30px;height:30px;color:var(--yel);margin-top:2px}
.safe-list b{display:block;font-weight:700;line-height:1.65}
.safe-list span{font-size:.9375rem;color:#C7D3DA;line-height:1.7}
.safe-foot{grid-column:1 / -1;margin-top:-8px}

/* ご利用の流れ */
.flow-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
.steps{position:relative}
.steps li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding-bottom:36px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;left:31px;top:64px;bottom:0;width:2px;background:var(--navy)}
.steps li:last-child::before{display:none}
.st-mark{width:64px;height:64px;border-radius:var(--r);overflow:hidden}
.steps h3{font-size:1.25rem;font-weight:900;line-height:1.5}
.steps p{font-size:1rem;color:var(--ink2)}

/* 監修 */
.sup{background:var(--lt)}
.sup-in{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:center}
.sup-photo{position:relative;height:220px}
.sup-photo::before{content:"";position:absolute;left:0;bottom:0;width:190px;height:95px;border-radius:190px 190px 0 0;background:var(--yel)}
.sup-photo::after{content:"";position:absolute;left:-8px;bottom:14px;width:44px;height:44px;border-radius:50%;background:var(--coral)}
.sup-photo img{position:absolute;left:20px;bottom:0;width:170px;height:auto;z-index:1}
.sup-tag{display:inline-block;background:var(--navy);color:var(--cream);font-weight:700;padding:1px 14px;border-radius:var(--r);margin-bottom:6px}
.sup h2{font-size:1.75rem;font-weight:900;line-height:1.4}
.sup h2::before{display:none}
.sup h2 small{font-size:1rem;font-weight:500;margin-left:12px}
.sup p{max-width:36em}

/* よくあるご質問 */
.faq-in{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 4px;min-height:60px;font-weight:700;font-size:1.0625rem;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;margin-left:auto;width:16px;height:16px;
  background:linear-gradient(var(--navy),var(--navy)) center/100% 2px no-repeat,linear-gradient(var(--navy),var(--navy)) center/2px 100% no-repeat;transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 4px 22px;max-width:34em;color:var(--ink2)}

/* 申し込み */
.apply{background:var(--lt)}
.apply-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.apply-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--hd) + 24px)}
.eyebrow-c{display:inline-block;align-self:flex-start;background:var(--yel);color:var(--navy);font-weight:700;padding:2px 14px;border-radius:var(--r)}
.contact{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.contact a{display:inline-flex;align-items:center;gap:12px;color:var(--navy);text-decoration:none;font-weight:700;font-size:1.125rem;min-height:44px}
.contact .icon{width:26px;height:26px;color:var(--teal-ink)}
.formbox{background:var(--cream);border:2px solid var(--navy);border-radius:var(--r);padding:32px clamp(20px,4vw,40px) 36px}
.field{margin:0 0 30px;padding:0;border:0;min-width:0}
.lab{display:block;font-weight:700;font-size:1rem;line-height:1.6;padding:0}
legend.lab{margin-bottom:0}
.req,.opt{font-size:.875rem;font-weight:700;margin-left:8px;white-space:nowrap}
.req{color:var(--teal-ink)}.opt{color:var(--ink2)}
.hint{font-size:.9375rem;line-height:1.7;color:var(--ink2);margin:2px 0 8px}
.ctl{display:block;width:100%;min-height:52px;padding:10px 14px;font:400 1rem/1.5 "Noto Sans JP",sans-serif;color:var(--navy);
  background:var(--field);border:2px solid var(--ink2);border-radius:var(--r);appearance:none;-webkit-appearance:none}
select.ctl{padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
textarea.ctl{min-height:9em;resize:vertical}
.w-m{max-width:24em}.w-s{max-width:14em}.w-l{max-width:30em}
.ctl:focus-visible{outline:3px solid var(--teal-ink);outline-offset:2px}
.radios{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.radio{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 18px 6px 14px;border:2px solid var(--ink2);border-radius:var(--r);background:var(--field);cursor:pointer;font-weight:500}
.radio input{width:22px;height:22px;margin:0;accent-color:var(--teal-ink)}
.radio:has(input:checked){border-color:var(--navy);background:var(--lt);font-weight:700}
.radio:has(input:focus-visible){outline:3px solid var(--teal-ink);outline-offset:2px}
.err{display:none;margin-top:8px;font-weight:700;font-size:.9375rem;line-height:1.7;padding-left:12px;border-left:5px solid var(--coral)}
.has-err .err{display:block}
.has-err .ctl,.has-err .radio{border-color:var(--navy);border-width:3px}
.convnote{font-size:.875rem;color:var(--ink2);min-height:0}
.agree{padding:20px;border:2px solid var(--navy);border-radius:var(--r);margin-bottom:24px;background:var(--field)}
.agree-t{font-weight:700;margin-bottom:4px}
.agree p{font-size:.9375rem;line-height:1.75;margin-bottom:12px;max-width:none}
.check{display:flex;align-items:flex-start;gap:12px;min-height:44px;font-weight:700;cursor:pointer;margin-top:6px}
.check input{width:24px;height:24px;margin:3px 0 0;flex:none;accent-color:var(--teal-ink)}
.summary{display:none;margin-bottom:20px;padding:16px 18px;border:2px solid var(--coral);border-radius:var(--r);font-weight:700}
.summary.show{display:block}
.summary ul{margin-top:8px;padding-left:1.2em;list-style:disc;font-weight:500}
.summary a{color:var(--navy)}
.submit-row{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.submit-row .btn{min-width:16em}
.formmsg{align-self:stretch;font-weight:700;line-height:1.7;padding-left:12px;border-left:5px solid var(--coral);display:none}
.formmsg.show{display:block}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.panel{border:2px solid var(--navy);border-radius:var(--r);padding:28px clamp(20px,4vw,36px);background:var(--cream)}
.panel h3{font-size:1.4rem;font-weight:900;line-height:1.5;margin-bottom:10px}
.panel p{max-width:none;margin-bottom:8px}
.panel[hidden],.formbox[hidden]{display:none}

/* フッター */
.ft{padding:44px 0 120px;background:var(--cream);border-top:1px solid var(--line)}
.ft-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:start}
.ft-logo img{width:170px;height:auto;margin-bottom:12px}
.ft address{font-style:normal;font-size:.9375rem;line-height:1.8;color:var(--ink2)}
.ft address a{color:var(--ink2)}
.ft-nav{display:flex;flex-direction:column;gap:4px;font-size:.9375rem}
.ft-nav a{color:var(--navy);min-height:44px;display:inline-flex;align-items:center}
.ft-copy{margin-top:28px;font-size:.875rem;color:var(--ink2)}

/* スマホ固定のボタン */
.m-cta{display:none}

/* 補助ページ（個人情報の取り扱い） */
.doc{padding:56px 0 80px}
.doc .wrap{max-width:820px}
.doc h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;line-height:1.4;margin-bottom:16px}
.doc h2{font-size:1.25rem;font-weight:900;line-height:1.5;margin:40px 0 10px;padding-top:24px;border-top:1px solid var(--line)}
.doc p,.doc li{max-width:none}
.doc .stamp{margin-top:24px}
.ft-last{padding-bottom:44px}
.doc ul{list-style:disc;padding-left:1.4em;margin:8px 0}
.doc table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.9375rem;line-height:1.7}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--line)}
.doc th{width:9em;font-weight:700}
.doc tr:last-child th,.doc tr:last-child td{border-bottom:1px solid var(--line)}

/* 動き（階層の提示だけ。transformとopacityのみ） */
/* スクリプトが使える環境だけ、スクロールで現れる。5秒たっても現れなければ自動で表示する（読み込み失敗の保険） */
@media (scripting:enabled){
  .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;animation:rv-safe .01s linear 5s forwards}
  .rv.in{opacity:1;transform:none;animation:none}
}
@keyframes rv-safe{to{opacity:1;transform:none}}
.m-cta{transition:transform .25s ease}

@media (max-width:1080px){
  .hd-nav{display:none}
}
@media (max-width:960px){
  .hero-in,.about-in,.scenes-in,.roles-in,.name-grid,.vids-in,.safe-in,.flow-in,.apply-in{grid-template-columns:1fr;gap:32px}
  .name-grid{gap:20px}
  .tsteps{grid-template-columns:1fr 1fr;gap:32px 24px}
  .tsteps li:not(:last-child)::before{display:none}
  .gloss{grid-template-columns:1fr}
  .frows>li{grid-template-columns:200px minmax(0,1fr);gap:20px}
  .fields-head,.apply-side{position:static}
  .offer-grid{grid-template-columns:1fr}
  .stage{padding-right:0;margin-bottom:56px}
  .sp{width:30%;right:-4px}
  .feat,.safe-list{grid-template-columns:1fr}
  .hero-motif{left:auto;right:12px;bottom:-28px;width:88px;height:88px}
}
@media (max-width:767px){
  :root{--hd:64px}
  .hd-logo img{width:150px;height:43px}
  .hd .btn-cta{display:none}
  .hd-nav{display:none}
  .hd-in{justify-content:flex-start}
  .sec{padding:64px 0}
  .hero{padding:24px 0 48px}
  .fields-list{grid-template-columns:1fr 1fr;gap:12px}
  .vlist li{grid-template-columns:1fr;gap:4px}
  .vnum{font-size:2.2rem}
  .sup-in{grid-template-columns:1fr;gap:24px}
  .frows>li{grid-template-columns:1fr}
  .frow img{max-width:420px}
  .tsteps{grid-template-columns:1fr}
  .tsteps li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 16px}
  .tsteps .st-mark{width:52px;height:52px;grid-row:1 / span 2}
  .tsteps h3{margin:0}
  .name-row{grid-template-columns:1fr}
  .facts div,.role-list div{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .steps li{grid-template-columns:52px minmax(0,1fr);gap:16px}
  .steps li::before{left:25px;top:52px}
  .st-mark{width:52px;height:52px}
  .submit-row{align-items:stretch}
  .submit-row .btn{min-width:0;width:100%}
  .m-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--cream);border-top:1px solid var(--line)}
  .m-cta .btn{width:100%}
  .m-cta.off{transform:translateY(110%)}
}
@media (max-width:420px){
  .fields-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv{opacity:1!important;transform:none!important;animation:none!important}
}