/*
  Copyright 2020 Roland Corporation. All rights reserved.
*/
/*
  Header
*/
.favoriteHeaderFrame {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 88px;
  background-color: var(--color-black);
}
.favoriteHeader {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 88px;
  background-color: var(--color-black);
  text-align: center;
}
.favoriteHeaderSide__r,
.favoriteHeaderSide__l {
  position: absolute;
  top: 0;
  width: 5px;
  height: 88px;
  background-color: var(--color-gray);
}
.favoriteHeaderSide__r {
  right: 0;
}
.favoriteHeaderSide__l {
  left: 0;
}
.favoriteHeaderSeparator {
  position: absolute;
  top: 43px;
  right: 14px;
  left: 14px;
  height: 1px;
  background-color: var(--color-gray);
}
.favoriteHeaderSceneNoLbl {
  margin: 12px auto 11px;
  overflow: hidden;
  color: var(--color-white);
  font-size: 17px;
  font-family: RobotoMediumItalic;
  letter-spacing: -0.41px;
  text-align: center;
  white-space: nowrap;
}
.favoriteHeaderSceneNameLbl {
  display: inline-block;
  color: var(--color-white);
  font-size: 39px;
  line-height: 44px;
  font-family: RobotoBold;
  letter-spacing: -0.94px;
  text-align: center;
  white-space: pre;
}
.favoriteHeaderSelectSceneBtn {
  position: absolute;
  top: 11;
  right: 11;
  width: 22px;
  height: 22px;
  background-image: url(../images/btn_list@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.favoriteHeader.selectedExceptFavorite > .favoriteHeaderSide__r,
.favoriteHeader.selectedExceptFavorite > .favoriteHeaderSide__l {
  background-color: var(--color-primary);
}
.favoriteHeader.selectedExceptFavorite > .favoriteHeaderSeparator {
  background-color: var(--color-primary);
}
.favoriteHeader.selectedExceptFavorite > .favoriteHeaderSceneNoLbl {
  color: var(--color-primary);
}
.favoriteHeader.selectedExceptFavorite > .favoriteHeaderSceneNameLbl {
  color: var(--color-primary);
}
/*
  Main
*/
.favoriteMainFrame {
  position: absolute;
  top: 88px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-black);
}
.favoriteMain {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--width-page);
  height: 403px;
  margin: auto;
  background-color: var(--color-black);
}
/* 
  FAVORITE Select Panel
  SelectPanel用スタイル。FAVORITE読み込み・切り替え時に付け替えを行う。
*/
.favoriteSelectPanelBtnFrame1,
.favoriteSelectPanelBtnFrame2,
.favoriteSelectPanelBtnFrame3,
.favoriteSelectPanelBtnFrame4,
.favoriteSelectPanelBtnFrame5,
.favoriteSelectPanelBtnFrame6,
.favoriteSelectPanelBtnFrame7,
.favoriteSelectPanelBtnFrame8,
.favoriteSelectPanelBtnFrame9,
.favoriteSelectPanelBtnFrame10,
.favoriteSelectPanelBtnFrame11,
.favoriteSelectPanelBtnFrame12 {
  position: absolute;
  width: 106px;
  height: 102px;
  padding: 5px;
}
.favoriteSelectPanelBtnFrame1 {
  top: 0;
  left: 0;
}
.favoriteSelectPanelBtnFrame2 {
  top: 0;
  left: 106px;
}
.favoriteSelectPanelBtnFrame3 {
  top: 0;
  left: 212px;
}
.favoriteSelectPanelBtnFrame4 {
  top: 102px;
  left: 0;
}
.favoriteSelectPanelBtnFrame5 {
  top: 102px;
  left: 106px;
}
.favoriteSelectPanelBtnFrame6 {
  top: 102px;
  left: 212px;
}
.favoriteSelectPanelBtnFrame7 {
  top: 204px;
  left: 0;
}
.favoriteSelectPanelBtnFrame8 {
  top: 204px;
  left: 106px;
}
.favoriteSelectPanelBtnFrame9 {
  top: 204px;
  left: 212px;
}
.favoriteSelectPanelBtnFrame10 {
  top: 306px;
  left: 0;
}
.favoriteSelectPanelBtnFrame11 {
  top: 306px;
  left: 106px;
}
.favoriteSelectPanelBtnFrame12 {
  top: 306px;
  left: 212px;
}
/* panel style */
.favoriteSelectPanelBtn.selected,
.favoriteSelectPanelBtn.unselected,
.favoriteSelectPanelBtn.unselected_pushing,
.favoriteSelectPanelBtn.off {
  position: absolute;
  width: 96px;
  height: 92px;
  border-radius: 8px;
}
.favoriteSelectPanelBtnNoLbl {
  position: absolute;
  top: 4px;
  left: 10px;
  font-size: 22px;
  font-family: RobotoCondensedBold;
  line-height: 25px;
  letter-spacing: -0.53px;
}
.favoriteSelectPanelBtnSceneNoLbl {
  position: absolute;
  top: 11px;
  right: 10px;
  font-size: 16px;
  font-family: RobotoCondensedBoldItalic;
  letter-spacing: -0.39px;
}
.favoriteSelectPanelBtnSeparator {
  position: absolute;
  left: 11px;
  top: 32px;
  width: 74px;
  height: 1px;
}
.favoriteSelectPanelBtnSceneNameLbl,
.favoriteSelectPanelBtnSceneNameLbl_3line {
  position: absolute;
  top: 37px;
  right: 10px;
  bottom: 5px;
  left: 11px;
  font-family: RobotoCondensedBold;
  letter-spacing: -0.48px;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}
