/* 平板（タブレット）動画モジュール
   首屏の設備環（hero-tech.css）と同じ質感の外枠を、本文欄でも使う。 */

/* 1 行に 1 台だけ並べ、画面の中央に置く。
   横に 2 台並ぶと、大きさの違う端末が左右にずれて中央から外れて見える。 */
.tv-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    margin: 56px auto 20px;
    padding: 0 16px;
    max-width: 1200px;
    box-sizing: border-box;
}

.tv-module {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tv-landscape {
    width: 620px;
    max-width: 100%;
}

.tv-portrait {
    width: 360px;
    max-width: 100%;
}

/* 外枠：金属フレーム */
.tv-frame {
    width: 100%;
    padding: 16px;
    border-radius: 34px;
    background: linear-gradient(160deg, #2a2f38 0%, #12151a 55%, #0a0c10 100%);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 0 0 2px #3a404c;
    box-sizing: border-box;
}

.tv-portrait .tv-frame {
    border-radius: 30px;
    padding: 14px;
}

/* ===== 触れたときの青い発光 =====
   縁を青く光らせ、外側へ光暈を広げる。
   :focus-within を知らないブラウザは規則ごと捨ててしまうため、
   hover と別の規則に分けて書いている（まとめると hover も効かなくなる）。 */
.tv-frame {
    transition: box-shadow .3s ease, transform .3s ease;
}

.tv-module:hover .tv-frame {
    transform: translateY(-3px);
    box-shadow:
        0 26px 54px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(77, 163, 255, 0.95),
        0 0 0 5px rgba(77, 163, 255, 0.3),
        0 0 26px 5px rgba(77, 163, 255, 0.55),
        0 0 64px 14px rgba(77, 163, 255, 0.3),
        inset 0 0 0 2px #4da3ff;
}

.tv-module:focus-within .tv-frame {
    transform: translateY(-3px);
    box-shadow:
        0 26px 54px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(77, 163, 255, 0.95),
        0 0 0 5px rgba(77, 163, 255, 0.3),
        0 0 26px 5px rgba(77, 163, 255, 0.55),
        0 0 64px 14px rgba(77, 163, 255, 0.3),
        inset 0 0 0 2px #4da3ff;
}

/* 指で触れている間。touch では hover が残り続けるため JS で付け外しする。 */
.tv-module.is-lit .tv-frame {
    transform: translateY(-3px);
    box-shadow:
        0 26px 54px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(77, 163, 255, 0.95),
        0 0 0 5px rgba(77, 163, 255, 0.3),
        0 0 26px 5px rgba(77, 163, 255, 0.55),
        0 0 64px 14px rgba(77, 163, 255, 0.3),
        inset 0 0 0 2px #4da3ff;
}

@media (prefers-reduced-motion: reduce) {
    .tv-frame {
        transition: box-shadow .3s ease;
    }
    .tv-module:hover .tv-frame,
    .tv-module.is-lit .tv-frame {
        transform: none;
    }
    .tv-module:focus-within .tv-frame {
        transform: none;
    }
}

/* 画面：クリックで全画面再生 */
.tv-screen {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    display: block;
}

.tv-landscape .tv-screen {
    aspect-ratio: 16 / 10;
}

.tv-portrait .tv-screen {
    aspect-ratio: 3 / 4;
}

/* aspect-ratio 未対応ブラウザ向けの保険 */
@supports not (aspect-ratio: 1 / 1) {
    .tv-landscape .tv-screen {
        height: 0;
        padding-bottom: 62.5%;
    }
    .tv-portrait .tv-screen {
        height: 0;
        padding-bottom: 133.33%;
    }
}

.tv-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    border: 0;
}

/* 再生の三角マーク */
.tv-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 74px;
    height: 74px;
    margin: -37px 0 0 -37px;
    border-radius: 50%;
    background: rgba(12, 15, 20, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.85);
    transition: transform .25s ease, background .25s ease;
    pointer-events: none;
}

.tv-play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent #fff;
}

.tv-screen:hover .tv-play,
.tv-screen:focus .tv-play {
    transform: scale(1.08);
    background: rgba(12, 15, 20, 0.72);
}

.tv-screen:focus {
    outline: 2px solid #4da3ff;
    outline-offset: 3px;
}

.tv-caption {
    margin: 16px 0 0;
    /* 端末幅に縛らず、后台テキストエリアと同じ段落を保つ */
    width: 720px;
    max-width: 92vw;
    box-sizing: border-box;
    color: #d8dee6;
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    transform: translateX(calc(var(--tv-caption-x, 0px) + var(--tv-caption-sp, 0ch)));
}

/* 文案が上のとき */
.tv-caption-above {
    margin: 0 0 16px;
}

