@charset "UTF-8";
/*****************************************************-
Date: 2016-6-13
CSS Document : ミニツク ゆる活
1.ページ共通
2.コンテンツ
  * contents
- ****************************************************/
/*****************************************************-
1.ページ共通
- ****************************************************/
.sprites-sprite {
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
}

.sprites-btn_more {
  padding-bottom: 22.41379%;
}
.sprites-btn_more:after {
  width: 286.2069%;
  background-position: 0 0%;
  padding-bottom: 22.41379%;
}

.sprites-num_01 {
  padding-bottom: 63.63636%;
}
.sprites-num_01:after {
  width: 301.81818%;
  background-position: 0 18.70155%;
  padding-bottom: 63.63636%;
}

.sprites-num_02 {
  padding-bottom: 63.63636%;
}
.sprites-num_02:after {
  width: 301.81818%;
  background-position: 0 23.06202%;
  padding-bottom: 63.63636%;
}

.sprites-num_03 {
  padding-bottom: 63.63636%;
}
.sprites-num_03:after {
  width: 301.81818%;
  background-position: 0 27.42248%;
  padding-bottom: 63.63636%;
}

.sprites-num_04 {
  padding-bottom: 63.63636%;
}
.sprites-num_04:after {
  width: 301.81818%;
  background-position: 0 31.78295%;
  padding-bottom: 63.63636%;
}

.sprites-num_05 {
  padding-bottom: 63.63636%;
}
.sprites-num_05:after {
  width: 301.81818%;
  background-position: 0 36.14341%;
  padding-bottom: 63.63636%;
}

.sprites-num_06 {
  padding-bottom: 63.63636%;
}
.sprites-num_06:after {
  width: 301.81818%;
  background-position: 0 40.50388%;
  padding-bottom: 63.63636%;
}

.sprites-num_07 {
  padding-bottom: 63.63636%;
}
.sprites-num_07:after {
  width: 301.81818%;
  background-position: 0 44.86434%;
  padding-bottom: 63.63636%;
}

.sprites-num_08 {
  padding-bottom: 63.63636%;
}
.sprites-num_08:after {
  width: 301.81818%;
  background-position: 0 49.22481%;
  padding-bottom: 63.63636%;
}

.sprites-num_09 {
  padding-bottom: 63.63636%;
}
.sprites-num_09:after {
  width: 301.81818%;
  background-position: 0 53.58527%;
  padding-bottom: 63.63636%;
}

.sprites-num_10 {
  padding-bottom: 63.63636%;
}
.sprites-num_10:after {
  width: 301.81818%;
  background-position: 0 57.94574%;
  padding-bottom: 63.63636%;
}

.sprites-num_11 {
  padding-bottom: 63.63636%;
}
.sprites-num_11:after {
  width: 301.81818%;
  background-position: 0 62.3062%;
  padding-bottom: 63.63636%;
}

.sprites-num_12 {
  padding-bottom: 63.63636%;
}
.sprites-num_12:after {
  width: 301.81818%;
  background-position: 0 66.66667%;
  padding-bottom: 63.63636%;
}

.sprites-ribon_01 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_01:after {
  width: 1185.71429%;
  background-position: 0 69.47867%;
  padding-bottom: 85.71429%;
}

.sprites-ribon_02 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_02:after {
  width: 1185.71429%;
  background-position: 0 71.56398%;
  padding-bottom: 85.71429%;
}

.sprites-ribon_03 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_03:after {
  width: 1185.71429%;
  background-position: 0 73.64929%;
  padding-bottom: 85.71429%;
}

.sprites-ribon_04 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_04:after {
  width: 1185.71429%;
  background-position: 0 75.7346%;
  padding-bottom: 85.71429%;
}

.sprites-ribon_05 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_05:after {
  width: 1185.71429%;
  background-position: 0 77.81991%;
  padding-bottom: 85.71429%;
}

.sprites-ribon_06 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_06:after {
  width: 1185.71429%;
  background-position: 0 79.90521%;
  padding-bottom: 85.71429%;
}

.sprites-ribon_07 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_07:after {
  width: 1185.71429%;
  background-position: 0 81.99052%;
  padding-bottom: 85.71429%;
}

.sprites-ribon_08 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_08:after {
  width: 1185.71429%;
  background-position: 0 84.07583%;
  padding-bottom: 85.71429%;
}

.sprites-ribon_09 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_09:after {
  width: 1185.71429%;
  background-position: 0 86.16114%;
  padding-bottom: 85.71429%;
}

.sprites-ribon_10 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_10:after {
  width: 1185.71429%;
  background-position: 0 88.24645%;
  padding-bottom: 85.71429%;
}

.sprites-ribon_11 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_11:after {
  width: 1185.71429%;
  background-position: 0 90.33175%;
  padding-bottom: 85.71429%;
}

.sprites-ribon_12 {
  padding-bottom: 85.71429%;
}
.sprites-ribon_12:after {
  width: 1185.71429%;
  background-position: 0 92.41706%;
  padding-bottom: 85.71429%;
}

