@charset "UTF-8";
/**
 * 一覧 ⇔ 詳細 css
 * @version 24.03.07
 */

/*
[HTML]
<div class="l2d-outer">
  <div class="l2d-inner">
    <!-- 一覧部分 -->
    <div class="l2d-list">
      <div class="list-box">
        <div class="tbl-outer">
          <table class="list-tbl">
            <thead>
              <tr><th>ID</th><th>Img</th><th>Name</th><th>Radio</th><th></th></tr>
            </thead>
            <tbody>
              <tr>
                <td data-dtarget="id">2</td>
                <td><img src="/resources/iside/img/facephoto-noimg.png" data-dtarget="img" /></td>
                <td data-dtarget="name">佐藤</td>
                <td data-dtarget="point">888</td>
                <td><button type="button" class="btn sml nav icn i-edt to-det-btn">編集</button></td>
              </tr>
              <tr>
                <td data-dtarget="id">4</td>
                <td><img src="/resources/iside/img/facephoto-sample2896.jpg" data-dtarget="img" /></td>
                <td data-dtarget="name">鈴木</td>
                <td data-dtarget="point">999</td>
                <td><button type="button" class="btn sml nav icn i-edt to-det-btn">編集</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div><!-- END 一覧部分 -->
    <!-- 詳細部分 -->
    <div class="l2d-det">
      <div style="padding: 12px;"><a href="javascript:void(0);" class="to-list-btn">一覧</a>&nbsp;&gt;&nbsp;<span data-dtarget="name"></span></div>
      <div style="padding: 12px;"><button type="button" class="btn sml def icn i-bck to-list-btn">戻る</button></div>
      <table class="inpt-tbl">
        <tr>
          <th>ID</th>
          <td><div data-dtarget="id"></div></td>
        </tr>
        <tr>
          <th>ID2</th>
          <td>
            <select data-dtarget="id">
              <option></option>
              <option value="1">壱</option>
              <option value="2">弐</option>
              <option value="3">参</option>
              <option value="4">四</option>
            </select>
          </td>
        </tr>
        <tr>
          <th>Img</th>
          <td><img src="" data-dtarget="img" /></td>
        </tr>
        <tr>
          <th>Name</th>
          <td><input type="text" data-dtarget="name" /></td>
        </tr>
        <tr>
          <th>Name2</th>
          <td><input type="text" data-dtarget="name" /></td>
        </tr>
        <tr>
          <th>Radio</th>
          <td>
            <div class="rdo"><input type="radio" name="rdo" id="rdo0" value="888" data-dtarget="point" /><label for="rdo0">888</label></div>
            <div class="rdo"><input type="radio" name="rdo" id="rdo1" value="999" data-dtarget="point" /><label for="rdo1">999</label></div>
          </td>
        </tr>
        <tr>
          <th>Radio2</th>
          <td>
            <div class="rdo"><input type="radio" name="rdo2" id="rdo20" value="888" data-dtarget="point" /><label for="rdo20">888</label></div>
            <div class="rdo"><input type="radio" name="rdo2" id="rdo21" value="999" data-dtarget="point" /><label for="rdo21">999</label></div>
          </td>
        </tr>
        <tr>
          <th>Checkbox</th>
          <td>
            <div class="chk c4c"><input type="checkbox" id="chk_1" value="888" data-dtarget="point" /><label for="chk_1">888</label></div>
            <div class="chk c4c"><input type="checkbox" id="chk_2" value="999" data-dtarget="point" /><label for="chk_2">999</label></div>
          </td>
        </tr>
        <tr>
          <th>textContent</th>
          <td>
            <div data-dtarget="point"></div>
            <div data-dtarget="point" class="setval-sep3dc">3桁カンマ区切り</div>
          </td>
        </tr>
      </table>
    </div><!-- END 詳細部分 -->
  </div>
</div>
・l2d-outer:外枠
    class="l2d-outer init-det":初期から詳細を表示（転記なし）
    class="l2d-outer init-list":データ数に関わらず必ず一覧を表示

・l2d-inner:内枠（スライダー部分）

・l2d-list:一覧
・l2d-det:詳細
・  data-dtarget:一覧（の.l2d-row-box, tr, li内）と詳細で一致したら転記される
 */

.l2d-outer {
  position: relative;
  overflow: hidden;
}
.l2d-inner {
  width: 200%;
  display: flex;
  overflow: hidden;
}
.l2d-inner .l2d-list,
.l2d-inner .l2d-det {
  width: 50%;
  position: relative;
}