@charset "UTF-8";
/*==============================================================================================

    common css

    ※※※※※ブラウザ対応※※※※※

    safari:9以上
    chrome:63以上
    firefox:43以上
    opera:43以上
    edge:12以上
    IE:10以上
    

==============================================================================================*/

/*==============================================================================================

	briefing

==============================================================================================*/

#briefing_sec {
  width: 100%;
  max-width: 980px;
  height: 100vh;
  background: #dcdcdc;
}

#briefing_view:checked ~ #briefing_sec {
  z-index: 60;
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -moz-transition: transform .8s ease;
  -webkit-transition: transform .8s ease;
  transition: transform .8s ease;
}


#briefing_sec > label {
  width: 25px;
  height: 50px;
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: rgba(220, 220, 220, 1);
  position: absolute;
  bottom: 70px;
  right: -25px;
  z-index: 5;
  -moz-transition: all .8s ease, height .4s ease, background .3s ease;
  -webkit-transition: all .8s ease, height .4s ease, background .3s ease;
  transition: all .8s ease, height .4s ease, background .3s ease;
}

#briefing_view:checked ~ #briefing_sec > label {
  bottom: 0px;
  right: 0;
  width: 50px;
  height: 50px;
  background: rgba(220, 220, 220, 0);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  -moz-transition: all .8s ease, height .3s ease .5s, background .3s ease .5s;
  -webkit-transition: all .8s ease, height .3s ease .5s, background .6s ease .5s;
  transition: all .8s ease, height .3s ease .5s, background .3s ease .5s;
}

.briefing_marker {
  width: 20px;
  height: 20px;
  position: relative;
}

.briefing_marker > div {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #333;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.briefing_marker > div:nth-child(1) {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  -moz-transition: border-radius .3s ease .3s, height .3s ease .3s, width .3s ease .3s, transform .3s ease;
  -webkit-transition: border-radius .3s ease, height .3s ease .3s, width .3s ease .3s, transform .3s ease;
  transition: border-radius .3s ease .3s, height .3s ease .3s, width .3s ease .3s, transform .3s ease;
}

.briefing_marker > div:nth-child(2) {
  width: 12px;
  height: 12px;
  background: #dcdcdc;
  border-radius: 50%;
  -moz-transition: background .3s ease .3s, height .3s ease .3s, width .3s ease .3s;
  -webkit-transition: background .3s ease .3s, height .3s ease .3s, width .3s ease .3s;
  transition: background .3s ease .3s, height .3s ease .3s, width .3s ease .3s;
}

.briefing_marker > div:nth-child(3) {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  -moz-transition: border-radius .3s ease .3s, height .3s ease .3s, width .3s ease .3s, transform .3s ease;
  -webkit-transition: border-radius .3s ease, height .3s ease .3s, width .3s ease .3s, transform .3s ease;
  transition: border-radius .3s ease .3s, height .3s ease .3s, width .3s ease .3s, transform .3s ease;
}

.briefing_marker > div:nth-child(4) {
  width: 5px;
  height: 15px;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  -moz-transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
  margin-top: -4px;
  margin-left: 4px;
  -moz-transition: border .3s ease .3s, height .3s ease .3s, width .3s ease .3s;
  -webkit-transition: border .3s ease .3s, height .3s ease .3s, width .3s ease .3s;
  transition: border .3s ease .3s, height .3s ease .3s, width .3s ease .3s;
}

#briefing_view:checked ~ #briefing_sec .briefing_marker > div:nth-child(1) {
  width: 18px;
  height: 4px;
  border-radius: 0;
  -moz-transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
  -moz-transition: border-radius .3s ease, height .3s ease, width .3s ease, transform .3s ease .3s;
  -webkit-transition: border-radius .3s ease, height .3s ease, width .3s ease, transform .3s ease .3s;
  transition: border-radius .3s ease, height .3s ease, width .3s ease, transform .3s ease .3s;
}

#briefing_view:checked ~ #briefing_sec .briefing_marker > div:nth-child(3) {
  width: 18px;
  height: 4px;
  border-radius: 0;
  -moz-transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
  -moz-transition: border-radius .3s ease, height .3s ease, width .3s ease, transform .3s ease .3s;
  -webkit-transition: border-radius .3s ease, height .3s ease, width .3s ease, transform .3s ease .3s;
  transition: border-radius .3s ease, height .3s ease, width .3s ease, transform .3s ease .3s;
}