.sprites-ill_nick {
  padding-bottom: 195.12195%;
}
.sprites-ill_nick:after {
  width: 202.43902%;
  background-position: 0 2.53583%;
  padding-bottom: 195.12195%;
}

.sprites-ttl_program {
  padding-bottom: 42.16867%;
}
.sprites-ttl_program:after {
  width: 100%;
  background-position: 0 100%;
  padding-bottom: 42.16867%;
}

.sprites-btn_more, .sprites-num_01, .sprites-num_02, .sprites-num_03, .sprites-num_04, .sprites-num_05, .sprites-num_06, .sprites-num_07, .sprites-num_08, .sprites-num_09, .sprites-num_10, .sprites-num_11, .sprites-num_12, .sprites-ribon_01, .sprites-ribon_02, .sprites-ribon_03, .sprites-ribon_04, .sprites-ribon_05, .sprites-ribon_06, .sprites-ribon_07, .sprites-ribon_08, .sprites-ribon_09, .sprites-ribon_10, .sprites-ribon_11, .sprites-ribon_12, .sprites-ill_nick, .sprites-ttl_program {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  text-indent: 100%;
  white-space: nowrap;
}
.sprites-btn_more:after, .sprites-num_01:after, .sprites-num_02:after, .sprites-num_03:after, .sprites-num_04:after, .sprites-num_05:after, .sprites-num_06:after, .sprites-num_07:after, .sprites-num_08:after, .sprites-num_09:after, .sprites-num_10:after, .sprites-num_11:after, .sprites-num_12:after, .sprites-ribon_01:after, .sprites-ribon_02:after, .sprites-ribon_03:after, .sprites-ribon_04:after, .sprites-ribon_05:after, .sprites-ribon_06:after, .sprites-ribon_07:after, .sprites-ribon_08:after, .sprites-ribon_09:after, .sprites-ribon_10:after, .sprites-ribon_11:after, .sprites-ribon_12:after, .sprites-ill_nick:after, .sprites-ttl_program:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 0;
  background-image: url('../images/sprites.png');
  background-repeat: no-repeat;
  background-size: 100%;
}

/*****************************************************-
2.コンテンツ
- ****************************************************/
#contents_prg .main_prg {
  position: relative;
  padding-bottom: 20px;
}
#contents_prg .main_prg .mv_prg .list_prg {
  position: relative;
  padding-bottom: 51.72414%;
}
#contents_prg .main_prg .mv_prg .item_prg {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
#contents_prg .main_prg .mv_prg .ill_prg {
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 96px;
  margin: 0 auto -50px;
}
#contents_prg .main_prg .controller_prg {
  opacity: 0;
  margin-top: 12px;
}
#contents_prg .main_prg .controller_prg .list_prg {
  height: 20px;
  font-size: 0;
  text-align: center;
}
#contents_prg .main_prg .controller_prg .item_prg {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}
#contents_prg .main_prg .controller_prg .item_prg > a {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}
#contents_prg .main_prg .controller_prg .item_prg > a:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  background-color: #000;
  border-radius: 100%;
}
#contents_prg .main_prg .controller_prg .item_prg.now_prg > a {
  pointer-events: none;
}
#contents_prg .main_prg .controller_prg .item_prg.now_prg > a:after {
  background-color: #fe566f;
}
#contents_prg .main_prg .copy_prg {
  margin-top: 28px;
  color: #fe566f;
  font-size: 128.57143%;
  font-weight: bold;
  text-align: center;
  line-height: 1em;
}
#contents_prg .main_prg .txt_prg {
  margin-top: 22px;
  color: #221815;
  font-size: 100%;
  text-align: center;
  line-height: 1.85;
}
@media screen and (max-width: 768px) {
  #contents_prg .main_prg {
    padding-bottom: 12px;
  }
  #contents_prg .main_prg .mv_prg .list_prg {
    padding-bottom: 117.96875%;
  }
  #contents_prg .main_prg .mv_prg .ill_prg {
    width: 25.625%;
    padding-bottom: 5%;
  }
  #contents_prg .main_prg .controller_prg {
    margin-top: -8px;
  }
  #contents_prg .main_prg .controller_prg .list_prg {
    height: 12px;
  }
  #contents_prg .main_prg .controller_prg .item_prg > a {
    width: 12px;
    height: 12px;
  }
  #contents_prg .main_prg .controller_prg .item_prg > a:after {
    width: 6px;
    height: 6px;
  }
  #contents_prg .main_prg .copy_prg {
    margin-top: 20px;
    font-size: 130%;
    letter-spacing: -0.06em;
  }
  #contents_prg .main_prg .txt_prg {
    width: 91.875%;
    margin: 12px auto 0;
    font-size: 120%;
    text-align: left;
    line-height: 1.75;
  }
}
#contents_prg .program_prg {
  padding-top: 20px;
}
#contents_prg .program_prg .copy_prg {
  width: 240px;
  margin: 0 auto;
}
#contents_prg .program_prg .list_prg {
  margin-top: 20px;
  padding-top: 24px;
  text-align: center;
  font-size: 0;
}
#contents_prg .program_prg .item_prg {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  vertical-align: top;
  width: 31.03448%;
  margin: 0 2px;
  font-size: 14px;
}
#contents_prg .program_prg .item--01_prg .ttl_prg:after {
  background-color: #ffe605;
}
#contents_prg .program_prg .item--02_prg .ttl_prg:after {
  background-color: #f0c2fc;
}
#contents_prg .program_prg .item--03_prg .ttl_prg:after {
  background-color: #d3dade;
}
#contents_prg .program_prg .item--04_prg .ttl_prg:after {
  background-color: #c5e7f8;
}
#contents_prg .program_prg .item--05_prg .ttl_prg:after {
  background-color: #97ce9e;
}
#contents_prg .program_prg .item--06_prg .ttl_prg:after {
  background-color: #f1dbc4;
}
#contents_prg .program_prg .item--07_prg .ttl_prg:after {
  background-color: #cbaad2;
}
#contents_prg .program_prg .item--08_prg .ttl_prg:after {
  background-color: #fdb1bd;
}
#contents_prg .program_prg .item--09_prg .ttl_prg:after {
  background-color: #efebaa;
}
#contents_prg .program_prg .item--10_prg .ttl_prg:after {
  background-color: #7ccad6;
}
#contents_prg .program_prg .item--11_prg .ttl_prg:after {
  background-color: #fac445;
}
#contents_prg .program_prg .item--12_prg .ttl_prg:after {
  background-color: #f0c2fc;
}
#contents_prg .program_prg .img-box_prg {
  position: relative;
}
#contents_prg .program_prg .img-box_prg.animation_prg {
  -webkit-animation: panel 640ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: panel 640ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@-webkit-keyframes panel {
  0%, 100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
}
@keyframes panel {
  0%, 100% {
    -ms-transform: scaleX(1);
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -ms-transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
}
#contents_prg .program_prg .ribon_prg {
  position: absolute;
  top: -4px;
  left: 10px;
  width: 20px;
}
#contents_prg .program_prg .num_prg {
  position: absolute;
  right: 10px;
  bottom: 0;
  width: 68px;
}
#contents_prg .program_prg .txt-box_prg {
  position: relative;
  padding: 20px 0 44px;
}

