@charset "utf-8";

/* ============================================
   Reset CSS
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
  padding-left: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  display: block;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
}

/* ===============================
   variables
 =============================== */

:root {
  --layout-width: 1280px;
  --layout-height: 680px;
  --layout-padding: 16px;

  --z-index-next-btn: 100;
  --z-index-control-area: 100;
  --z-index-unclickable-notice: 200;
}

/* ============================================
   Base
   ============================================ */
body {
  font-family:
    "Open Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

/* ============================================
   Layout
   ============================================ */

.ls-layout {
  width: var(--layout-width);
  height: var(--layout-height);
  padding: var(--layout-padding);
  margin: auto;
}
.ls-layout-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ============================================
   Common
   ============================================ */

.ls-scene-container {
  width: 100%;
  height: 100%;
}

.ls-scene {
  position: relative;
  display: none;
  grid-template-columns: 1fr 800px;
  grid-template-rows: 500px auto;
  gap: 20px;
  height: 100%;
}

.ls-scene.is-active {
  display: grid;
}

.ls-scene-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 24px;
}

.ls-back-btn {
  margin-right: auto;
  width: 166px;
  height: 59px;
  background: url("../img/parts/btn-back.webp") no-repeat center center /
    contain;
}

.ls-name-setting-btn {
  width: 275px;
  height: 59px;
  background: url("../img/parts/btn-name-setting.webp") no-repeat center
    center / contain;
}

.ls-guide-detail-btn {
  width: 400px;
  height: 59px;
  background: url("../img/parts/btn-guide-detail.webp") no-repeat center
    center / contain;
}

.ls-guide-next-btn {
  width: 400px;
  height: 59px;
  background: url("../img/parts/btn-next.webp") no-repeat center center /
    contain;
}

.ls-scene-cg {
}

.ls-scene-cg-img {
  position: relative;
  margin-bottom: 31px;
}

.ls-scene-cg-img img {
  width: 100%;
}

.ls-scene-cg-img .ls-cg-default {
  position: relative;
  z-index: 1;
}

.ls-scene-cg-img .ls-cg-flash,
.ls-scene-cg-img .ls-cg-target,
.ls-scene-cg-img .ls-cg-change {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 2;
}

.ls-scene-cg-text:before {
  content: "＜ガイド＞";
  display: block;
  font-size: 24px;
  line-height: calc(29 / 24);
  font-weight: 500;
  margin-bottom: 24px;
}
.ls-scene-cg-text {
  font-size: 16px;
  line-height: 1.7;
}

.ls-scene-main {
  position: relative;
  overflow: hidden;
}

/* 押せない領域クリック時メッセージ（::beforeで表示、ls-sceneに is-unclickable-noticeで表示） */
.ls-scene-main:not(.is-not-notice)::before {
  content: "このボタン/タブの操作は無効です。\A（実際のタブレットを使用して設定する場合は動作しますが、本シミュレーション上では操作できません）";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  visibility: hidden;

  transition: transform 0.25s ease-out;
  pointer-events: none;
  z-index: var(--z-index-unclickable-notice);
  padding: 8px 16px 8px 44px;
  border-radius: 8px;
  background:
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert h-5 w-5 shrink-0 text-red-400" aria-hidden="true"%3E%3Cpath d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"%3E%3C/path%3E%3Cpath d="M12 9v4"%3E%3C/path%3E%3Cpath d="M12 17h.01"%3E%3C/path%3E%3C/svg%3E')
      no-repeat center left 16px / 20px 20px,
    rgb(23, 23, 23);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
}

.ls-scene.is-unclickable-notice .ls-scene-main::before {
  transform: translateX(-50%) translateY(8px);
  visibility: visible;
}

.ls-scene-main img {
  width: 100%;
  height: 100%;
}

.ls-control-area {
  position: absolute;
  outline: 5px solid #f00;
  z-index: var(--z-index-control-area);
}

.ls-control-area [data-next-btn],
.ls-control-area [data-last-img-change] {
  width: 100%;
  height: 100%;
}

