@charset "utf-8";
/* TRIGGER */
.studless_common_navi {
  width: 100%;
  background: #222;
  text-align: center;
}
.studless_common_navi a.navi_trigger {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  text-align: center;
  font-family: 'メイリオ', 'Meiryo', sans-serif;
  line-height: 1.2;
}
.studless_common_navi a.navi_trigger:visited {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  text-align: center;
  font-family: 'メイリオ', 'Meiryo', sans-serif;
  line-height: 1.2;
}
.studless_common_navi a.navi_trigger:hover {
  background: #111;
  color: #fe0 !important;
}
.studless_common_navi a.navi_trigger span.navi_trigger_inner {
  font-size: 13px;
  box-sizing: border-box;
}
.studless_common_navi a.navi_trigger span.navi_trigger_inner::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  font-size: 0;
  vertical-align: middle;
  border: 2px solid #fff;
  border-left: none;
  border-bottom: none;
  transform: rotate(45deg);
  margin-right: 7px;
  transition: all 0.3s ease;
}
.studless_common_navi a.navi_trigger span.navi_trigger_inner.arrowbottom::before {
  transform: rotate(135deg);
}
.studless_common_navi a.navi_trigger:hover span.navi_trigger_inner::before,
.studless_common_navi a.navi_trigger:hover span.navi_trigger_inner.arrowbottom::before {
  border-color: #fe0;
  color: #fe0;
/*transform:rotate(135deg);*/
}
.studless_common_navi * {
  box-sizing: border-box;
  text-align: center;
}
.studless_common_navi .navi_content {
  display: none;
  background: #333;
  color: #fff;
  padding: 20px 0;
}
.studless_common_navi.stnavi_thin .navi_content {
  background: #060606;
  padding: 5px 0;
}
/* STRUCTURE */
.navi_content_inner {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
}
.navi_content_inner_item {
  align-self: stretch;
  width: 19%;
  min-width: 150px;
  max-width: 220px;
  margin: 0 0.2%;
  color: #fff;
}
.navi_content_inner_item a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: #fff;
  text-align: center;
  text-decoration: none;
}
.navi_content_inner_item .navi_content_inner_item_grade {
  width: 100%;
  vertical-align: top;
  padding: 3px 0 0;
}
.navi_content_inner_item .navi_content_inner_item_grade span._grade {
  display: block;
  width: 100%;
  line-height: 1.3;
  text-align: center;
  background: #004ea2;
  padding: 7px 5px 4px;
  color: #fff;
  font-size: 12px;
}
.navi_content_inner_item .navi_content_inner_item_grade span._name {
  display: none;
}
.navi_wm03 .navi_content_inner_item_grade {
  background: linear-gradient(90deg, #004ea2, #fe0, #004ea2);
}
.navi_wm02 .navi_content_inner_item_grade {
  background: linear-gradient(90deg, #004ea2, #c4c4c4, #004ea2);
}
.navi_sj8 .navi_content_inner_item_grade,
.navi_sj8plus .navi_content_inner_item_grade {
  background: linear-gradient(90deg, #004ea2, #50b23a, #004ea2);
}
.navi_sv01 .navi_content_inner_item_grade {
  background: linear-gradient(90deg, #004ea2, #d1840a, #004ea2);
}
.navi_lt03 .navi_content_inner_item_grade,
.navi_lt03m .navi_content_inner_item_grade {
  background: linear-gradient(90deg, #004ea2, #6e13af, #004ea2);
}
/*
.navi_wm03 .navi_content_inner_item_grade  {border-color:#fe0; }
.navi_wm02 .navi_content_inner_item_grade  {border-color:#c4c4c4; }
.navi_sj8 .navi_content_inner_item_grade   {border-color:#50b23a; }
.navi_sv01 .navi_content_inner_item_grade  {border-color:#d1840a; }
.navi_lt03 .navi_content_inner_item_grade,
.navi_lt03m .navi_content_inner_item_grade {border-color:#6e13af; }
*/
.navi_content_inner_item_image {
  height: auto;
  overflow: hidden;
}
.navi_content_inner_item_image img {
  width: 100%;
  height: auto;
}
.navi_content_inner_item_btn {
  padding: 2px;
}
.navi_content_inner_item_btn span {
  display: block;
  background: #111;
  color: #fff;
  width: 100%;
  padding: 4px;
  border-radius: 4px;
}
.navi_content_inner_item a:hover .navi_content_inner_item_btn span {
  background: #050505;
  color: #fe0;
}
.navi_content_inner_item a:hover .navi_content_inner_item_image {
  opacity: 0.85;
}
.studless_common_navi .stnavi_lineup_btn {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  padding: 7px 15px;
  background: #111;
  border-radius: 4px;
  margin: 8px auto 0;
}
.studless_common_navi a.stnavi_lineup_btn::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  font-size: 0;
  vertical-align: middle;
  border: 1px solid #fff;
  border-left: none;
  border-bottom: none;
  transform: rotate(45deg);
  margin-right: 7px;
  transition: all 0.6s ease;
}
.studless_common_navi .stnavi_lineup_btn:hover {
  background: #181818;
  color: #fe0;
}
.studless_common_navi a.stnavi_lineup_btn:hover::before {
  border-color: #fe0;
/*transform:rotate(135deg);*/
}
.display_over {
  display: block;
}
.display_under {
  display: none;
}
@media screen and (max-width: 900px) {
  .display_over {
    display: none;
  }
  .display_under {
    display: block;
  }
  .studless_common_navi.stnavi_thin .navi_content {
    background: #333;
    padding: 20px 0;
  }
}
@media screen and (max-width: 840px) {
  .navi_content_inner_item {
    width: 33%;
    margin: 0 0.3% 5px;
  }
}
@media screen and (max-width: 670px) {
  .navi_content_inner {
    padding: 0 5%;
  }
  .navi_content_inner_item {
    width: 100%;
    max-width: 600px;
    font-size: 1.5em;
    margin: 4px 0;
  }
  .navi_content_inner_item_image,
  .navi_content_inner_item_btn {
    display: none;
  }
  .navi_content_inner_item .navi_content_inner_item_grade span._grade {
    background: none;
    color: #004ea2;
    text-align: left;
    padding: 12px 0 0 12px;
    text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 3px #fff;
  }
  .navi_content_inner_item_grade br {
    display: none;
  }
  .navi_content_inner_item .navi_content_inner_item_grade {
    padding: 0 0 0 3px;
  }
  .navi_content_inner_item .navi_content_inner_item_grade span._name {
    display: block;
    background: none;
    color: #222;
    font-weight: bold;
    font-size: 1rem;
    text-align: left;
    padding: 3px 0 10px 12px;
  }
  .navi_content_inner_item .navi_content_inner_item_grade span._name .new {
    color: #e00;
  }
  .navi_wm03 .navi_content_inner_item_grade {
    background: #fe0;
  }
  .navi_wm02 .navi_content_inner_item_grade {
    background: #c4c4c4;
  }
  .navi_sj8 .navi_content_inner_item_grade,
  .navi_sj8plus .navi_content_inner_item_grade {
    background: #50b23a;
  }
  .navi_sv01 .navi_content_inner_item_grade {
    background: #d1840a;
  }
  .navi_lt03 .navi_content_inner_item_grade,
  .navi_lt03m .navi_content_inner_item_grade {
    background: #6e13af;
  }
  .navi_content_inner_item_grade_bg {
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right top;
    background-color: #fff;
  }
  .navi_wm03 .navi_content_inner_item_grade_bg {
    background-image: url("/DTglobal/new/include/category_navi/studless/img/navibg_wm03_x2.jpg?2021");
  }
  .navi_wm02 .navi_content_inner_item_grade_bg {
    background-image: url("/DTglobal/new/include/category_navi/studless/img/navibg_wm02_x2.jpg?2021");
  }
  .navi_sj8 .navi_content_inner_item_grade_bg {
    background-image: url("/DTglobal/new/include/category_navi/studless/img/navibg_sj8_x2.jpg?2021");
  }
  .navi_sj8plus .navi_content_inner_item_grade_bg {
    background-image: url("/DTglobal/new/include/category_navi/studless/img/navibg_sj8plus_x2.jpg?2021");
  }
  .navi_sv01 .navi_content_inner_item_grade_bg {
    background-image: url("/DTglobal/new/include/category_navi/studless/img/navibg_sv01_x2.jpg?2021");
  }
  .navi_lt03 .navi_content_inner_item_grade_bg,
  .navi_lt03m .navi_content_inner_item_grade_bg {
    background-image: url("/DTglobal/new/include/category_navi/studless/img/navibg_lt03m_x2.jpg?2021");
  }
}