/* 片付けい子 — 共通スタイル
   公開中の v3.3（2026-08-22）の CSS をそのまま切り出したもの。値は変更していない。
   3ページ（トップ／個人／企業様向け）で共有する。 */
:root{
  --paper:#f9f4ea;      /* 生成り（地色） */
  --white:#fffdf8;      /* 交互リズムの白面 */
  --band:#f6e3cd;       /* うすいアプリコットの帯 */
  --band-deep:#efd9bc;  /* アプリコットの濃いめ（ドット用） */
  --leaf:#dcecdf;       /* ボタン緑のティント（ドット用） */
  --ink:#4a4034;        /* 本文の墨 */
  --ink-soft:#6b5f4e;   /* 補足の薄墨 */
  --line:#ddd3c2;       /* 低彩度の罫線 */
  --green:#1d6f47;      /* ボタン（白文字6.2:1） */
  --green-dark:#175a3a; /* ボタンhover */
  --green-ink:#2a5c40;  /* 文字アクセント緑 */
  --ph-line:#cdb894;    /* プレースホルダーの点線 */
  --maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --num:"Helvetica Neue",Arial,"Noto Sans JP",sans-serif; /* 数字は標準字形の欧文に任せる */
  --wrap:760px;
  --wide:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:500;
  line-height:1.9;
  letter-spacing:.05em;
  overflow-x:hidden;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wide{max-width:var(--wide);margin:0 auto;padding:0 22px}
img{max-width:100%;display:block}
a{color:var(--green-ink)}

/* ヘッダー */
header{padding:22px 0;position:relative;z-index:5}
.head-in{max-width:var(--wide);margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:20px}
.logo{font-family:var(--maru);font-weight:700;font-size:22px;letter-spacing:.14em;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo small{display:block;font-size:12px;letter-spacing:.18em;color:var(--ink-soft);font-family:var(--sans);font-weight:400}
nav{margin-left:auto;display:flex;gap:22px}
nav a{font-size:14px;color:var(--ink-soft);text-decoration:none;letter-spacing:.06em;white-space:nowrap;font-family:var(--maru);font-weight:500}
nav a:hover{color:var(--ink)}
.btn{
  display:inline-block;background:var(--green);color:#fff;text-decoration:none;
  border-radius:999px;font-weight:700;font-family:var(--sans);
  padding:14px 36px;font-size:16px;letter-spacing:.06em;border:0;white-space:nowrap;
  transition:transform .25s ease,background .25s ease;
}
.btn:hover{background:var(--green-dark);transform:translateY(-2px)}
.btn--small{padding:9px 22px;font-size:13px}
.btn--ghost{background:transparent;color:var(--green-ink);border:1.5px solid var(--green-ink);font-weight:500}
.btn--ghost:hover{background:rgba(42,92,64,.06)}

/* 波のセクション境界 */
.wave{display:block;height:clamp(38px,6vw,74px);position:relative;z-index:1}
.wave svg{display:block;width:100%;height:100%}

/* セクション共通 */
section{padding:96px 0;position:relative}
.sec-white{background:var(--white)}
.sec-band{background:var(--band)}
/* キャッチのキーワードだけ着色する（手本マザーリーフの手法。h1に1か所だけ） */
.kw{color:var(--green-ink)}
h1{font-family:var(--maru);font-weight:700;font-size:clamp(28px,5vw,40px);line-height:1.75;letter-spacing:.08em}
h3{font-family:var(--maru);font-weight:500;font-size:20px;letter-spacing:.06em;line-height:1.6}
.note{font-size:13px;color:var(--ink-soft);line-height:1.8}
.center{text-align:center}

/* 帯見出し */
.band-h2{
  max-width:640px;margin:0 auto 48px;
  background:var(--band);
  font-family:var(--maru);font-weight:500;color:var(--ink);
  font-size:clamp(22px,3.4vw,30px);line-height:1.6;letter-spacing:.16em;text-align:center;
  padding:13px 30px;border-radius:999px;
}
.sec-white .band-h2{background:var(--band)}
@media (max-width:700px){ .band-h2{margin-left:22px;margin-right:22px} }

/* 丸抜き・ブロブ写真 */
.circ{border-radius:50%;overflow:hidden;aspect-ratio:1/1}
.circ img{width:100%;height:100%;object-fit:cover}
.blob{overflow:hidden;border-radius:61% 39% 55% 45%/48% 55% 45% 52%}
.blob--b{border-radius:44% 56% 60% 40%/55% 45% 58% 42%}
.blob--c{border-radius:55% 45% 42% 58%/45% 52% 48% 55%}
.blob img{width:100%;height:100%;object-fit:cover}
@keyframes morph{
  0%,100%{border-radius:61% 39% 55% 45%/48% 55% 45% 52%}
  50%{border-radius:45% 55% 48% 52%/58% 42% 55% 45%}
}
.blob--morph{animation:morph 9s ease-in-out infinite}

/* 浮遊 */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.float{animation:floaty 4.6s ease-in-out infinite}
.float2{animation:floaty 5.8s ease-in-out -2.4s infinite}
.float3{animation:floaty 5.2s ease-in-out -1.2s infinite}

/* 挿絵の差し込みスポット（丸点線・浮遊） */
.ph--spot{position:absolute;width:72px;height:72px;border-radius:50%;flex:none;font-size:11px;line-height:1.5;padding:4px;z-index:2}
.spot-hero-a{right:-24px;bottom:10px}
.spot-hero-b{left:38%;top:-54px}
.spot-worry{right:-50px;top:-66px}
.spot-duo{right:24px;top:-104px}
.spot-profile{left:205px;top:-52px}
.spot-contact{left:6%;top:72px}

/* プレースホルダー（差し込み画像の席取り） */
.ph{
  border:1.5px dashed var(--ph-line);background:rgba(246,227,205,.3);
  color:var(--ink-soft);border-radius:18px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:12px;line-height:1.7;padding:8px;
}
.ph--round{border-radius:50%;width:66px;height:66px;flex:none;font-size:11px}
.ph--leaf{width:200px;height:64px;margin:34px auto 0}
.ph--qr{width:150px;height:150px;flex:none}
.ph--photo{min-height:110px;margin-top:22px}

/* このサイト専用の挿絵 */
.ill{display:block;object-fit:contain;overflow:visible}
.ill--round{width:96px;height:96px;flex:none}
.ill--spot{position:absolute;width:120px;height:120px;flex:none;z-index:2}
.ill--leaf{width:200px;height:64px;margin:34px auto 0}
@media (max-width:680px){
  .ill--round{width:72px;height:72px}
  .ill--spot{width:90px;height:90px}
}

/* ヒーロー */
.hero{padding:10px 0 72px;overflow:visible}
.hero-in{max-width:1160px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:1fr 1.08fr;gap:8px 44px;align-items:center}
.hero-txt h1{margin-top:10px}
.hero-txt .lead{margin-top:20px}
.hero-txt .cta{margin-top:30px}
.hero-txt .cta .note{margin-top:10px}
.hero-visual{position:relative;padding:34px 10px 46px}
.hero-main{aspect-ratio:10/7.4;position:relative;z-index:2}
.hero-main img{width:100%;height:100%;object-fit:cover}
.hero-circ{position:absolute;overflow:hidden;border-radius:50%;border:6px solid var(--paper)}
.hero-circ img{width:100%;height:100%;object-fit:cover}
.hero-circ--a{width:clamp(110px,13vw,168px);height:clamp(110px,13vw,168px);left:-18px;bottom:-6px;z-index:3}
.hero-circ--b{width:clamp(86px,10vw,132px);height:clamp(86px,10vw,132px);right:-22px;top:-16px;z-index:3}
.hero-ph{position:absolute;left:6px;top:6px;z-index:3}

/* こんな方へ */
.worry{list-style:none}
.worry li{
  border-top:1px dashed var(--line);padding:26px 0;
  display:grid;grid-template-columns:112px 1fr;gap:0 26px;align-items:center;
  font-family:var(--maru);font-weight:500;font-size:20px;line-height:1.7;
}
.worry li:last-child{border-bottom:1px dashed var(--line)}
.worry .ill--round{width:112px;height:112px}
.worry + .note{margin-top:14px}
.worry-close{
  margin-top:34px;font-family:var(--maru);font-weight:500;
  font-size:18px;line-height:1.9;color:var(--green-ink);
}
.worry-wrap{position:relative;max-width:880px}
/* 880pxに広げたぶん、靴下の挿絵が中間幅で画面外へ出るので内側へ寄せる */
@media (max-width:1000px){ .spot-worry{right:-6px} }
/* 同じ理由で、中間幅ではハンガーの挿絵も内側へ寄せる（2pxのはみ出しを消す） */
@media (max-width:900px){ .spot-hero-a{right:-4px} }

/* できること（丸写真の3列） */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 44px;max-width:var(--wide);margin:0 auto;padding:0 22px;align-items:start}
.pillar{text-align:left}
.pillar .shot{width:100%;max-width:300px;aspect-ratio:1/1}
.pillar .shot img{width:100%;height:100%;object-fit:cover}
.pillar h3{margin-top:22px}
.pillar p{margin-top:8px;font-size:16px}
.pillar figcaption{font-size:12px;color:var(--ink-soft);margin-top:10px;line-height:1.8}

/* 進め方 */
.flow{list-style:none}
.flow li{display:grid;grid-template-columns:44px 1fr;gap:0 20px;position:relative;padding-bottom:36px}
.flow li::before{content:"";position:absolute;left:22px;top:44px;bottom:0;width:1px;background:var(--line)}
.flow li:last-child{padding-bottom:0}
.flow li:last-child::before{display:none}
.flow .no{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--num);font-weight:700;font-size:16px;color:var(--ink);background:var(--band);
}
.flow h3{padding-top:5px}
.flow p{grid-column:2;margin-top:4px}

