@charset "utf-8";
/*pc*/
.thm-feature-page .thm-main {
  width: 100%;
}
.thm-feature-page .thm-aside {
  display: none;
}
.thm-page-special .gigaindex .head {
  border: none;
  font-size: 0;
  margin: 0;
}
.thm-page-special .gigaindex .detail {
  width: 100%;
}
@keyframes btnanm01 {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  70% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  71% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(27) rotate(45deg);
    opacity: 0;
  }
}
@keyframes btnanm02 {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  50% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  51% {
    transform: scale(6) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(27) rotate(45deg);
    opacity: 0;
  }
}
.free-custom {
  font: 16px/1.6em "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #4D4D4D;
  width: 100%;
}
.free-custom a:hover {
  opacity: 0.8;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.free-custom .btn {
  color: #FFFFFF !important;
  font-weight: bold;
  background: #3bb13c;
  background: -moz-linear-gradient(left, #3bb13c 0%, #58bc5b 50%, #3bb13c 100%);
  background: -webkit-linear-gradient(left, #3bb13c 0%, #58bc5b 50%, #3bb13c 100%);
  background: linear-gradient(to right, #3bb13c 0%, #58bc5b 50%, #3bb13c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3bb13c', endColorstr='#3bb13c', GradientType=1);
  text-align: center;
  display: block;
  border-radius: 3vw;
  -webkit-box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.2);
  transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
}
.free-custom .btn:hover {
  color: #FFFFFF !important;
  font-weight: bold;
  background: #ec7700;
  background: -moz-linear-gradient(left, #ec7700 1%, #ef9026 50%, #ec7700 100%);
  background: -webkit-linear-gradient(left, #ec7700 1%, #ef9026 50%, #ec7700 100%);
  background: linear-gradient(to right, #ec7700 1%, #ef9026 50%, #ec7700 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ec7700', endColorstr='#ec7700', GradientType=1);
}
.free-custom .btn a,
.free-custom .btn a:hover {
  color: #FFFFFF !important;
}
.free-custom .btn01 {
  font-size: 30px;
  line-height: 70px;
  width: 600px;
  margin: 30px auto;
  overflow: hidden;
  position: relative;
}
.free-custom .btn01::before,
.free-custom .btn04::before {
  content: "";
  height: 100%;
  width: 45px;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: rotate(45deg);
  animation: btnanm01 1.7s ease-in-out infinite;
}
.free-custom .btn01::after,
.free-custom .btn04::after {
  content: "";
  height: 100%;
  width: 45px;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: rotate(45deg);
  animation: btnanm02 1.7s ease-in-out infinite;
}
.free-custom .icnpr {
  font-size: 12px;
  line-height: 16px;
  font-weight: bold;
  color: #f29600;
  background-color: #FFFFFF;
  text-align: center;
  width: 28px;
  float: right;
  margin-bottom: 10px;
  border: 1px solid #f29600;
  border-radius: 5px;
}
.free-custom .bg01 {
  background-color: #FFFFFF;
  background-image: url(../img/bg_01.png);
  background-position: left top;
  padding-bottom: 1em;
  background-size: 200%;
}
.free-custom .header {
  width: 100%;
  padding: 3vw 3vw 0;
  border: 1px solid #e5e5e5;
  border-bottom-width: 0px;
  background-repeat: no-repeat;
}
.free-custom .header h1 img {
  width: 100%;
}
.free-custom .header .ttlbx01 {
  background-image: url(../img/sp_bg01.png), url(../img/sp_bg02.png);
  background-position: center top, center bottom;
  background-size: contain, contain;
  background-repeat: no-repeat;
  width: 100%;
}
.free-custom .header .ttlbx01 .inf01 {
  width: 100%;
  height: 60vw;
  padding: 5vw 0 0;
  margin: 0 auto;
}
.free-custom .header .ttlbx01 p {
  color: #ec7800;
  font-size: 4vw;
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
  background-color: #FFFFFF;
  padding: 1vw;
  border: 3px solid #ec7800;
}
.free-custom .header .ttlbx01 .spnsr01 {
  color: #000000;
  font-size: 3vw;
  line-height: 1;
  font-weight: bold;
  background-color: #FFFFFF;
  text-align: center;
  width: 80%;
  padding: .7em 0;
  margin: 3vw auto;
  border-radius: 2vw;
}
.free-custom .header .ttlbx01 .spnsr01 img {
  vertical-align: middle;
  width: 45vw;
}
.free-custom .contents {
  width: 100%;
}
.free-custom .contents .article-sec {
  padding: 0 3vw;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}
.free-custom .contents .article-sec > div:nth-child(1) {
  margin-bottom: 2em;
}
.free-custom .contents .article-sec #wn-sec h2,
.free-custom .contents .article-sec #jn-sec h2 {
  color: #f29600;
  font-weight: bold;
  font-size: 7vw;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 2vw;
}
.free-custom .contents .article-sec #wn-sec {
  border: 3px solid #ec7800;
  border-top-width: 0;
  background-color: #FFFFFF;
  background-image: url(../img/bg_07.png);
  background-position: 68vw bottom;
  background-repeat: no-repeat;
  background-size: 25%;
  width: 100%;
  padding: 0 0 7vw;
  margin-top: -2.8vw;
}
.free-custom .contents .article-sec #wn-sec .sub-title {
  background-color: rgba(245, 171, 51, 0.2);
  color: #ec7800;
  font-size: 3.6vw;
  font-weight: bold;
  padding: .3em 0 .2em;
  text-align: center;
}
.free-custom .contents .article-sec #wn-sec .sub-title span {
  font-size: 80%;
}
.free-custom .contents .article-sec #wn-sec .tabarea {
  background-color: #fdefd9;
  border-bottom: solid 2vw #ec7800;
  color: #ec7800;
  font-size: 0;
  font-weight: bold;
  font-feature-settings: "palt";
  text-align: center;
  vertical-align: bottom;
}
.free-custom .contents .article-sec #wn-sec .tabarea .tab {
  background-color: #fcdeae;
  border: solid 3px #ec7800;
  border-bottom-width: 0;
  border-radius: 3vw 3vw 0 0;
  display: inline-block;
  font-size: 5vw;
  font-weight: bold;
  line-height: 1;
  width: 46%;
  margin: 0 1vw -0.1vw;
  padding: .2em 0 .1em;
  vertical-align: bottom;
  cursor: pointer;
  cursor: hand;
}
.free-custom .contents .article-sec #wn-sec .tabarea .selected {
  background-color: #ec7800;
  color: #fff;
  font-size: 6vw;
}
.free-custom .contents .article-sec #wn-sec .tabarea .tab span,
.free-custom .contents .article-sec #wn-sec .tabarea .selected span {
  font-size: 80%;
}
.free-custom .contents .article-sec #wn-sec .schedule {
  margin: 4vw 2vw;
}
.free-custom .contents .article-sec #wn-sec .schedule .schedule-panel {
  display: none;
}
.free-custom .contents .article-sec #wn-sec .schedule .schedule-panel.selected {
  display: block;
}
.free-custom .contents .article-sec #wn-sec .schedule dl {
  font-size: 0;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dt,
