@charset "UTF-8";
/* ==========================================================================
   YouRairo v5「CHAPTER CITY」WORKS：5作品を街の上の写真カードとして横パン（js/v5-works.js とセット・新規）
   - 構造（v5-works.js が作る）：
       .v5-showcase（縦長の領域。パン中は高さ＝合成ボックス＋縦スクロール距離D を v5-scroll-engine.js が書く）
         └ .v5-car（合成ボックス。position: sticky。top はエンジンが書く）
             ├ .v5-car__viewport（横の表示枠。overflow: clip はここだけ）
             │   └ .v5-car__track（★ translateX はここだけ。エンジンの単一 requestAnimationFrame が書く）
             │       └ 既存の5作品 <article class="work">（中身・画像・リンクは変更なし）
             ├ .v5-caption-stack（SPだけ：選択中の作品の説明＝既存の .work__meta を1回だけ移したもの）
             ├ .v5-car__progress（p_pan）
             └ .v5-car__controls（番号・ドット・矢印）
   - モード：.is-pan（縦スクロール同期の横パン）／.is-static（縦並び。JSなし・動きを減らす設定・高さ不足）
     .is-sp はスマホ（幅767px以下）の合成ボックス（画像ステージ＋同期キャプション）。
   - JSなしでは .v5-showcase 自体が作られず、作品は元の縦並び（下の「縦並びの作品カード」）で表示される。
   ========================================================================== */

/* ---- 作品カード（縦並び＝JSなし・静止時の基本形）------------------------------------- */
.gallery { display: grid; gap: 28px; }
.work {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--v5-white); border: 2px solid var(--v5-ink); border-radius: var(--v5-r);
  box-shadow: var(--v5-shadow);
}
.work--showcase { margin-top: 28px; }
.work__stage { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; flex: none; background: var(--v5-pale-sky); border-bottom: 2px solid var(--v5-ink); }
.has-dialog .work__stage { cursor: zoom-in; }
/* 既存の英字ラベル（FEATURED DEMO／COMPLETED DEMO SITE。v4.6 と同じ文言を CSS で表示） */
.work.is-featured::before, .work--showcase::before {
  position: absolute; z-index: 3; left: 14px; top: 12px; padding: 3px 12px;
  font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .2em; line-height: 1.6;
  color: var(--v5-ink); background: var(--v5-yellow); border: 2px solid var(--v5-ink); border-radius: 999px; pointer-events: none;
}
.work.is-featured::before { content: "FEATURED DEMO"; }
.work--showcase::before { content: "COMPLETED DEMO SITE"; }

.work__meta { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 20px 24px; }
.work__kind { display: inline-block; padding: 2px 12px; border: 2px solid var(--v5-ink); border-radius: 999px; background: var(--v5-pale-sky); font-size: 12px; font-weight: 800; letter-spacing: .06em; line-height: 1.6; margin-bottom: 10px; }
.work__title { font-size: 22px; font-weight: 900; line-height: 1.45; letter-spacing: .03em; }
.work__notice { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: #FFF6D8; font-size: 13px; font-weight: 600; line-height: 1.75; }
.work__spec { display: grid; gap: 2px; margin: 14px 0 0; font-size: 14px; line-height: 1.7; }
.work__spec div { display: flex; gap: 12px; }
.work__spec dt { flex: none; min-width: 5.5em; color: var(--v5-ink-2); font-weight: 700; }
.work__spec dd { margin: 0; font-weight: 700; }
.work__concept { margin-top: 12px; font-size: 14.5px; font-weight: 600; line-height: 1.85; }
.work__open {
  display: none; align-items: center; gap: 10px; min-height: 44px; margin-top: 16px; padding: 0 18px;
  border: 2px solid var(--v5-ink); border-radius: 999px; background: var(--v5-yellow); color: var(--v5-ink);
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .06em; cursor: pointer;
}
.has-dialog .work__open { display: inline-flex; }
.work__open .ico { width: 18px; height: 18px; }
.work__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.work__actions .work__open { margin-top: 0; }
.work__demo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.work__demo-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 2px solid var(--v5-ink); border-radius: 999px; background: var(--v5-ink); color: var(--v5-white);
  font-size: 14px; font-weight: 800; text-decoration: none;
}
.work__demo-link .ico { width: 18px; height: 18px; }
.work__demo-hint { max-width: 100%; font-size: 12px; line-height: 1.7; font-weight: 600; color: var(--v5-ink-2); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .work.is-featured { grid-column: 1 / -1; }
  .work__stage { aspect-ratio: 16 / 10; }
  .work.is-featured .work__stage, .work--showcase .work__stage { aspect-ratio: 16 / 7.4; }
  .work__meta { padding: 28px 32px 30px; }
}