/* ============================================
   シーン control-area ポジション・サイズ
   シーンのサイズが変わる際に対応できるよう%で設定
 ============================================ */

.ls-scene[data-scene-num="1"] .ls-control-area {
  width: 12%;
  height: 19.2%;
  left: 10.8%;
  top: 24%;
}

.ls-scene[data-scene-num="3"] .ls-control-area {
  width: 31.6%;
  height: 9%;
  left: 58.8%;
  top: 58.8%;
}

.ls-scene[data-scene-num="4"] .ls-control-area {
  width: 36%;
  height: 46%;
  left: 35.6%;
  top: 22%;
}

.ls-scene[data-scene-num="5"] .ls-control-area {
  width: 13.2%;
  height: 10.8%;
  left: 82.5%;
  top: 62.2%;
}

.ls-scene[data-scene-num="6"] .ls-control-area {
  width: 8.8%;
  height: 6.6%;
  left: 62.4%;
  top: 80%;
}

.ls-scene[data-scene-num="7"] .ls-control-area {
  width: 31%;
  height: 7.2%;
  left: 59.1%;
  top: 24.1%;
}

.ls-scene[data-scene-num="8"] .ls-control-area {
  width: 40.6%;
  height: 8.8%;
  left: 29.7%;
  top: 70.6%;
}

.ls-scene[data-scene-num="9"] .ls-control-area {
  width: 31.4%;
  height: 9.2%;
  left: 59%;
  top: 38.9%;
}

.ls-scene[data-scene-num="10"] .ls-control-area {
  width: 11.5%;
  height: 8.2%;
  left: 83.3%;
  top: 63.4%;
}

.ls-scene[data-scene-num="11"] .ls-control-area {
  width: 30.8%;
  height: 7.2%;
  left: 59.2%;
  top: 52.7%;
}

.ls-scene[data-scene-num="12"] .ls-control-area {
  width: 8.2%;
  height: 4.5%;
  left: 61.9%;
  top: 80.8%;
}

.ls-scene[data-scene-num="13"] .ls-control-area {
  width: 50.5%;
  height: 10%;
  left: 24.8%;
  top: 46.6%;
}

.ls-scene[data-scene-num="14"] .ls-control-area {
  width: 11.5%;
  height: 7.3%;
  left: 87.8%;
  top: 91.6%;
}
.ls-scene[data-scene-num="15"] .ls-control-area {
  width: 11.5%;
  height: 7.3%;
  left: 87.8%;
  top: 91.6%;
}
.ls-scene[data-scene-num="15"] .ls-control-area {
  width: 11.5%;
  height: 7.3%;
  left: 87.8%;
  top: 91.6%;
}
.ls-scene[data-scene-num="16"] .ls-control-area {
  width: 6%;
  height: 7.7%;
  left: 13%;
  top: 12.1%;
}
.ls-scene[data-scene-num="17"] .ls-control-area {
  width: 8.2%;
  height: 4.7%;
  left: 61.9%;
  top: 70.3%;
}

.ls-scene[data-scene-num="19"] .ls-control-area {
  width: 8.2%;
  height: 4.7%;
  left: 61.9%;
  top: 70.3%;
}
.ls-scene[data-scene-num="21"] .ls-control-area {
  width: 8.3%;
  height: 4.8%;
  left: 79.8%;
  top: 80.9%;
}
.ls-scene[data-scene-num="22"] .ls-control-area {
  width: 6%;
  height: 7.7%;
  left: 13%;
  top: 12.1%;
}
.ls-scene[data-scene-num="23"] .ls-control-area {
  width: 8.2%;
  height: 4.7%;
  left: 61.9%;
  top: 70.3%;
}
.ls-scene[data-scene-num="24"] .ls-control-area {
  width: 8.2%;
  height: 4.7%;
  left: 61.9%;
  top: 70.3%;
}
.ls-scene[data-scene-num="26"] .ls-control-area {
  width: 8.2%;
  height: 4.7%;
  left: 79.9%;
  top: 81%;
}

