@charset "UTF-8";

/* =========================================================
   GUIDE（読み物ページ）
   ・style-c.css を読み込んだ上で追加する
   ・売り込む前に、まず質問にきちんと答える体裁にする
   ========================================================= */

/* ---------- 下層ページの土台 ---------- */
/* トップは .hero が padding-top で固定ヘッダー分を逃がしている。
   下層ページは main 側で同じ高さを確保する。
   CSSは全ページ共通で読むので、ページ種別で絞る（PJAXが data-page を同期する） */
[data-page="sub"] main{ padding-top:73px; }   /* 72px + 下の 1px 罫線 */

/* ---------- パンくず ---------- */
.crumb{
  max-width:var(--full); margin:0 auto; padding:18px var(--pad) 0;
  font-size:11.5px; color:var(--ink-3); letter-spacing:.04em;
}
.crumb a{ border-bottom:1px solid var(--line); padding-bottom:2px; }
.crumb span{ margin:0 8px; }

/* ---------- 記事ヘッダー ---------- */
.ghead{ padding:clamp(28px,4vw,50px) var(--pad) clamp(36px,5vw,60px); }
.ghead__in{ max-width:var(--wrap); margin:0 auto; }
.ghead__en{
  font-family:var(--latin); font-weight:200;
  font-size:clamp(26px,4vw,52px); letter-spacing:.09em; line-height:1;
}
.ghead__h{
  margin-top:20px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(24px,3.6vw,44px); letter-spacing:.08em; line-height:1.6;
}
.ghead__lead{
  margin-top:24px; font-size:15px; line-height:2.15; color:var(--ink-2); max-width:760px;
}
.ghead__meta{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; gap:24px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-3);
}
.ghead__fig{ margin-top:clamp(28px,4vw,44px); }
.ghead__fig img{ width:100%; height:clamp(220px,32vw,440px); object-fit:cover; }

/* ---------- 本文レイアウト ---------- */
.gbody{
  max-width:var(--full); margin:0 auto; padding:0 var(--pad) clamp(50px,7vw,100px);
  display:grid; grid-template-columns:1fr 260px; gap:clamp(30px,5vw,72px); align-items:start;
}
/* DOM順は「目次 → 本文」（スマホで目次を先に出すため）。
   PCでは配置を明示して、本文を左・目次を右に置く */
.gmain{ grid-column:1; grid-row:1; min-width:0; max-width:760px; }

/* 目次を持たないページ（/voice/）。1fr の列の中で中央に置く。
   **width:100% が要る。**margin:auto だけを付けると、grid item は stretch をやめて
   **max-content で測られる。**中に横スクロールの箱（.vstrip）を入れた瞬間、
   箱の中身ぶんまで膨らんで、スマホで本文が画面の外へ出た（2026-10-06 実測 1130px）。
   PCでは max-width:760px が効いて隠れていたが、スマホは max-width:none なので出た */
.gbody--solo{ grid-template-columns:1fr; }   /* 目次が無いので空の260px列を作らない */
.gmain--solo{ width:100%; margin-left:auto; margin-right:auto; }
.toc{ grid-column:2; grid-row:1; }

/* ---------- 目次 ---------- */
.toc{ position:sticky; top:96px; }
.toc__t{
  font-family:var(--latin); font-weight:300; font-size:11px;
  letter-spacing:.26em; color:var(--ink-3); padding-bottom:12px; border-bottom:1px solid var(--ink);
}
.toc ol{ counter-reset:toc; margin-top:6px; }
.toc li{ counter-increment:toc; border-bottom:1px solid var(--line-2); }
.toc a{ display:flex; gap:12px; padding:12px 0; font-size:12.5px; line-height:1.7; }
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--latin); font-weight:300; font-size:10.5px; color:var(--ink-3); padding-top:3px;
}
.toc a:hover{ color:var(--ink-2); }