/* 料金・エリア */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0 72px;max-width:var(--wide);margin:0 auto;padding:0 22px;position:relative}
.duo h3{margin-bottom:16px}
.rows{border-top:1px dashed var(--line)}
.row{border-bottom:1px dashed var(--line);padding:19px 0;display:grid;grid-template-columns:1fr auto;gap:2px 18px;align-items:baseline}
.row .name{font-weight:500}
.row .price{font-family:var(--num);font-weight:700;font-size:24px;letter-spacing:.02em}
.row .desc{grid-column:1 / -1;font-size:14px;color:var(--ink-soft);line-height:1.7}
.rows + .note{margin-top:16px}

/* お客様の変化（丸写真つき） */
.voice{list-style:none}
.voice li{border-top:1px dashed var(--line);padding:32px 0;display:grid;grid-template-columns:150px 1fr;gap:0 30px;align-items:center}
.voice li:last-child{border-bottom:1px dashed var(--line)}
.voice .vphoto{width:150px}
.voice .place{font-size:13px;color:var(--green-ink);font-weight:500;letter-spacing:.08em}
.voice h3{margin-top:2px}
.voice p{margin-top:8px;font-size:16px}
.voice + .note{margin-top:18px}

/* プロフィール */
.profile{display:grid;grid-template-columns:290px 1fr;gap:40px;align-items:start;position:relative}
.profile .pphoto{aspect-ratio:272/376}
.profile .pphoto img{width:100%;height:100%;object-fit:cover}
.profile .name{font-family:var(--maru);font-weight:700;font-size:24px;letter-spacing:.1em}
.profile .name small{font-size:13px;color:var(--ink-soft);font-family:var(--sans);font-weight:400;margin-left:10px;letter-spacing:.06em}
.profile h3{margin-top:8px;color:var(--green-ink)}
.profile p{margin-top:16px}