/* エリア/ゾーン - START */
.ls-scene[data-scene-num="29"] .ls-control-area {
  width: 4.2%;
  height: 4.7%;
  left: 13.9%;
  top: 37%;
}
.ls-scene[data-scene-num="30"] .ls-control-area {
  width: 25%;
  height: 5.7%;
  left: 1.3%;
  top: 34.5%;
}

/* 名称をタップします。 */
.ls-scene[data-scene-num="31"] .ls-control-area,
.ls-scene[data-scene-num="38"] .ls-control-area,
.ls-scene[data-scene-num="41"] .ls-control-area,
.ls-scene[data-scene-num="44"] .ls-control-area,
.ls-scene[data-scene-num="47"] .ls-control-area,
.ls-scene[data-scene-num="108-2"] .ls-control-area,
.ls-scene[data-scene-num="112"] .ls-control-area {
  width: 44.2%;
  height: 5.7%;
  left: 19.8%;
  top: 30%;
}

/* エリア/ゾーン - ゾーン名を入力します。 */
.ls-scene[data-scene-num="32"] .ls-control-area,
.ls-scene[data-scene-num="39"] .ls-control-area,
.ls-scene[data-scene-num="42"] .ls-control-area,
.ls-scene[data-scene-num="45"] .ls-control-area,
.ls-scene[data-scene-num="48"] .ls-control-area {
  width: 10.3%;
  height: 10.2%;
  left: 79.1%;
  top: 52%;
}
/* 「決定」をタップします。 */
.ls-scene[data-scene-num="33"] .ls-control-area,
.ls-scene[data-scene-num="39-2"] .ls-control-area,
.ls-scene[data-scene-num="42-2"] .ls-control-area,
.ls-scene[data-scene-num="45-2"] .ls-control-area,
.ls-scene[data-scene-num="48-2"] .ls-control-area,
.ls-scene[data-scene-num="110"] .ls-control-area,
.ls-scene[data-scene-num="114"] .ls-control-area,
.ls-scene[data-scene-num="118"] .ls-control-area,
.ls-scene[data-scene-num="122"] .ls-control-area {
  width: 8.7%;
  height: 4.9%;
  left: 71.1%;
  top: 77.5%;
}

.ls-scene[data-scene-num="34"] .ls-control-area {
  width: 5.2%;
  height: 6.4%;
  left: 65.9%;
  top: 22.3%;
}
.ls-scene[data-scene-num="35"] .ls-control-area {
  width: 33.3%;
  height: 4.8%;
  left: 35.9%;
  top: 38.3%;
}
.ls-scene[data-scene-num="36"] .ls-control-area {
  width: 9.2%;
  height: 6.5%;
  left: 47.9%;
  top: 51%;
}
.ls-scene[data-scene-num="36-2"] .ls-control-area {
  width: 10%;
  height: 6.4%;
  left: 61.1%;
  top: 68.6%;
}

/* エリア/ゾーン - ZONE Xを選択します。(2行目位置) */
.ls-scene[data-scene-num="37"] .ls-control-area,
.ls-scene[data-scene-num="68"] .ls-control-area {
  width: 44.9%;
  height: 6.3%;
  left: 25.9%;
  top: 34.4%;
}

.ls-scene[data-scene-num="40"] .ls-control-area {
  width: 44.9%;
  height: 6.3%;
  left: 25.9%;
  top: 40.3%;
}
.ls-scene[data-scene-num="43"] .ls-control-area {
  width: 44.9%;
  height: 6.3%;
  left: 25.9%;
  top: 46.3%;
}
.ls-scene[data-scene-num="46"] .ls-control-area {
  width: 44.9%;
  height: 6.3%;
  left: 25.9%;
  top: 46.3%;
}

/* エリア/ゾーン - ZONE Aをタップします */
.ls-scene[data-scene-num="49"] .ls-control-area,
.ls-scene[data-scene-num="59"] .ls-control-area {
  width: 44.9%;
  height: 6.3%;
  left: 25.9%;
  top: 28.4%;
}
.ls-scene[data-scene-num="50"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 84.6%;
  top: 64.7%;
}
.ls-scene[data-scene-num="51"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 70.6%;
  top: 64.7%;
}
.ls-scene[data-scene-num="52"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 84.6%;
  top: 58.7%;
}
.ls-scene[data-scene-num="53"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 70.6%;
  top: 58.7%;
}
.ls-scene[data-scene-num="54"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 84.6%;
  top: 52.7%;
}
.ls-scene[data-scene-num="55"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 70.6%;
  top: 52.7%;
}