#briefing_view:checked ~ #briefing_sec .briefing_marker > div:nth-child(2) {
  background: #333;
  width: 0px;
  height: 0px;
  -moz-transition: background .3s ease, height .3s ease, width .3s ease;
  -webkit-transition: background .3s ease, height .3s ease, width .3s ease;
  transition: background .3s ease, height .3s ease, width .3s ease;
}

#briefing_view:checked ~ #briefing_sec .briefing_marker > div:nth-child(4) {
  border: 0 solid #dcdcdc;
  width: 0;
  -moz-transition: border .3s ease, height .3s ease, width .3s ease;
  -webkit-transition: border .3s ease, height .3s ease, width .3s ease;
  transition: border .3s ease, height .3s ease, width .3s ease;
}

/*==========================================================

    setting

==========================================================*/

.briefing_wrap {
  padding: 10px;
  max-width: 500px;
  margin: 0 auto;
}

.briefing_wrap > div:nth-child(n+2) {
  margin-top: 5px;
}

.briefing_title {
  background: #F00;
  color: #FFF;
  padding: 5px;
  text-align: center;
}

.briefing_title:nth-child(n+2) {
  background: #c3da49;
}

/* ステージ選択 */

.briefing_mapselect {
  display: -webkit-flex;
  display: flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.briefing_mapselect > label {
  width: calc(100% / 3 - 2px);
  height: 50px;
  border: 2px solid #DDD;
  margin-bottom: 4px;
  position: relative;
}

.briefing_mapselect > label.disable {
  opacity: 0.5;
  pointer-events: none;
}

#stage_derakura:checked ~ .briefing_contain .briefing_mapselect label:nth-child(1),
#stage_kekkoi:checked ~ .briefing_contain .briefing_mapselect label:nth-child(2),
#stage_takasan:checked ~ .briefing_contain .briefing_mapselect label:nth-child(3),
#stage_gurewo:checked ~ .briefing_contain .briefing_mapselect label:nth-child(4),
#stage_rittai:checked ~ .briefing_contain .briefing_mapselect label:nth-child(5),
#stage_live:checked ~ .briefing_contain .briefing_mapselect label:nth-child(6),
#stage_kerupa:checked ~ .briefing_contain .briefing_mapselect label:nth-child(7),
#stage_tyura:checked ~ .briefing_contain .briefing_mapselect label:nth-child(8),
#stage_tsupperu:checked ~ .briefing_contain .briefing_mapselect label:nth-child(9),
#stage_taiko:checked ~ .briefing_contain .briefing_mapselect label:nth-child(10),
#stage_torii:checked ~ .briefing_contain .briefing_mapselect label:nth-child(11),
#stage_jippaka:checked ~ .briefing_contain .briefing_mapselect label:nth-child(12),
#stage_nakkara:checked ~ .briefing_contain .briefing_mapselect label:nth-child(13),
#stage_gg:checked ~ .briefing_contain .briefing_mapselect label:nth-child(14),
#stage_kiteru:checked ~ .briefing_contain .briefing_mapselect label:nth-child(15),
#stage_irregular:checked ~ .briefing_contain .briefing_mapselect label:nth-child(16),
#stage_momo:checked ~ .briefing_contain .briefing_mapselect label:nth-child(17),
#stage_chaos:checked ~ .briefing_contain .briefing_mapselect label:nth-child(18) {

  border: 2px solid #F00;
}

.briefing_mapselect > label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.briefing_mapselect > label div {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #FFF;
  padding: 2px;
  font-size: 10px;
  text-align: right;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 30px;
  line-height: 1.2;
}

.briefing_mapselect > div {
  width: calc(100% / 3 - 3px);
}

.briefing_chara_wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.briefing_chara_wrap > div {
  width: calc(50% - 2px);
}

.briefing_team {
  color: #FFF;
  padding: 2px;
  text-align: center;
  font-size: 10px;
  margin-bottom: 2px;
}

.briefing_chara_wrap > div:nth-child(1) .briefing_team {
  background: #00F;
}

.briefing_chara_wrap > div:nth-child(2) .briefing_team {
  background: #F00;
}

.team_chara_wrap {
  position: relative;
  padding: 2px 0;
}

.team_chara_wrap input {
  width: 100%;
  background: #FFF;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #DDD;
}

.team_chara_wrap:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6.9px 4px 0 4px;
  border-color: #1a8dd0 transparent transparent transparent;
  position: absolute;
  top: 50%;
  right: 10px;
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
}

.briefing_set {
  margin-top: 20px;
  width: 100%;
  height: 40px;
  background: #FFFF;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: #ff2d2d;
  color: #FFF;
  border-radius: 4px;
  font-size: 14px;
}

