/* v028(2026-10-09 本人「この辺、デザインを劇的に良くして。遷移できるようにもして。こういう表現のセオリーあると思うので、大事にして。」・Fable r7)
   「りかこや受講生の、ふだんの様子。」をリンクカード(OGP カード)の型に。
   セオリー: 見慣れた形を借りる(Jakob の法則)/押せる物は押せる見た目に(シグニファイア: カード全体・↗・押すと沈む)/
   絵の優位(全媒体に絵)/同じ骨格をそろえ、媒体の札だけ変える/「すべて見る」は行の右上(棚の作法)。他社のロゴ・色は使わない */

.ch28{margin:44px 22px 0}
.c28-ttl{margin:0;text-align:center;font-family:"Zen Maru Gothic",var(--sans);font-weight:700;font-size:20px;line-height:1.5;color:#3F2A2E}
.c28-lead{margin:6px 0 0;text-align:center;font-size:14px;line-height:1.7;color:#5a4650}

.c28-row{margin-top:26px}
.c28-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.c28-h p{margin:0;display:flex;align-items:center;gap:8px;min-width:0;font-weight:700;font-size:14.5px;line-height:1.4;color:#3F2A2E}
.c28-all{flex:none;display:inline-flex;align-items:center;min-height:44px;padding-left:8px;white-space:nowrap;font-size:13px;font-weight:700;color:var(--rose);text-decoration:none}

.c28-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.c28{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:12px;background:#fff;text-decoration:none;color:#3F2A2E;box-shadow:0 6px 18px rgba(140,90,108,.10),inset 0 0 0 1px #efdfe6;transition:transform .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}
.c28:active{transform:scale(.98);box-shadow:0 2px 8px rgba(140,90,108,.10),inset 0 0 0 1px #efdfe6}
.c28:focus-visible{outline:3px solid rgba(217,80,111,.55);outline-offset:2px}
@media (hover:hover){.c28:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(140,90,108,.14),inset 0 0 0 1px #efdfe6}}

.c28-fig{position:relative;display:block;aspect-ratio:16/9;background:#F3E4E8;overflow:hidden}
.c28-fig img{display:block;width:100%;height:100%;object-fit:cover}
/* 動画・音声の印(どのサービスのロゴでもない、ただの再生の丸) */
.c28-play{position:absolute;left:8px;bottom:8px;width:28px;height:28px;border-radius:50%;background:rgba(40,24,30,.6);box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 2px 6px rgba(0,0,0,.2)}
.c28-play::after{content:"";position:absolute;left:11px;top:8px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #fff}
/* Instagram は画面を作らず、アイコン+アカウント名だけ(縁は LP のローズ。Instagram の配色は使わない) */
.c28-ig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#fde3ea}
.c28-ig img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #e8a7b8}
.c28-ig b{font-size:12px;font-weight:700;color:#3F2A2E}

.c28-t{display:block;margin:10px 12px 0;font-size:13.5px;font-weight:700;line-height:1.5}
.c28-m{display:block;margin:6px 12px 12px;font-size:12px;line-height:1.5;color:#4f3e47}
.c28-go{flex:none;width:15px;height:15px;color:var(--rose)}

.c28-note{margin:18px 0 0}
@media(max-width:359px){.ch28{margin-inline:18px}.c28-cards{gap:10px}.c28-t{margin-inline:10px;font-size:13px}.c28-m{margin-left:10px}}

/* 行の見出しは句ごとに折る(320px で「受講生イン/タビュー」と割れた) */
.c28-h p{flex-wrap:wrap;row-gap:2px}
.c28-ht{display:inline}
@media(max-width:359px){.c28-m{margin-inline:10px}.c28-all{font-size:12px}}

/* 出どころはカードの中(Fable r8): 絵・題・出どころで1組 */
.c28-src{display:flex;align-items:center;justify-content:space-between;gap:6px;font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--rose)}
/* すべて見る も同じ ↗ */
.c28-all{gap:4px}
.c28-go2{width:14px;height:14px;color:var(--rose)}