.favoriteSelectPanelBtnSceneNameLbl {
  font-size: 20px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.favoriteSelectPanelBtnSceneNameLbl_3line {
  font-size: 13px;
  line-height: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.favoriteSelectPanelBtnImg {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 10px;
  height: 10px;
}
/* selected */
.favoriteSelectPanelBtn.selected {
  background-color: var(--color-primary);
}
.favoriteSelectPanelBtn.selected > .favoriteSelectPanelBtnNoLbl {
  color: var(--color-black);
}
.favoriteSelectPanelBtn.selected > .favoriteSelectPanelBtnSceneNoLbl {
  color: var(--color-black);
}
.favoriteSelectPanelBtn.selected > .favoriteSelectPanelBtnSeparator {
  background-color: var(--color-black);
}
.favoriteSelectPanelBtn.selected > .favoriteSelectPanelBtnSceneNameLbl,
.favoriteSelectPanelBtn.selected > .favoriteSelectPanelBtnSceneNameLbl_3line {
  color: var(--color-black);
}
.favoriteSelectPanelBtn.selected > .favoriteSelectPanelBtnImg {
  transform: scale(-1, 1);
  background-image: url(../images/btn_hold_k@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}
/* unselected */
.favoriteSelectPanelBtn.unselected {
  border: 1px dashed var(--color-primary);
  background-color: var(--color-black);
}
.favoriteSelectPanelBtn.unselected_pushing {
  border: 1px dashed var(--color-primary);
  background-color: var(--color-highlight);
}
.favoriteSelectPanelBtn.unselected > .favoriteSelectPanelBtnNoLbl,
.favoriteSelectPanelBtn.unselected_pushing > .favoriteSelectPanelBtnNoLbl {
  color: var(--color-primary);
}
.favoriteSelectPanelBtn.unselected > .favoriteSelectPanelBtnSceneNoLbl,
.favoriteSelectPanelBtn.unselected_pushing > .favoriteSelectPanelBtnSceneNoLbl {
  color: var(--color-primary);
}
.favoriteSelectPanelBtn.unselected > .favoriteSelectPanelBtnSeparator,
.favoriteSelectPanelBtn.unselected_pushing > .favoriteSelectPanelBtnSeparator {
  background-color: var(--color-primary);
}
.favoriteSelectPanelBtn.unselected > .favoriteSelectPanelBtnSceneNameLbl,
.favoriteSelectPanelBtn.unselected_pushing > .favoriteSelectPanelBtnSceneNameLbl {
  right: 7px;
  color: var(--color-primary);
}
.favoriteSelectPanelBtn.unselected > .favoriteSelectPanelBtnSceneNameLbl_3line,
.favoriteSelectPanelBtn.unselected_pushing > .favoriteSelectPanelBtnSceneNameLbl_3line {
  right: 7px;
  color: var(--color-primary);
}
.favoriteSelectPanelBtn.unselected > .favoriteSelectPanelBtnImg,
.favoriteSelectPanelBtn.unselected_pushing > .favoriteSelectPanelBtnImg {
  transform: scale(-1, 1);
  background-image: url(../images/btn_hold@2x.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* unset */
.favoriteSelectPanelBtn.off {
  background-color: var(--color-gray-darken);
}
.favoriteSelectPanelBtn.off > .favoriteSelectPanelBtnNoLbl {
  color: var(--color-gray);
}
.favoriteSelectPanelBtn.off > .favoriteSelectPanelBtnSceneNoLbl {
  display: none;
}
.favoriteSelectPanelBtn.off > .favoriteSelectPanelBtnSeparator {
  background-color: var(--color-gray);
}
.favoriteSelectPanelBtn.off > .favoriteSelectPanelBtnSceneNameLbl,
.favoriteSelectPanelBtn.off > .favoriteSelectPanelBtnSceneNameLbl_3line {
  display: none;
}
.favoriteSelectPanelBtn.off > .favoriteSelectPanelBtnImg {
  display: none;
}