/* モジュールごとの見出し。端末の上・常に中央固定（左右位置スライダーの対象外）。 */
.tv-heading {
    margin: 0 0 18px;
    width: 720px;
    max-width: 92vw;
    color: var(--tech-heading, #dbe7f5);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    transform: none !important;
    left: auto !important;
}

.tv-iphone-break {
    display: none;
}

/* ===== 画像だけのモジュール =====
   再生しないので押せる見た目にしない。
   画面の比率と合わない画像でも UI が切れないよう contain で収める
   （余りは黒。端末の画面と同じ比率で用意すれば余白は出ない）。 */
/* 押すと 200% に拡大するので、その旨が分かる形にする */
.tv-still .tv-screen {
    cursor: zoom-in;
}

/* 画面の中央に置く。
   .tv-poster が object-position: center top を指定しているため、
   object-position で上書きする形にすると記述順や詳細度に左右され、
   環境によって上に寄ってしまう。
   そこで transform で中央へ動かし、位置の指定を object-position から切り離す。

   width:100% / height:auto にすると要素の箱が画像の比率そのものになるので、
   横長の画像でも箱ごと中央に来る。
   縦長で画面より高くなる場合は max-height で抑え、
   その時だけ object-fit: contain が内側で効いて左右に余りが出る。 */
.tv-still .tv-still-img {
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    max-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    object-position: center center;
}

/* ===== 画像が複数のモジュール =====
   触れている間だけ横へ送る。拡大はしないので zoom-in を打ち消す。 */
.tv-slides .tv-screen {
    cursor: default;
}

/* 画面を埋める帯。中に画面幅ちょうどの区画を並べ、
   帯ごと左へずらして送る。画面は overflow: hidden なので外は見えない。 */
.tv-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    transform: translateX(0);
    transition: transform .55s ease;
}

.tv-slide {
    position: relative;
    /* 画面の幅ぴったり。帯の幅が画面と同じなので
       translateX(-100%) で 1 区画ぶん進む。 */
    flex: 0 0 100%;
    height: 100%;
}

/* 位置の考え方は .tv-still-img と同じ（transform で中央へ） */
.tv-slide-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    max-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    object-position: center center;
    display: block;
}

/* 何枚目かの目印。触れていない時も枚数が分かるよう常に出す。 */
.tv-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 3;
    text-align: center;
    pointer-events: none;
}

.tv-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
    transition: background .3s ease, transform .3s ease;
}

.tv-dot.is-on {
    background: #fff;
    transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
    .tv-track {
        transition: none;
    }
}

/* ===== iPhone 外枠 =====
   平板より縁を細く、角を大きく丸め、画面比も端末に合わせる。
   .tv-portrait .tv-frame と詳細度が同じ規則があるため、
   打ち消せるようこの節は基本規則より後ろに置いている。 */
/* モジュール幅＝端末幅。文案は端末の中心に載せ、はみ出して右に寄って見えないようにする。 */
.tv-phone.tv-landscape {
    width: 560px;
}

.tv-phone.tv-portrait {
    width: 300px;
}

.tv-phone .tv-frame {
    position: relative;
    width: 100%;
    padding: 9px;
    border-radius: 46px;
}

.tv-phone .tv-screen {
    border-radius: 38px;
}

.tv-phone.tv-landscape .tv-screen {
    aspect-ratio: 19.5 / 9;
}

.tv-phone.tv-portrait .tv-screen {
    aspect-ratio: 9 / 19.5;
}

@supports not (aspect-ratio: 1 / 1) {
    .tv-phone.tv-landscape .tv-screen {
        height: 0;
        padding-bottom: 46.15%;
    }
    .tv-phone.tv-portrait .tv-screen {
        height: 0;
        padding-bottom: 216.67%;
    }
}

/* 上部の黒いくぼみ（Dynamic Island）。実機と同じく画面に重ねる。 */
.tv-phone .tv-frame::after {
    content: '';
    position: absolute;
    background: #05070a;
    border-radius: 14px;
    z-index: 2;
    pointer-events: none;
}

.tv-phone.tv-portrait .tv-frame::after {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 86px;
    height: 24px;
}

/* 横向きでは左端に来る */
.tv-phone.tv-landscape .tv-frame::after {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 24px;
    height: 86px;
}

/* 画面が狭いので再生マークも小さくする */
.tv-phone .tv-play {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
}

.tv-phone .tv-play::after {
    border-width: 11px 0 11px 17px;
}

/* 文案を端末幅の箱に入れて中央へ。短い行は shrink-wrap、長い行は端末幅で折り返す。
   左右移動は --tv-phone-nudge（后台「左右位置 iPhone」）を wrap に載せる。 */
.tv-phone-copy {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    transform: translateX(var(--tv-phone-nudge, 0px));
}

.tv-phone .tv-caption {
    width: -webkit-max-content;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    transform: none !important;
    left: auto !important;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.tv-phone .tv-heading {
    width: 100%;
    max-width: 100%;
    text-align: center !important;
    transform: none !important;
}

/* 全画面再生 */
.tv-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.tv-overlay.is-open {
    display: flex;
}

.tv-overlay-video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: #000;
}

/* 画像の拡大表示。
   大きさは JS が実寸で指定するため、ここでは位置と背景だけ持つ。 */
.tv-zoom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 8, 14, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: zoom-out;
}

