/* 利用者の声（一覧 /voice・詳細 /voice/<slug>。テンプレートは src/templates/collections.mjs）専用。
   見出しラベル（.t-label / .t-h2）・相談CTA（.t-contact）は top.css を共用し、ここでは利用者の声だけの値を指定する。
   値は現行 STUDIO 版を 1440/1280/1024/768/390/375px で測って合わせた。ブレークポイントは現行と同じ 1280 / 840 / 540 / 320px。
   現行から意図して変えた点には「現行は…」とコメントを付けている。 */

/* ---------- 一覧（/voice） ---------- */
.v-hero{padding:60px 100px;display:flex;flex-direction:column;align-items:center;background:#fff}
.v-hero .t-h2{margin-bottom:20px !important}
.v-hero__lead{color:#333;font-size:16px;line-height:1.4}

/* インタビュー動画 */
.v-interview{padding:50px 0;background:var(--g);display:flex;flex-direction:column;align-items:center}
.v-interview__head{width:960px;max-width:100%;margin-bottom:30px;display:flex;align-items:center}
.v-interview__head h2{color:#fff;font-size:24px;font-weight:600;line-height:1.4}
.v-interview__head p{margin-left:15px !important;color:#cfe8db;font-size:16px;font-weight:600;line-height:1.4}
/* 現行は幅 460px×3本＋間隔 40px（1460px）を 960px の枠に入れていて、1440px 以下で左右の動画が画面外に切れる。
   画面の左右 30px 以内に収め、1本の幅を最大 460px にする（トップの「利用者の声」と同じ考え方） */
.v-interview__row{width:min(1460px,calc(100% - 60px));display:flex;align-items:flex-start;justify-content:center;gap:0 40px}
.v-interview__item{width:calc((100% - 80px) / 3);max-width:460px;display:flex;flex-direction:column;align-items:center}
.v-interview__btn{display:block;width:100%;padding:0;border:0;border-radius:10px;background:none;cursor:pointer}
.v-interview__btn img{display:block;width:100%;border-radius:10px;transition:opacity .3s cubic-bezier(.4,.4,0,1)}
.v-interview__btn:hover img{opacity:.8}
.v-interview__item p{margin-top:10px !important;color:#fff;font-size:16px;font-weight:600;line-height:1.4;text-align:center}

/* 導入事例カード */
.v-list{width:960px;max-width:100%;margin:40px auto 100px;display:flex;flex-direction:column}
.v-card{display:flex;align-items:center;margin-bottom:60px;border-radius:12px;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);color:#333}
.v-card__img{flex:none;width:50%;height:280px;border-radius:12px 0 0 12px;overflow:hidden}
.v-card__img img{width:100%;height:100%;object-fit:cover}
.v-card__body{flex:1;min-width:0;margin:0 40px;display:flex;flex-direction:column;align-items:flex-start}
.v-list .v-card__title{color:#333;font-size:20px;font-weight:800;line-height:1.4}
.v-card .v-card__logo{width:auto;max-width:100%;height:40px;margin:10px 0}
/* 現行は会社名だけ読み込んでいない Lato 指定（端末の既定書体で表示される）。ほかの文字と同じ書体にする */
.v-card__company{margin:10px 0 20px !important;color:#333;font-size:16px;font-weight:700;line-height:1}
.v-tags{display:flex;flex-wrap:wrap}
.v-tags li{margin:0 5px 5px 0;padding:5px 15px;border-radius:32px;background:rgba(148,201,166,.5);color:var(--g);font-size:15px;font-weight:500;line-height:1.4}

/* 動画のポップアップ（現行: 黒 80% の幕に幅 800px の動画だけ。0.4 秒でフェード） */
.page-voice #video-dialog{width:800px;max-width:calc(100% - 40px);max-height:none;padding:0;border-radius:0;background:transparent;overflow:visible;opacity:0;transition:opacity .4s cubic-bezier(.4,.4,0,1),overlay .4s allow-discrete,display .4s allow-discrete}
.page-voice #video-dialog::backdrop{background:rgba(0,0,0,.8);opacity:0;transition:opacity .4s cubic-bezier(.4,.4,0,1),overlay .4s allow-discrete,display .4s allow-discrete}
.page-voice #video-dialog[open],.page-voice #video-dialog[open]::backdrop{opacity:1}
@starting-style{.page-voice #video-dialog[open],.page-voice #video-dialog[open]::backdrop{opacity:0}}
.page-voice #video-dialog .video-frame{aspect-ratio:16/9}
.page-voice #video-dialog iframe{display:block;width:100%;height:100%;border:0;background:#000}
/* 現行は閉じるボタンが無く幕のクリックだけで閉じる。スマホでも閉じ方が分かるよう、動画の右上に小さく出す */
.page-voice #video-dialog .dialog-close{position:absolute;right:0;bottom:calc(100% + 8px);margin:0;padding:4px 2px;border:0;border-radius:0;background:none;color:#fff;font-size:14px;font-weight:600;line-height:1.4}
.page-voice #video-dialog .dialog-close:hover{opacity:.7}

/* ---------- 詳細（/voice/<slug>） ---------- */
.page-voice-detail{background:#f6f7f9}
.t-main.v-article{background:none}
/* 画面上部に固定した淡い背景画像（現行と同じく、スクロールしても画面上部に残る） */
.v-article__bg{position:fixed;left:0;top:0;z-index:-1;width:100%;height:400px;opacity:.5;background:url(/media/templates/voice/c3fe6a86-9caa-4c53-b993-a899817bdeed.png) center/cover no-repeat;pointer-events:none}
/* 現行はヘッダー（70px）の裏から上余白 140px。ここのヘッダーは場所を取るので、その分を引いている */
.v-article__hero{width:1100px;max-width:100%;margin:0 auto;padding:70px 20px 0}
.v-article__box{display:flex;align-items:center;gap:50px;padding:40px 0 50px 50px;background:#fff}
.v-article__info{flex:none;width:calc(50% - 25px);display:flex;flex-direction:column;align-items:flex-start}
.v-article__label{margin-bottom:40px !important;color:#333;font-size:20px;font-weight:700;line-height:1.4}
.v-article .v-article__title{width:100%;padding-bottom:20px;color:#333;font-size:28px;font-weight:800;line-height:1.5}
.v-article .v-article__logo{width:auto;max-width:100%;height:40px}
.v-article__company{margin:20px 0 10px !important;display:flex;align-items:center;color:#333;font-size:20px;font-weight:700;line-height:1}
/* 「様」は画面幅によらず 20px（現行どおり） */
.v-article__company span+span{margin-left:10px;font-size:20px}
.v-article__units{margin-bottom:10px !important;color:#333;font-size:16px;font-weight:500;line-height:1.4}
.v-tags--hero li{background:rgba(148,201,166,.4);font-weight:600;padding:5px 25px}
/* 管理戸数が無い記事も、現行と同じく管理戸数の行の下余白（10px）を空ける */
.v-article__company+.v-tags{margin-top:10px}
/* 写真は白い枠から右と上に 100px はみ出す。現行は画面幅 1280px 未満で右端が画面外に切れるため、はみ出しを画面内に収まる分だけにする */
.v-article__photo{--oh:clamp(0px,(100vw - 1080px) / 2,100px);flex:none;width:calc(50% + var(--oh) - 25px);margin:-100px calc(-1 * var(--oh)) 0 0}
.v-article__photo img{display:block;width:100%;height:auto}

/* 本文（Markdown）。現行の STUDIO リッチテキストと同じ値。PC の本文の幅は 720px（現行は 960px で1行が約60字と長く読みにくい） */
.v-article__body{display:flow-root;width:760px;max-width:100%;margin:0 auto;padding:40px 20px;color:#333;font-size:16px;line-height:1.4}
.v-article__body>p{margin:20px 0;line-height:1.7}
/* 画像だけの段落（Markdown の ![](…)）は現行の写真枠（figure）と同じ上下 10px */
.v-article__body>p:has(>img:only-child){margin:10px 0}
.v-article__body img{display:block;max-width:100%;height:auto}
.v-article__body>h2{margin:60px 0 10px;padding:8px 0 6px;color:var(--g);font-size:24px;font-weight:700;line-height:1.4}
.v-article__body>h3{margin:10px 0;padding:5px 0;font-size:20px;font-weight:700;line-height:1.4}
.v-article__body strong{font-weight:700}
/* 区切り線: 現行は前後に空の段落が入っていて、線の上下が 56px 空く（全記事共通） */
.v-article__body>hr{height:2px;margin:56px 0;border:0;border-top:1px solid #ccc;border-bottom:1px solid #eee}
.v-article__body a{color:var(--g);text-decoration:underline}
.v-article__body>:is(ul,ol){margin:20px 0;padding-left:1.5em;line-height:1.7;list-style:revert}
.v-article__body>blockquote{margin:16px 0;padding:10px 16px;background:#f4f4f4;line-height:1.6}
.v-article__body .embed{margin:20px 0;aspect-ratio:16/9}
.v-article__body .embed iframe{display:block;width:100%;height:100%;border:0}

@media (max-width:840px){
  .v-hero{padding:50px 40px}
  .v-interview__head{justify-content:center}
  .v-interview__head h2{font-size:22px}
  .v-interview__row{width:100%;flex-direction:column;align-items:center;gap:40px}
  .v-interview__item{width:460px;max-width:100%}
  .v-list{width:auto;margin:50px 20px 100px}
  .v-card{flex-direction:column;align-items:stretch;margin:0 15px 30px;overflow:hidden}
  /* 現行は写真の左下だけ角丸が残るため、上だけ角丸にする */
  .v-card__img{width:100%;height:240px;border-radius:12px 12px 0 0}
  /* 現行の 541〜840px は本文の左右余白が 0 で、文字がカードの端に付く／短い文は中央に寄る。540px 以下と同じ 30px にする */
  .v-card__body{margin:30px}
  .v-card__company{margin:10px 0 15px !important;font-size:18px}
  .v-tags li{border-radius:24px;background:var(--sage);color:#1a5236}
  .v-tags--hero li{padding:5px 15px}

  .v-article__hero{padding:70px 15px 0}
  .v-article__box{flex-direction:column;padding:50px 15px 0}
  .v-article__info{width:100%}
  .v-article__label{margin-bottom:30px !important}
  .v-article .v-article__title{font-size:24px}
  .v-article__company{margin:25px 0 15px !important;font-size:18px}
  .v-article__photo{width:100%;margin:0}
  .v-article__body>h2{margin:40px 0 10px;font-size:20px}
  .v-article__body>h3{font-size:18px}
}
@media (max-width:540px){
  /* 現行はヘッダーが 60px になっても一覧の開始位置が 70px のまま */
  .v-index{padding-top:10px}
  .v-hero{padding:40px 20px}
  .v-hero .t-h2{margin-bottom:10px !important}
  .v-interview__row{padding:0 15px}
  .v-interview__item{width:100%}
  .v-list{margin:30px 20px 100px}
  .v-card{margin:0 0 30px}

  .v-article__hero{padding:60px 20px 0}
  .v-article__box{margin-bottom:30px;padding:50px 15px 30px}
  .v-article__label{margin-bottom:20px !important}
  .v-article .v-article__title{padding-bottom:10px}
  .v-article__body{margin-bottom:50px;padding:0 20px 40px}
}
@media (max-width:320px){
  .v-hero{padding:40px 15px}
  .v-list{margin:30px 15px 100px}
  .v-list .v-card__title{font-size:16px}
  .v-card__company{font-size:16px}
  .v-tags li{font-size:14px}

  .v-article__hero{padding:20px 15px 0}
  .v-article__box{gap:30px;padding:30px 15px}
  .v-article__label{font-size:16px}
  .v-article .v-article__title{padding-bottom:20px;font-size:18px}
  .v-article__company{margin:25px 0 10px !important}
  .v-article__body>h2{font-size:18px}
  .v-article__body>h3{font-size:16px}
  .v-article__body>p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .v-interview__btn img,.page-voice #video-dialog,.page-voice #video-dialog::backdrop{transition:none}
}