/* CSS */
/* list.html, selection.htmlで使用 */

/* 比較画面のコンテンツ要素 */
/* リセットボタンのために上書き */

.displayOFF{
  display:none;
}
.displayON{
  display:block;
}
/* .selection-body はselection.htmlのbodyに設定 */
.selection-body #content {
  overflow-y: auto;
  height: 580px;
}

.selection-body #container {
  overflow-y: hidden;
  height: 578px;
}

.selection-body .column {
  height: 580px;
}

.selection-body .column-content {
  height: 508px;
}
.switch{
  /*width:50px;
  margin: auto;
  float: right;*/
  margin-left: 93px;
}
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
input.cmn-toggle-round + label {
  padding: 2px;
  width: 50px;
  height: 27px;
  background-color: #dddddd;
  border-radius: 60px;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 24px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 23px;
}
.title{
  margin         : auto;                /* 中央寄せ           */
  float: left;
  height: 40px;
  text-align: center;
  margin-top: 6px;
}


/************************************/
/*         カテゴリータイトル設定          */
/************************************/

/* カテゴリータイトル */
.column .heading {
  padding: .25rem 0 0 .5rem;
}

/* カテゴリータイトル 為替と指数以外 */
.sort-column .heading {
  background: #ddd;
}

/* 基準日 */
.column .reference-day {
  display: block;
  padding: 0;
  height: 10px;
}

.hidden-content {
  display: none;
}



/************************************/
/*   並び替えボタン、並び替えウィンドウ設定    */
/************************************/

/* 並び替えボタン */
.column-content-sort {
  background: linear-gradient(rgba(240, 240, 240, 1), rgba(190, 190, 190, 1));
  border: 1px solid rgba(150, 150, 150, 1);
  box-shadow: 0 .3rem .5rem rgba(0, 0, 0, .2);
  color: rgba(30, 120, 200, .9);
  display: block;
  font-size: 1.4rem;
  height: 3rem;
  line-height: 3rem;
  margin: -3.75rem 2.5rem 0 auto;
  text-align: center;
  text-decoration-line: none;
  width: 13rem;
}

/* 並び替えボタンのリンク設定 */
.column-content-sort:link, .column-content-sort:visited,
.column-content-sort:hover, .column-content-sort:active {
  color: rgba(30, 120, 200, .9);
  cursor: pointer;
  text-decoration: none;
}

/* 並び替えボタン（マウスオーバー） */
.column-content-sort:hover {
  background: linear-gradient(rgba(230, 230, 230, 1), rgba(180, 180, 180, 1));
  color: rgba(10, 100, 180, .9);
}

/* ソート項目リストの各ボタン含めたウィンドウ全体要素 */
.sort-window {
  background: rgba(60, 60, 60, .8);
  color: #fff;
  display: none; /* JSで表示アニメーションするのでここでは一括非表示 */
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: -50.2rem;
  position: relative;
  width: 38.2rem;
  z-index: 100;
}

/* ソート項目リスト 閉じるボタン */
.sort-window .sort-close-button {
  background: rgba(0, 0, 0, .6);
  cursor: pointer;
  font-size: 1.6rem;
  right: .13rem;
  padding: 1.3rem;
  position: absolute;
}

/* ソート項目リスト 閉じるボタン（マウスオーバー） */
.sort-window .sort-close-button:hover {
  background: rgba(0, 0, 0, .2);
}

/* ソート項目リスト親要素 IEは↓で更に設定追加 */
.sort-window ul {
  list-style-type: none;
  padding: 0.6rem 0 .5rem 0;
}

/* ソート項目リスト個別 */
.sort-window li {
  cursor: pointer;
  padding: .1rem 0 0.3rem 1.2rem;
}

/* ソート項目リスト個別（マウスオーバー） */
.sort-window li:hover {
  background: rgba(200, 200, 200, .3);
}