/* 「エリア/ゾーン変更」をタップします。 */
.ls-scene[data-scene-num="56"] .ls-control-area,
.ls-scene[data-scene-num="66"] .ls-control-area,
.ls-scene[data-scene-num="71"] .ls-control-area {
  width: 14.3%;
  height: 6.7%;
  left: 75%;
  top: 12.7%;
}

.ls-scene[data-scene-num="57"] .ls-control-area {
  width: 39.2%;
  height: 6.7%;
  left: 30.9%;
  top: 69%;
}

/* エリア/ゾーン - OKをタップします。 */
.ls-scene[data-scene-num="58"] .ls-control-area,
.ls-scene[data-scene-num="67-2"] .ls-control-area,
.ls-scene[data-scene-num="72-2"] .ls-control-area {
  width: 8.2%;
  height: 4.7%;
  left: 61.9%;
  top: 81%;
}
.ls-scene[data-scene-num="60"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 84.6%;
  top: 46.7%;
}
.ls-scene[data-scene-num="61"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 70.6%;
  top: 46.7%;
}
.ls-scene[data-scene-num="62"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 84.6%;
  top: 40.7%;
}
.ls-scene[data-scene-num="63"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 70.6%;
  top: 40.7%;
}
.ls-scene[data-scene-num="64"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 84.6%;
  top: 34.7%;
}
.ls-scene[data-scene-num="65"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 70.6%;
  top: 34.7%;
}

.ls-scene[data-scene-num="67"] .ls-control-area {
  width: 39.2%;
  height: 6.7%;
  left: 30.9%;
  top: 67%;
}

.ls-scene[data-scene-num="69"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 84.6%;
  top: 28.7%;
}
.ls-scene[data-scene-num="70"] .ls-control-area {
  width: 14.1%;
  height: 5.7%;
  left: 70.6%;
  top: 28.7%;
}

.ls-scene[data-scene-num="72"] .ls-control-area {
  width: 39.2%;
  height: 6.7%;
  left: 30.9%;
  top: 71.4%;
}

.ls-scene[data-scene-num="73"] .ls-control-area {
  width: 9.8%;
  height: 6%;
  left: 89.3%;
  top: 13%;
}

.ls-scene[data-scene-num="74"] .ls-control-area {
  width: 8.2%;
  height: 5.2%;
  left: 61.9%;
  top: 70%;
}

.ls-scene[data-scene-num="76"] .ls-control-area {
  width: 8.7%;
  height: 5.2%;
  left: 60.5%;
  top: 70%;
}
.ls-scene[data-scene-num="73-2"] .ls-control-area {
  width: 7.3%;
  height: 4.7%;
  left: 24.9%;
  top: 5.6%;
}
.ls-scene[data-scene-num="77"] .ls-control-area,
.ls-scene[data-scene-num="78"] .ls-control-area,
.ls-scene[data-scene-num="79"] .ls-control-area {
  width: 4.3%;
  height: 5.7%;
  left: 42.7%;
  top: 22.6%;
}
.ls-scene[data-scene-num="80"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 35%;
}
.ls-scene[data-scene-num="82"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 41%;
}
.ls-scene[data-scene-num="84"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 47%;
}
.ls-scene[data-scene-num="86"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 53%;
}
/* シーン２（図で表示）をタップします。  */
.ls-scene[data-scene-num="88"] .ls-control-area,
.ls-scene[data-scene-num="111"] .ls-control-area {
  width: 29.1%;
  height: 5.3%;
  left: 17.9%;
  top: 41%;
}
.ls-scene[data-scene-num="89"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 29%;
}
.ls-scene[data-scene-num="89-2"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 35%;
}
.ls-scene[data-scene-num="89-3"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 41%;
}
.ls-scene[data-scene-num="89-4"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 47%;
}