/* Instagram */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--wide);margin:36px auto 0;padding:0 22px}
.ig-grid a{display:block}
.ig-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;transition:opacity .3s ease}
.ig-grid a:hover img{opacity:.75}
.ig-more{margin-top:38px;text-align:center}

/* よくあるご質問 */
.faq{list-style:none}
.faq li{border-top:1px dashed var(--line);padding:26px 0}
.faq li:last-child{border-bottom:1px dashed var(--line)}
.faq .q{font-family:var(--maru);font-weight:500;font-size:20px;line-height:1.6}
.faq .a{margin-top:12px;font-size:16px}

/* ご相談（CTA） */
.contact{padding:96px 0}
.contact h2{
  font-family:var(--maru);font-weight:700;font-size:clamp(24px,3.8vw,32px);
  letter-spacing:.14em;text-align:center;margin-bottom:28px;
}
.contact .contact-in{display:flex;gap:44px;align-items:center;justify-content:center;position:relative}
.contact .contact-body{max-width:440px}
.contact .cta{margin-top:26px}
.contact .keyword{margin-top:14px;font-size:14px;color:var(--ink-soft)}

/* フッター */
footer{padding:48px 0 120px}
footer .logo{font-size:19px}
footer p{margin-top:12px;font-size:13px;color:var(--ink-soft);line-height:1.9}

