/* lt-slides.css  スライドの共通 CSS（#402・#403・#404）
   読み込み：include/_lt_slides_lib.php の lt_slides_assets()（ページで 1 回だけ） */
/* 動き出す前も 1 枚目が見えるようにする（横に並んだ 2 枚目以降は枠の外で隠れる） */
.lt-slides { visibility: visible; }
.lt-slides .splide__track { overflow: hidden; }
.lt-slides .splide__slide { width: 100%; flex-shrink: 0; line-height: 0; }
.lt-slides .splide__slide picture { display: block; }
/* ページ送りは今までと同じ細い棒を、画像の下に出す */
.lt-slides .splide__pagination { position: static; padding: 20px 0 0; transform: none; }
.lt-slides .splide__pagination__page {
    background: #ced4da;
    border: 0;
    border-radius: 0;
    display: inline-block;
    height: 5px;
    width: 50px;
    margin: 3px;
    opacity: .7;
    padding: 0;
    transition: transform .2s linear;
}
.lt-slides .splide__pagination__page.is-active {
    background: #6c757d;
    transform: scale(1);
    opacity: 1;
}
/* 高速版（blaze）だった事業所は、今までどおり棒の間をあけない */
.lt-slides--blaze .splide__pagination__page { margin: 0; opacity: 1; }
.lt-slides--blaze .splide__pagination { gap: 0; }
/* #403 文字・ボタン・動画（入れたスライドだけ） */
.lt-slide { position: relative; overflow: hidden; }
.lt-slide-link { display: block; }
.lt-slide-video { position: absolute; inset: 0; overflow: hidden; background: #000; opacity: 0; transition: opacity .6s; pointer-events: none; container-type: size; }
.lt-slide-video.is-loaded { opacity: 1; }
.lt-slide-video iframe, .lt-slide-video video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); border: 0; object-fit: cover; }
.lt-slide-video--yt iframe { width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); object-fit: initial; }
@media (max-width: 767px) { .lt-slide-video--pc { display: none; } }
.lt-slide--cap::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.lt-slide--ov1::after { background: linear-gradient(to top, rgb(0 0 0 / .45), rgb(0 0 0 / .05) 60%); }
.lt-slide--ov2::after { background: rgb(0 0 0 / .45); }
.lt-slide--center.lt-slide--ov1::after { background: rgb(0 0 0 / .28); }
.lt-slide-cap { position: absolute; z-index: 1; left: 0; right: 0; padding: clamp(16px, 4vw, 56px); color: #fff; line-height: 1.6; text-shadow: 0 1px 8px rgb(0 0 0 / .35); display: flex; flex-direction: column; gap: .6em; }
.lt-slide--left-bottom .lt-slide-cap { bottom: 0; align-items: flex-start; text-align: left; }
.lt-slide--left-middle .lt-slide-cap { top: 50%; transform: translateY(-50%); align-items: flex-start; text-align: left; }
.lt-slide--center .lt-slide-cap { top: 50%; transform: translateY(-50%); align-items: center; text-align: center; }
.lt-slide-title { margin: 0; font-size: clamp(20px, 3.2vw, 44px); font-weight: bold; line-height: 1.4; letter-spacing: .04em; max-width: 24em; }
.lt-slide-text { margin: 0; font-size: clamp(13px, 1.3vw, 17px); max-width: 36em; }
.lt-slide-btn { display: inline-block; margin-top: .4em; padding: .7em 1.8em; border-radius: 999px; background: var(--lt-btn-bg, #fff); color: var(--lt-btn-color, #333); font-weight: bold; font-size: clamp(13px, 1.2vw, 16px); text-decoration: none; text-shadow: none; line-height: 1.4; }
.lt-slide-btn:hover { opacity: .88; }
@media (max-width: 767px) { .lt-slide-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }

/* ---------- #404 ブロックの中で作るスライド（parts/_slider.php） ---------- */
.lt-slider { width: 100%; }
/* 高さ：画像の比率のまま（指定なし）／小・中・大・画面いっぱい。決めた高さに収まるよう画像を切り抜く */
.lt-slider[class*="lt-slider--h-"] .lt-slide picture,
.lt-slider[class*="lt-slider--h-"] .lt-slide img { display: block; width: 100%; height: var(--lt-slider-h) !important; object-fit: cover; }
.lt-slider--h-s { --lt-slider-h: clamp(200px, 32vw, 360px); }
.lt-slider--h-m { --lt-slider-h: clamp(260px, 44vw, 520px); }
.lt-slider--h-l { --lt-slider-h: clamp(320px, 56vw, 680px); }
.lt-slider--h-full { --lt-slider-h: 100svh; }
@media (max-width: 767px) {
  .lt-slider--h-s { --lt-slider-h: 200px; }
  .lt-slider--h-m { --lt-slider-h: 280px; }
  .lt-slider--h-l { --lt-slider-h: 380px; }
  .lt-slider--h-full { --lt-slider-h: 100svh; }
}
/* バナー：数枚を並べる。間を少しあける */
.lt-slider--banner .splide__slide { width: auto; }
.lt-slider--banner .lt-slide { border-radius: 0; }
/* 両側に前後を見せる */
.lt-slider--sidepeek .lt-slide { border-radius: 0; }
/* 矢印：背景なし・細い山型（形は下の #405 で指定） */
.lt-slider .splide__arrow { background: transparent; opacity: 1; }
.lt-slider .splide__arrow svg { fill: #333; }

/* 流れ続ける帯（marquee）：splide を使わず CSS で流す。同じ並びを 2 回並べて半分だけ動かす */
.lt-marquee { overflow: hidden; width: 100%; }
.lt-marquee-track { display: flex; width: max-content; gap: var(--lt-marquee-gap, 24px); animation: lt-marquee var(--lt-marquee-dur, 40s) linear infinite; }
.lt-marquee:hover .lt-marquee-track,
.lt-marquee:focus-within .lt-marquee-track { animation-play-state: paused; }
.lt-marquee-list { display: flex; gap: var(--lt-marquee-gap, 24px); margin: 0; padding: 0; list-style: none; flex-shrink: 0; }
.lt-marquee-list > li { flex: 0 0 auto; width: var(--lt-marquee-item, 220px); line-height: 0; }
.lt-marquee-list > li img { width: 100%; height: auto; }
.lt-marquee[class*="lt-slider--h-"] .lt-marquee-list > li img { height: var(--lt-slider-h) !important; object-fit: cover; }
.lt-marquee--logo .lt-marquee-list > li img { height: 64px !important; width: 100%; object-fit: contain; }
@keyframes lt-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--lt-marquee-gap, 24px) / 2)); } }
@media (prefers-reduced-motion: reduce) {
  .lt-marquee-track { animation: none; }
  .lt-marquee { overflow-x: auto; }
}
/* バナー・両側を見せるときは 1 枚が小さいので、重ねる文字も小さくする */
.lt-slider--banner .lt-slide-cap { padding: 14px 16px; gap: .4em; }
.lt-slider--banner .lt-slide-title { font-size: clamp(15px, 1.5vw, 20px); }
.lt-slider--banner .lt-slide-text { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lt-slider--banner .lt-slide-btn { font-size: 12px; padding: .5em 1.2em; }
.lt-slider--sidepeek .lt-slide-title { font-size: clamp(18px, 2.4vw, 34px); }

/* ---------- #405 スライドの見せ方を足す ---------- */
/* 画像の切り取り位置（高さを決めたときだけ効く） */
.lt-slide--focus-top img { object-position: center top; }
.lt-slide--focus-bottom img { object-position: center bottom; }

/* 左右に分ける：片側に写真、反対側に文字。スマホでは写真が上、文字が下 */
.lt-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px); line-height: 1.7; }
.lt-split--img-right .lt-split-media { order: 2; }
.lt-split-media { line-height: 0; border-radius: 0; overflow: hidden; }
.lt-split-media img { width: 100%; height: auto; display: block; }
.lt-slider--split[class*="lt-slider--h-"] .lt-split-media img { height: var(--lt-slider-h) !important; object-fit: cover; }
.lt-split-body { display: flex; flex-direction: column; align-items: flex-start; gap: .8em; padding-block: 8px; min-width: 0; }
.lt-split-title { margin: 0; font-size: clamp(20px, 2.6vw, 36px); font-weight: bold; line-height: 1.45; letter-spacing: .04em; }
.lt-split-text { margin: 0; font-size: clamp(14px, 1.2vw, 16px); }
.lt-split .lt-slide-btn { background: var(--lt-btn-bg, #333); color: var(--lt-btn-color, #fff); }
/* 矢印と文字が重ならないように、左右をあける */
.lt-slider--split .splide__slide { padding-inline: clamp(8px, 5vw, 64px); }
@media (max-width: 767px) {
  .lt-split { grid-template-columns: 1fr; gap: 16px; }
  .lt-split--img-right .lt-split-media { order: 0; }
}

/* サムネイル付き：大きな 1 枚の下に小さな写真の列 */
.lt-thumbs-wrap { display: flex; flex-direction: column; gap: 10px; }
.lt-thumbs .splide__track { padding-block: 2px; }
.lt-thumbs .splide__track--nav > .splide__list > .lt-thumb { line-height: 0; border-radius: 0; overflow: hidden; opacity: .5; cursor: pointer; border: 0; transition: opacity .2s; }
.lt-thumbs .splide__track--nav > .splide__list > .lt-thumb.is-active { opacity: 1; border: 0; }
.lt-thumbs .lt-thumb picture, .lt-thumbs .lt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lt-thumbs .lt-thumb:focus-visible { outline: 2px solid var(--lt-btn-bg, #333); outline-offset: 2px; }

/* 縦に流れる帯：2〜3 列。奇数列は上へ、偶数列は下へ流す */
.lt-vmarquee { display: grid; grid-template-columns: repeat(var(--lt-vmarquee-cols, 3), minmax(0, 1fr)); gap: var(--lt-vmarquee-gap, 14px); height: var(--lt-slider-h); overflow: hidden; }
.lt-vmarquee--cols2 { --lt-vmarquee-cols: 2; }
.lt-vmarquee--cols3 { --lt-vmarquee-cols: 3; }
.lt-vmarquee-col { overflow: hidden; min-width: 0; }
.lt-vmarquee-track { display: flex; flex-direction: column; gap: var(--lt-vmarquee-gap, 14px); animation: lt-vmarquee var(--lt-vmarquee-dur, 30s) linear infinite; }
.lt-vmarquee-col--down .lt-vmarquee-track { animation-direction: reverse; }
.lt-vmarquee:hover .lt-vmarquee-track, .lt-vmarquee:focus-within .lt-vmarquee-track { animation-play-state: paused; }
.lt-vmarquee-list { display: flex; flex-direction: column; gap: var(--lt-vmarquee-gap, 14px); margin: 0; padding: 0; list-style: none; }
.lt-vmarquee-list > li { line-height: 0; border-radius: 0; overflow: hidden; }
/* 縦の帯は列の高さを決めるだけで、1 枚ずつは画像の比率のまま（高さの共通ルールより強くする） */
.lt-slider.lt-vmarquee .lt-vmarquee-list .lt-slide picture,
.lt-slider.lt-vmarquee .lt-vmarquee-list .lt-slide img { width: 100%; height: auto !important; display: block; }
@keyframes lt-vmarquee { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--lt-vmarquee-gap, 14px) / 2)); } }
@media (max-width: 767px) { .lt-vmarquee--cols3 { --lt-vmarquee-cols: 2; } .lt-vmarquee--cols3 .lt-vmarquee-col:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) { .lt-vmarquee-track { animation: none; } .lt-vmarquee { overflow-y: auto; } }