/* シーン3（図で表示）をタップします。 */
.ls-scene[data-scene-num="94"] .ls-control-area,
.ls-scene[data-scene-num="115"] .ls-control-area {
  width: 29.1%;
  height: 5.3%;
  left: 17.9%;
  top: 47%;
}
.ls-scene[data-scene-num="95"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 35%;
}
.ls-scene[data-scene-num="97"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 41%;
}
.ls-scene[data-scene-num="99"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 47%;
}
.ls-scene[data-scene-num="101"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 53%;
}
/* シーン4（図で表示）をタップします。 */
.ls-scene[data-scene-num="103"] .ls-control-area,
.ls-scene[data-scene-num="119"] .ls-control-area {
  width: 29.1%;
  height: 5.3%;
  left: 17.9%;
  top: 53%;
}
.ls-scene[data-scene-num="104"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 29%;
}
.ls-scene[data-scene-num="104-2"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 35%;
}
.ls-scene[data-scene-num="104-3"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 41%;
}
.ls-scene[data-scene-num="104-4"] .ls-control-area {
  width: 4.2%;
  height: 5.3%;
  left: 94.9%;
  top: 47%;
}
.ls-scene[data-scene-num="88-name"] .ls-control-area {
  width: 29.1%;
  height: 5.3%;
  left: 17.9%;
  top: 35%;
}

/* 表示されたキーボードを使って、シーン名を入力します。 */
.ls-scene[data-scene-num="109"] .ls-control-area,
.ls-scene[data-scene-num="113"] .ls-control-area,
.ls-scene[data-scene-num="117"] .ls-control-area,
.ls-scene[data-scene-num="121"] .ls-control-area {
  width: 13.4%;
  height: 11.1%;
  left: 85.9%;
  top: 59%;
}