/* 追従バー（スマホ） */
.cta-bar{display:none}

/* 出現（ぽよん） */
.rv{opacity:0}
.rv.in{animation:fadein .8s ease-out both;animation-delay:var(--d,0s)}
@keyframes fadein{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv,.rv.in{opacity:1;animation:none}
  .float,.float2,.float3,.blob--morph{animation:none}
  .ig-grid a:hover img{opacity:1}
}

@media (max-width:680px){
  section{padding:64px 0}
  nav{display:none}
  /* CTAの文言を「〜してみる」に伸ばしたぶん、スマホではヘッダーのボタンを出さない
     （画面下の追従バーが常に出ているので導線は減らない） */
  .head-in .btn--small{display:none}
  .band-h2{margin-bottom:36px;font-size:18px;letter-spacing:.1em}
  .hero{padding-bottom:44px}
  .hero-in{grid-template-columns:1fr;gap:0}
  .hero-visual{padding:26px 6px 40px;order:2}
  .hero-txt{order:1}
  .hero-circ--a{left:-8px;bottom:-8px}
  .hero-dots-b{left:12%}
  .pillars{grid-template-columns:1fr;gap:44px}
  .pillar .shot{max-width:280px}
  .duo{grid-template-columns:1fr}
  .duo .col + .col{margin-top:50px}
  .worry li{grid-template-columns:88px 1fr;gap:0 18px;padding:26px 0;font-size:18px}
  .worry .ill--round{width:88px;height:88px}
  .worry-close{font-size:16px}
  .ph--round{width:56px;height:56px}
  .voice li{grid-template-columns:104px 1fr;gap:0 18px}
  .voice .vphoto{width:104px}
  .profile{grid-template-columns:1fr}
  .profile .pphoto{max-width:280px}
  .spot-profile{left:210px;right:auto;top:-34px}
  .spot-hero-b,.spot-duo{display:none}
  .spot-worry{right:0;top:-55px}
  .spot-hero-a{right:8px;bottom:20px}
  .spot-contact{left:0;top:auto;bottom:20px}
  .ig-grid{gap:9px}
  .ig-grid img{border-radius:12px}
  .contact .contact-in{flex-direction:column;gap:24px}
  footer{padding-bottom:130px}
  .cta-bar{
    display:block;position:fixed;left:0;right:0;bottom:0;
    background:var(--paper);border-top:1px solid var(--line);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    z-index:20;
  }
  .cta-bar .btn:hover{transform:none}
  .cta-bar .btn{display:block;text-align:center}
}

/* ============================================================
   ここから下は 2026-08-25 の追加分（v3.3 の値は上のまま触っていない）
   ・入口の分岐（個人／企業様向け）
   ・作業前と作業後
   ・口コミの差し込み枠
   ============================================================ */