.error_text {
  color: #F00;
  padding: 10px 0;
  text-align: center;
  display: none;
}

/*==========================================================

    stage

==========================================================*/

.briefing_stage_contain {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #dcdcdc;
  opacity: 0;
  overflow: hidden;
  -moz-transition: opacity .3s ease, top 0s ease .3s;
  -webkit-transition: opacity .3s ease, top 0s ease .3s;
  transition: opacity .3s ease, top 0s ease .3s;
}

#briefing_stage:checked ~ .briefing_contain .briefing_stage_contain {
  top: 0;
  opacity: 1;
  -moz-transition: opacity .3s ease, top 0s ease;
  -webkit-transition: opacity .3s ease, top 0s ease;
  transition: opacity .3s ease, top 0s ease;
}

.briefing_loader {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  -moz-transition: opacity .3s ease, top 0s ease .3s;
  -webkit-transition: opacity .3s ease, top 0s ease .3s;
  transition: opacity .3s ease, top 0s ease .3s;
}

.briefing_loader div {
  width: 80%;
  max-width: 300px;
}

.briefing_loading .briefing_loader {
  opacity: 1;
  top: 0;
  -moz-transition: opacity 0s ease, top 0s ease;
  -webkit-transition: opacity 0s ease, top 0s ease;
  transition: opacity 0s ease, top 0s ease;
}


/*ボタン*/

.briefing_btn_wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 80px;
  background: #AAA;
}