.free-custom .contents .article-sec #wn-sec .schedule dl dd {
  display: block;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dt {
  color: #ec7800;
  font-feature-settings: "palt";
  font-size: 4vw;
  font-weight: bold;
  margin-top: 4vw;
  padding: 0 2vw;
  position: relative;
  width: 100%;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dt::after {
  content: "";
  width: 50%;
  height: .5vw;
  display: inline-block;
  background-color: #ec7800;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;
  margin: auto;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dt .iconwatch {
  background: url(../img/icon-watch.png) no-repeat center top;
  background-size: 100% auto;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin-right: .5em;
  vertical-align: sub;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dt .watch1130 {
  background-position: center 25%;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dt .watch1300 {
  background-position: center 50%;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dt .watch1430 {
  background-position: center 75%;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dt .watch1600 {
  background-position: center 100%;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dd {
  width: 100%;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dd .bt-streaming {
  background-color: #f29600;
  border-radius: 3vw;
  display: inline-block;
  margin: 1vw;
  padding: 2vw;
  width: 31%;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dd .bt-streaming .playicon {
  display: block;
  margin: 2vw auto 3vw;
  width: 14vw;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dd .bt-streaming .schoolname {
  border-radius: 6px;
  background-color: #fff;
  display: inline-block;
  font-size: 3.6vw;
  font-weight: bold;
  line-height: 1.4;
  padding: 1.5vw;
  width: 100%;
  height: 20vw;
  vertical-align: top;
  font-feature-settings: "palt";
  text-align: justify;
  text-justify: inter-ideograph;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dd .bt-work {
  cursor: pointer;
  cursor: hand;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dd .bt-work:hover {
  opacity: .7;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dd > .bt-stop {
  background-color: #ccc;
  position: relative;
}
.free-custom .contents .article-sec #wn-sec .schedule dl dd > .bt-stop::before {
  content: "";
  background: url(../img/icon-finished.png) no-repeat center center;
  background-size: 100%;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 4px;
  left: 10px;
}
.free-custom .contents .article-sec #wn-sec .btn04 {
  font-size: 4vw;
  line-height: 1.2;
  width: 80%;
  padding: .7em .5em;
  margin: 5vw 0 0 1vw;
  overflow: hidden;
  position: relative;
}
.free-custom .contents .article-sec #wn-sec .btn04 span {
  display: block;
  font-size: 70%;
}
.free-custom .contents .article-sec #jn-sec {
  background-color: #FFFFFF;
  border: 3px solid #ec7800;
  width: 100%;
  padding: 5vw 2vw 0;
}
.free-custom .contents .article-sec #jn-sec h2 span {
  color: #a0a0a0;
  display: block;
  font-size: 4vw;
}
.free-custom .contents .article-sec #jn-sec ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.free-custom .contents .article-sec #jn-sec li {
  color: #000000;
  font-weight: bold;
  background-color: #fdefd9;
  width: 31%;
  margin: 1vw;
  border: 1px solid #f8ca7f;
  position: relative;
}
.free-custom .contents .article-sec #jn-sec li.cs {
  background-color: #fdefd9;
  background-image: url(../img/bg_10.png);
  background-position: center center;
  background-repeat: no-repeat;
  border: 0px;
}
.free-custom .contents .article-sec #jn-sec li .schlnm {
  font-size: 3vw;
  line-height: 1;
  padding: .5em 0;
  background-color: #f8ca7f;
  text-align: center;
}
.free-custom .contents .article-sec #jn-sec li img {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 6px;
}
.free-custom .contents .article-sec #jn-sec li .box-school {
  padding: 2vw 2vw 18vw;
}
.free-custom .contents .article-sec #jn-sec li .bt-work:hover {
  opacity: 0.7;
  color: #ec7800;
}
.free-custom .contents .article-sec #jn-sec li h3 {
  font-size: 3.8vw;
  font-feature-settings: "palt";
  line-height: 1.4;
  text-align: justify;
  text-justify: inter-ideograph;
  word-break: break-all;
}
.free-custom .contents .article-sec #jn-sec li .buttons {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 86%;
  bottom: 2vw;
  padding: 0;
}
.free-custom .contents .article-sec #jn-sec li .btn05 {
  color: #FFFFFF;
  font-size: 3vw;
  line-height: 1;
  padding: .6em;
  background-color: #f29600;
  border-radius: 1.5vw;
  display: block;
  text-align: center;
  width: 100%;
  margin-top: .5em;
}
.free-custom .contents .article-sec #jn-sec li .btn05.bt-work:hover {
  opacity: 0.7;
  color: #fff;
}
.free-custom .contents .article-sec #jn-sec li .btn05.bt-stop {
  background-color: #f8ca7f;
  padding: .5em 0 .7em;
}