/* ============================================================
   /service/tver/ スマホ専用の調整
   読み込み: 投稿の addheadtag 欄に <link rel="stylesheet" href="…/css/page/tver-s.css?v=YYYYMMDD">
   方針: 640px以下でのみ効く。セレクタは #tver から始めて他ページに影響させない。
   ============================================================ */
/* タブのHTMLはPCでは出さない */
@media (min-width: 641px) {
  .sp-tabs { display: none; }
  /* コラムは新着6件を出力するが、PCは従来どおり3件のみ表示 */
  #tver.contents .goto-column .flex .flexitem:nth-child(n+4) { display: none; }
}

@media (max-width: 640px) {

  /* 固定フッター（お問い合わせ／電話／TOP）は全ページ共通になったため site-common の footer.php と common-add.css に移した */

  /* ---------- 並び順: 制作実績（本文末尾近くの .inner）を「選ばれる理由」と「料金」の間へ。PCは本文の順のまま ---------- */
  #tver.contents { display: flex; flex-direction: column; }
  #tver.contents > * { order: 2; }
  /* margin: 0 auto の要素は flex の中だと中身の幅になり、中の広い表に合わせて画面からはみ出すので幅を指定 */
  #tver.contents > .train-variety { width: 100%; }
  #tver.contents > h1.special-heading,
  #tver.contents > .osusume,
  #tver.contents > .reason { order: 0; }
  #tver.contents > .inner:has(.works) { order: 1; width: 93.75%; margin: 0 auto; padding-top: 10.9375vw; }
  /* flex では上下のmarginが相殺されないため、見出しと「おすすめ」の間は「おすすめ」側の30pxだけにする */
  #tver.contents > h1.special-heading { margin-bottom: 0; }

  /* ---------- 制作実績: 動画を1列に3つ縦並び ---------- */
  #tver.contents .works .work-list { display: block; }
  #tver.contents .works .work-list .item { width: 100%; margin: 0 0 8vw; }
  #tver.contents .works .work-list .item figure iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; }
  /* 「TVer広告配信・動画制作」は3件とも同じなので出さず、社名と「→詳しくはこちら」を1行に（リンクは右寄せ） */
  #tver.contents .works .work-list .item dl { display: flex; justify-content: space-between; align-items: baseline; gap: 2vw; }
  #tver.contents .works .work-list .item dl dd:not(.more) { display: none; }
  #tver.contents .works .work-list .item dl dd.more { flex-shrink: 0; margin: 0; }

  /* ---------- 上部: キービジュアルとキャッチ ---------- */
  .title-main#title-tver .inner figure { width: 84vw; margin: 0 auto; }

  /* ---------- 選ばれる理由: アイコンを小さく、カードを詰める ---------- */
  /* 画像は 100×184px。数字は y0–38 (x22–80)、イラストは y74–183 に描かれている */
  #tver.contents .reason ul li:nth-child(1) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/reason01.png); }
  #tver.contents .reason ul li:nth-child(2) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/reason02.png); }
  #tver.contents .reason ul li:nth-child(3) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/reason03.png); }
  #tver.contents .reason ul li:nth-child(4) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/reason04.png); }
  #tver.contents .reason ul li {
    position: relative; display: flex; flex-direction: column;
    text-align: left; margin-bottom: 4vw; padding: 3vw 3vw 4vw;
  }
  #tver.contents .reason ul li img { display: none; }
  /* 連番の数字は出さず、イラストだけを小さく中央に */
  #tver.contents .reason ul li::after {
    content: ""; order: -1; display: block; align-self: center; width: 13vw; height: 14.3vw; margin: 2vw auto 3vw;
    background: var(--icon) no-repeat 0 -9.6vw / 13vw auto;
  }
  #tver.contents .reason ul li span { text-align: left; }
  #tver.contents .reason ul li span br { display: none; }   /* 元の改行は無視して自然に折り返す */

  /* ---------- 配信例: 写真の高さを揃え、余白を詰める ---------- */
  #tver.contents .example .ex > div:not(.voice) > figure { margin-bottom: 5vw; }
  #tver.contents .example .ex > div:not(.voice) > figure img {
    width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block;
  }
  #tver.contents .example .ex p { margin-bottom: 12px; }
  #tver.contents .example .ex ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw 3vw; width: 100%; box-sizing: border-box; padding: 0 2vw; }
  #tver.contents .example .ex ul li { font-size: 3.4vw; margin-bottom: 0; }
  #tver.contents .example .ex > div { margin-bottom: 6vw; padding-bottom: 6vw; }

  /* ---------- お客様の声: イラストを小さく、上下余白を詰める ---------- */
  #tver.contents .example .ex .voice {
    margin-bottom: 12vw;
    padding: 13vw 6vw 6vw;
  }
  #tver.contents .example .ex .voice figure { width: 22vw; top: -11vw; margin-bottom: 0; z-index: 1; }
  #tver.contents .example .ex .voice figure img { width: 100%; height: auto; display: block; }
  #tver.contents .example .ex .voice h3 { font-size: 5.6vw; margin-bottom: 3vw; }
  #tver.contents .example .ex .voice dl { margin-bottom: 4vw; }
  #tver.contents .example .ex p.txt-voice { margin-bottom: 12vw; }

  /* ---------- メディアデータ／属性データ: 詰める ---------- */
  #tver.contents .mediadata p { margin-bottom: 5vw; }
  #tver.contents .attribute figure img { width: 88%; margin: 0 auto; display: block; }

  /* ---------- 資料請求CTA（tver-simulation）: イラストを小さく ---------- */
  #tver.contents .tver-simulation__left img { width: 30vw; }

  /* ---------- 10のメリット・特徴: 画像内の「数字」と「イラスト」を切り出し、イラストは中央、数字は見出し(dt)の左 ----------
     画像は 135×180px。数字は y0–38、イラストは y78–180 に描かれている。--icon は div に置き figure と dt の両方で使う */
  #tver.contents .reason10 .reason10-in > div:nth-child(1) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/icon-tver01.png); --nx: 43; --nw: 48; }
  #tver.contents .reason10 .reason10-in > div:nth-child(2) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/icon-tver02.png); --nx: 47; --nw: 56; }
  #tver.contents .reason10 .reason10-in > div:nth-child(3) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/icon-tver03.png); --nx: 41; --nw: 56; }
  #tver.contents .reason10 .reason10-in > div:nth-child(4) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/icon-tver04.png); --nx: 32; --nw: 57; }
  #tver.contents .reason10 .reason10-in > div:nth-child(5) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/icon-tver05.png); --nx: 40; --nw: 57; }
  #tver.contents .reason10 .reason10-in > div:nth-child(6) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/icon-tver06.png); --nx: 39; --nw: 59; }
  #tver.contents .reason10 .reason10-in > div:nth-child(7) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/icon-tver07.png); --nx: 42; --nw: 58; }
  #tver.contents .reason10 .reason10-in > div:nth-child(8) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/icon-tver08.png); --nx: 39; --nw: 58; }
  #tver.contents .reason10 .reason10-in > div:nth-child(9) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/icon-tver09.png); --nx: 39; --nw: 58; }
  #tver.contents .reason10 .reason10-in > div:nth-child(10) { --icon: url(https://www.e-ms.co.jp/wp/wp-content/themes/e-ms/image/service/tver/icon-tver10.png); --nx: 42; --nw: 51; }
  /* 左右2枚で「イラスト／見出し／本文」の行の高さを共有し、見出しの行数が違っても本文の開始位置を揃える（subgrid） */
  #tver.contents .reason10 .reason10-in {   /* 左右の余白(93.75%)をなくし、他セクションの表と同じ幅に。カードを広げて見出しの行数を減らす */
    display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1vw; width: 100%;
  }
  #tver.contents .reason10 .reason10-in > div {
    width: auto; margin-left: 0; margin-right: 0;
    display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  }
  #tver.contents .reason10 .reason10-in > div dl { display: contents; }
  #tver.contents .reason10 .reason10-in > div { padding: 2.5vw 3vw 3vw; margin-bottom: 4vw; }
  #tver.contents .reason10 .reason10-in > div { text-align: left; }
  #tver.contents .reason10 .reason10-in > div figure {
    display: flex; justify-content: center; align-items: center; height: 13vw; margin: 0 0 2.5vw;
  }
  #tver.contents .reason10 .reason10-in > div figure img { display: none; }
  #tver.contents .reason10 .reason10-in > div figure::after {    /* イラスト: 中央 */
    content: ""; width: 15.9vw; height: 12vw;
    background: var(--icon) no-repeat 0 -9.2vw / 15.9vw auto;
  }
  #tver.contents .reason10 .reason10-in div dl dt {
    position: relative; min-height: 5.4vw; padding-left: 8.4vw;
    text-align: left; font-weight: 700; margin-bottom: 2vw;
  }
  #tver.contents .reason10 .reason10-in div dl dt br { display: none; }   /* 元の改行は無視して自然に折り返す */
  #tver.contents .reason10 .reason10-in div dl dt::before {     /* 数字: 見出しの左、複数行なら1行目に揃える */
    /* 画像の数字部分は y0–38、横位置は画像ごとに違うので --nx(左端px) --nw(幅px) で切り出す。
       見出し(14px≒3.6vw)より少し大きい高さ4.6vw（1px=0.121vw）に縮小し、1行目(行高≒5.4vw)の中央に */
    content: ""; position: absolute; left: 0; top: 0.4vw; width: calc(var(--nw) * 0.121vw); height: 4.6vw;
    background: var(--icon) no-repeat calc(var(--nx) * -0.121vw) 0 / 16.3vw auto;
  }
  #tver.contents .reason10 .reason10-in div dl dd { text-align: left; }

  /* ---------- 他社との違い: 横スクロール表 → タブで比較先を切替 ---------- */
  .sp-tabs { display: flex; align-items: flex-end; gap: 1.5vw; width: 93.75%; margin: 0 auto; padding: 0 2vw; box-sizing: border-box; border-bottom: 3px solid #1254ae; }
  .sp-tabs input { display: none; }
  .sp-tabs label {
    flex: 1; text-align: center; padding: 2.6vw 1vw; box-sizing: border-box;
    border-radius: 2.5vw 2.5vw 0 0; background: #dfe6f0; color: #1254ae;
    font-weight: 700; font-size: 3.6vw; line-height: 1.2;
  }
  .sp-tabs input:checked + label { background: #1254ae; color: #fff; padding-top: 3.6vw; }
  .sp-tabs label::before { content: "▶ "; font-size: 2.6vw; opacity: .6; }
  .sp-tabs input:checked + label::before { content: "▼ "; opacity: 1; }
  #tver.contents .difference .inner table th:first-of-type,
  #tver.contents .difference .inner table th:last-of-type { border-radius: 0; }
  #tver.contents .difference .table-box { overflow: visible; }
  /* 表見出しはタブ（濃い青）と区別するため薄い地色に */
  #tver.contents .difference .inner table tr:first-child th { background: #d6e4f6; color: #1254ae; }
  #tver.contents .difference .inner table { width: 100%; margin-bottom: 8vw; table-layout: fixed; }   /* タブを切り替えても列幅を変えない */
  #tver.contents .difference .inner table th,
  #tver.contents .difference .inner table th:last-of-type { width: auto; white-space: normal; }
  #tver.contents .difference .inner table th { padding-left: 1vw; padding-right: 1vw; }   /* (エムズコーポレーション) を1行に */
  #tver.contents .difference .inner table th:first-of-type,
  #tver.contents .difference .inner table td.color-th { width: 21%; }   /* 4文字（こんな時・サポート）が収まる幅 */
  #tver.contents .difference:has(#diff-tab-tv:checked) table th:nth-child(4),
  #tver.contents .difference:has(#diff-tab-tv:checked) table td:nth-child(4),
  #tver.contents .difference:has(#diff-tab-other:checked) table th:nth-child(3),
  #tver.contents .difference:has(#diff-tab-other:checked) table td:nth-child(3) { display: none; }

  /* ---------- よくあるご質問: Qのみ表示、タップでAを開く ---------- */
  #tver.contents .faq .inner .detail dl dt {
    position: relative; cursor: pointer;
    padding-right: 9vw; margin-bottom: 0; padding-top: 3.5vw; padding-bottom: 3.2vw;
  }
  #tver.contents .faq .inner .detail dl dt::before { top: 2.4vw; }
  #tver.contents .faq .inner .detail dl dt::after {
    content: ""; position: absolute; right: 2vw; top: 50%;
    width: 2.6vw; height: 2.6vw;
    border-right: 2px solid #1254ae; border-bottom: 2px solid #1254ae;
    transform: translateY(-75%) rotate(45deg);
  }
  #tver.contents .faq .inner .detail dl dt.is-open::after { transform: translateY(-25%) rotate(-135deg); }
  #tver.contents .faq .inner .detail dl dd { display: none; margin: 3vw 0 5vw; }
  #tver.contents .faq .inner .detail dl dt.is-open + dd { display: block; }

  /* ---------- 審査: 2列表 → タブで「業態考査／素材考査」を切替 ---------- */
  #tver.contents .examination .inner { padding: 0; width: 93.75%; margin: 0 auto; }
  .sp-tabs--exam { width: 100%; }
  #tver.contents .examination .inner .examination-table { border-radius: 0 0 2vw 2vw; }
  #tver.contents .examination .inner .scroll { overflow: visible; }
  #tver.contents .examination .inner .examination-table { width: 100%; margin-right: 0; table-layout: fixed; }
  #tver.contents .examination .inner .examination-table td { padding: 4vw; }
  #tver.contents .examination .inner .examination-table th:nth-child(1) { background: #d6e4f6; color: #1254ae; }
  #tver.contents .examination .inner .examination-table th:nth-child(2) { background: #d3f0f1; color: #07767c; }
  #tver.contents .examination:has(#exam-tab-1:checked) .examination-table th:nth-child(2),
  #tver.contents .examination:has(#exam-tab-1:checked) .examination-table td:nth-child(2),
  #tver.contents .examination:has(#exam-tab-2:checked) .examination-table th:nth-child(1),
  #tver.contents .examination:has(#exam-tab-2:checked) .examination-table td:nth-child(1) { display: none; }
  #tver.contents .examination .inner .examination-notice { width: 100%; }

  /* ---------- お役立ちコラム: 縦3件 → 横スクロールのカード（Swiper 自動再生） ---------- */
  #tver.contents .goto-column .sp-column-swiper { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 0 4vw; box-sizing: border-box; overflow: hidden; }
  #tver.contents .goto-column .sp-column-swiper .swiper-slide { opacity: .35; transition: opacity .4s; }
  #tver.contents .goto-column .sp-column-swiper .swiper-slide-active { opacity: 1; }
  /* JS実行前から横並びにしておく（縦→横に切り替わる瞬間をなくす）。gap は Swiper が計算に入れないので必ず 0 */
  #tver.contents .goto-column .inner .flex { display: flex; flex-wrap: nowrap; gap: 0; width: 100vw; margin: 0 0 4vw calc(50% - 50vw); padding: 0 0 0 calc(15vw - 6px); box-sizing: border-box; overflow: hidden; }
  #tver.contents .goto-column .inner .flex .flexitem { margin: 0 6px; }   /* 左右対称にすると中央寄せが正確になる */
  #tver.contents .goto-column .sp-column-swiper .flex { padding: 0; margin: 0; overflow: visible; }
  #tver.contents .goto-column .inner .flex .flexitem { width: 70vw; flex: 0 0 70vw; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
  #tver.contents .goto-column .sp-column-swiper .flexitem a { display: block; }
  #tver.contents .goto-column .sp-column-swiper .flexitem figure { margin: 0; }
  #tver.contents .goto-column .sp-column-swiper .flexitem figure img { width: 100%; aspect-ratio: 450 / 240; object-fit: cover; display: block; }
  #tver.contents .goto-column .sp-column-swiper .flexitem dl { padding: 3vw; }
  #tver.contents .goto-column .sp-column-swiper .flexitem dt { font-size: 3.6vw; line-height: 1.4; margin-bottom: 1.5vw;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #tver.contents .goto-column .sp-column-swiper .flexitem dd { font-size: 3vw; line-height: 1.5; color: #555;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}