/* ---------- 見出し ---------- */
.gmain h2{
  margin:clamp(48px,6vw,76px) 0 20px; padding-top:clamp(28px,3.4vw,40px);
  border-top:1px solid var(--ink);
  font-family:var(--mincho); font-weight:500;
  font-size:clamp(19px,2.3vw,27px); letter-spacing:.07em; line-height:1.65;
}
.gmain h2:first-child{ margin-top:0; }
.gmain h2 em{
  display:block; font-family:var(--latin); font-style:normal; font-weight:300;
  font-size:11px; letter-spacing:.24em; color:var(--ink-3); margin-bottom:12px;
}
/* 罫線1本だけだと本文に埋もれるので、塗りの帯にして節の変わり目を分かるようにする。
   補足ボックス（.gnote）と同じ地の色・同じ左のアクセントで揃えている */
.gmain h3{
  margin:40px 0 16px; padding:13px 18px;
  background:var(--paper-2); border-left:2px solid var(--sand);
  font-family:var(--mincho); font-weight:500;
  font-size:clamp(16px,1.8vw,19px); letter-spacing:.06em; line-height:1.7;
}
.gmain p{ margin:0 0 18px; font-size:14.5px; line-height:2.15; }
.gmain strong{ font-weight:700; }
.gmain a.inline{ border-bottom:1px solid var(--line); padding-bottom:1px; }
.gmain a.inline:hover{ border-bottom-color:var(--ink); }

.gmain ul,.gmain ol{ margin:0 0 20px; }
.gmain ul li{
  position:relative; padding-left:20px; margin-bottom:9px; font-size:14px; line-height:2.05;
}
.gmain ul li::before{
  content:""; position:absolute; left:0; top:14px; width:9px; height:1px; background:var(--sand);
}
/* 番号つきの箇条書き。
   .tl（時間割）は時刻そのものが順序を示しているので、通し番号は付けない */
.gmain ol:not(.tl){ counter-reset:gl; }
.gmain ol:not(.tl) li{
  counter-increment:gl; position:relative; padding-left:30px; margin-bottom:10px;
  font-size:14px; line-height:2.05;
}
.gmain ol:not(.tl) li::before{
  content:counter(gl,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--latin); font-weight:300; font-size:11px; color:var(--ink-3);
}

/* ---------- 表 ---------- */
.gtable{ overflow-x:auto; margin:0 0 24px; }
.gtable table{ width:100%; border-collapse:collapse; font-size:13px; min-width:420px; }
/* 項目名と内容だけの2列表は、**横スクロールさせずに折り返す。**
   上の min-width:420px は、3列以上の料金表が潰れないための下限。
   2列の表に効くと狭い画面で文が切れ、1つ読むのに横スクロールが要る
   （プライバシーポリシーの3つの表で実際にそうなった・2026-10-05）。
   **必ず .gtable table より後ろに置くこと。**詳細度が同じ（0,0,1,1）なので、
   前に置くと負ける。いちど前に置いて効かなかった */
.gtable--kv table{ min-width:0; }
.gtable th,.gtable td{ border-bottom:1px solid var(--line-2); padding:12px 14px; text-align:left; vertical-align:top; line-height:1.8; }
.gtable thead th{ border-bottom:1px solid var(--ink); font-weight:500; font-size:12px; color:var(--ink-2); white-space:nowrap; }
.gtable td.n,.gtable th.n{ text-align:right; white-space:nowrap; font-family:var(--mincho); }
.gtable tr.is-rec td{ background:#fbf8f1; }

/* ---------- 補足ボックス ---------- */
.gnote{
  margin:0 0 24px; padding:20px 22px; background:var(--paper-2); border-left:2px solid var(--ink);
  font-size:13.5px; line-height:2.05;
}
.gnote__t{
  font-family:var(--mincho); font-weight:500; font-size:15px; letter-spacing:.06em; margin-bottom:10px;
}
.gnote p:last-child{ margin-bottom:0; }

/* ---------- BEFORE / AFTER ----------
   2枚を**同じ幅で**並べる。片方が大きいと、補正の差ではなく枠の差に目が行く。
   狭い画面でも2列のまま。縦に積むと、見比べるのにスクロールが要る（/about/） */
.ba{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1.4vw,14px);
  margin:0 0 14px;
}
.ba figure{ margin:0; }
.ba img{ width:100%; height:auto; display:block; }
.ba figcaption{
  margin-top:8px; font-family:var(--latin); font-weight:300;
  font-size:10.5px; letter-spacing:.18em; color:var(--ink-3);
}
/* 出典・補足。本文（14.5px）より一段落とすが、--ink-3 止まりにする。
   打消し表示を本文より目立たなくしない（消費者庁の留意点） */