/* 入口の分岐 */
.gates{display:grid;grid-template-columns:1fr 1fr;gap:30px 56px;max-width:var(--wide);margin:0 auto;padding:0 22px;align-items:start}
.gate{text-align:left;position:relative}
.gate .shot{width:100%;max-width:330px;aspect-ratio:10/8}
.gate .shot img{width:100%;height:100%;object-fit:cover}
.gate h3{margin-top:24px;font-size:22px;letter-spacing:.1em}
.gate p{margin-top:10px;font-size:16px}
.gate .cta{margin-top:22px}
/* 写真がまだ無い入口は、同じブロブ形の点線枠で席取りする */
.ph.blob{border-radius:61% 39% 55% 45%/48% 55% 45% 52%;padding:26px}
.ph.blob--b{border-radius:44% 56% 60% 40%/55% 45% 58% 42%}
.ph.blob--c{border-radius:55% 45% 42% 58%/45% 52% 48% 55%}

/* 作業前と作業後（実写真を2枚ならべる） */
.ba{display:grid;gap:70px;max-width:var(--wide);margin:0 auto;padding:0 22px}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ba-pair>*{min-width:0}
.ba-pair figure{margin:0}
.ba-shot{overflow:hidden;border-radius:18px}
.ba-shot img{width:100%;height:100%;object-fit:cover}
.ba-pair--tate .ba-shot{aspect-ratio:3/4}
.ba-pair--yoko .ba-shot{aspect-ratio:4/3}
.ba-pair figcaption{margin-top:10px;font-size:13px;color:var(--ink-soft);letter-spacing:.12em}
.ba-body{margin-top:26px;max-width:840px}
.ba-body p{margin-top:10px;font-size:16px}
.ba + .note{max-width:var(--wide);margin:26px auto 0;padding:0 22px}
.ph--ba{width:100%;aspect-ratio:16/10;min-height:0}

/* お客様の声（引用） */
.quotes{list-style:none}
.quotes li{border-top:1px dashed var(--line);padding:32px 0}
.quotes li:last-child{border-bottom:1px dashed var(--line)}
.quotes .q-text{font-family:var(--maru);font-weight:500;font-size:18px;line-height:2}
.quotes .q-src{margin-top:14px;font-size:13px;color:var(--ink-soft);letter-spacing:.08em}
.quotes + .note{margin-top:20px}

/* 口コミの差し込み枠 */
.ph--voice{margin-top:26px;min-height:112px}

@media (max-width:680px){
  .gates{grid-template-columns:1fr;gap:46px}
  .gate .shot{max-width:300px}
  /* スマホでは2枚を横に並べると小さすぎるので、縦に積む（作業前→作業後の順） */
  .ba-pair{grid-template-columns:1fr;gap:16px}
  .ba-body{margin-top:20px}
  .quotes .q-text{font-size:16px}
}

/* 入口が3つのとき（おうちの片づけ／セミナー・講演／企業様向け・2026-08-25 追加） */
.gates--3{grid-template-columns:repeat(3,1fr);gap:30px 40px;align-items:stretch}
.gates--3 .gate{display:flex;flex-direction:column}
.gates--3 .gate .cta{margin-top:auto;padding-top:22px}
.gates--3 .gate .shot{max-width:300px}
.gates--3 .gate h3{font-size:20px}
@media (max-width:900px){
  .gates--3{grid-template-columns:1fr;gap:46px}
  .gates--3 .gate .shot{max-width:300px}
}

/* ── ペルソナに合わせたトーン調整（2026-08-26 追加） ──
   body に calm を付けたページだけ、かわいさの元になる部分を静かにする。
   色・波形・帯見出し・書体は共通のままにして、ページ間の家族性は保つ。
   対象：おうちの片づけ（40代後半・子育てがひと段落した層） */
.calm .hero-main,
.calm .pillar .shot{border-radius:18px}   /* 不定形のブロブ → 角丸長方形 */
.calm .blob--morph{animation:none}        /* 形が変わり続けるのを止める */
.calm .float,
.calm .float2,
.calm .float3{animation:none}             /* 浮遊を止める */
.calm .hero-circ{border-width:5px}
.calm .hero-txt .cta{margin-top:38px}     /* 葉っぱの飾りを外したぶんの間を取る */
.calm .hero-visual{padding:20px 10px 30px}