.briefing_btn_inner {
  width: calc(100% - 100px);
  margin: 0 auto;
  padding: 5px 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mode-icon .vm {
  display: none;
}

.mode-vector .im {
  display: none;
}

.briefing_mode {
  width: 100%;
  height: 30px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.briefing_btn_inner > div:nth-child(n+2) {
  width: calc(50% - 5px);
}

.briefing_close {
  width: 100%;
  height: 40px;
  background: #888;
  color: #FFF;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 12px;
}

.briefing_change {
  width: 100%;
  height: 40px;
  background: #009b87;
  color: #FFF;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 12px;
}

.briefing_anim {
  width: 100%;
  height: 40px;
  background: #da4747;
  color: #FFF;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 12px;
}

.mode-anim .briefing_change,
.mode-anim .briefing_anim {
  pointer-events: none;
  opacity: .6;
}

.briefing_stage_wrap {
  padding: 10px;
  position: relative;
}

.score_wrap {
  width: 150px;
  z-index: 10;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.score_wrap img {
  width: calc(100% / 4);
}

.briefing_stage {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
}

.stage_map {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#briefing_stage_inner {
  width: 100%;
  position: relative;
  z-index: 3;
}


/* キャラアイコン */

.charaicon {
  width: 1px;
  height: 1px;
  position: absolute;
  z-index: 4;
}

.mode-anim .charaicon {
  -moz-transition: top 1.5s ease, left 1.5s ease;
  -webkit-transition: top 1.5s ease, left 1.5s ease;
  transition: top 1.5s ease, left 1.5s ease;
}

.icon_image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mode-icon .charaicon {
  pointer-events: auto;
}

.mode-vector .charaicon {
  pointer-events: none;
}

.mode-anim .charaicon {
  pointer-events: none;
}

/*ベクトル*/

.vector-body {
  position: absolute;
  bottom: 0;
  left: -5px;
  z-index: -1;
  width: 10px;
  height: 50px;
  -moz-transition: opacity .2s ease;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
  transform-origin: bottom center;
}

.vector-head {
  width: 1px;
  height: 1px;
  position: absolute;
  z-index: 2;
  -moz-transition: opacity .2s ease;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.vector-head > div {
  width: 30px;
  height: 30px;
  position: absolute;
  top: -15px;
  left: -15px;
  z-index: 2;
  transform-origin: center center;
}

.blue01 + .vector-head > div:after,
.blue02 + .vector-head > div:after,
.blue03 + .vector-head > div:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12.5px 20px 12.5px;
  border-color: transparent transparent #00F transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.red01 + .vector-head > div:after,
.red02 + .vector-head > div:after,
.red03 + .vector-head > div:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12.5px 20px 12.5px;
  border-color: transparent transparent #F00 transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.mode-icon .vector-body,
.mode-icon .vector-head {
  opacity: 0;
  pointer-events: none;
}

.mode-vector .vector-body {
  opacity: 1;
  pointer-events: auto;
}

.mode-vector .vector-head {
  opacity: 1;
  z-index: 5;
  pointer-events: auto;
}


.mode-anim .vector-head {
  z-index: 2;
  pointer-events: none;
}

.mode-anim .vector-body {
  -moz-transition: height 1.5s ease;
  -webkit-transition: height 1.5s ease;
  transition: height 1.5s ease;
}

@media screen and (min-width: 768px) {
  .icon_image {
    width: 50px;
    height: 50px;
  }

  /*ベクトル*/

  .vector-body {
    position: absolute;
    bottom: 0;
    left: -10px;
    z-index: -1;
    width: 20px;
    height: 50px;
  }

  .vector-head > div {
    width: 40px;
    height: 40px;
    top: -20px;
    left: -20px;
  }

  .blue01 + .vector-head > div:after,
  .blue02 + .vector-head > div:after,
  .blue03 + .vector-head > div:after,
  .red01 + .vector-head > div:after,
  .red02 + .vector-head > div:after,
  .red03 + .vector-head > div:after {
    border-width: 0 20px 30px 20px;
  }
}

.icon_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blue01 .icon_image,
.blue02 .icon_image,
.blue03 .icon_image {
  border: 2px solid #00F;
}

.blue01 .vector-body,
.blue02 .vector-body,
.blue03 .vector-body {
  background: #00F;
}


.red01 .icon_image,
.red02 .icon_image,
.red03 .icon_image {
  border: 2px solid #F00;
}

.red01 .vector-body,
.red02 .vector-body,
.red03 .vector-body {
  background: #F00;
}

/* ポータル */

.portal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 1px;
  height: 1px;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.range_view.portal {
  z-index: 3;
}

.portal:before {
  content: '';
  font-weight: bold;
  font-size: 20px;
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 5;
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
    -1px 1px 0 #FFF, 1px -1px 0 #FFF,
    0px 1px 0 #FFF, 0-1px 0 #FFF,
    -1px 0 0 #FFF, 1px 0 0 #FFF;
  -moz-transform: translate(-100%, -100%);
  -webkit-transform: translate(-100%, -100%);
  transform: translate(-100%, -100%);
}

.portal-a:before {
  content: 'A';
}

.portal-b:before {
  content: 'B';
}

.portal-c:before {
  content: 'C';
}

.portal-d:before {
  content: 'D';
}

.portal-e:before {
  content: 'E';
}

.portal-key {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;

}

.portal-key img {
  width: 15px;
  height: 15px;
}

.portal_range_wrap {
  position: absolute;
  bottom: 999999px;
  width: 200px;
  z-index: 4;
  padding: 5px 10px 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  opacity: 0;
  -moz-transition: bottom 0s ease .3s, opacity .3s ease;
  -webkit-transition: bottom 0s ease .3s, opacity .3s ease;
  transition: bottom 0s ease .3s, opacity .3s ease;
}

.range_view .portal_range_wrap {
  bottom: -45px;
  opacity: 1;
  -moz-transition: bottom 0s ease, opacity .3s ease;
  -webkit-transition: bottom 0s ease, opacity .3s ease;
  transition: bottom 0s ease, opacity .3s ease;
}

.portal_range_wrap.left {
  left: -15px;
}

.portal_range_wrap.right {
  right: -15px;
}

.portal_range_wrap.center {
  left: 0;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.input-range[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  height: 5px;
  width: 100%;
  border-radius: 6px;
}

.input-range[type="range"]:focus,
.input-range[type="range"]:active {
  outline: none;
}

.input-range[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  border: 2px solid rgba(0, 0, 0, .7);
  width: 22px;
  height: 22px;
  display: block;
  background-color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

.input-range[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .6);
  transition: .4s;
}

.portal_area {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.portal_area.red {
  background: rgba(255, 0, 0, 0.3);
  border: 1px solid #F00;
}

.portal_area.blue {
  background: rgba(0, 0, 255, 0.2);
  border: 1px solid #00F;
}







/*==========================================================

    HA、HSの表示

==========================================================*/
.briefing_sp_contain {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  padding: 12px;
  background: rgba(0, 0, 0, 0.4);
  -moz-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -moz-transition: transform .8s ease;
  -webkit-transition: transform .8s ease;
  transition: transform .8s ease;
}

#briefing_sp_check:checked ~ .briefing_sp_contain {
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.briefing_sp_label {
  width: 25px;
  height: 50px;
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: rgba(187, 187, 187, 1);
  position: absolute;
  top: 0;
  right: -25px;
  z-index: 5;
  -moz-transition: all .8s ease, height .4s ease, background .3s ease;
  -webkit-transition: all .8s ease, height .4s ease, background .3s ease;
  transition: all .8s ease, height .4s ease, background .3s ease;
}

.briefing_sp_label img {
  width: 20px;
  -moz-transition: opacity .4s ease;
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
}

.briefing_sp_label:before {
  content: '';
  display: block;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  -moz-transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
  -moz-transition: opacity .4s ease;
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
}

.briefing_sp_label:after {
  content: '';
  display: block;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  -moz-transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
  -moz-transition: opacity .4s ease;
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
}

#briefing_sp_check:checked ~ .briefing_sp_contain .briefing_sp_label {
  width: 50px;
  right: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  background: rgba(187, 187, 187, 0);
}

#briefing_sp_check:checked ~ .briefing_sp_contain .briefing_sp_label img {
  opacity: 0;
}

#briefing_sp_check:checked ~ .briefing_sp_contain .briefing_sp_label:before,
#briefing_sp_check:checked ~ .briefing_sp_contain .briefing_sp_label:after {
  opacity: 1;
}

.briefing_sp_wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.briefing_sp_title {
  background: #333333;
  color: #ffffff;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 25px;
}

.briefing_sp_inner {
  width: 50%;
  padding: 5px;
  color: #ffffff;
}

.briefing_sp_inner .briefing_sp_title {
  background: #00F;
}

.briefing_sp_inner:nth-child(3) .briefing_sp_title,
.briefing_sp_inner:nth-child(6) .briefing_sp_title {
  background: #F00;
}

.briefing_sp_inner + .briefing_sp_title {
  margin-top: 30px;
}

.briefing_sp_inner label {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 15px 0 5px;
}


.sp_select {
  position: relative;
  display: -webkit-flex;
  display: flex;
  padding-bottom: 5px;
}

.sp_select .selectlabel {
  position: relative;
  width: 100%;
}

.sp_select .selectlabel input {
  width: 100%;
  height: 26px;
  background: #FFF;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #DDD;
}

.sp_select select {
  width: 100%;
  height: 100%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.sp_select .selectlabel:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6.9px 4px 0 4px;
  border-color: #1a8dd0 transparent transparent transparent;
  position: absolute;
  top: 50%;
  right: 10px;
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
}







/* 範囲設定 */
#briefing_sprange_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.hsrange {
  position: absolute;
  z-index: 1;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  opacity: 0;
}

.hsrange > div {
  background: rgba(255, 144, 0, 1);
}

.harange {
  position: absolute;
  z-index: 0;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  opacity: 0;
}

.harange div {
  background: rgba(0, 255, 81, 1);
}

.range-view {
  opacity: .6;
}

.range-round {
  border-radius: 50%;
}

.range-round div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.range-vector div {
  width: 100%;
  height: 50%;
}

.range-vector.range-gbg div {
  width: 100%;
  height: 100%;
}

.range-vector.range-2b div {
  width: 100%;
  height: 100%;
}

.range-vector.range-2b div:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
}

.range-vector.range-2b div:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(90deg);
}