.ls-scene[data-scene-num="116"] .ls-control-area,
.ls-scene[data-scene-num="120"] .ls-control-area {
  width: 44.2%;
  height: 5.7%;
  left: 19.8%;
  top: 14%;
}
.ls-scene[data-scene-num="123"] .ls-control-area {
  width: 9.8%;
  height: 6.2%;
  left: 89.3%;
  top: 13%;
}
.ls-scene[data-scene-num="124"] .ls-control-area {
  width: 8.7%;
  height: 4.9%;
  left: 61.6%;
  top: 70.2%;
}
.ls-scene[data-scene-num="125"] .ls-control-area {
  width: 8.7%;
  height: 4.9%;
  left: 60.5%;
  top: 70.2%;
}
.ls-scene[data-scene-num="126"] .ls-control-area {
  width: 8.2%;
  height: 6.2%;
  left: 41.9%;
  top: 5%;
}
.ls-scene[data-scene-num="127"] .ls-control-area {
  width: 3.5%;
  height: 4.9%;
  left: 94.9%;
  top: 44.7%;
}
.ls-scene[data-scene-num="128"] .ls-control-area {
  width: 13.4%;
  height: 11.1%;
  left: 85.9%;
  top: 59%;
}
.ls-scene[data-scene-num="129"] .ls-control-area {
  width: 33.5%;
  height: 4.7%;
  left: 36.9%;
  top: 27%;
}
.ls-scene[data-scene-num="131"] .ls-control-area {
  width: 40.2%;
  height: 8.2%;
  left: 29.9%;
  top: 30.4%;
}
.ls-scene[data-scene-num="132"] .ls-control-area {
  width: 7.1%;
  height: 4.7%;
  left: 29.2%;
  top: 42.7%;
}
.ls-scene[data-scene-num="132-2"] .ls-control-area,
.ls-scene[data-scene-num="134"] .ls-control-area,
.ls-scene[data-scene-num="138"] .ls-control-area,
.ls-scene[data-scene-num="142"] .ls-control-area {
  width: 9.2%;
  height: 4.7%;
  left: 36.9%;
  top: 49%;
}
.ls-scene[data-scene-num="133"] .ls-control-area {
  width: 7.1%;
  height: 4.7%;
  left: 35.8%;
  top: 42.7%;
}
.ls-scene[data-scene-num="135"] .ls-control-area,
.ls-scene[data-scene-num="139"] .ls-control-area,
.ls-scene[data-scene-num="143"] .ls-control-area {
  width: 33.9%;
  height: 5.5%;
  left: 36.7%;
  top: 53.7%;
}
.ls-scene[data-scene-num="136"] .ls-control-area {
  width: 40.2%;
  height: 8.3%;
  left: 29.9%;
  top: 30.3%;
}
.ls-scene[data-scene-num="137"] .ls-control-area {
  width: 7.1%;
  height: 4.7%;
  left: 42.5%;
  top: 42.7%;
}
.ls-scene[data-scene-num="140"] .ls-control-area {
  width: 40.2%;
  height: 8.3%;
  left: 29.9%;
  top: 38.6%;
}
.ls-scene[data-scene-num="141"] .ls-control-area {
  width: 7.1%;
  height: 4.7%;
  left: 49%;
  top: 42.7%;
}
.ls-scene[data-scene-num="144"] .ls-control-area {
  width: 40.2%;
  height: 8.3%;
  left: 29.9%;
  top: 46.8%;
}
.ls-scene[data-scene-num="145"] .ls-control-area {
  width: 8.2%;
  height: 4.7%;
  left: 61.9%;
  top: 86.4%;
}
.ls-scene[data-scene-num="146"] .ls-control-area {
  width: 10.8%;
  height: 6%;
  left: 70.1%;
  top: 13%;
}
.ls-scene[data-scene-num="147"] .ls-control-area {
  width: 8.2%;
  height: 4.7%;
  left: 79.9%;
  top: 81%;
}
.ls-scene[data-scene-num="149"] .ls-control-area {
  width: 8.2%;
  height: 4.7%;
  left: 61.9%;
  top: 80.7%;
}
.ls-scene[data-scene-num="151"] .ls-control-area {
  width: 8.5%;
  height: 4.7%;
  left: 60.6%;
  top: 70.3%;
}
.ls-scene[data-scene-num="152"] .ls-control-area {
  width: 9.5%;
  height: 5.8%;
  left: 89.5%;
  top: 13.1%;
}
.ls-scene[data-scene-num="153"] .ls-control-area {
  width: 8.2%;
  height: 4.7%;
  left: 61.9%;
  top: 70.3%;
}
.ls-scene[data-scene-num="154"] .ls-control-area {
  width: 8.2%;
  height: 4.7%;
  left: 60.7%;
  top: 70.3%;
}
.ls-scene[data-scene-num="155"] .ls-control-area {
  width: 8.1%;
  height: 3.2%;
  left: 0.9%;
  top: 1%;
}
.ls-scene[data-scene-num="156"] .ls-control-area {
  width: 3.6%;
  height: 4.9%;
  left: 59.5%;
  top: 17%;
}
.ls-scene[data-scene-num="157"] .ls-control-area {
  width: 40.2%;
  height: 8.2%;
  left: 29.9%;
  top: 22.1%;
}
.ls-scene[data-scene-num="158"] .ls-control-area {
  width: 3.6%;
  height: 4.9%;
  left: 94.1%;
  top: 17%;
}
.ls-scene[data-scene-num="159"] .ls-control-area {
  width: 40.2%;
  height: 8.2%;
  left: 29.9%;
  top: 30.3%;
}
.ls-scene[data-scene-num="160"] .ls-control-area {
  width: 3.6%;
  height: 4.9%;
  left: 59.5%;
  top: 36.6%;
}
.ls-scene[data-scene-num="161"] .ls-control-area {
  width: 40.2%;
  height: 8.2%;
  left: 29.9%;
  top: 38.5%;
}
.ls-scene[data-scene-num="162"] .ls-control-area {
  width: 3.6%;
  height: 4.9%;
  left: 94.1%;
  top: 36.6%;
}
.ls-scene[data-scene-num="163"] .ls-control-area {
  width: 40.2%;
  height: 8.2%;
  left: 29.9%;
  top: 46.8%;
}
.ls-scene[data-scene-num="164"] .ls-control-area--164-1 {
  width: 32%;
  height: 16%;
  left: 31%;
  top: 17%;
}
.ls-scene[data-scene-num="164"] .ls-control-area--164-2 {
  width: 32%;
  height: 16%;
  left: 65.5%;
  top: 17%;
}
.ls-scene[data-scene-num="164"] .ls-control-area--164-3 {
  width: 32%;
  height: 16%;
  left: 31%;
  top: 36.5%;
}
.ls-scene[data-scene-num="164"] .ls-control-area--164-4 {
  width: 32%;
  height: 16%;
  left: 65.5%;
  top: 36.5%;
}