/* ---- 作品の画面（PC枠・スマホ枠）。枠の見た目は v5 の白い角丸。位置は v4.6 と同じ ------------------- */
.work__screens { position: absolute; inset: 0; }
.scr { position: absolute; }
.scr__view { container-type: inline-size; overflow: hidden; background: #fff; }
.scr--pc { left: 5%; top: 11%; width: 76%; overflow: hidden; border: 2px solid var(--v5-ink); border-radius: 10px; background: #fff; }
.scr--pc .scr__view { aspect-ratio: 16 / 10; }
.scr__bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; background: #fff; border-bottom: 2px solid var(--v5-ink); }
.scr__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--v5-pink); }
.scr__bar i:nth-child(2) { background: var(--v5-yellow); }
.scr__bar i:nth-child(3) { background: var(--v5-lime); }
.scr__bar span { flex: 1; height: 10px; margin-left: 8px; border-radius: 5px; background: #EEF2F5; }
.scr--sp { display: block; right: 4%; bottom: 6%; width: 25%; padding: 4px; border: 2px solid var(--v5-ink); border-radius: 16px; background: #fff; }
.scr--sp .scr__view { aspect-ratio: 9 / 19; container-name: sp; border-radius: 11px; }
.work--showcase .scr--pc .scr__view, .work--showcase .scr--sp .scr__view { aspect-ratio: auto; }
.scr__img { display: block; width: 100%; height: auto; }
.demo { transition: transform 2.6s cubic-bezier(.45, 0, .2, 1); }
@media (hover: hover) {
  .work:hover .scr--pc .demo { transform: translateY(-22%); }
  .work:hover .scr--sp .demo { transform: translateY(-30%); }
}
@media (min-width: 768px) {
  .scr--pc { left: 6%; top: 10%; width: 64%; }
  .scr--sp { right: 8%; top: 12%; bottom: auto; width: 17%; }
  .work--luxecoat .scr--pc { left: auto; right: 6%; }
  .work--luxecoat .scr--sp { right: auto; left: 8%; top: 16%; }
}

/* ==========================================================================
  (style.css v08 から無変更で移植)    デモ作品の画面（単位は画面の幅に対する cqw。PC枠・スマホ枠・拡大表示で同じHTML。
   スマホ枠（container-name: sp）の中だけスマホ用のレイアウトに切り替える）
   ========================================================================== */
.demo { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic", YuGothic, Meiryo, sans-serif; font-weight: 500; line-height: 1.7; letter-spacing: .03em; }
.demo p { margin: 0; }
.d-nav { display: flex; align-items: center; gap: 3cqw; padding: 2.1cqw 5cqw; font-size: 1.15cqw; font-weight: 700; letter-spacing: .16em; position: relative; z-index: 2; }
.d-logo { display: flex; align-items: center; gap: .9cqw; margin-right: auto; font-size: 1.5cqw; font-weight: 800; letter-spacing: .24em; }
.d-logo b { width: 2.1cqw; height: 2.1cqw; border-radius: .5cqw; }
.d-links { display: flex; gap: 3.2cqw; }
.d-burger { display: none; width: 5.6cqw; gap: 1.3cqw; }
.d-burger i { display: block; height: .6cqw; border-radius: 1cqw; background: currentColor; }
.d-hero { position: relative; display: flex; align-items: center; min-height: 48cqw; padding: 0 6cqw; overflow: hidden; }
.d-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-copy { position: relative; z-index: 1; max-width: 46cqw; }
.d-kicker { font-size: 1.15cqw; font-weight: 800; letter-spacing: .32em; margin-bottom: 1.6cqw !important; }
.d-title { font-size: 4.3cqw; font-weight: 800; line-height: 1.38; letter-spacing: .05em; }
.d-title em { font-style: normal; }
.d-text { margin-top: 2cqw !important; max-width: 34cqw; font-size: 1.35cqw; line-height: 1.85; }
.d-btn { display: inline-flex; align-items: center; gap: 1.4cqw; margin-top: 3cqw; padding: 1.2cqw 2.8cqw; font-size: 1.3cqw; font-weight: 700; letter-spacing: .08em; }
.d-btn i { position: relative; width: 2.2cqw; height: .18cqw; min-height: 1px; background: currentColor; }
.d-btn i::after { content: ""; position: absolute; right: 0; top: 50%; width: .8cqw; height: .8cqw; border-top: max(1px, .18cqw) solid; border-right: max(1px, .18cqw) solid; transform: translateY(-50%) rotate(45deg); }
.d-sec { padding: 6cqw 6cqw 5cqw; }
.d-sec__en { font-size: 1.15cqw; font-weight: 800; letter-spacing: .32em; }
.d-sec__h { margin: .6cqw 0 3cqw !important; font-size: 2.6cqw; font-weight: 800; letter-spacing: .05em; }
.d-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
.d-card { padding: 2.4cqw; }
.d-card svg { width: 3.6cqw; height: 3.6cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.d-card__h { margin-top: 1.4cqw !important; font-size: 1.6cqw; font-weight: 800; }
.d-card__t { margin-top: .6cqw !important; font-size: 1.2cqw; line-height: 1.75; }
.d-thumb { display: block; aspect-ratio: 4 / 3; }
.d-split { display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; align-items: center; padding: 1cqw 6cqw 6cqw; }
.d-pic { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 1.2cqw; }
.d-split .d-sec__h { margin-bottom: 1.4cqw !important; }
.d-split .d-text { max-width: none; margin-top: 0 !important; }
.d-list { display: grid; margin-top: 2.2cqw; font-size: 1.3cqw; font-weight: 700; }
.d-list span { display: flex; align-items: center; gap: 1.2cqw; padding: 1.1cqw 0; border-bottom: 1px solid; }
.d-list span::before { content: ""; flex: none; width: .9cqw; height: .9cqw; border-radius: 50%; }
.d-corp .d-list span { color: #dfe8f6; border-color: rgba(120, 180, 255, .18); }
.d-corp .d-list span::before { border-radius: 0; background: #6cc0ff; }
.d-corp .d-pic { border-radius: .4cqw; border: 1px solid rgba(120, 180, 255, .25); }
.d-cafe .d-list span { color: #4a3b40; border-color: rgba(201, 95, 124, .22); }
.d-cafe .d-list span::before { background: #e8899f; }
.d-cafe .d-pic { border-radius: 3cqw; }
.d-trip .d-list span { color: #183049; border-color: rgba(47, 116, 200, .2); }
.d-trip .d-list span::before { background: #2f74c8; }
.d-band { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; margin: 0 6cqw; padding: 3.4cqw 4cqw; font-size: 2cqw; font-weight: 800; }
.d-band .d-btn { margin: 0; }
.d-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 5cqw; padding: 3.4cqw 6cqw 3cqw; font-size: 1.1cqw; letter-spacing: .12em; }

@container sp (min-width: 1px) {
  .d-nav { padding: 4.4cqw 6cqw; }
  .d-logo { font-size: 4.6cqw; gap: 2.2cqw; }
  .d-logo b { width: 5.6cqw; height: 5.6cqw; border-radius: 1.4cqw; }
  .d-links { display: none; }
  .d-burger { display: grid; }
  .d-hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 0; }
  .d-art { position: relative; height: 74cqw; }
  .d-copy { max-width: none; padding: 8cqw 7cqw 10cqw; }
  .d-kicker { font-size: 3cqw; margin-bottom: 3cqw !important; }
  .d-title { font-size: 8.2cqw; }
  .d-text { max-width: none; margin-top: 4cqw !important; font-size: 3.7cqw; }
  .d-btn { margin-top: 6cqw; padding: 3.2cqw 6cqw; font-size: 3.7cqw; gap: 3cqw; }
  .d-btn i { width: 5cqw; height: .5cqw; }
  .d-btn i::after { width: 2cqw; height: 2cqw; }
  .d-sec { padding: 11cqw 7cqw 9cqw; }
  .d-sec__en { font-size: 3cqw; }
  .d-sec__h { margin: 1.4cqw 0 6cqw !important; font-size: 6.2cqw; }
  .d-split { grid-template-columns: 1fr; gap: 6cqw; padding: 0 7cqw 10cqw; }
  .d-split .d-sec__h { margin-bottom: 3cqw !important; }
  .d-list { margin-top: 4cqw; font-size: 3.6cqw; }
  .d-list span { gap: 2.6cqw; padding: 2.6cqw 0; }
  .d-list span::before { width: 2.2cqw; height: 2.2cqw; }
  .d-cards { grid-template-columns: 1fr; gap: 4.4cqw; }
  .d-card { padding: 5.6cqw; }
  .d-card svg { width: 9cqw; height: 9cqw; }
  .d-card__h { margin-top: 3cqw !important; font-size: 4.6cqw; }
  .d-card__t { margin-top: 1.4cqw !important; font-size: 3.5cqw; }
  .d-band { flex-direction: column; align-items: flex-start; gap: 5cqw; margin: 0 7cqw; padding: 8cqw 7cqw; font-size: 5cqw; }
  .d-foot { margin-top: 10cqw; padding: 7cqw; font-size: 2.8cqw; }
}

/* デモ1：コーポレート（濃紺×青緑） */
.d-corp { background: #050b16; color: #dfe8f6; }
.d-corp .d-nav { color: #c9d6ea; border-bottom: 1px solid rgba(120, 180, 255, .14); background: rgba(5, 11, 22, .7); }
.d-corp .d-logo b { background: linear-gradient(135deg, #3aa5ff, #36c6b4 60%, #8bdc5a); }
.d-corp .d-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #050b16 0%, rgba(5, 11, 22, .85) 34%, rgba(5, 11, 22, 0) 62%); }
.d-corp .d-kicker { color: #6cc0ff; }
.d-corp .d-title { color: #fff; }
.d-corp .d-text { color: #a9b8cf; }
.d-corp .d-btn { color: #fff; border: 1px solid #5fd0ff; background: rgba(14, 40, 80, .55); box-shadow: 0 0 2cqw -0.6cqw rgba(95, 208, 255, .8); }
.d-corp .d-sec { background: linear-gradient(180deg, #07101e, #050b16); }
.d-corp .d-sec__en { color: #6cc0ff; }
.d-corp .d-sec__h { color: #fff; }
.d-corp .d-card { border: 1px solid rgba(120, 180, 255, .2); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)); }
.d-corp .d-card svg { color: #6cc0ff; }
.d-corp .d-card__h { color: #fff; }
.d-corp .d-card__t { color: #93a3bc; }
.d-corp .d-band { color: #fff; background: linear-gradient(100deg, #0d2a52, #0b3a3c); border: 1px solid rgba(120, 200, 255, .25); }
.d-corp .d-btn--line { background: transparent; box-shadow: none; }
.d-corp .d-foot { color: #7d8ba3; border-top: 1px solid rgba(120, 180, 255, .12); }
@container sp (min-width: 1px) {
  .d-corp .d-hero::before { background: linear-gradient(180deg, rgba(5, 11, 22, 0) 30%, #050b16 68%); }
}

/* デモ2：カフェ・ショップ（淡いピンク・手描き風） */
.d-cafe { background: #fff7f5; color: #4a3b40; }
.d-cafe .d-nav { color: #8a6f78; }
.d-cafe .d-logo { color: #4a3b40; }
.d-cafe .d-logo b { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd0da, #ea8aa2); }
.d-cafe .d-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3cqw; padding: 1cqw 6cqw 2cqw; background: radial-gradient(60% 80% at 80% 40%, #ffe4ea 0%, rgba(255, 228, 234, 0) 70%), radial-gradient(40% 50% at 10% 90%, #e3f1fd 0%, rgba(227, 241, 253, 0) 70%); }
.d-cafe .d-art { position: relative; height: auto; }
.d-cafe .d-kicker { color: #c95f7c; }
.d-cafe .d-title { color: #4a3b40; font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif; font-weight: 700; }
.d-cafe .d-title em { color: #d0587a; }
.d-cafe .d-text { color: #7a656c; }
.d-cafe .d-btn { color: #fff; background: #e07a95; border-radius: 999px; box-shadow: 0 1.4cqw 2.6cqw -1.4cqw rgba(224, 122, 149, .8); }
.d-cafe .d-sec__en { color: #c95f7c; }
.d-cafe .d-sec__h { color: #4a3b40; }
.d-cafe .d-card { background: #fff; border-radius: 2cqw; box-shadow: 0 1.6cqw 3cqw -2cqw rgba(190, 110, 140, .5); }
.d-cafe .d-thumb { border-radius: 1.4cqw; }
.d-cafe .d-thumb--1 { background: radial-gradient(rgba(255, 255, 255, .9) 18%, transparent 20%) 0 0 / 22% 29%, linear-gradient(135deg, #f9c0cc, #f6a3b6); }
.d-cafe .d-thumb--2 { background: radial-gradient(circle at 30% 60%, #f3d3a8 0 18%, transparent 19%), radial-gradient(circle at 62% 42%, #eec393 0 16%, transparent 17%), radial-gradient(circle at 70% 75%, #f6dcb6 0 12%, transparent 13%), #fdeee3; }
.d-cafe .d-thumb--3 { background: radial-gradient(circle at 50% 56%, #fff 0 22%, transparent 23%), radial-gradient(circle at 50% 56%, #f2c6d0 0 27%, transparent 28%), linear-gradient(135deg, #d9ecfb, #bfe0f7); }
.d-cafe .d-card__h { color: #4a3b40; }
.d-cafe .d-card__t { color: #8a7880; }
.d-cafe .d-band { color: #4a3b40; background: #fde3e8; border-radius: 3cqw; }
.d-cafe .d-btn--line { color: #c4506f; background: #fff; box-shadow: none; }
.d-cafe .d-foot { color: #a08f96; }
@container sp (min-width: 1px) {
  .d-cafe .d-hero { display: flex; flex-direction: column-reverse; gap: 0; padding: 4cqw 0 0; }
  .d-cafe .d-art { height: auto; padding: 0 8cqw; }
  .d-cafe .d-card { border-radius: 4cqw; }
  .d-cafe .d-thumb { border-radius: 3cqw; }
  .d-cafe .d-band { border-radius: 6cqw; }
}

/* デモ3：トラベル（青空と海） */
.d-trip { background: #f6fbff; color: #203a55; }
.d-trip .d-nav { color: #355476; background: rgba(255, 255, 255, .55); }
.d-trip .d-logo b { border-radius: 50% 50% 50% 0; background: linear-gradient(135deg, #3f8fd8, #7cc4ee); }
.d-trip .d-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(246, 251, 255, .92) 0%, rgba(246, 251, 255, .7) 30%, rgba(246, 251, 255, 0) 56%); }
.d-trip .d-kicker { color: #2f74c8; }
.d-trip .d-title { color: #183049; }
.d-trip .d-text { color: #4c6684; }
.d-trip .d-btn { color: #fff; background: #2f74c8; border-radius: 999px; }
.d-trip .d-sec__en { color: #2f74c8; }
.d-trip .d-sec__h { color: #183049; }
.d-trip .d-card { padding: 0 0 2cqw; overflow: hidden; background: #fff; border-radius: 1.6cqw; box-shadow: 0 1.4cqw 3cqw -2cqw rgba(40, 90, 150, .5); }
.d-trip .d-card .d-card__h, .d-trip .d-card .d-card__t { padding: 0 2cqw; }
.d-trip .d-thumb--sea { background: linear-gradient(180deg, #bfe3ff 0 48%, #4d9be0 48% 100%); }
.d-trip .d-thumb--hill { background: radial-gradient(120% 70% at 30% 100%, #a9b8dc 0 50%, transparent 51%), radial-gradient(120% 80% at 80% 110%, #8fa3cf 0 50%, transparent 51%), linear-gradient(180deg, #dcecff, #f3f8ff); }
.d-trip .d-thumb--port { background: radial-gradient(circle at 70% 46%, #fff3d0 0 10%, transparent 11%), linear-gradient(180deg, #f9c7a8 0 52%, #6c93c9 52% 100%); }
.d-trip .d-card__h { color: #183049; }
.d-trip .d-card__t { color: #5a7391; }
.d-trip .d-band { color: #183049; background: #e3f1ff; border-radius: 1.6cqw; }
.d-trip .d-btn--line { color: #2f74c8; background: #fff; }
.d-trip .d-foot { color: #6f86a1; }
@container sp (min-width: 1px) {
  .d-trip .d-hero::before { background: linear-gradient(180deg, rgba(246, 251, 255, 0) 40%, #f6fbff 74%); }
  .d-trip .d-card { padding-bottom: 5cqw; border-radius: 4cqw; }
  .d-trip .d-card .d-card__h, .d-trip .d-card .d-card__t { padding: 0 5cqw; }
  .d-trip .d-band { border-radius: 4cqw; }
}


/* ==========================================================================
   ショーケース（v5-works.js が組み立てる。v4.6 の振る舞いの考え方を再設計）
   ========================================================================== */
.v5-showcase { --slide-w: calc(100vw * .841); --slide-gap: 16px; position: relative; }
@media (min-width: 768px) { .v5-showcase { --slide-w: min(880px, 64vw); --slide-gap: clamp(28px, 2.5vw, 36px); } }
.v5-car { position: relative; z-index: 1; }
.v5-car__viewport { position: relative; margin-inline: calc(50% - 50vw); overflow: clip; touch-action: pan-y; }
.v5-car__track { position: relative; display: flex; align-items: stretch; gap: var(--slide-gap); }
.v5-car.is-dragging { -webkit-user-select: none; user-select: none; }
.v5-car .work.v5-slide { flex: 0 0 var(--slide-w); width: var(--slide-w); margin: 0; }
.v5-car .work.v5-slide .work__stage { aspect-ratio: 2 / 1; }
.v5-car .work--luxecoat.v5-slide .scr--pc { left: auto; right: 6%; }
.v5-car .work--luxecoat.v5-slide .scr--sp { left: 8%; right: auto; top: 16%; }

/* 進み具合の線・操作部 */
.v5-car__progress { position: relative; width: var(--slide-w); max-width: 100%; height: 6px; margin: 16px auto 0; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, .45); border: 2px solid var(--v5-ink); box-sizing: content-box; }
.v5-car__progress i { position: absolute; inset: 0; background: var(--v5-yellow); transform: scaleX(0); transform-origin: left center; }
.v5-car__controls {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: var(--slide-w); max-width: 100%; margin: 12px auto 0; padding: 6px 8px 6px 18px;
  background: var(--v5-white); border: 2px solid var(--v5-ink); border-radius: 999px;
}
.v5-car__count { display: flex; align-items: baseline; gap: 6px; min-width: 6em; margin: 0; font-family: var(--font-en); font-size: 15px; font-weight: 700; color: var(--v5-ink-2); }
.v5-car__count-cur { font-size: 34px; line-height: 1; color: var(--v5-ink); }
.v5-car__dots { display: flex; align-items: center; justify-content: center; gap: 0; }
.v5-car__dot { position: relative; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.v5-car__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 6px; border: 2px solid var(--v5-ink); background: var(--v5-white); transition: width .3s var(--ease), margin .3s var(--ease), background-color .2s; }
.v5-car__dot[aria-current="true"]::before { width: 24px; margin-left: -12px; background: var(--v5-blue); }
.v5-car__nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 6em; }
.v5-car__btn { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--v5-ink); border-radius: 50%; background: var(--v5-yellow); color: var(--v5-ink); cursor: pointer; }
.v5-car__btn .ico { width: 20px; height: 20px; }
.v5-car__btn--prev .ico { transform: rotate(180deg); }
.v5-car__btn:hover { background: var(--v5-white); }
.v5-car__btn:disabled { opacity: .35; cursor: default; }
.v5-car__pause { min-height: 44px; padding: 0 16px; border: 2px solid var(--v5-ink); border-radius: 999px; background: var(--v5-white); color: var(--v5-ink); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.v5-car__pause[hidden] { display: none; }
.v5-car__status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- 横パン（PC：大きな写真カードの説明は3列） --------------------------------------- */
.v5-showcase.is-pan .v5-car { position: sticky; top: 0; padding-bottom: 12px; }
.v5-showcase.is-pan .v5-car__viewport { touch-action: auto; padding: 4px 0 10px; }
.v5-showcase.is-pan .v5-car__track { padding-inline: calc((100vw - var(--slide-w)) / 2); will-change: transform; }
.v5-showcase.is-pan .work.v5-slide .work__meta {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: auto auto 1fr;
  column-gap: 28px; align-items: start; padding: 18px 26px 20px;
}
.v5-showcase.is-pan .work.v5-slide .work__kind { grid-column: 1; grid-row: 1; justify-self: start; }
.v5-showcase.is-pan .work.v5-slide .work__title { grid-column: 1; grid-row: 2; font-size: clamp(20px, 1.7vw, 25px); }
.v5-showcase.is-pan .work.v5-slide .work__notice { grid-column: 1; grid-row: 3; margin-top: 8px; font-size: 12px; line-height: 1.65; }
.v5-showcase.is-pan .work.v5-slide .work__concept { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 13.5px; line-height: 1.75; }
.v5-showcase.is-pan .work.v5-slide .work__spec { grid-column: 2; grid-row: 3; margin: 8px 0 0; padding-top: 8px; border-top: 2px dashed rgba(32, 47, 58, .2); font-size: 12.5px; }
.v5-showcase.is-pan .work.v5-slide .work__open,
.v5-showcase.is-pan .work.v5-slide .work__actions { grid-column: 3; grid-row: 1 / span 3; margin-top: 0; flex-direction: column; align-items: flex-start; }
.v5-showcase.is-pan .work.v5-slide .work__demo-hint { font-size: 11.5px; line-height: 1.6; }
.v5-showcase.is-pan .v5-car__pause { display: none; }
@media (min-width: 768px) and (max-height: 980px) { .v5-showcase.is-pan .work.v5-slide .work__stage { aspect-ratio: 2.35 / 1; } }
@media (min-width: 768px) and (max-height: 840px) { .v5-showcase.is-pan .work.v5-slide .work__stage { aspect-ratio: 2.75 / 1; } .v5-showcase.is-pan .v5-car__controls { margin-top: 8px; padding-block: 2px; } .v5-showcase.is-pan .v5-car__progress { margin-top: 10px; } }

/* --- 縦並び ------------------------------------------------------------------ */
.v5-showcase.is-static .v5-car__progress, .v5-showcase.is-static .v5-car__controls { display: none; }
.v5-showcase.is-static .v5-car__viewport { margin-inline: 0; overflow: visible; }
.v5-showcase.is-static .v5-car__track { display: grid; gap: 28px; transform: none !important; }
.v5-showcase.is-static .work.v5-slide { width: 100%; max-width: 980px; flex: none; margin-inline: auto; }
@media (max-width: 767px) { .v5-showcase.is-static .work.v5-slide .work__stage { aspect-ratio: 4 / 3.3; } }

/* --- SP：合成ボックス（画像ステージのトラック＋同期キャプション＋操作部）-------------------- */
@media (max-width: 767px) {
  .v5-showcase.is-pan.is-sp .v5-car { display: flex; flex-direction: column; padding: 0 0 4px; }
  .v5-showcase.is-pan.is-sp .v5-car__viewport { order: 1; touch-action: pan-y; padding: 0; }
  .v5-showcase.is-pan.is-sp .v5-caption-stack { order: 2; }
  .v5-showcase.is-pan.is-sp .v5-car__progress { order: 3; }
  .v5-showcase.is-pan.is-sp .v5-car__controls { order: 4; }
  .v5-showcase.is-pan.is-sp .work.v5-slide { border-radius: var(--v5-r-s); }
  .v5-showcase.is-pan.is-sp .work.v5-slide .work__stage {
    height: var(--v5-stage-h, calc(var(--slide-w) * 9 / 16)); aspect-ratio: auto; border-bottom: 0;
  }
  .v5-showcase.is-pan.is-sp .work.v5-slide .work__screens { inset: 0 auto 0 50%; width: auto; height: 100%; max-width: 100%; aspect-ratio: 16 / 9; translate: -50% 0; }
  .v5-showcase.is-pan.is-sp .work.v5-slide .scr--pc { left: 6%; right: auto; top: 10%; width: 64%; }
  .v5-showcase.is-pan.is-sp .work--luxecoat.v5-slide .scr--pc { left: auto; right: 6%; }
  .v5-showcase.is-pan.is-sp .work.v5-slide .scr--sp { left: auto; right: 8%; top: 12%; bottom: auto; width: 17%; padding: 2px; border-radius: 8px; }
  .v5-showcase.is-pan.is-sp .work.v5-slide .scr--sp .scr__view { border-radius: 6px; }
  .v5-showcase.is-pan.is-sp .work--luxecoat.v5-slide .scr--sp { left: 8%; right: auto; top: 16%; }
  .v5-showcase.is-pan.is-sp .work.v5-slide .scr__bar { height: 12px; padding: 0 6px; gap: 3px; border-bottom-width: 1.5px; }
  .v5-showcase.is-pan.is-sp .work.v5-slide .scr__bar i { width: 4px; height: 4px; }
  .v5-showcase.is-pan.is-sp .work.v5-slide .scr__bar span { height: 5px; }
  .v5-showcase.is-pan.is-sp .work.v5-slide .scr--pc { border-width: 1.5px; border-radius: 6px; }
  .v5-showcase.is-pan.is-sp .work.v5-slide .work__stage img { object-fit: contain; object-position: center; }
  .v5-showcase.is-pan.is-sp .work.is-featured::before, .v5-showcase.is-pan.is-sp .work--showcase::before { left: 8px; top: 6px; padding: 0 8px; font-size: 9px; border-width: 1.5px; }

  .v5-caption-stack { display: grid; margin: 8px calc(50% - 50vw + 8px) 0; }
  .v5-caption {
    grid-area: 1 / 1; border: 2px solid var(--v5-ink); border-radius: var(--v5-r-s); background: var(--v5-white);
    opacity: 0; translate: 0 6px; pointer-events: none;
    transition: opacity 60ms linear, translate 0s linear 60ms;
  }
  .v5-caption.is-active { z-index: 1; opacity: 1; translate: 0 0; pointer-events: auto; transition: opacity 120ms var(--ease), translate 120ms var(--ease); }
  .v5-caption .work__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3px 8px; margin: 0; padding: 6px 12px 7px; }
  .v5-caption .work__meta > * { grid-column: 1 / -1; margin: 0 !important; }
  .v5-caption .work__meta > .work__kind { grid-column: 1; grid-row: 1; }
  .v5-caption .work__meta > .work__title { grid-column: 2; grid-row: 1; }
  .v5-caption .work__kind { justify-self: start; font-size: 10.5px; line-height: 1.5; padding: 0 8px; border-width: 1.5px; }
  .v5-caption .work__title { font-size: 16.5px; line-height: 1.35; }
  .v5-caption .work__concept { font-size: 12px; line-height: 1.55; }
  .v5-caption .work__notice { font-size: 11px; line-height: 1.45; padding: 3px 8px; border-radius: 8px; }
  .v5-caption .work__spec { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; gap: 0 8px; padding-top: 3px; font-size: 11px; line-height: 1.45; border-top: 2px dashed rgba(32, 47, 58, .18); }
  .v5-caption .work__spec > div { display: contents; }
  .v5-caption .work__spec dt { min-width: 0; }
  .v5-caption .work__spec dt, .v5-caption .work__spec dd { margin: 0; }
  .v5-caption .work__open { min-height: 44px; margin: 0; }
  .v5-caption .work__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
  .v5-caption .work__actions .work__demo { display: contents; }
  .v5-caption .work__demo-link { min-height: 44px; padding-inline: 14px; }
  .v5-caption .work__demo-hint { flex-basis: 100%; font-size: 10.5px; line-height: 1.38; }

  .v5-showcase.is-pan.is-sp .v5-car__progress { width: auto; margin: 8px calc(50% - 50vw + 10px) 0; height: 4px; }
  .v5-showcase.is-pan.is-sp .v5-car__controls { width: auto; margin: 6px calc(50% - 50vw + 8px) 0; padding: 0 2px; gap: 2px; }
  .v5-showcase.is-pan.is-sp .v5-car__count { order: 2; min-width: 0; font-size: 12px; }
  .v5-showcase.is-pan.is-sp .v5-car__count-cur { font-size: 22px; }
  .v5-showcase.is-pan.is-sp .v5-car__dots { order: 3; }
  .v5-showcase.is-pan.is-sp .v5-car__nav { display: contents; }
  .v5-showcase.is-pan.is-sp .v5-car__btn { width: 44px; height: 44px; }
  .v5-showcase.is-pan.is-sp .v5-car__btn--prev { order: 1; }
  .v5-showcase.is-pan.is-sp .v5-car__btn--next { order: 4; }

  /* v5.3：短い画面（エンジンが「画像ステージ140pxでも収まらない」と測ったときだけ .is-tight を付ける）
     余白・間隔・行間だけを詰める。文字の大きさ・文言・行数の制限は変えない（省略しない）。ボタンは44pxのまま */
  .v5-showcase.is-pan.is-sp.is-tight .v5-car { padding-bottom: 0; }
  .v5-showcase.is-pan.is-sp.is-tight .v5-caption-stack { margin: 4px calc(50% - 50vw + 4px) 0; }
  .v5-showcase.is-pan.is-sp.is-tight .v5-caption .work__meta { gap: 2px 8px; padding: 4px 10px 4px; }
  .v5-showcase.is-pan.is-sp.is-tight .v5-caption .work__title { line-height: 1.3; }
  .v5-showcase.is-pan.is-sp.is-tight .v5-caption .work__concept { line-height: 1.45; }
  .v5-showcase.is-pan.is-sp.is-tight .v5-caption .work__notice { line-height: 1.38; padding: 2px 8px; }
  .v5-showcase.is-pan.is-sp.is-tight .v5-caption .work__spec { line-height: 1.38; padding-top: 2px; }
  .v5-showcase.is-pan.is-sp.is-tight .v5-caption .work__actions { gap: 0 10px; }
  .v5-showcase.is-pan.is-sp.is-tight .v5-caption .work__demo-hint { line-height: 1.32; }
  .v5-showcase.is-pan.is-sp.is-tight .v5-car__progress { margin: 4px calc(50% - 50vw + 6px) 0; }
  .v5-showcase.is-pan.is-sp.is-tight .v5-car__controls { margin: 3px calc(50% - 50vw + 4px) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .demo { transition: none; }
  .work:hover .demo { transform: none !important; }
  .v5-showcase.is-pan .v5-car { position: relative; top: auto !important; }
  .v5-caption { transition: none !important; }
}

/* ==========================================================================
   v5.4：WORKS の操作部をカードの体系（濃色2px枠・999px・段差の影）に揃え、道路に接地させる。
   影と疑似要素だけ（box-shadow・position:absolute は合成ボックスの高さ・幅・外側マージンを変えない＝SPの fit 判定に波及しない）
   ========================================================================== */
.v5-car__controls { position: relative; box-shadow: 0 3px 0 rgba(32, 47, 58, .85), 0 6px 12px rgba(32, 47, 58, .10); }
.v5-car__controls::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: min(120px, 40%); height: 2px; translate: -50% 0;
  border-radius: 2px; background: var(--v5-ink); opacity: .16; pointer-events: none;
}
.v5-car__progress { border-radius: 999px; }
.v5-car__btn { transition: transform .16s ease, background-color .16s ease; }
.v5-car__btn:active:not(:disabled) { transform: translateY(1px); }
@media (hover: hover) { .v5-car__btn:hover:not(:disabled) { transform: translateY(-2px); } }
.v5-car__btn:focus-visible, .v5-car__dot:focus-visible { outline: 3px solid var(--v5-ink); outline-offset: 2px; box-shadow: 0 0 0 3px #FFFFFF; }
.v5-car__dot:focus-visible { border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .v5-car__btn { transition: none; transform: none !important; } }