/* 夜tax LP「お客様の声」4本（2026-10-25）。このセクション（.tn-voices）と動画専用の dialog（.tn-voices-dialog）だけに効かせる
   Codex customer-voices-four-20261025 の preview（styles.css＋mobile-polish.css）から、部品の分だけを移した。body・:root・全要素のリセットは持ち込まない
   テーマの全体指定（文字色・serif の本文フォント・h2／p の余白）に負けないよう、色・フォント・余白はここで明示する */
.tn-voices{--tnv-pink:#e2457f;--tnv-ink:#34445f;--tnv-sub:#51617c;margin:0 2px 40px;padding:0;text-align:left;color:var(--tnv-ink);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic",Meiryo,sans-serif}
.tn-voices *,.tn-voices *::before,.tn-voices *::after{box-sizing:border-box}
.tn-voices__inner{max-width:1080px;margin:0 auto}
.tn-voices__heading{text-align:center;margin:0 0 26px}
.tn-voices .tn-voices__eyebrow{margin:0 0 10px;color:#bd2761;font-size:11px;font-weight:600;letter-spacing:.2em;line-height:1.5}
.sc-feedback-inner .tn-voices h2.tn-voices__title{margin:0 0 10px;padding:0;border:0;background:none;color:var(--tnv-pink);font-family:inherit;font-size:32px;font-weight:800;line-height:1.35;letter-spacing:.02em;text-align:center}
.tn-voices .tn-voices__intro{margin:0;color:var(--tnv-ink);font-size:16px;font-weight:500;line-height:1.6}
.tn-voices .tn-voices__hint{margin:8px 0 0;color:#5f6c84;font-size:12px;line-height:1.6}
.tn-voices__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;margin:0;padding:0;list-style:none}
.tn-voices__card{position:relative;min-width:0;margin:0;padding:7px;background:#fff;border:1px solid #f2dbe5;border-radius:16px;box-shadow:0 4px 16px rgba(217,123,155,.045)}
.tn-voices__thumbnail{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:10px;overflow:hidden;background:#f9e4ec;cursor:pointer;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.tn-voices__thumbnail img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 50%;margin:0;border:0;border-radius:0;transition:filter .18s ease}
.tn-voices__thumbnail:focus-visible{outline:3px solid #9b174d;outline-offset:3px}
@media (hover:hover){.tn-voices__thumbnail:hover img{filter:brightness(.96)}}
/* 再生マーク：画像には焼き込まず重ねる。中心は画像の左79%・上68% */
.tn-voices__play{position:absolute;left:79%;top:68%;width:56px;height:56px;margin:0;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 2px 14px rgba(56,40,62,.21);pointer-events:none}
.tn-voices__play::after{content:"";width:0;height:0;margin-left:3px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid var(--tnv-pink)}
.tn-voices__sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.tn-voices__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 7px 7px}
.tn-voices .tn-voices__topic{margin:0;min-width:0;color:var(--tnv-sub);font-size:13px;font-weight:600;line-height:1.5;overflow-wrap:anywhere;text-align:left}
.tn-voices .tn-voices__duration{flex:none;margin:0;padding:3px 7px;border-radius:5px;background:#f4f5fa;color:#56647b;font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
/* LINE の案内（4本の直下に1回だけ） */
.tn-voices__line-guide{max-width:680px;margin:32px auto 0;padding:28px;border:1px solid #f2dbe5;border-radius:16px;background:#fff;text-align:center}
.tn-voices .tn-voices__line-eyebrow{display:inline-block;margin:0 0 12px;padding:5px 12px;border-radius:999px;background:#eef9f1;color:#087c37;font-size:12px;font-weight:700;line-height:1.5}
.sc-feedback-inner .tn-voices h3.tn-voices__line-title{margin:0;padding:0;color:var(--tnv-ink);font-family:inherit;font-size:24px;font-weight:700;line-height:1.55;letter-spacing:.015em;text-align:center}
.tn-voices .tn-voices__line-copy{max-width:35em;margin:16px auto 20px;color:var(--tnv-sub);font-size:15px;font-weight:400;line-height:1.9;text-align:left}
.tn-voices a.tn-voices__line-link{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:340px;min-height:56px;margin:0 auto;padding:14px 12px;border-radius:999px;background:#07853a;color:#fff;font-size:16px;font-weight:700;line-height:1.6;text-decoration:none;box-shadow:0 3px 0 #066d30}
.tn-voices a.tn-voices__line-link span{flex:none;color:#fff;font-size:20px;line-height:1}
.tn-voices a.tn-voices__line-link:focus-visible{outline:3px solid var(--tnv-ink);outline-offset:4px}
.tn-voices .tn-voices__line-note{margin:12px 0 0;color:#5f6c84;font-size:11px;line-height:1.8;text-align:center}
@media (max-width:767px){
  .tn-voices{margin-bottom:32px}
  .tn-voices__heading{margin-bottom:20px}
  .sc-feedback-inner .tn-voices h2.tn-voices__title{font-size:29px;margin-bottom:8px}
  .tn-voices .tn-voices__intro{font-size:14px}
  .tn-voices .tn-voices__hint{font-size:11px}
  .tn-voices__grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .tn-voices__play{width:44px;height:44px}
  .tn-voices__play::after{border-top-width:8px;border-bottom-width:8px;border-left-width:12px}
  .tn-voices__meta{padding:9px 6px 5px}
  .tn-voices .tn-voices__topic{font-size:12px}
  .tn-voices__line-guide{margin-top:20px;padding:20px 18px}
  .sc-feedback-inner .tn-voices h3.tn-voices__line-title{font-size:20px}
  .tn-voices .tn-voices__line-copy{margin:14px auto 18px;font-size:14px}
  .tn-voices a.tn-voices__line-link{font-size:15px;gap:8px}
}
@media (prefers-reduced-motion:reduce){.tn-voices__thumbnail img{transition:none}}

/* 動画専用の dialog（showModal で最前面＝固定CTA や親の transform／overflow に隠れない） */
.tn-voices-dialog:not([open]){display:none}
.tn-voices-dialog{box-sizing:border-box;width:min(424px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:14px;background:#fff;color:#292933;overflow:auto;overscroll-behavior:contain;box-shadow:0 16px 80px rgba(0,0,0,.33);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic",Meiryo,sans-serif;text-align:left}
.tn-voices-dialog *,.tn-voices-dialog *::before,.tn-voices-dialog *::after{box-sizing:border-box}
.tn-voices-dialog::backdrop{background:rgba(19,15,23,.78)}
.tn-voices-dialog__header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 16px;background:#fff}
.tn-voices-dialog .tn-voices-dialog__title{margin:0;padding:0;border:0;background:none;color:#292933;font-family:inherit;font-size:14px;font-weight:700;line-height:1.5;text-align:left;overflow-wrap:anywhere}
.tn-voices-dialog .tn-voices-dialog__close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1px solid #eadce2;border-radius:50%;background:#fff;color:#333;font-family:inherit;font-size:28px;font-weight:400;line-height:1;cursor:pointer}
.tn-voices-dialog .tn-voices-dialog__close:focus-visible,.tn-voices-dialog a:focus-visible{outline:3px solid #9b174d;outline-offset:2px}
/* 縦 9:16 のプレイヤー：幅＝min（使える幅, 使える高さ×9/16）。下限は幅200px（高さ約356px）。収まらないときは dialog ごと縦スクロール */
.tn-voices-dialog__player{position:relative;width:min(100%,max(200px,calc((100dvh - 190px) * 9 / 16)));max-width:400px;aspect-ratio:9/16;margin:0 auto;background:#17151c}
.tn-voices-dialog__player iframe{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;border:0}
.tn-voices-dialog__footer{padding:10px 14px 14px}
.tn-voices-dialog .tn-voices-dialog__help{max-width:36em;margin:0;color:#4a4f5c;font-size:12px;line-height:1.6}
.tn-voices-dialog a.tn-voices-dialog__youtube{display:inline-block;margin-top:6px;color:#b8205b;font-size:12px;font-weight:700;line-height:1.6;text-decoration:underline;text-underline-offset:3px}
.tn-voices-dialog a.tn-voices-dialog__youtube[hidden]{display:none}
@media (min-width:768px){.tn-voices-dialog__player{width:min(100%,max(200px,calc((100dvh - 200px) * 9 / 16)))}}