/* 中間幅（681〜860px）：ナビ4項目＋CTAが1行に収まらないので、ナビを2行目に落とす */
@media (max-width:860px){
  .head-in{flex-wrap:wrap;row-gap:14px}
  nav{order:3;width:100%;margin-left:0;justify-content:center;gap:20px}
}

/* ── トップも calm に（2026-09-03 指摘「まるくてかわいすぎる・切り抜きをカチっと・やや対象年齢層を上げる」） ──
   入口セクションは帯見出しを書かず、写真＋見出しを各ページへのリンクにして「入口」をデザインで伝える */
.calm .gate .shot{border-radius:18px}
.calm .pphoto{border-radius:18px}
.gate-link{display:block;color:inherit;text-decoration:none}
.gate-link img{transition:opacity .3s ease}
.gate-link:hover img{opacity:.75}
.gate-link:hover h3{color:var(--green-ink)}

/* ── お客様の声：口コミの向こうに人が見える形（2026-09-03・手本 nukumorinoouchi.com/voice/） ──
   出典の媒体名は書かず、名札プレート（年代・家族構成）＋本人の言葉から抜いた見出し＋本文の3点で1人分。
   共通ナレッジは rules/voice_design_show_the_person.md */
.quotes li{display:grid;grid-template-columns:170px 1fr;gap:0 34px;align-items:start}
.v-person{
  background:var(--band);border-radius:18px;padding:24px 14px;text-align:center;
  font-family:var(--maru);
}
.v-person .ph--avatar{
  width:96px;height:96px;border-radius:50%;flex:none;
  margin:0 auto 14px;font-size:11px;font-family:var(--sans);
  background:rgba(255,253,248,.55);display:flex;
}
.v-person .v-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 14px;display:block}
.v-person .v-age{font-weight:700;font-size:18px;letter-spacing:.08em}
.v-person .v-fam{margin-top:4px;font-size:13px;line-height:1.7}
.v-person .v-rooms{margin-top:10px;font-size:12px;line-height:1.7;color:var(--ink-soft);font-family:var(--sans)}
.v-head{color:var(--green-ink)}
.quotes .q-text{margin-top:10px;font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.9}

/* ── お受けしていること：北野電気B案の円盤（.svc__disc）を参考にした2枚（2026-09-03 指示） ──
   円＝帯と同じアプリコット（緑は「浮きすぎ」の指摘で変更・2026-09-03）にアイコン＋和名、下に説明文。ホバーで少し濃く */
.svc2{display:grid;grid-template-columns:1fr 1fr;gap:30px 56px;max-width:var(--wide);margin:0 auto;padding:0 22px}
.svc2__item{text-align:center}
.svc2__disc{
  aspect-ratio:1/1;max-width:300px;margin-inline:auto;border-radius:50%;
  background:var(--band);color:var(--ink);text-decoration:none;
  display:grid;place-items:center;align-content:center;gap:14px;text-align:center;
  transition:background .3s ease;padding:24px;
}
.svc2__disc:hover{background:var(--band-deep)}
.svc2__disc .ph{
  width:96px;height:96px;border-radius:50%;flex:none;
  background:rgba(255,253,248,.55);font-size:11px;
}
.svc2__ico{width:96px;height:96px;object-fit:contain}
.svc2__jp{font-family:var(--maru);font-weight:700;font-size:22px;letter-spacing:.12em}
.svc2__note{margin:24px auto 0;max-width:430px;font-size:16px;text-align:left}
@media (max-width:680px){
  .svc2{grid-template-columns:1fr;gap:44px}
  .svc2__disc{max-width:250px}
}
@media (max-width:680px){
  .quotes li{grid-template-columns:1fr}
  .v-person{
    display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;
    text-align:left;padding:12px 18px;margin-bottom:16px;
  }
  .v-person .v-fam,.v-person .v-rooms{margin-top:0}
  .v-person .ph--avatar{width:56px;height:56px;margin:0;font-size:9px}
  .v-person .v-avatar{width:56px;height:56px;margin:0}
}