/* ビフォー・アフター：「後」の写真を重ね、つまみの位置から右側だけを見せる */
.lt-compare { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lt-compare-frame { position: relative; line-height: 0; overflow: hidden; border-radius: 0; touch-action: pan-y; }
.lt-compare-frame picture, .lt-compare-frame img { display: block; width: 100%; height: auto; }
.lt-slider--compare[class*="lt-slider--h-"] .lt-compare-frame img { height: var(--lt-slider-h) !important; object-fit: cover; }
.lt-compare-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--lt-compare-pos, 50%)); }
.lt-compare-after img { width: 100%; height: 100% !important; object-fit: cover; }
.lt-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--lt-compare-pos, 50%); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 6px rgb(0 0 0 / .35); pointer-events: none; }
.lt-compare-handle::after { content: "\25C0\00A0\25B6"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 8px 10px; border-radius: 999px; background: #fff; color: #333; font-size: 11px; line-height: 1; white-space: nowrap; box-shadow: 0 1px 6px rgb(0 0 0 / .3); }
.lt-compare-frame:focus-within .lt-compare-handle::after { box-shadow: 0 0 0 3px var(--lt-btn-bg, #333); }
.lt-compare-label { position: absolute; top: 12px; padding: 4px 10px; border-radius: 4px; background: rgb(0 0 0 / .55); color: #fff; font-size: 12px; line-height: 1.4; letter-spacing: .1em; pointer-events: none; }
.lt-compare-label--before { left: 12px; }
.lt-compare-label--after { right: 12px; }
.lt-compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.lt-compare-cap { line-height: 1.7; }
.lt-compare-title { margin: 0; font-weight: bold; font-size: clamp(15px, 1.4vw, 18px); }
.lt-compare-text { margin: 4px 0 0; font-size: 14px; }

/* ---------- #405 見た目を整える（TCD のデモを基準に：写真を主役、部品は控えめ、角丸 0） ---------- */
/* ページ送り：12px の丸・間隔 8px・画像の下中央。色はテーマの文字色から。アクティブは塗り */
.lt-slider.lt-slides .splide__pagination { padding: 14px 0 0; gap: 8px; justify-content: center; }
.lt-slider.lt-slides .splide__pagination__page {
    width: 12px; height: 12px; margin: 0; border-radius: 50%;
    background: transparent; border: 2px solid var(--lt-content-color, #333); opacity: .45;
    transition: opacity .2s, background-color .2s;
}
.lt-slider.lt-slides .splide__pagination__page.is-active { background: var(--lt-content-color, #333); opacity: 1; transform: none; }
.lt-slider.lt-slides .splide__pagination__page:focus-visible { outline: 2px solid var(--lt-tertiary-bg, #333); outline-offset: 2px; }
/* 矢印：背景なし・細い山型・50×50。スライドの枠の外側 */
.lt-slider .splide__arrow { width: 50px; height: 50px; background: transparent; border: 0; opacity: .8; border-radius: 0; }
.lt-slider .splide__arrow:hover { opacity: 1; }
.lt-slider .splide__arrow svg { display: none; }
.lt-slider .splide__arrow::before {
    content: ""; display: block; width: 16px; height: 16px;
    border-top: 1.5px solid var(--lt-content-color, #333); border-right: 1.5px solid var(--lt-content-color, #333);
    transform: rotate(45deg); margin-left: -6px;
}
.lt-slider .splide__arrow--prev::before { transform: rotate(-135deg); margin-left: 6px; }
.lt-slider .splide__arrow--prev { left: -56px; }
.lt-slider .splide__arrow--next { right: -56px; }
/* 写真の上に矢印を置く型（キービジュアル・両側・サムネイル）は白の細線 */
.lt-slider--keyvisual .splide__arrow::before, .lt-slider--sidepeek .splide__arrow::before, .lt-slider--thumbs .splide__arrow::before { border-color: #fff; filter: drop-shadow(0 0 2px rgb(0 0 0 / .4)); }
.lt-slider--keyvisual .splide__arrow--prev, .lt-slider--sidepeek .splide__arrow--prev, .lt-slider--thumbs .splide__arrow--prev, .lt-slider--split .splide__arrow--prev { left: 8px; }
.lt-slider--keyvisual .splide__arrow--next, .lt-slider--sidepeek .splide__arrow--next, .lt-slider--thumbs .splide__arrow--next, .lt-slider--split .splide__arrow--next { right: 8px; }
/* 左右分割は写真の上に白い矢印 */
.lt-slider--split .splide__arrow::before { border-color: #fff; filter: drop-shadow(0 0 2px rgb(0 0 0 / .4)); }
/* 枠の外に出す余白がない（幅いっぱい）スライダーは、JS が lt-arrows-inside を付けて内側に戻す */
.lt-slider.lt-arrows-inside .splide__arrow--prev { left: 8px; }
.lt-slider.lt-arrows-inside .splide__arrow--next { right: 8px; }
.lt-slider.lt-arrows-inside .splide__arrow::before { border-color: #fff; filter: drop-shadow(0 0 2px rgb(0 0 0 / .5)); }
/* 枠の外に置く余白がないときは中に入れて白線にする */
@media (max-width: 1240px) {
  .lt-slider .splide__arrow--prev { left: 4px; }
  .lt-slider .splide__arrow--next { right: 4px; }
  .lt-slider--banner .splide__arrow::before, .lt-slider--compare .splide__arrow::before { border-color: #fff; filter: drop-shadow(0 0 2px rgb(0 0 0 / .5)); }
}
/* 文字の可読性：影ではなく、テーマのアクセント色のオーバーレイ（30〜40%） */
.lt-slider .lt-slide-cap { text-shadow: none; }
.lt-slider .lt-slide--ov1::after { background: color-mix(in srgb, var(--lt-tertiary-bg, #333) 32%, transparent); }
.lt-slider .lt-slide--ov2::after { background: color-mix(in srgb, var(--lt-tertiary-bg, #333) 42%, transparent); }
.lt-slider .lt-slide--center.lt-slide--ov1::after { background: color-mix(in srgb, var(--lt-tertiary-bg, #333) 32%, transparent); }
.lt-slider .lt-slide-title { font-weight: 600; font-size: clamp(24px, 2.6vw, 40px); letter-spacing: .06em; line-height: 1.5; }
.lt-slider .lt-slide-text { font-size: 16px; line-height: 1.8; }
@media (max-width: 767px) { .lt-slider .lt-slide-text { font-size: 14px; } }
/* 画像のゆっくりズーム（キービジュアル・表示中のスライドだけ） */
.lt-slider--keyvisual .lt-slide { overflow: hidden; }
.lt-slider--keyvisual .splide__slide.is-active .lt-slide img,
.lt-slider--keyvisual.lt-slides-single .lt-slide img { animation: lt-kenburns 24s ease-out forwards; }
@keyframes lt-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
/* 切替 fade は 1 秒 */
.lt-slider.splide--fade .splide__slide { transition: opacity 1s ease; }
/* ボタン：280×60 相当。角丸はテーマに任せる（指定がなければ 0） */
.lt-slider .lt-slide-btn { box-sizing: border-box; max-width: 100%; min-height: 56px; min-width: 240px; padding: 0 2.2em; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--lt-btn-radius, 0); font-size: 16px; font-weight: 600; letter-spacing: .06em; margin-top: .8em; }
.lt-slider--banner .lt-slide-btn { min-height: 40px; min-width: 0; padding: 0 1.4em; font-size: 13px; margin-top: .4em; }
@media (max-width: 767px) { .lt-slider .lt-slide-btn { min-height: 52px; min-width: 0; width: 100%; font-size: 15px; } .lt-slider--banner .lt-slide-btn { width: auto; } }
/* 左右に分ける：写真：文字＝1:1、写真は 6:5、文字側は余白を大きく */
.lt-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.lt-slider--split:not([class*="lt-slider--h-"]) .lt-split-media img { aspect-ratio: 6 / 5; height: auto; object-fit: cover; }
.lt-split-body { padding: clamp(32px, 5vw, 80px); justify-content: center; gap: 1em; }
.lt-split-title { font-size: clamp(24px, 2.4vw, 36px); font-weight: 600; letter-spacing: .06em; line-height: 1.5; }
.lt-split-text { font-size: 16px; line-height: 1.9; }
.lt-slider--split .splide__slide { padding-inline: 0; }
@media (max-width: 767px) { .lt-split { grid-template-columns: 1fr; } .lt-split-body { padding: 24px 16px 8px; } }
/* サムネイル：枠線・影なし、角丸 0、選択中だけ不透明 */
.lt-thumbs-wrap { gap: 10px; }
.lt-thumbs .lt-thumb:focus-visible { outline: 2px solid var(--lt-tertiary-bg, #333); outline-offset: 2px; }
/* ロゴの帯：白系の地、高さ 110px、ロゴは 48px・グレースケール、乗せると元の色 */
.lt-marquee--logo { background: var(--lt-part-bg, #fff); padding-block: 31px; --lt-marquee-gap: 40px; }
.lt-marquee--logo .lt-marquee-list > li { width: auto; }
.lt-marquee--logo .lt-marquee-list > li img { height: 48px !important; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.lt-marquee--logo .lt-marquee-list > li:hover img { filter: none; opacity: 1; }
/* 写真の帯：角丸 0、間隔 16px */
.lt-marquee:not(.lt-marquee--logo) { --lt-marquee-gap: 16px; }
.lt-marquee .lt-slide { border-radius: 0; }
/* 縦に流れる帯：列ごとに速さを変える（1 列目 100%・2 列目 130%・3 列目 85%） */
.lt-vmarquee-col:nth-child(2) .lt-vmarquee-track { animation-duration: calc(var(--lt-vmarquee-dur, 30s) * 1.3); }
.lt-vmarquee-col:nth-child(3) .lt-vmarquee-track { animation-duration: calc(var(--lt-vmarquee-dur, 30s) * .85); }
/* ビフォー・アフター：英字＋日本語のラベル帯、白 2px の境界、44px の丸いつまみ */
.lt-compare-label { top: 0; padding: 8px 14px; border-radius: 0; background: rgb(0 0 0 / .6); font-size: 11px; letter-spacing: .12em; line-height: 1.3; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lt-compare-label--before { left: 0; }
.lt-compare-label--after { right: 0; }
.lt-compare-label small { font-size: 10px; letter-spacing: .1em; opacity: .85; }
.lt-compare-handle { width: 2px; margin-left: -1px; box-shadow: none; }
.lt-compare-handle::after {
    content: ""; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgb(0 0 0 / .3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M18 15l-7 7 7 7M26 15l7 7-7 7' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 44px 44px;
}
.lt-compare-frame:focus-within .lt-compare-handle::after { box-shadow: 0 0 0 3px var(--lt-tertiary-bg, #333); }
/* 角丸は全部 0（写真・カード・サムネイル） */
.lt-slider .lt-slide, .lt-slider .lt-slide img, .lt-slider .lt-slide picture { border-radius: 0; }
@media (prefers-reduced-motion: reduce) {
  .lt-slider--keyvisual .lt-slide img { animation: none !important; }
}