/* ソートリスト個別の左サークル */
.sort-window li .sort-category-circle {
  background: #fff;
  border-radius: 1rem;
  border: .3rem solid #fff;
  display: inline-block;
  height: 2rem;
  margin: 0 .8rem -.2rem 0;
  width: 2rem;
}

/* ソートリスト個別の左サークル（選択中） */
.sort-window li.sort-window-selected .sort-category-circle {
  background: rgba(30, 120, 200, .9);
  border-radius: 1rem;
  border: .3rem solid #fff;
  display: inline-block;
  height: 2rem;
  margin: 0 .8rem -.2rem 0;
  width: 2rem;
}

/* ソートウィンドウの中の並び替えるボタン */
.sort-window .sort-exe-button {
  background: rgba(0, 0, 0, .3);
  cursor: pointer;
  line-height: 3rem;
  padding-top: .3rem;
  text-align: center;
  width: 100%;
}

/* ソートウィンドウの中の並び替えるボタン（マウスオーバー） */
.sort-window .sort-exe-button:hover {
  background: rgba(0, 0, 0, .7);
}

/* ソートウィンドウの中の並び替えるボタンのアイコン部分 */
.sort-window > .sort-exe-button > .glyphicon-chevron-right:before {
  padding-right:.3rem;
}



/************************************/
/*           ファンドデータ設定           */
/************************************/

/* 親パネル */
.fund-panel {
  display: flex;
  border-bottom: 1px solid #bdbdbd;
  margin: 4px;
}

.Btn{
  width: 55px;
  height: 30px;
}

/* ブックマークボタン */
.bookmark {
  width: 30px;
  height: 35px;
  margin-top: auto;
  margin-bottom: auto;
  border: 0px;
}
.bookmark-on{
  background: url(../images/bookmark_on.png) no-repeat;
  background-size: contain;
}
.bookmark-off {
  background: url(../images/bookmark_off.png) no-repeat;
  background-size: contain;
}

/* ファンド一覧リンク */
.fund-panel a {
  flex: 1
}

.fund-panel .panel {
  border: none !important;
  flex: 1;
}

/* ファンドデータ1つ1つ（他ファイルで定義していたセレクタpanelに追加） */
.panel {
  clear: both;
  cursor: pointer;
}

/* ファンド名左側の線の色(初期値) */        /* ファンド名の左側の線の色の設定ここから */
.fund-name {
  border-color: #716D61;
}

/* カテゴリー別のファンドの線の色（1番目のカテゴリー） */
.f01 {
  border-color: #8a2be2;
}

/* カテゴリー別のファンドの線の色 */
.f02 {
  border-color: #7b68ee;
}

/* カテゴリー別のファンドの線の色 */
.f03 {
  border-color: #B7A8CC;
}

/* カテゴリー別のファンドの線の色 */
.f04 {
  border-color: #ff1493;
}

/* カテゴリー別のファンドの線の色（1番目のカテゴリー） */
.f05 {
  border-color: #db7093;
}

/* カテゴリー別のファンドの線の色 */
.f06 {
  border-color: #ffb6c1;
}

/* カテゴリー別のファンドの線の色 */
.f07 {
  border-color: #0000ff;
}

/* カテゴリー別のファンドの線の色 */
.f08 {
  border-color: #4597fc;
}

/* カテゴリー別のファンドの線の色 */
.f09 {
  border-color: #87cefa;
}

/* カテゴリー別のファンドの線の色 */
.f10 {
  border-color: #006400;
}

/* カテゴリー別のファンドの線の色 */
.f11 {
  border-color: #3cb371;
}

/* カテゴリー別のファンドの線の色 */
.f12 {
  border-color: #98fb98;
}

/* カテゴリー別のファンドの線の色 */
.f13 {
  border-color: #ffa500;
}

/* カテゴリー別のファンドの線の色 */
.f14 {
  border-color: #ffff00;
}

/* カテゴリー別のファンドの線の色 */
.f15 {
  border-color: #716d61;
}