.ba__note{ margin:0 0 20px; font-size:12px; line-height:1.9; color:var(--ink-3); }

/* 制定日・改定日。**本文と同じ重さにしない。**
   読むものではなく、いつ時点のものか確かめるためのもの（プライバシーポリシー） */
.gmain__date{
  margin-top:clamp(40px,5vw,64px); padding-top:20px; border-top:1px solid var(--line-2);
  font-size:12px; color:var(--ink-3);
}

/* ---------- 当日の流れ ---------- */
.tl{ margin:0 0 26px; border-top:1px solid var(--line); }
.tl li{ display:flex; gap:clamp(14px,2.4vw,28px); padding:16px 0; border-bottom:1px solid var(--line-2); }
.tl time{
  flex:none; width:56px; font-family:var(--latin); font-weight:300; font-size:12.5px;
  letter-spacing:.08em; color:var(--ink-3); padding-top:3px;
}
.tl b{ display:block; font-family:var(--mincho); font-weight:500; font-size:15px; letter-spacing:.05em; }
.tl span{ display:block; margin-top:5px; font-size:12.5px; color:var(--ink-2); line-height:1.95; }

/* ---------- 記事内の写真 ---------- */
.gfig{ margin:0 0 26px; }
.gfig img{ width:100%; height:auto; }
.gfig figcaption{ margin-top:10px; font-size:11.5px; color:var(--ink-3); }
.gfig--2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gfig--2 img{ height:clamp(140px,20vw,240px); object-fit:cover; }