.range-vector.range-2b div:nth-child(4) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(135deg);
}


.range-vector.range-nanigashi div:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  transform:rotate(20deg);
  transform-origin: bottom;
}

.range-vector.range-nanigashi div:nth-child(3) {
  position: absolute;
  top: 0;
  left: 0;
  transform:rotate(40deg);
  transform-origin: bottom;
}

.range-vector.range-nanigashi div:nth-child(4) {
  position: absolute;
  top: 0;
  left: 0;
  transform:rotate(-20deg);
  transform-origin: bottom;
}

.range-vector.range-nanigashi div:nth-child(5) {
  position: absolute;
  top: 0;
  left: 0;
  transform:rotate(-40deg);
  transform-origin: bottom;
}

.range-vector-r div {
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
}

.range-vector-r.range-ryza:before {
  content: '';
  display: block;
  width: 25%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background: rgba(255, 144, 0, 1);
}

.range-vector-r.range-roxy:before {
  content: '';
  display: block;
  width: 25%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background: rgba(0, 255, 81, 1);
}

.range-vector-s div {
  width: 100%;
  padding-top: 100%;
}

.range-vector-s div.eyes_range {
  width: 100%;
  padding-top: 200%;
  position: relative;
}

.range-vector-s div.bondrewd_range{
  height: 25%;
}

.range-vector-s div.eyes_range:before {
  content: '';
  display: block;
  width: 300%;
  padding-top: 300%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
  background: rgba(255, 0, 0, 0.6);
}

.range-vector-t div {
  width: 100%;
  height: 50%;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.range-vector-f div {
  width: 100%;
  height: 50%;
  border-radius: 50%;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}