/* ============================================
  List シーン (scene-num 27,28, l-1~l-16)
  ・点滅用cg画像2枚を重ねて表示・トグル 
 ============================================ */

.ls-scene[data-scene-num="27"] .ls-control-area--area-zone,
.ls-scene[data-scene-num="28"] .ls-control-area--area-zone {
  display: none;
  width: 10.3%;
  height: 4.6%;
  left: 8.4%;
  top: 5.8%;
}
.ls-scene[data-scene-num="27"].is-flashed .ls-control-area--area-zone,
.ls-scene[data-scene-num="28"].is-flashed .ls-control-area--area-zone {
  display: block;
}
.ls-scene[data-scene-num="27"] .ls-text-flashed,
.ls-scene[data-scene-num="28"] .ls-text-flashed {
  display: none;
}
.ls-scene[data-scene-num="27"].is-flashed .ls-text-default,
.ls-scene[data-scene-num="28"].is-flashed .ls-text-default {
  display: none;
}
.ls-scene[data-scene-num="27"].is-flashed .ls-text-flashed,
.ls-scene[data-scene-num="28"].is-flashed .ls-text-flashed {
  display: inline;
}

.ls-scene[data-scene-num="27"] .ls-control-area--checkboxes {
  width: 3.1%;
  height: 54.1%;
  left: 1.8%;
  top: 28.2%;
  display: flex;
  flex-direction: column;
}
.ls-scene[data-scene-num="28"] .ls-control-area--checkboxes {
  width: 3.1%;
  height: 54.1%;
  left: 1.8%;
  top: 29.7%;
  display: flex;
  flex-direction: column;
}

.ls-scene[data-scene-num="27"] .ls-control-area--scroll-down,
.ls-scene[data-scene-num="28"] .ls-control-area--scroll-up {
  width: 6.8%;
  height: 17%;
  left: 89.9%;
  top: 46%;
}

.ls-scene[data-scene-num="27"] .ls-control-area--scroll-down [data-next-btn],
.ls-scene[data-scene-num="28"] .ls-control-area--scroll-up [data-next-btn] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='85' viewBox='0 0 30 85' fill='none'%3E%3Cpath d='M13.3138 84.4142C14.0949 85.1953 15.3612 85.1953 16.1422 84.4142L28.8702 71.6863C29.6512 70.9052 29.6512 69.6389 28.8702 68.8579C28.0891 68.0768 26.8228 68.0768 26.0417 68.8579L14.728 80.1716L3.41432 68.8579C2.63327 68.0768 1.36694 68.0768 0.585895 68.8579C-0.195154 69.6389 -0.195154 70.9052 0.585895 71.6863L13.3138 84.4142ZM14.728 0L12.728 8.74226e-08L12.728 83L14.728 83L16.728 83L16.728 -8.74226e-08L14.728 0Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30px 85px;
}

.ls-scene[data-scene-num="28"] .ls-control-area--scroll-up [data-next-btn] {
  transform: rotate(180deg);
}

.ls-scene.ls-scene--list .ls-control-area {
  width: 5.4%;
  height: 8.1%;
  left: 0.7%;
  top: 12%;
}

.flash-btn {
  width: 100%;
  height: 100%;
}

/* ============================================
  制御設定 (scene-num 81~108)
 ============================================ */