/* ---------- 記事内CTA ---------- */
.gcta{
  margin:clamp(40px,5vw,64px) 0; padding:clamp(26px,3.4vw,40px);
  background:var(--ink); color:var(--paper);
}
.gcta__en{ font-family:var(--latin); font-weight:300; font-size:11px; letter-spacing:.28em; color:rgba(255,254,251,.55); }
.gcta__h{
  margin-top:12px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(18px,2.2vw,25px); letter-spacing:.07em; line-height:1.65;
}
.gcta p{ margin:14px 0 0; font-size:13.5px; line-height:2.05; color:rgba(255,254,251,.75); }
.gcta__act{ margin-top:26px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
/* 記事内CTAは黒地なので、枠と文字を明るい側に寄せる */
.gcta .chev{ color:rgba(255,254,251,.85); border-color:rgba(255,254,251,.3); }
.gcta .chev:hover{ border-color:rgba(255,254,251,.65); background:rgba(255,254,251,.08); }

/* ---------- 関連ページ ---------- */
.grel{ background:var(--paper-2); padding:clamp(44px,6vw,80px) var(--pad); }
.grel__in{ max-width:var(--wrap); margin:0 auto; }
.grel__list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:28px; }
.grel__list a{ background:var(--paper); padding:22px 24px; display:block; transition:background .3s; }
.grel__list a:hover{ background:#fff; }
.grel__list em{ display:block; font-family:var(--latin); font-style:normal; font-weight:300; font-size:10.5px; letter-spacing:.2em; color:var(--ink-3); }
.grel__list b{ display:block; margin-top:10px; font-family:var(--mincho); font-weight:500; font-size:16px; letter-spacing:.05em; }
.grel__list span{ display:block; margin-top:8px; font-size:12px; color:var(--ink-2); line-height:1.9; }

@media (max-width:960px){
  .gbody{ grid-template-columns:1fr; }
  .gmain,.toc{ grid-column:1; grid-row:auto; }
  .toc{ position:static; border:1px solid var(--line); padding:18px 20px; }
  .toc__t{ border-bottom-color:var(--line); }
  .gmain{ max-width:none; }
}
@media (max-width:560px){
  [data-page="sub"] main{ padding-top:65px; }   /* ヘッダーが 64px に縮む */
  /* 1列になる＝1枚で全幅を占める。**ここで高さ固定をやめる。**
     残したままだと 350x140（比2.5）の帯になり、縦位置の写真は
     高さの73%が捨てられて人物の頭が切れる（2026-08-26 実測）。
     単独で並ぶので、写真ごとに高さが違っても崩れない */
  .gfig--2{ grid-template-columns:1fr; }
  .gfig--2 img{ height:auto; }
  .tl li{ flex-direction:column; gap:4px; }
  .tl time{ width:auto; }
}

/* ---------- 押したら映像が再生されるブロック ---------- */
.filmbox{ position:relative; background:#000; overflow:hidden; }
.filmbox img{ transition:transform 1.2s var(--ease), opacity .5s; }
.filmbox:hover img{ transform:scale(1.03); }
.filmbox video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
/* 再生中は作品の画角に開く。--film-ar を指定すると、素材に焼き込まれた
   レターボックスをちょうど切り落とせる（指定がなければ16:9） */
.filmbox.is-playing{ aspect-ratio:var(--film-ar,16/9); }
.filmbox.is-playing img,.filmbox.is-playing .filmbox__btn{ display:none; }

.filmbox__btn{
  position:absolute; inset:0; width:100%; display:flex; align-items:center;
  gap:clamp(14px,1.8vw,22px); padding:0 clamp(20px,4vw,56px);
  color:#fff; text-align:left; cursor:pointer;
  background:linear-gradient(90deg,rgba(20,18,15,.55) 0%,rgba(20,18,15,.18) 55%,rgba(20,18,15,.34) 100%);
  transition:background .4s;
}
.filmbox__btn:hover{ background:linear-gradient(90deg,rgba(20,18,15,.62) 0%,rgba(20,18,15,.26) 55%,rgba(20,18,15,.4) 100%); }
.filmbox__ico{
  flex:none; width:clamp(48px,5vw,64px); height:clamp(48px,5vw,64px); border-radius:50%;
  border:1px solid rgba(255,255,255,.7); display:grid; place-items:center;
  transition:background .4s, border-color .4s;
}
.filmbox__ico::after{
  content:""; width:0; height:0; margin-left:3px;
  border-left:11px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.filmbox__btn:hover .filmbox__ico{ background:rgba(255,255,255,.14); border-color:#fff; }
.filmbox__lbl em{
  display:block; font-family:var(--latin); font-style:normal; font-weight:300;
  font-size:11px; letter-spacing:.26em; color:rgba(255,255,255,.75);
}
.filmbox__lbl b{
  display:block; margin-top:8px; font-family:var(--mincho); font-weight:500;
  font-size:clamp(15px,1.7vw,19px); letter-spacing:.07em;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
}
.filmbox__lbl i{
  display:block; margin-top:6px; font-family:var(--latin); font-style:normal;
  font-weight:300; font-size:11.5px; letter-spacing:.14em; color:rgba(255,255,255,.66);
}
/* 閉じる */
.filmbox__close{
  position:absolute; top:12px; right:12px; z-index:3; display:none;
  width:38px; height:38px; border:1px solid rgba(255,255,255,.5); border-radius:50%;
  color:#fff; background:rgba(20,18,15,.4); backdrop-filter:blur(6px);
  font-size:15px; line-height:1; cursor:pointer;
}
.filmbox.is-playing .filmbox__close{ display:block; }
.filmbox__close:hover{ background:rgba(20,18,15,.7); }

/* 3枚並べ。一日の流れなど、順番のある写真に使う */
.gfig--3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gfig--3 img{ height:clamp(150px,20vw,230px); object-fit:cover; }
.gfig--3 figcaption{ grid-column:1 / -1; }
/* 2枚並べもキャプションが下に回るように */
.gfig--2 figcaption{ grid-column:1 / -1; }
@media (max-width:600px){
  .gfig--3{ grid-template-columns:1fr 1fr; }
  /* 1枚目だけ全幅で単独。2枚目3枚目は横に並ぶので高さを揃える必要があるが、
     1枚目は揃える相手がいないので height:auto でよい。
     固定していたときは 350x180（比1.94）で、縦位置の写真は
     高さの66%が捨てられて顔が切れていた */
  .gfig--3 img:first-child{ grid-column:1 / -1; height:auto; }
}

/* ---------- お客さまアンケート（/voice/） ----------
   **縦に並べない。**5通を原本つきで縦に積んだら12,000pxを超えて、
   最後の1通まで誰も辿り着かなかった（2026-10-06 実測）。
   一覧は横に流し、本文は原本ごとダイアログで読ませる。

   **ダイアログの中身はサーバ側で全部書いてある。**JSで作らない。
   作ると、検索にも読み上げにも本文が存在しないことになる */

/* ---- 一覧（横3つのグリッド） ----
   **横スクロールはやめた**（2026-10-07 クライアント指示）。
   流していた頃は、5通あることが画面から分からず、
   3通目から先は指で送らないと存在に気づけなかった。
   グリッドなら**全部が一度に目に入る。**5通なので 3＋2 の2段になる。

   列数は中身で決めている。1枚が200pxを切ると、引用の明朝が
   1行5〜6文字になって読めない。だから狭い画面では列を減らす */
/* **帯だけ本文より広い。**本文は760pxで読みやすいが、その幅に3枚入れると
   1枚200pxを切り、引用の明朝が1行8文字になって読めなかった（2026-10-07 実測193px）。
   文章は760pxのまま、カードの帯だけ画面の中央で広げる。
   `margin-left:50%` で親の中央へ送り、`translateX(-50%)` で自分の半分だけ戻す。
   **親（.gmain）が画面の中央にある前提。**だから .gbody--solo で空の列を外してある */
.vstrip-wrap{
  width:min(var(--wrap), calc(100vw - var(--pad) * 2));   /* サイト標準の幅に合わせる */
  margin:0 0 clamp(34px,4.6vw,52px) 50%;
  transform:translateX(-50%);
}
.vstrip{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px);
  padding:0; margin:0; list-style:none;
}
/* **読みものの箇条書きの装飾を打ち消す。**
   .vstrip は .gmain の中の <ul> なので、`.gmain ul li` の
   padding-left:20px と、`::before` の短い横棒（＝箇条書きの「ー」）が当たる。
   カードの左に棒と余白が出ていた（2026-10-07 クライアント指摘）。
   .gmain の中に ul/ol を持つ部品を足すときは、毎回ここを疑うこと */
/* **`.gmain` を頭に付けないと詳細度で負ける。**
   `.gmain ul li`(0,1,2) > `.vstrip > li`(0,1,1) なので、
   クラスだけで書くと padding-left:20px が残る（実際に残った） */
.gmain .vstrip > li{ min-width:0; padding-left:0; margin-bottom:0; }
.gmain .vstrip > li::before{ display:none; }

/* カードは button。**a にしない。**別ページに飛ぶと思わせないため */
.vcard{
  display:flex; flex-direction:column; width:100%; height:100%; gap:0;
  padding:0; border:1px solid var(--line); background:var(--paper);
  text-align:left; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .3s var(--ease);
}
.vcard:hover,.vcard:focus-visible{ border-color:var(--ink-3); }
.vcard__fig{ display:block; overflow:hidden; border-bottom:1px solid var(--line-2); }
.vcard__fig img{ width:100%; aspect-ratio:2 / 1; height:auto; object-fit:cover; object-position:50% 10%; display:block; }
.vcard__meta{
  display:block; padding:13px 14px 0; font-size:10.5px; letter-spacing:.1em; color:var(--ink-3);
}
.vcard__meta i{ font-style:normal; margin:0 .4em; color:var(--line); }
.vcard__q{
  display:block; padding:8px 14px 14px; flex:1;
  font-family:var(--mincho); font-size:clamp(13px,1.05vw,14.5px); line-height:1.95; color:var(--ink);
}
.vcard__more{
  display:block; padding:0 14px 14px; font-size:10.5px; letter-spacing:.12em;
  color:var(--ink-3); font-family:var(--latin);
}
.vcard:hover .vcard__more{ color:var(--ink); }

/* ---- ダイアログ ---- */
.vlb{
  /* z-index と地の色は .klb（和装・グッズのライトボックス）に揃える。
     ヘッダー60・固定CTA50・SOUND45 より上。ばらばらにしない */
  position:fixed; inset:0; z-index:120; background:rgba(20,18,15,.94);
  display:flex; flex-direction:column;
  opacity:0; transition:opacity .3s var(--ease);
}
.vlb.is-open{ opacity:1; }
.vlb__bar{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(14px,2.4vw,26px); color:var(--paper);
}
.vlb__count{ margin:0; font-family:var(--latin); font-weight:300; font-size:11.5px; letter-spacing:.16em; opacity:.7; }
.vlb__count i{ font-style:normal; margin:0 .5em; }
.vlb__nav{ display:flex; align-items:center; gap:4px; }
.vlb__arw,.vlb__close{
  width:42px; height:42px; border:0; background:none; cursor:pointer; position:relative;
}
.vlb__arw::before{
  content:""; position:absolute; top:50%; left:50%; width:9px; height:9px;
  border-left:1px solid var(--paper); border-bottom:1px solid var(--paper);
  transform:translate(-40%,-50%) rotate(45deg);
}
.vlb__arw.is-next::before{ transform:translate(-60%,-50%) rotate(-135deg); }
.vlb__arw[disabled]{ opacity:.25; cursor:default; }
.vlb__close::before,.vlb__close::after{
  content:""; position:absolute; top:50%; left:50%; width:15px; height:1px;
  background:var(--paper); transform-origin:center;
}
.vlb__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.vlb__close::after{ transform:translate(-50%,-50%) rotate(-45deg); }

.vlb__in{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 clamp(14px,2.4vw,26px) clamp(30px,5vw,54px);
}
.vlb__item{ max-width:1040px; margin:0 auto; color:var(--paper); }
.vlb__t{
  margin:0 0 clamp(16px,2.2vw,24px); font-family:var(--latin); font-weight:300;
  font-size:12px; letter-spacing:.14em; color:rgba(255,254,251,.6);
}
.vlb__t i{ font-style:normal; margin:0 .5em; }

.vlb__cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:start; }
.vlb__scan{ margin:0; }
.vlb__scan img{ width:100%; height:auto; display:block; background:var(--paper); }
.vlb__scan figcaption{ margin-top:8px; font-size:10.5px; letter-spacing:.1em; color:rgba(255,254,251,.45); }

.vlb__h{
  margin:0 0 10px; font-size:10.5px; letter-spacing:.16em;
  color:rgba(255,254,251,.5); font-family:var(--latin);
}
.vlb__text p{ font-size:14px; line-height:2.1; margin:0 0 16px; color:rgba(255,254,251,.9); }
.vlb__text .vlb__h:not(:first-child){ margin-top:30px; }
.vlb__word{ color:rgba(255,254,251,.72) !important; }

/* MOMENTからの返答。**お客さまの字と混ぜない。**枠で囲って別のものだと分かるように */
.vlb__reply{
  margin-top:30px; padding:clamp(16px,2.2vw,22px);
  border:1px solid rgba(255,254,251,.22);
}
.vlb__reply .vlb__h{ margin-top:0 !important; }
.vlb__reply p{ font-size:13px !important; line-height:2.0 !important; }
.vlb__reply p:last-child{ margin-bottom:0 !important; }

@media (max-width:700px){
  .vstrip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
  /* 2列だと1枚160px。引用が1行5文字になるので1列にする */
  .vstrip{ grid-template-columns:1fr; }
  .vcard__fig img{ aspect-ratio:16 / 7; }   /* 1列のときは横長すぎるので少し詰める */
}

@media (max-width:860px){
  /* 原本を横に並べる余地が無くなる。**原本が先、文字起こしが後。**
     手書きであることが先に目に入らないと、ただのテキストと変わらない */
  .vlb__cols{ grid-template-columns:1fr; gap:22px; }
  .vlb__text p{ font-size:13.5px; line-height:2.05; }
}