.tv-zoom.is-open {
    display: flex;
}

.tv-zoom-img {
    display: block;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    cursor: default;
}

.tv-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.tv-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* 全画面中は背面をスクロールさせない */
body.tv-locked {
    overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .tv-list {
        gap: 44px;
        margin-top: 44px;
    }
    .tv-landscape {
        width: 100%;
    }
    .tv-portrait {
        width: 320px;
    }
    .tv-phone.tv-portrait {
        width: 270px;
    }
}

@media screen and (max-width: 640px) {
    .tv-frame {
        padding: 10px;
        border-radius: 24px;
    }
    .tv-screen {
        border-radius: 14px;
    }
    .tv-play {
        width: 58px;
        height: 58px;
        margin: -29px 0 0 -29px;
    }
    .tv-play::after {
        border-width: 10px 0 10px 16px;
    }
    /* iPhone は角の丸みが特徴なので、狭い画面でも潰さない */
    .tv-phone .tv-frame {
        padding: 7px;
        border-radius: 38px;
    }
    .tv-phone .tv-screen {
        border-radius: 32px;
    }
    .tv-phone.tv-portrait .tv-frame::after {
        top: 14px;
        width: 74px;
        height: 20px;
    }
    .tv-phone.tv-landscape .tv-frame::after {
        left: 14px;
        width: 20px;
        height: 74px;
    }
    .tv-phone .tv-play {
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
    }
    .tv-phone .tv-play::after {
        border-width: 9px 0 9px 14px;
    }
    .tv-caption {
        font-size: 14px;
        padding: 0 6px;
    }
    /* iPhone 幅：文案だけ「左右位置（iPhone）」を加算。見出しは中央のまま */
    .tv-tablet .tv-caption {
        transform: translateX(calc(var(--tv-caption-x, 0px) + var(--tv-caption-sp, 0ch) + var(--tv-phone-nudge, 0px)));
    }
    .tv-tablet .tv-heading {
        transform: none !important;
    }
    .tv-iphone-break {
        display: block;
    }
    .tv-heading-lgs {
        text-align: center !important;
        transform: none !important;
        white-space: normal;
    }
    .tv-close {
        top: 10px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 26px;
    }
}

/* ===== コンテンツ回転（管理画面「時計回り」） =====
   端末フレーム（.tv-frame）は絶対に回さない。
   画面（.tv-screen）の中だけで映像を回し、はみ出しは overflow で切る。 */
.tv-screen {
    container-type: size;
}

/* 90° / 270°：幅と高さを入れ替えてから回す → 画面いっぱいに敷き詰まり、枠が傾いて見えない */
.tv-poster.tv-rot-90,
.tv-poster.tv-rot-270,
.tv-still .tv-still-img.tv-rot-90,
.tv-still .tv-still-img.tv-rot-270,
.tv-slide-img.tv-rot-90,
.tv-slide-img.tv-rot-270 {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 100cqh;
    height: 100cqw;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
}

.tv-poster.tv-rot-90,
.tv-still .tv-still-img.tv-rot-90,
.tv-slide-img.tv-rot-90 {
    transform: translate(-50%, -50%) rotate(90deg);
}

.tv-poster.tv-rot-270,
.tv-still .tv-still-img.tv-rot-270,
.tv-slide-img.tv-rot-270 {
    transform: translate(-50%, -50%) rotate(270deg);
}

.tv-poster.tv-rot-180 {
    transform: rotate(180deg);
    transform-origin: center center;
}

.tv-still .tv-still-img.tv-rot-180,
.tv-slide-img.tv-rot-180 {
    transform: translate(-50%, -50%) rotate(180deg);
}

/* cqh 未対応ブラウザ：拡大して画面を覆い、溢れた分は .tv-screen の overflow で隠す */
@supports not (width: 1cqh) {
    .tv-poster.tv-rot-90,
    .tv-poster.tv-rot-270,
    .tv-still .tv-still-img.tv-rot-90,
    .tv-still .tv-still-img.tv-rot-270,
    .tv-slide-img.tv-rot-90,
    .tv-slide-img.tv-rot-270 {
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
    }
    .tv-poster.tv-rot-90,
    .tv-still .tv-still-img.tv-rot-90,
    .tv-slide-img.tv-rot-90 {
        transform: translate(-50%, -50%) rotate(90deg) scale(1.78);
    }
    .tv-poster.tv-rot-270,
    .tv-still .tv-still-img.tv-rot-270,
    .tv-slide-img.tv-rot-270 {
        transform: translate(-50%, -50%) rotate(270deg) scale(1.78);
    }
}

.tv-overlay-video.tv-rot-90,
.tv-zoom-img.tv-rot-90 {
    transform: rotate(90deg);
}
.tv-overlay-video.tv-rot-180,
.tv-zoom-img.tv-rot-180 {
    transform: rotate(180deg);
}
.tv-overlay-video.tv-rot-270,
.tv-zoom-img.tv-rot-270 {
    transform: rotate(270deg);
}