/* カテゴリー別のファンドの線の色 */
.oc {
  border-color: #333333;
}
                                    /* ファンド名の左側の線の色の設定ここまで */


/* ファンド一覧ページの各ファンドマウスオーバー */
/* 大枠の要素#containerと同時に.list-containerを指定しておくことで、ほかのページは除外 */
.list-container .panel:hover {
  background: rgba(200, 200, 200, .4);
}

.column a:hover {
  text-decoration: none;
}

/* ファンドデータの画像コンテナ */
.panel-img {
  float: left;
  width: 90px;
}

/* ファンドデータの画像 */
.panel-img img {
  display: inline-block;
  height: 80px;
}

/* ファンドデータの並べ替え基準項目と値 */
.panel .fund-sort-key {
  text-align: right;
  margin: -.3rem 0 .2rem;
  color: rgb(153,44,66);
  font-size: 12px;
}

/* 並び替え可能ファンドデータの基準価格、前日比 */
.sort-column .panel .fund-value {
  padding: 0;
  margin: 0;
  text-align: right;
  font-size: 12px;
}

/* 「全ファンドの選択を解除」ボタン */
.selection-reset-container {
  max-width: 1180px;
  /*margin: 1rem auto 0;*/
  margin: .5rem auto 0;
}

/* 「全ファンドの選択を解除」ボタン */
.selection-reset {
  background: linear-gradient(rgba(240, 240, 240, 1), rgba(190, 190, 190, 1));
  border: 1px solid rgba(150, 150, 150, 1);
  box-shadow: 0 .3rem .5rem rgba(0, 0, 0, .3);
  color: rgba(30, 120, 200, .9);
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 3.4rem;
  margin: 0 0 0 auto;
  text-align: center;
  text-decoration-line: none;
  width: 20rem;
}


/*.selection-reset {
  background: linear-gradient(rgba(240, 240, 240, 1), rgba(190, 190, 190, 1));
  border: 1px solid rgba(150, 150, 150, 1);
  box-shadow: 0 .3rem .5rem rgba(0, 0, 0, .3);
  color: rgba(30, 120, 200, .9);
  cursor: pointer;
  font-size: 1.43rem;
  font-weight: bold;
  line-height: 3.5rem;
  margin: 0 0 0 auto;
  text-align: center;
  text-decoration-line: none;
  width: 20rem;
}
*/

/*  「全ファンドの選択を解除」ボタン（マウスオーバー） */
.selection-reset:hover {
  background: linear-gradient(rgba(230, 230, 230, 1), rgba(180, 180, 180, 1));
  color: rgba(10, 100, 180, .9);
}


/* 画面解像度の横方向が1179px以下のとき */
@media screen and (max-width:1179px) {

  /* 「全ファンドの選択を解除」ボタン */
  .selection-reset {
    margin: 0 1.4rem 0 auto;
  }
}



/************************************/
/*           ブラウザ別設定             */
/************************************/


/* Edge */
@supports (-ms-ime-align:auto) {

  /* 並び替えボタン */
  .column-content-sort {
    margin-top: -3.85rem;
  }

  /* ソート項目リストの各ボタン含めたウィンドウ全体要素 */
  .sort-window {
    margin-bottom: -29.7rem;
  }
}


/* IE11 */
@media all and (-ms-high-contrast:none) {

  /* 並び替えボタン */
  .column-content-sort {
    margin-top: -3.85rem;
  }

  /* ソート項目リストの各ボタン含めたウィンドウ全体要素 */
  .sort-window {
    margin-bottom: -29.7rem;
  }
}


/* Firefox */
@-moz-document url-prefix() {

  /* 並び替えボタン */
  .column-content-sort {
    margin-top: -3.85rem;
  }

  /* ソート項目リストの各ボタン含めたウィンドウ全体要素 */
  .sort-window {
    margin-bottom: -29.7rem;
  }
}