#contents_prg .program_prg a {
  text-decoration: none;
}

#contents_prg .program_prg .txt-box_prg:before {
  content: ' ';
  display: block;
  position: absolute;
  top: -7px;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-style: solid;
  border-width: 0 7px 8px 7px;
  border-color: transparent transparent #fff transparent;
}
#contents_prg .program_prg .ttl_prg {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
  color: #333;
  font-size: 1.0625rem;
  font-weight: bold;
  line-height: 1em;
  z-index: 0;
}
#contents_prg .program_prg .ttl_prg:after {
  z-index: -1;
  content: ' ';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 10px;
  -o-transition: width 260ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-transition: width 260ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: width 260ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#contents_prg .program_prg .ttl_prg.show_prg:after {
  width: 100%;
}
#contents_prg .program_prg .txt_prg {
  margin-top: 16px;
  color: #666;
  font-size: 0.8125rem;
  letter-spacing: .05em;
}
@media screen and (max-width: 1140px) {
  #contents_prg .program_prg .txt_prg {
    width: 90%;
    margin: 12px auto 0;
  }
  #contents_prg .program_prg .txt_prg br {
    display: none;
  }
}
#contents_prg .program_prg .btn_prg {
  width: 69px;
  margin: 16px auto 0;
}
@media screen and (max-width: 768px) {
  #contents_prg .program_prg {
    padding-top: 12px;
  }
  #contents_prg .program_prg .copy_prg {
    width: 51.875%;
  }
  #contents_prg .program_prg .list_prg {
    margin-top: 12px;
    padding-top: 12px;
  }
  #contents_prg .program_prg .item_prg {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 10px;
  }
  #contents_prg .program_prg .ribon_prg {
    top: 0;
    left: 2.8125%;
    width: 4.375%;
    margin-top: -0.625%;
  }
  #contents_prg .program_prg .num_prg {
    right: 3.125%;
    bottom: 0;
    width: 17.1875%;
  }
  #contents_prg .program_prg .txt-box_prg {
    padding: 16px 0 24px;
  }
  #contents_prg .program_prg .txt-box_prg:before {
    top: -5px;
    border-width: 0 6px 6px 6px;
  }
  #contents_prg .program_prg .ttl_prg {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    position: relative;
    color: #333;
    font-size: 160%;
    letter-spacing: 0.08em;
  }
  #contents_prg .program_prg .ttl_prg:after {
    height: 9px;
  }
  #contents_prg .program_prg .txt_prg {
    width: auto;
    margin-top: 12px;
    font-size: 110%;
  }
  #contents_prg .program_prg .txt_prg br {
    display: inline;
  }
  #contents_prg .program_prg .btn_prg {
    width: 18.125%;
    margin-top: 12px;
  }
}