.slider-value {
  position: absolute;
  width: 4.6%;
  height: 4.7%;
  font-size: 10px;
  display: grid;
  place-items: center;
}
.slider-value--bright {
  top: 21.5%;
  left: 63%;
}
.slider-value--color-temp {
  top: 40.6%;
  left: 63%;
}

.ls-scene[data-scene-num] .ls-control-area.ls-control-area--bright,
.ls-scene[data-scene-num] .ls-control-area.ls-control-area--color-temp {
  width: 42.1%;
  height: 3.5%;
  left: 28.9%;
  display: flex;
  align-items: center;
}
.ls-scene[data-scene-num] .ls-control-area.ls-control-area--bright {
  top: 33.9%;
}
.ls-scene[data-scene-num] .ls-control-area.ls-control-area--color-temp {
  top: 49.3%;
}

.minus-btn,
.plus-btn {
  position: relative;
  width: 7%;
  height: 100%;
  background: #fff;
}

.minus-btn::before,
.plus-btn::before,
.plus-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
  height: 1.5px;
  background: #353535;
  border-radius: 4px;
}

.plus-btn::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.slider-input {
  --slider-percent: 0%;
  appearance: none;
  outline: none;
  flex: 1 0 84%;
  height: 17%;
  margin-inline: 1.6% 0.7%;

  background: #c2c9d6;
  background: linear-gradient(
    to right,
    #66cfff var(--slider-percent),
    #c2c9d6 var(--slider-percent)
  );
}
.slider-input::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: white;
  border: 2px solid #66cfff;
  border-radius: 50%;
  cursor: pointer;
}

.ls-control-area.ls-control-area--confirm {
  display: none;
  width: 8.6%;
  height: 5.6%;
  left: 61.7%;
  top: 80.5%;
}

.ls-control-area.ls-control-area--confirm.is-visible {
  display: block;
}

/* ============================================
  最終ページの「スタートに戻る」ボタン
 ============================================ */
.ls-start-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 395px;
  height: 142px;
  background: url("../img/parts/btn-start.webp") no-repeat center center /
    contain;
}

/* ============================================
   ガイド詳細モーダル
 ============================================ */

.ls-guide {
  width: var(--layout-width);
  max-width: var(--layout-width);
  height: var(--layout-height);
  max-height: var(--layout-height);
  padding: var(--layout-padding);
  margin: 0 auto;
  border: none;
  position: relative;
}

.ls-guide::backdrop {
  background: #fff;
}

.ls-guide-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 閉じるボタン（右上・X形状） */
.ls-guide-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.ls-guide-close::before,
.ls-guide-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 2px;
  background: #333;
  border-radius: 1px;
}

.ls-guide-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ls-guide-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* スワイプエリア：1スライド1画像・中央表示 */
.ls-guide-content.swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ls-guide-content .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ls-guide-content .swiper-slide img {
  max-width: 969px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ls-guide-content .swiper-button-prev,
.ls-guide-content .swiper-button-next {
  color: #454545;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  display: none;
}

.ls-guide-last-links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ls-guide-last-link {
  position: absolute;
  left: 44.2%;
  width: 23%;
  height: 9.5%;
}
.ls-guide-last-link button {
  width: 100%;
  height: 100%;
}
.ls-guide-last-link--1 {
  top: 10%;
}
.ls-guide-last-link--2 {
  top: 21.7%;
}
.ls-guide-last-link--3 {
  top: 33.4%;
}
.ls-guide-last-link--4 {
  top: 45.1%;
}
.ls-guide-last-link--5 {
  top: 56.8%;
}
.ls-guide-last-link--6 {
  top: 68.6%;
}
.ls-guide-last-link--7 {
  top: 80.3%;
}

/*  guide-intro専用: 最後のスライドにてnextボタンを表示 (クリック時にモーダルを閉じる) */
#guide-intro .swiper-button-next.swiper-button-disabled {
  display: flex;
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

.ls-guide-visual {
  display: flex;
  align-self: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.ls-guide-visual.is-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ls-guide-visual img {
  max-width: 969px;
  width: auto;
  height: auto;
  object-fit: contain;
}